/* Rodolfo Villanueva — villanueva.co.nz
   Brand system: brand/BRAND.md (Quiet Field)
   Light: forest on cream. Dark: cream on #121212, buttons invert.

   REQUIRES css/tokens.css linked BEFORE this file — every colour, typeface,
   radius, duration and rhythm value here resolves from that token layer.
   Add no raw brand values to this file; extend tokens.css instead. */

/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  /* Concourse/Equity carry a ~0.455em x-height (Source was ~0.486), so the
     base size is set a step larger to keep the same apparent text size. */
  font:400 18.5px/1.58 var(--sans);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--heading);line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(1.9rem, 8vw, 3.6rem);letter-spacing:-.012em}
h2{font-size:clamp(1.55rem, 3vw, 2.05rem)}
h3{font-size:1.2rem;line-height:1.3}
p,li{max-width:var(--measure);text-wrap:pretty}
p{margin:0 0 1em}
ul{padding-left:1.2em;margin:0 0 1em}
li{margin-bottom:.45em}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--t-fast) ease}
a:hover{color:var(--link-hover)}
strong{font-weight:600}
small,.small{font-size:15px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--forest);color:var(--cream)}
@media (prefers-color-scheme:dark){ ::selection{background:var(--cream);color:var(--forest)} }

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--forest);color:var(--cream);padding:12px 18px;z-index:200;border-radius:0 0 4px 0;text-decoration:none}
.skip-link:focus{left:0;color:var(--cream)}

/* ---------- header ---------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) ease;
}
.site-header.is-scrolled{border-bottom-color:var(--line-soft)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand-lockup:hover{color:inherit}
.brand-lockup svg{color:var(--mark);flex:none}
.brand-lockup .brand-name{font:600 17px/1 var(--serif);color:var(--heading);white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.5vw,26px)}
.site-nav a:not(.btn){font-size:16px;text-decoration:none;color:var(--text);padding:10px 2px;min-height:44px;display:inline-flex;align-items:center}
.site-nav a:not(.btn):hover{color:var(--link-hover)}
.site-nav a[aria-current="page"]:not(.btn){color:var(--heading);box-shadow:inset 0 -2px 0 var(--brass)}
.site-nav .btn{padding:11px 18px;min-height:44px;text-decoration:none}
.nav-toggle{display:none}

@media (max-width:719px){
  .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line-soft);
    padding:6px var(--gutter) 18px;
  }
  .site-nav.is-open{display:flex}
  .site-nav a:not(.btn){padding:13px 2px;border-bottom:1px solid var(--line-soft);font-size:17px}
  .site-nav a:not(.btn):last-of-type{border-bottom:none}
  .site-nav .btn{margin-top:10px;justify-content:center}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;background:none;border:none;cursor:pointer;color:var(--heading);padding:0;
  }
  .nav-toggle svg{transition:transform var(--t-fast) ease}
  .nav-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--btn-bg);color:var(--btn-text);
  font:600 16px/1 var(--sans);
  padding:14px 22px;min-height:48px;
  border:none;border-radius:var(--btn-radius);cursor:pointer;text-decoration:none;
  transition:background-color var(--t-fast) ease, transform var(--t-fast) ease;
  touch-action:manipulation;
}
.btn:hover{background:var(--btn-bg-hover);color:var(--btn-text-hover)}
.btn:active{transform:scale(.98)}
.btn-ghost{
  background:transparent;color:var(--heading);
  border:1.5px solid var(--heading);
}
.btn-ghost:hover{background:var(--heading);color:var(--bg)}
.band-forest .btn{background:var(--cream);color:var(--forest)}
.band-forest .btn:hover{background:#fff;color:var(--forest)}

/* ---------- hero ---------- */

