/* ONS3 — site.css
 * Navigation and scroll progress, the hero, the generic section shell, the about
 * section, the service grid and the whole contact section.
 * Consumes tokens.css; declares no token of its own. Every value that has a token
 * is read from one — the few literals left here (the scrolled-nav wash, the mobile
 * panel wash, the blob fade-out stop) have no token in spec-design §2.5.
 * Source of truth: spec-design.md §§3–6, §9, §10, §16 and spec-markup.md §§3, 11.
 */

/* ============================================================
   1. SHARED BASE — the few global bits tokens.css does not own
   ============================================================ */
/* spec-markup G9: smooth scrolling + a fixed ~100px bar with no scroll-padding lands
   every in-page anchor under the nav. */
html{scroll-padding-top:clamp(104px,9vw,130px)}

a{color:inherit}

::selection{background:var(--accent);color:var(--ons-deep)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* The accent does not reach 3:1 against the cream sections, so give the indicator a dark
   companion ring there. WCAG 2.2 requires the focus indicator itself to be discernible. */
.ons3-section--cream :focus-visible{outline-color:var(--ons-ink);box-shadow:0 0 0 5px var(--ons-accent-on-cream)}

/* ============================================================
   2. SCROLL PROGRESS — motion.js writes the inner width in %
   ============================================================ */
.ons3-progress{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:60;
  height:2px;
  pointer-events:none;
}

.ons3-progress i{
  display:block;
  width:0;
  height:100%;
  background:var(--accent);
  transition:width .1s linear;
}

/* ============================================================
   3. NAVIGATION — nav.js toggles .is-stuck on the bar and
   .is-active on the current link
   ============================================================ */
.ons3-nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px var(--gutter-nav);
  border-block-end:1px solid transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
}

.ons3-nav.is-stuck{
  background:rgba(10,24,32,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-block-end-color:var(--cream-09);
}

.ons3-nav__logo{display:block;text-decoration:none;line-height:0}

.ons3-nav__logo img{
  height:clamp(72px,6.5vw,96px);
  width:auto;
  display:block;
}

.ons3-nav__wordmark{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-nav);
  line-height:1;
  color:var(--ons-cream);
}

.ons3-nav__links{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.8vw,28px);
}

.ons3-nav__links a{
  color:var(--cream-85);
  font-weight:700;
  font-size:var(--fs-nav);
  line-height:1;
  text-decoration:none;
  transition:color .3s;
}

.ons3-nav__links a:hover,
.ons3-nav__links a:focus-visible,
.ons3-nav__links a.is-active{color:var(--accent)}

.ons3-nav__tail{
  display:flex;
  align-items:center;
  gap:12px;
}

.ons3-lang{
  border:1px solid var(--cream-25);
  background:transparent;
  color:var(--ons-cream);
  font-size:var(--fs-label);
  font-weight:700;
  line-height:1;
  border-radius:var(--r-pill);
  /* A 44px box so the control clears the minimum touch target the design contract sets,
     while the pill still reads at its designed height. */
  min-height:44px;
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  cursor:pointer;
  transition:color .3s,border-color .3s;
}

.ons3-lang:hover,
.ons3-lang:focus-visible{color:var(--accent);border-color:var(--accent)}

/* the burger is a native <details> — no JavaScript */
.ons3-menu{display:none;position:relative}

.ons3-menu summary{
  list-style:none;
  width:44px;
  height:44px;
  border:1px solid var(--cream-48);
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:22px;
  color:var(--ons-cream);
}

.ons3-menu summary::-webkit-details-marker{display:none}

.ons3-menu__panel{
  position:absolute;
  inset-block-start:54px;
  /* the burger sits at the bar's inline-end, so the panel must open inward:
     anchored to the inline-START it runs off-screen at 375px in both directions. */
  inset-inline-end:0;
  min-width:235px;
  max-width:min(78vw,320px);
  padding:14px;
  display:grid;
  gap:4px;
  background:rgba(10,24,32,.97);
  border:1px solid var(--cream-16);
  border-radius:var(--r-media);
  box-shadow:var(--sh-panel);
}