.hero{padding-top:clamp(52px,8vw,104px);padding-bottom:clamp(48px,7vw,88px)}
.hero .kicker{font:600 14px/1.4 var(--sans);color:var(--text-muted);letter-spacing:.01em;margin:0 0 18px}
.hero .lede{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.1vw,20.5px);line-height:1.55;margin-top:18px}
.hero-mark{margin-bottom:26px}
.hero-mark svg{color:var(--mark);display:block}
.doorways{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px;max-width:760px}
.doorway{
  display:flex;flex-direction:column;gap:10px;
  padding:26px 24px 24px;
  border:var(--card-border);border-radius:var(--card-radius);
  text-decoration:none;color:var(--text);
  transition:transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease;
}
.doorway:hover{transform:translateY(-2px);border-color:var(--heading);color:var(--text)}
.doorway:active{transform:scale(.99)}
.doorway h3{margin:0}
.doorway p{margin:0;font-size:15.5px}
.doorway .go{font:600 15px/1 var(--sans);color:var(--heading);margin-top:6px;display:inline-flex;align-items:center;gap:7px}
.doorway .go svg{transition:transform var(--t-fast) var(--ease-out)}
.doorway:hover .go svg{transform:translateX(3px)}

@media (max-width:659px){
  /* phones get rows, not shrunk cards */
  .doorways{grid-template-columns:1fr;gap:0;margin-top:26px}
  .doorway{border-left:none;border-right:none;border-radius:0;padding:20px 0}
  .doorway + .doorway{border-top:none}
  .doorway:hover{transform:none}
}

/* ---------- sections ---------- */

.section{padding-top:var(--section);padding-bottom:var(--section)}
.section-tight{padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(44px,6vw,72px)}
.section-head{margin-bottom:clamp(28px,4vw,44px)}
.eyebrow{font:600 var(--rv-text-xs)/1.4 var(--sans);color:var(--accent-text);margin:0 0 10px}

/* breath line — one per page, static, section divider only */
.breath{display:block;margin:0 auto;max-width:var(--wrap);padding:0 var(--gutter)}
.breath svg{display:block;width:min(320px,60%);height:9px;color:var(--brass);margin:0 auto}

.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.5vw,40px)}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,40px)}
@media (max-width:859px){ .cols-3{grid-template-columns:1fr} .cols-2{grid-template-columns:1fr} }
.col h3{display:flex;align-items:baseline;gap:12px}
.col h3 .n{font:600 14px/1 var(--sans);color:var(--brass)}

.panel{background:var(--panel);border-radius:var(--card-radius);padding:clamp(24px,4vw,40px)}
.panel-line{border:var(--card-border);border-radius:var(--card-radius);padding:clamp(24px,4vw,40px)}

/* offer cards */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px)}
@media (max-width:859px){ .offers{grid-template-columns:1fr} }
.offer{
  display:flex;flex-direction:column;gap:14px;
  border:var(--card-border);border-radius:var(--card-radius);
  padding:clamp(26px,4vw,36px);
}
.offer .price{font:600 clamp(1.7rem,3vw,2.1rem)/1 var(--serif);color:var(--heading)}
.offer .price small{font:400 15px/1.4 var(--sans);color:var(--text)}
.offer ul{margin:0;padding-left:1.15em}
.offer li{font-size:15.5px;margin-bottom:.4em}
.offer .btn,.offer .btn-ghost{align-self:flex-start;margin-top:auto}

/* price table */
.price-table{width:100%;border-collapse:collapse;font-size:16.5px;max-width:720px}
.price-table th{font:600 14px/1.4 var(--sans);text-align:left;color:var(--text-muted);padding:0 0 10px;border-bottom:1px solid var(--line)}
.price-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.price-table td:last-child{text-align:right;font-family:var(--serif);font-weight:600;color:var(--heading);white-space:nowrap;font-variant-numeric:tabular-nums;padding-right:0}
.price-table .sub{display:block;font-size:var(--rv-text-sm);color:var(--text-muted);margin-top:2px}
@media (max-width:659px){
  .price-table{font-size:16px}
  .price-table td{padding:12px 12px 12px 0}
  .price-table .sub{font-size:13.5px}
}

/* definition rows (org responsibilities etc.) */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:220px 1fr;gap:10px 28px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.row:first-child{border-top:1px solid var(--line-soft)}
@media (max-width:659px){ .row{grid-template-columns:1fr;gap:4px} }
.row dt{font:600 16px/1.45 var(--sans);color:var(--heading)}
.row dd{margin:0;font-size:16px}

/* scope panel */
/* Borderless pull-quote for the scope-of-practice statement: a fine brass
   left rule (brand accent weight), not a boxed card. */
.scope-panel{border-left:2px solid var(--accent-line);padding:6px 0 6px clamp(18px,3vw,28px)}
.scope-panel p{font-family:var(--serif);font-size:18px;line-height:1.6}
.scope-panel p:last-child{margin-bottom:0}