.ons3-menu__panel a{
  padding:11px 12px;
  border-radius:var(--r-link);
  text-decoration:none;
  color:var(--ons-cream);
  font-weight:700;
  font-size:15px;
}

.ons3-menu__panel a:hover,
.ons3-menu__panel a:focus-visible{background:var(--gold-16);color:var(--accent)}

/* ============================================================
   4. HERO
   ============================================================ */
.ons3-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--pad-hero);
  overflow:hidden;
  background:var(--ons-deep);
  color:var(--ons-cream);
}

.ons3-hero__bg{
  position:absolute;
  inset-inline:0;
  top:-7%;
  height:114%;
  z-index:0;
  will-change:transform;
}

.ons3-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 1.1s ease;
}

.ons3-hero__scrim,
.ons3-hero__vignette{
  position:absolute;
  inset:0;
  display:block;
  pointer-events:none;
}

.ons3-hero__scrim{
  background:linear-gradient(to bottom,
    rgba(10,22,30,.58) 0%,
    rgba(10,22,30,.4) 34%,
    rgba(10,22,30,.62) 70%,
    rgba(12,28,38,.92) 100%);
}

.ons3-hero__vignette{
  background:radial-gradient(125% 95% at 50% 38%,transparent 42%,rgba(10,22,30,.52));
}

.ons3-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--container-hero);
  margin-inline:auto;
}

.ons3-hero__eyebrow{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--accent);
}

.ons3-hero__title{
  font-size:var(--fs-h1);
  line-height:1.18;
  margin:12px 0 0;
}

.ons3-hero__sub{
  max-width:540px;
  margin:22px 0 0;
  font-size:var(--fs-lead);
  line-height:1.7;
  color:var(--cream-76);
  font-weight:300;
}

.ons3-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-block-start:40px;
}

.ons3-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:var(--ons-deep);
  border:none;
  font-family:inherit;
  font-weight:500;
  font-size:15px;
  line-height:1;
  padding:15px 32px;
  border-radius:var(--r-pill);
  text-decoration:none;
  cursor:pointer;
  transition:transform .3s,background .3s;
}

.ons3-cta:hover{transform:translateY(-2px)}

.ons3-cta--ghost{
  background:transparent;
  border:1px solid var(--cream-40);
  color:var(--ons-cream);
  font-weight:400;
  padding:15px 30px;
}

.ons3-cta--ghost:hover{background:var(--cream-08)}

.ons3-hero__cue{
  position:absolute;
  inset-block-end:26px;
  inset-inline-end:var(--gutter);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:var(--fs-label-mini);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cream-55);
}

.ons3-hero__rail{
  position:relative;
  display:block;
  width:1px;
  height:44px;
  /* the dot runs from -10px to +30px; without this it escapes the hairline */
  overflow:hidden;
  background:linear-gradient(var(--cream-40),transparent);
}

.ons3-hero__rail i{
  position:absolute;
  inset-block-start:0;
  inset-inline-start:0;
  width:1px;
  height:12px;
  background:var(--accent);
  animation:scrollDot 1.9s ease-in-out infinite;
}

/* ============================================================
   5. SECTION SHELL — background map from spec-design §16
   ============================================================ */
.ons3-section{
  position:relative;
  padding:var(--pad-section);
  overflow:hidden;
}

.ons3-section--cream{background:var(--ons-cream);color:var(--ons-ink)}
.ons3-section--blue{background:var(--ons-blue);color:var(--ons-cream)}
.ons3-section--teal{background:var(--ons-teal-deep);color:var(--ons-cream)}

.ons3-section__inner{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin-inline:auto;
}

/* blobs — motion.js writes translate3d() on each .ons3-blob */
.ons3-blobs{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.ons3-blob{
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform;
}

/* The paint sits on a child layer, as in the source: motion.js writes translate3d()
   on .ons3-blob itself, and a running animation's transform beats an inline style —
   keeping the keyframes on the same element would silently kill the parallax. */
.ons3-blob::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
}

.ons3-blob--a{
  top:-6%;
  inset-inline-start:-6%;
  width:min(60vw,820px);
  height:min(60vw,820px);
}

.ons3-blob--a::before{
  background:radial-gradient(circle at 42% 40%,var(--blob),rgba(27,58,78,0) 68%);
  filter:blur(60px);
  animation:onsBlobA 20s ease-in-out infinite;
}

.ons3-blob--b{
  bottom:-12%;
  inset-inline-end:-8%;
  width:min(52vw,720px);
  height:min(52vw,720px);
}

.ons3-blob--b::before{
  background:radial-gradient(circle at 55% 55%,var(--blob),rgba(27,58,78,0) 70%);
  filter:blur(72px);
  animation:onsBlobB 26s ease-in-out infinite;
}

/* glow — ons3_glow() sets --glow inline, motion.js adds .is-in */
.ons3-glow{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-52%);
  width:min(130%,1500px);
  height:360px;
  background:radial-gradient(ellipse at center,rgba(212,145,73,var(--glow,.16)),var(--gold-00) 70%);
  opacity:0;
  transition:opacity 1.5s ease;
  pointer-events:none;
  z-index:0;
}

.ons3-glow.is-in{opacity:1}

/* section head */
.ons3-label{
  font-size:var(--fs-section-label);
  font-weight:700;
  line-height:1.5;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
}

/* spec-design §16 / spec-markup G1: only these two sections take the larger label */
#about .ons3-label,
#services .ons3-label{font-size:var(--fs-section-label-lg)}

/* the bright gold fails contrast on cream */
.ons3-section--cream .ons3-label{color:var(--ons-accent-on-cream)}

.ons3-heading{
  font-size:var(--fs-h2-typewriter);
  line-height:1.28;
  margin:14px 0 clamp(40px,5vw,64px);
}

/* spec-markup G1: the contact h2 also carries data-typewriter, so the !important
   clamp(30px,2.8vw,42px)/1.28 wins — its inline 44–90px/1.1 never renders. Only the
   width and the margins survive. */
.ons3-heading--xl{
  margin:16px 0 0;
  max-width:1000px;
}

.ons3-section__lead{max-width:640px}

.ons3-section__intro{
  margin:16px 0 0;
  max-width:640px;
  font-size:var(--fs-lead-sm);
  line-height:1.7;
  color:var(--cream-66);
  font-weight:300;
}

/* ============================================================
   6. ABOUT
   ============================================================ */
.ons3-about{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(32px,5vw,84px);
  align-items:start;
}

.ons3-about__head .ons3-heading{margin-block-end:0}

.ons3-about__text{
  margin:0;
  font-size:var(--fs-body);
  line-height:1.8;
  color:var(--muted-cream-1);
  font-weight:300;
}

.ons3-about__stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-block-start:48px;
}

.ons3-stat__value{
  font-family:var(--font-display);
  font-size:var(--fs-countup);
  font-weight:500;
  line-height:1.4;
  color:var(--ons-accent-on-cream);
}

.ons3-stat__label{
  margin-block-start:8px;
  font-size:15px;
  line-height:1.5;
  color:var(--muted-cream-3);
}

/* ============================================================
   7. SERVICE GRID — corporate and private share this component
   ============================================================ */
.ons3-svc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(28px,3vw,52px);
  margin-block-start:clamp(48px,7vw,88px);
}

.ons3-svc{
  border-block-start:1px solid var(--cream-20);
  padding-block-start:24px;
  transition:border-color .4s;
}

.ons3-svc:hover{border-block-start-color:var(--accent)}

.ons3-svc__n{
  font-size:13px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--cream-45);
  transition:color .4s;
}

.ons3-svc:hover .ons3-svc__n{color:var(--accent)}