/* brass tick — short rule, decorative only */
.tick{width:44px;height:2px;background:var(--brass);border:none;margin:0 0 18px}

/* portraits — documentary, natural light, 4:5, 6px radius */
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--portrait-radius)}
.portrait figcaption{font:400 var(--rv-text-xs)/1.5 var(--sans);color:var(--text-muted);margin-top:10px}

/* about strip — open, no box */
.about-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:759px){ .about-strip{grid-template-columns:1fr} .about-strip .portrait{max-width:340px} }

/* qualifications */
.qual-block h3{margin-bottom:.4em}
.qual-list{list-style:none;padding:0;margin:0 0 1em;display:flex;flex-wrap:wrap;gap:8px 0}
.qual-list li{margin:0;font-size:16px}
.qual-list li::after{content:"·";color:var(--brass);padding:0 .55em}
.qual-list li:last-child::after{content:""}

/* forest band */
.band-forest{background:var(--forest);color:rgba(245,240,230,.92)}
.band-forest h2,.band-forest h3{color:var(--cream)}
.band-forest p{color:rgba(245,240,230,.85)}
.band-forest a:not(.btn){color:var(--cream)}
.band-forest a:not(.btn):hover{color:rgba(245,240,230,.72)}

/* ---------- forms ---------- */

.enquiry-grid{align-items:start}
@media (min-width:860px){ .enquiry-grid{grid-template-columns:1.4fr 1fr} }
.form{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;font:600 15.5px/1.4 var(--sans);color:var(--heading);margin-bottom:7px}
.field .hint{font-size:var(--rv-text-sm);color:var(--text-muted);margin:-3px 0 8px}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea{
  width:100%;
  font:400 var(--rv-text-ui)/1.5 var(--sans);color:var(--text);
  background:transparent;
  border:var(--field-border);border-radius:var(--field-radius);
  padding:12px 14px;min-height:48px;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}
.field.has-error input,.field.has-error textarea{border-color:var(--color-error)}
.field .error{display:none;font:600 var(--rv-text-sm)/1.4 var(--sans);color:var(--color-error);margin-top:7px}
.field.has-error .error{display:block}
.choice-group{display:flex;gap:12px;flex-wrap:wrap}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;min-height:48px;padding:0 18px;
  border:var(--field-border);border-radius:var(--field-radius);
  font:600 var(--rv-text-md)/1 var(--sans);color:var(--text);cursor:pointer;
  transition:background-color var(--t-fast) ease,color var(--t-fast) ease,border-color var(--t-fast) ease;
}
.choice input:checked + span{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-text)}
.choice input:focus-visible + span{outline:2px solid var(--focus);outline-offset:3px}
.form-note{font-size:var(--rv-text-sm);color:var(--text-muted);max-width:56ch}
/* Quiet noted panel (moss tint + fine brass left rule), matching the
   scope pull-quote — not a boxed card with a side-tab. */
.form-status{display:none;margin-top:18px;padding:14px 18px;background:var(--panel);border-left:2px solid var(--accent-line);font-size:16px}
.form-status.is-visible{display:block}

/* ---------- footer ---------- */

.site-footer{background:var(--forest);color:rgba(245,240,230,.85);margin-top:var(--section)}
.site-footer .top{display:flex;flex-wrap:wrap;gap:28px 56px;justify-content:space-between;padding:clamp(40px,6vw,64px) 0 30px}
.site-footer .brand-lockup .brand-name{color:var(--cream)}
.site-footer .brand-lockup svg{color:var(--cream)}
.site-footer nav{display:flex;flex-direction:column;gap:9px}
.site-footer a{color:rgba(245,240,230,.85)}
.site-footer a:hover{color:var(--cream)}
.site-footer .cols{display:flex;gap:clamp(32px,6vw,88px);flex-wrap:wrap}
.site-footer .col-title{font:600 13.5px/1 var(--sans);color:rgba(245,240,230,.55);margin:0 0 12px}
.site-footer .bottom{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;border-top:1px solid rgba(245,240,230,.22);padding:20px 0 28px;font-size:14.5px;color:rgba(245,240,230,.65)}
.site-footer .bottom p{margin:0;max-width:none}

/* ---------- reveal animations ----------
   transform/opacity only; gated by prefers-reduced-motion */