.ons3-svc__title{
  margin:16px 0 0;
  font-size:var(--fs-h3);
  font-weight:400;
}

.ons3-svc__text{
  margin:12px 0 0;
  font-size:15px;
  line-height:1.65;
  color:var(--cream-62);
  font-weight:300;
}

/* ============================================================
   8. CONTACT
   ============================================================ */
.ons3-contact{padding:0}

.ons3-contact__body{padding:var(--pad-contact)}

/* the two woven bands — a CSS lattice, never an image file */
.ons3-contact__rule{
  position:relative;
  background-image:
    repeating-linear-gradient(45deg,var(--cream-40) 0 1px,transparent 1px 11px),
    repeating-linear-gradient(-45deg,var(--cream-40) 0 1px,transparent 1px 11px);
  background-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}

.ons3-contact__rule--top{height:66px;opacity:.28}

.ons3-contact__rule--bottom{height:24px;opacity:.22;margin-block-start:clamp(40px,5vw,60px)}

.ons3-contact__lead{
  margin:20px 0 0;
  max-width:520px;
  font-size:clamp(16px,1.3vw,20px);
  line-height:1.7;
  color:var(--cream-72);
  font-weight:300;
}

.ons3-contact__cols{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:clamp(22px,2.6vw,34px);
  margin-block-start:clamp(40px,5vw,60px);
}

/* 8.1 the panel look, shared by the form and both aside cards */
.ons3-form,
.ons3-panel{
  position:relative;
  overflow:hidden;
  background:var(--cream-04);
  border:1px solid var(--cream-14);
  border-radius:var(--r-card);
}

.ons3-form__pattern,
.ons3-panel__pattern,
.ons3-founder__pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.045;
  background-image:
    repeating-linear-gradient(45deg,var(--gold-30) 0 1px,transparent 1px 17px),
    repeating-linear-gradient(-45deg,var(--gold-30) 0 1px,transparent 1px 17px);
}

/* 8.2 the form */
.ons3-form{
  flex:1 1 430px;
  padding:clamp(24px,3.4vw,40px);
}

.ons3-form__fields{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ons3-form__title{
  font-family:var(--font-display);
  font-size:clamp(28px,3.4vw,42px);
  font-weight:500;
  line-height:1.15;
  color:var(--accent);
}

.ons3-form__row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:16px;
}

.ons3-field{display:block}

.ons3-field__label{
  display:block;
  margin-block-end:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:var(--cream-94);
}

[data-cf-input]{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--cream-60);
  border-radius:var(--r-input);
  padding:14px 16px;
  color:var(--ons-cream);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  text-align:start;
  outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s;
}

[data-cf-input]::placeholder{color:var(--cream-78)}

[data-cf-input]:focus{
  border-color:var(--accent);
  background:var(--input-bg-focus);
  box-shadow:var(--sh-input-focus);
}

textarea[data-cf-input]{resize:vertical;min-height:118px}

select[data-cf-input]{appearance:auto;background-color:var(--input-bg);color:var(--ons-cream)}

select[data-cf-input] option{background:var(--option-bg);color:var(--ons-cream);font-weight:600}

.ons3-form__privacy{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--cream-76);
}

/* a decoy no visitor can see or reach */
.ons3-form__trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.ons3-form__submit{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

[data-cf-submit]{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:var(--ons-deep);
  border:none;
  font-family:inherit;
  font-weight:500;
  font-size:15px;
  line-height:1;
  padding:15px 34px;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:transform .3s,opacity .3s;
}

[data-cf-submit]:hover:not(:disabled){transform:translateY(-2px)}

[data-cf-submit]:disabled{opacity:.55;cursor:not-allowed}

.ons3-form__status{
  flex:1 1 200px;
  font-size:14px;
  line-height:1.5;
  color:var(--cream-80);
}

.ons3-form__status.is-ok{color:#bfe3c0}

.ons3-form__status.is-error{color:#e8b98f}

/* 8.3 the aside */
.ons3-aside{
  flex:1 1 270px;
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2vw,26px);
}

.ons3-panel--split{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(20px,3vw,40px);
  padding:clamp(22px,2.6vw,30px);
}

.ons3-panel__col{position:relative;z-index:1}

.ons3-mini{
  /* 11px is small text, so it needs 4.5:1 — the raw accent only reaches 3.5:1 here. */
  color:var(--cream-85);
  font-size:var(--fs-label-mini);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}

.ons3-jump{
  display:flex;
  align-items:center;
  gap:10px;
  padding-block:10px;
  text-decoration:none;
  color:var(--ons-cream);
  font-size:var(--fs-channel);
  font-weight:700;
  line-height:1;
  transition:color .3s;
}

.ons3-jump:hover,
.ons3-jump:focus-visible{color:var(--accent)}

.ons3-jump__dot{
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
}

.ons3-social{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block-start:12px;
}

.ons3-social a{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--cream-25);
  border-radius:var(--r-chip);
  color:var(--accent);
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .3s,border-color .3s,color .3s;
}

.ons3-social a:hover,
.ons3-social a:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--ons-deep);
}

.ons3-channel{
  display:flex;
  align-items:center;
  gap:10px;
  padding-block:8px;
  text-decoration:none;
  color:var(--ons-cream);
  font-size:clamp(15px,1.2vw,17px);
  transition:color .3s;
}

.ons3-channel:hover,
.ons3-channel:focus-visible{color:var(--accent)}

.ons3-channel__value{unicode-bidi:isolate}

.ons3-channel__value--wrap{word-break:break-all}

/* brand card */
.ons3-panel--brand{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(24px,2.8vw,34px);
}

.ons3-panel__logo{
  position:relative;
  height:clamp(58px,7vw,80px);
  width:auto;
}

.ons3-panel__tag{
  position:relative;
  margin-block-start:12px;
  font-family:var(--font-display);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:500;
  line-height:1.15;
  color:var(--accent);
}

.ons3-panel__blurb{
  position:relative;
  margin:12px 0 0;
  max-width:340px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--cream-62);
}

/* 8.4 the founder's word */
.ons3-founder{
  position:relative;
  margin-block-start:clamp(52px,6vw,90px);
  border:1px solid var(--gold-32);
  border-radius:var(--r-card);
  overflow:hidden;
  background:rgba(0,0,0,.16);
}

.ons3-founder__pattern{opacity:.05}

.ons3-founder__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(26px,4vw,54px);
  padding:clamp(30px,4vw,54px);
}

.ons3-founder__photo{flex:0 0 clamp(118px,15vw,166px)}

.ons3-founder__ring{
  border-radius:50%;
  padding:3px;
  background:linear-gradient(140deg,var(--accent),var(--accent2));
}

.ons3-founder__ring img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  display:block;
  border-radius:50%;
  object-fit:cover;
  background:var(--cream-08);
}

.ons3-founder__word{flex:1 1 340px;min-width:240px}

.ons3-founder__rule{
  display:block;
  width:40px;
  height:2px;
  margin:16px 0;
  border-radius:var(--r-hair);
  background:var(--accent);
}

.ons3-founder__word p{
  margin:0;
  font-size:var(--fs-lead);
  line-height:1.9;
  color:var(--cream-90);
  font-weight:300;
}

.ons3-founder__name{
  margin-block-start:22px;
  font-family:var(--font-display);
  font-size:clamp(32px,3.8vw,46px);
  font-weight:500;
  line-height:.9;
  color:var(--accent);
}

.ons3-founder__role{
  margin-block-start:4px;
  font-size:14px;
  color:var(--cream-60);
  font-weight:300;
}

/* 8.5 the page tail */
.ons3-colophon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding:24px 0 clamp(32px,4vw,50px);
  font-size:var(--fs-label);
  color:var(--cream-78);
}