/* Motion is deliberately scarce: content fades in barely, nothing rises,
   nothing slides. The mark draw on the homepage is the one signature.
   Progressive enhancement — content is visible by default; only once JS
   confirms support (.js-reveal on <html>) do reveals start hidden, so a
   slow or absent script never leaves content blank. */
.js-reveal .reveal{opacity:0;transition:opacity var(--t-reveal) ease-out}
.js-reveal .reveal.is-visible{opacity:1}
.js-reveal .reveal-group > *{opacity:0;transition:opacity var(--t-reveal) ease-out}
.js-reveal .reveal-group.is-visible > *{opacity:1}
.js-reveal .reveal-group.is-visible > :nth-child(2){transition-delay:70ms}
.js-reveal .reveal-group.is-visible > :nth-child(3){transition-delay:140ms}
.js-reveal .reveal-group.is-visible > :nth-child(n+4){transition-delay:200ms}

/* hero mark — the one signature motion: it descends and settles onto its
   floor (grounding), then takes one slow breath (once, on load).
   transform-origin is the floor, so the settle lands and the breath rises
   from the same grounded point. */
.hero-mark svg{animation:mark-settle-breath 2400ms 120ms both;transform-origin:50% 100%}
@keyframes mark-settle-breath{
  0%{opacity:0;transform:translateY(-14px) scale(1.03);animation-timing-function:cubic-bezier(.22,1,.36,1)}
  40%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  70%{transform:translateY(0) scale(1.035);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  100%{transform:translateY(0) scale(1)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal .reveal,.js-reveal .reveal-group > *{opacity:1;transition:none}
  .hero-mark svg{animation:none;opacity:1;transform:none}
  .btn,.doorway,.doorway .go svg{transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ---------- phones: designed, not shrunk ----------
   Above-the-fold space is the scarcest resource on a phone, so the small
   screen drops what is duplicated, tightens the vertical rhythm, and keeps
   type at reading size rather than scaling everything down together. */

@media (max-width:659px){

  /* Rhythm — --section's mobile value lives in tokens.css. */
  .section-tight{padding-top:38px;padding-bottom:38px}

  /* Header — 56px instead of 64px returns a slice of every screen. */
  .site-header .bar{min-height:56px}
  .brand-lockup .brand-name{font-size:16.5px}

  /* HIDDEN: the hero mark. The sticky header shows the same mark 40px above
     it, so on a phone it is pure duplication costing ~90px above the fold.
     Desktop keeps it (and its draw animation) where the space is free. */
  .hero-mark{display:none}

  .hero{padding-top:26px;padding-bottom:34px}
  .hero .kicker{margin-bottom:12px}
  .hero .lede{margin-top:14px}
  h1{line-height:1.08}
  .section-head{margin-bottom:22px}

  /* Cards tighten rather than shrink their type. */
  .offer{padding:22px 20px;gap:11px}
  .panel,.panel-line{padding:22px 20px}
  .offers{gap:16px}

  /* Prices read as rows: label left, amount right, no cramped table feel. */
  .price-table td{padding:11px 10px 11px 0}
  .price-table td:last-child{font-size:17px}

  /* Portrait is a full-width band on a phone, not a floated column. */
  .about-strip .portrait{max-width:none}
  .portrait img{aspect-ratio:3/2}

  /* Footer: the two link lists sit side by side rather than stacking into a
     long tail, and each link gets a real 44px tap target. */
  .site-footer .top{gap:24px;padding-top:34px}
  .site-footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%}
  .site-footer nav{gap:0}
  .site-footer nav a{padding:10px 0;min-height:44px;display:flex;align-items:center;font-size:15px}
  .site-footer .col-title{margin-bottom:4px}
  .site-footer .bottom{padding-bottom:24px;gap:6px}

  /* Breath line is decorative — keep it, but let it breathe less. */
  .breath svg{width:min(220px,55%)}

  /* HIDDEN: text that the header already says. */
  .hide-sm{display:none}
}

/* Very small phones (SE-class) — one more step down, nothing hidden. */
@media (max-width:379px){
  :root{ --gutter:18px; }
  .offer,.panel,.panel-line{padding:20px 16px}
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.band-forest,.nav-toggle{display:none}
  body{background:#fff;color:#000}
}