.ons3-colophon [data-track]{letter-spacing:.08em;color:var(--cream-78)}

/* ============================================================
   9. FALLBACK TEMPLATE — anything that is not the front page
   ============================================================ */
.ons3-main--fallback{
  min-height:100vh;
  padding-block-start:clamp(96px,12vh,140px);
}

.ons3-main--fallback .ons3-heading{margin-block-end:16px}

/* ============================================================
   10. RESPONSIVE — spec-design §9; 980px is the nav breakpoint
   ============================================================ */
@media (max-width:980px){
  .ons3-nav__links{display:none}
  .ons3-menu{display:block}
}

@media (max-width:760px){
  .ons3-hero__cue{display:none}
}

@media (max-width:600px){
  /* §9: the one real mobile defect — a 72px logo makes a ~100px tall fixed bar */
  .ons3-nav__logo img{height:52px}
  .ons3-about__stats{grid-template-columns:1fr}
  .ons3-panel--split{grid-template-columns:1fr}
}

/* ============================================================
   11. REDUCED MOTION — tokens.css §8 flattens every animation;
   this only keeps the hero's scroll dot visible once it stops
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ons3-hero__rail i{animation:none;opacity:1;transform:none}
}

/* ============================================================
   8b. CONTACT FORM 7 — the plugin renders the form; these rules
   make its output the design's form. Selectors follow CF7's own
   classes so nothing here depends on our markup.
   ============================================================ */
.ons3-form-shell[hidden]{display:none}

.ons3-form-shell .wpcf7{margin:0}

/* CF7 puts its own <p> around stray text nodes in the template. */
.ons3-form .wpcf7-form-control-wrap{display:block}

.ons3-form .ons3-input{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--cream-60);
  border-radius:var(--r-input);
  padding:14px 16px;
  color:var(--ons-cream);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s;
}

.ons3-form .ons3-input::placeholder{color:var(--cream-78)}

.ons3-form .ons3-input:focus{
  border-color:var(--accent);
  background:var(--input-bg-focus);
  box-shadow:var(--sh-input-focus);
}

.ons3-form select.ons3-input{appearance:auto;background-color:var(--input-bg);color:var(--ons-cream)}
.ons3-form select.ons3-input option{background:var(--option-bg);color:var(--ons-cream);font-weight:600}
.ons3-form textarea.ons3-input{resize:vertical;min-height:118px}
.ons3-form .ons3-ltr{direction:ltr;text-align:start}

.ons3-form .ons3-submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:var(--ons-deep);
  border:none;
  font-family:inherit;
  font-weight:500;
  font-size:15px;
  line-height:1;
  padding:15px 34px;
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:transform .3s,opacity .3s;
}

.ons3-form .ons3-submit:hover:not(:disabled){transform:translateY(-2px)}
.ons3-form .ons3-submit:disabled{opacity:.55;cursor:not-allowed}

/* CF7's spinner sits next to the button while a submission is in flight. */
.ons3-form .wpcf7-spinner{margin-inline-start:12px}

/* CF7's own status line, styled as the design's status text. */
.ons3-form .wpcf7-response-output{
  margin:18px 0 0;
  padding:12px 0 0;
  border:0;
  border-block-start:1px solid var(--cream-14);
  font-size:14px;
  line-height:1.5;
  color:var(--cream-80);
}

.ons3-form.sent .wpcf7-response-output{color:#bfe3c0}

.ons3-form.invalid .wpcf7-response-output,
.ons3-form.failed .wpcf7-response-output,
.ons3-form.spam .wpcf7-response-output,
.ons3-form.unaccepted .wpcf7-response-output{color:#e8b98f}

/* Per-field validation text. */
.ons3-form .wpcf7-not-valid-tip{
  display:block;
  margin-block-start:8px;
  font-size:13px;
  line-height:1.5;
  color:#e8b98f;
}

.ons3-form .ons3-input.wpcf7-not-valid{border-color:#e8b98f}