/* ==========================================================================
   TODD McGINNIS — B1
   Dev-site content, verbatim. Version B's visual system applied.
   Deliberately NOT ported from B: the full-bleed service panels (B's overlay
   treatment was designed around missing card descriptions; the dev site has
   them now). Pain-panel photographs dropped so the compression run is
   unbroken — reversible.
   ========================================================================== */
:root{
  /* ---- THE FIVE CLIENT COLOURS. Used as given, nothing substituted. ---- */
  --harbor:#355A67;             /* PRIMARY   — Harbor Blue-Gray */
  --stone:#7B786F;              /* SECONDARY — Warm Stone Taupe */
  --clay:#8A6F57;               /* ACCENT    — Grounded Clay */
  --linen:#F3EEE6;              /* BACKGROUND— Soft Linen */
  --ink:#2E3338;                /* TEXT      — Deep Charcoal */

  /* ---- Derived variants only. Every one is a straight tint/shade of a
     palette colour, per the Design Reference's variable system. No new hues. */
  --harbor-deep:#223A42;        /* PRIMARY -20%  — footer ground + primary-button hover */
  --stone-text:#696660;         /* SECONDARY -15% — small muted labels; the raw
                                   secondary is 3.8:1 on linen and fails AA at
                                   label sizes. Only use for text under 24px. */
  --stone-deep:#575450;         /* SECONDARY -30% — the same muted role, but over
                                   the translucent hero card where the hillside
                                   darkens the ground beneath it. */
  --stone-pale:#E7E1D6;         /* SECONDARY tint — photo mount ground */
  --clay-btn:#755E4A;           /* ACCENT -15%   — button fill; raw accent is
                                   4.4:1 behind a light label and misses AA */
  --clay-deep:#755E4A;          /* ACCENT -15%   — small accent-coloured text */
  --clay-deeper:#5F4C3B;        /* ACCENT -30%   — accent-button hover only */
  --clay-light:#C9B79F;         /* from the wordmark package — accent on dark grounds */
  --linen-warm:#F9F5EF;         /* BACKGROUND +2% — raised surfaces */
  --ink-soft:#2E3338;           /* body copy is the TEXT colour; hierarchy comes
                                   from size and weight, not from fading it out */
  --harbor-ink:#2E3338;         /* headings are the TEXT colour too */
  --footer-bg:#223A42;
  --footer-text:rgba(243,238,230,.82);

  --font-head:"Manrope",-apple-system,Helvetica,sans-serif;   /* the wordmark's face */
  --font-body:"Newsreader",Georgia,serif;

  --container:1180px;

  /* ---- reading scale. rem resolves against the 16px root, NOT body's
     font-size, which is why every reading size has to be stated here. ---- */
  --fs-body:1.18rem;      /* 18.9px — the page's reading size */
  --fs-body-lg:1.3rem;    /* 20.8px — opened passages: the release, the bio */
  --fs-body-sm:1.08rem;   /* 17.3px — card blurbs and captions */

  /* ---- section rhythm. One scale, stated once. The Design Reference calls
     for 50–70px and several sections had drifted past 100. ---- */
  --sec-y:clamp(42px,4.6vw,64px);        /* between major sections */
  --sec-y-tight:clamp(32px,3.6vw,48px);  /* within a continuous run */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;padding-bottom:0;
  background:var(--linen);color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.5;
  overflow-x:clip;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('../images/paper-texture.jpg') repeat;background-size:340px 340px;
  opacity:.11;mix-blend-mode:multiply;
  filter:blur(2.5px);transform:scale(1.04);
}
body>*{position:relative;z-index:1}

h1,h2,h3,h4{
  font-family:var(--font-head);font-weight:600;
  line-height:1.05;letter-spacing:-.028em;margin:0;
  text-wrap:balance;color:var(--harbor-ink);
}
p{margin:0 0 .85em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:inherit}
img{display:block;max-width:100%}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 30px}

#bio,#offer,#contact{scroll-margin-top:86px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--clay-deep);outline-offset:3px;border-radius:2px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-head);font-size:.9rem;font-weight:600;
  letter-spacing:-.01em;
  padding:15px 28px;border-radius:2px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s;
}
.btn .arw{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.btn:hover .arw{transform:translateX(4px)}
/* NOTE: no translateY on any CTA — the dev site's .btn--primary hover hop is gone */
.btn-clay{background:var(--clay-btn);color:var(--linen-warm)}
.btn-clay:hover{background:var(--clay-deeper);box-shadow:0 6px 20px -8px rgba(110,87,68,.75)}
.btn-harbor{background:var(--harbor);color:var(--linen)}
.btn-harbor:hover{background:var(--harbor-deep);box-shadow:0 6px 20px -8px rgba(27,46,53,.8)}
.btn-outline{background:transparent;color:var(--harbor-deep);border-color:rgba(53,90,103,.4)}
.btn-outline:hover{background:rgba(53,90,103,.08);border-color:var(--harbor)}

/* ---------- header ----------------------------------------------------
   Compresses on scroll. The nav, the phone and the CTA all borrow the same
   device the page uses elsewhere: a clay bar / clay chip that fills. */
:root{--hdr:74px;--hdr-t:.42s;--hdr-e:cubic-bezier(.33,.9,.35,1)}
.site-header{
  position:sticky;top:0;z-index:60;background:var(--harbor);
  /* no backdrop-filter: it would become the containing block for the
     fixed off-canvas drawer and collapse it to the height of the bar */
  border-bottom:1px solid rgba(243,238,230,.16);
  transition:box-shadow .34s ease;
}
.site-header.compact{--hdr:58px;box-shadow:0 12px 32px -20px rgba(15,28,33,.95)}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:var(--linen)}
.header-inner{
  max-width:1280px;margin:0 auto;padding:0 30px;
  height:var(--hdr);
  display:flex;align-items:center;gap:26px;
  transition:height var(--hdr-t) var(--hdr-e);
}
.wordmark{display:flex;align-items:center;text-decoration:none;min-height:44px}
/* the supplied wordmark art is set on a flat #355A67 field, which is exactly the
   header colour, so it drops in seamlessly with no knockout needed */
/* 36px of image = ~23px of actual letterform; the rest is the wordmark's own
   clear space, baked into the crop, so the CSS height always overstates it. */
.wordmark img{height:36px;width:auto;display:block;transition:height var(--hdr-t) var(--hdr-e)}
.site-header.compact .wordmark img{height:27px}

/* the links centre in the space between the wordmark and the actions cluster */
.nav{flex:1;display:flex;align-items:center;justify-content:center;min-width:0}
.header-actions{flex:none;display:flex;align-items:center;gap:14px}
.wordmark{flex:none}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links>li>a{
  position:relative;
  font-family:var(--font-head);text-decoration:none;
  font-size:.95rem;font-weight:600;letter-spacing:-.012em;
  color:rgba(243,238,230,.92);padding:8px 0;min-height:44px;
  display:inline-flex;align-items:center;gap:6px;transition:color .25s;
}
/* a clay underline draws in from the left on hover */
.nav-links>li>a::after{
  content:"";position:absolute;left:0;bottom:9px;height:2px;width:0;
  background:var(--clay-light);
  transition:width .36s cubic-bezier(.22,1,.36,1);
}
.nav-links>li>a:hover{color:var(--linen)}
.nav-links>li>a:hover::after{width:100%}
.dropdown>a>svg,
.menu-item-has-children>a>svg{width:9px;height:9px;opacity:.65;transition:transform .28s,opacity .28s}
.dropdown:hover>a>svg,
.menu-item-has-children:hover>a>svg{transform:rotate(180deg);opacity:1}
.dropdown-menu,
.sub-menu{
  position:absolute;top:100%;left:-14px;min-width:320px;background:var(--linen-warm);
  border:1px solid rgba(46,51,56,.12);border-radius:0 0 2px 2px;
  box-shadow:0 22px 44px -24px rgba(34,58,66,.8);
  list-style:none;margin:0;padding:8px 0;
  opacity:0;visibility:hidden;transform:translateY(-5px);
  transition:opacity .24s,transform .24s,visibility .24s;
}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu,
.menu-item-has-children:hover .sub-menu,.menu-item-has-children:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a,
.sub-menu a{display:flex;align-items:center;min-height:44px;padding:9px 18px;text-decoration:none;font-family:var(--font-head);font-size:.9rem;font-weight:500;line-height:1.3;color:var(--ink-soft);transition:background-color .2s,color .2s}
.dropdown-menu a:hover,
.sub-menu a:hover{background:rgba(138,111,87,.1);color:var(--clay-deep)}

/* phone — one enclosed control, not an icon sitting next to some text. The
   glyph gets its own tinted compartment inside the same outline as the number;
   on hover the outline, the compartment and the number all respond together.
   Same height and radius as the CTA so the two read as a pair. */
.header-phone{
  font-family:var(--font-head);display:inline-flex;align-items:stretch;
  text-decoration:none;min-height:46px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(243,238,230,.34);
  transition:border-color .3s,min-height var(--hdr-t) var(--hdr-e);
}
.header-phone .ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;flex:none;background:rgba(243,238,230,.1);
  transition:background-color .3s,width var(--hdr-t) var(--hdr-e);
}
.header-phone .num{
  display:inline-flex;align-items:center;padding:0 16px;white-space:nowrap;
  font-size:.98rem;font-weight:700;letter-spacing:-.015em;
  color:rgba(243,238,230,.9);
  transition:color .3s,padding var(--hdr-t) var(--hdr-e),font-size var(--hdr-t) var(--hdr-e);
}
.header-phone svg{width:15px;height:15px;fill:rgba(243,238,230,.92);transition:fill .3s}
.header-phone:hover{border-color:var(--clay-light)}
.header-phone:hover .ic{background:var(--clay-light)}
.header-phone:hover svg{fill:var(--harbor-deep)}
.header-phone:hover .num{color:var(--linen)}
.site-header.compact .header-phone{min-height:42px}
.site-header.compact .header-phone .ic{width:38px}
.site-header.compact .header-phone .num{padding:0 13px;font-size:.92rem}

/* CTA — two-tone: linen body for contrast against Harbor, clay end-cap for
   colour. Hover swaps the two halves. */
/* Built like the phone — outlined, Harbor pouring through, one filled end
   compartment. It opens on the full Grounded Clay accent where the phone's cell
   is only a faint tint, and its border sits brighter, so it still leads. Both
   then resolve to the same Clay-Light hover. */
.header-cta{
  display:inline-flex;align-items:stretch;overflow:hidden;
  min-height:46px;border-radius:2px;text-decoration:none;
  background:transparent;color:var(--linen);
  border:1px solid rgba(243,238,230,.6);
  font-family:var(--font-head);font-size:.9rem;font-weight:700;letter-spacing:-.015em;
  transition:border-color .3s,color .3s,
             min-height var(--hdr-t) var(--hdr-e),font-size var(--hdr-t) var(--hdr-e);
}
.header-cta .lbl{display:inline-flex;align-items:center;padding:0 17px 0 20px;white-space:nowrap;
  transition:padding var(--hdr-t) var(--hdr-e)}
.header-cta .cap{
  display:inline-flex;align-items:center;justify-content:center;width:42px;flex:none;
  background:var(--clay);color:var(--linen-warm);font-size:1.02rem;font-style:normal;
  transition:background-color .3s,color .3s,width var(--hdr-t) var(--hdr-e);
}
.header-cta:hover{border-color:var(--clay-light)}
.header-cta:hover .cap{background:var(--clay-light);color:var(--harbor-deep)}
.site-header.compact .header-cta{min-height:42px;font-size:.86rem}
.site-header.compact .header-cta .lbl{padding:0 14px 0 17px}
.site-header.compact .header-cta .cap{width:38px}

/* the phone stays visible at every width — the dev site hides it behind the burger */
.mob-phone{
  display:none;align-items:center;gap:7px;text-decoration:none;
  font-family:var(--font-head);background:var(--linen-warm);color:var(--harbor-deep);
  font-size:.88rem;font-weight:600;white-space:nowrap;letter-spacing:-.01em;
  padding:10px 15px;border-radius:2px;min-height:44px;margin-left:auto;
  transition:background-color .28s,color .28s;
}
.mob-phone svg{width:14px;height:14px;fill:currentColor;flex:none}
.mob-phone:hover{background:var(--clay);color:var(--linen)}

.burger{display:none;background:none;border:0;padding:12px 10px;min-width:46px;min-height:46px;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:5px}
.burger span{display:block;width:23px;height:2px;background:var(--linen);transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ HERO ============
   Full-bleed photograph, content card sitting on top of it. */
.hero{
  position:relative;isolation:isolate;background:var(--linen);
  min-height:clamp(560px,58vw,690px);
  display:flex;align-items:center;
}
.hero-band{position:absolute;inset:0;z-index:0;overflow:hidden;font-size:0}
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.hero-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(34,58,66,.34) 0%,rgba(34,58,66,.08) 58%,rgba(34,58,66,.2) 100%);
}
.hero-wrap{
  position:relative;z-index:2;width:100%;
  /* matches .header-inner's max-width + padding so the card's left edge lands
     exactly on the wordmark's left edge at every width */
  max-width:1280px;margin:0 auto;
  padding:clamp(40px,5.5vw,72px) 30px;
}
.hero-card{
  /* the photograph reads through the card */
  background:rgba(249,245,239,.87);
  position:relative;z-index:2;width:fit-content;max-width:100%;
  /* 42px top vs 52px bottom: the h1's line box holds ~8px of air above the
     cap-line, so equal padding renders the content optically low. */
  padding:42px 52px 52px;
  border-radius:2px;
  box-shadow:0 34px 70px -40px rgba(27,46,53,.9);
}
.hero h1{
  font-size:clamp(2.35rem,5vw,3.9rem);
  line-height:1;letter-spacing:-.038em;font-weight:800;margin:0 0 12px;
}
.hero h1 span{display:block;color:var(--clay)}
.hero-sub{
  font-family:var(--font-head);font-size:clamp(1rem,1.55vw,1.16rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.25;
  color:var(--harbor);margin:0 0 14px;white-space:nowrap;
}
/* the dev site's "Online Therapy • California" eyebrow is re-homed here rather
   than deleted — same words, no floating kicker label above the headline */
.hero-service{
  font-family:var(--font-head);font-size:.82rem;font-weight:500;letter-spacing:.02em;
  line-height:1.55;color:var(--stone-deep);margin:0 0 30px;white-space:nowrap;
}
.hero-service .div{color:var(--clay-deep);padding:0 4px}

/* ---- .btn-lg — the page's major actions --------------------------------
   Used by the hero CTA and the turn CTA so the two read as the same control.
   The page's language is instrument-like (squared radii, Manrope),
   so this is a deliberate control, not a soft pill: label left, arrow anchored
   right in its own bordered square. Hover inverts the square — obvious
   affordance with no vertical motion. */
.btn-lg{
  font-size:clamp(1.1rem,1.4vw,1.28rem);
  font-weight:700;letter-spacing:-.018em;
  padding:16px 22px 16px 38px;
  min-height:76px;
  min-width:min(100%,490px);
  justify-content:space-between;gap:32px;
  box-shadow:0 16px 34px -16px rgba(27,46,53,.55);
}
.btn-clay.btn-lg{box-shadow:0 16px 34px -16px rgba(85,66,50,.7)}
.btn-lg .arw{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;font-size:1.15rem;line-height:1;
  border:1px solid rgba(249,245,239,.42);
  transition:background-color .3s,color .3s,border-color .3s;
}
.btn-lg:hover{box-shadow:0 20px 40px -16px rgba(27,46,53,.7)}
.btn-clay.btn-lg:hover{box-shadow:0 20px 40px -16px rgba(85,66,50,.8)}
.btn-lg:hover .arw{
  background:var(--linen-warm);
  border-color:var(--linen-warm);
  transform:none;   /* the chip stays put — colour change only */
}
.btn-clay.btn-lg:hover .arw{color:var(--clay-btn)}
.btn-harbor.btn-lg:hover .arw{color:var(--harbor)}
.btn-outline.btn-lg:hover .arw{color:var(--harbor-deep)}

/* ============ BODY LANGUAGE A — PLATES =================================
   The recurring component is the plate: an outlined container with a filled
   measure across its foot — the same construction as the header's controls
   (outline + one filled compartment). Each beat narrows and its measure runs
   longer. The consequences plate inverts to solid Primary. The release has no
   plate at all: losing the container IS the relief. */
/* each beat gets its own ground, stepping fractionally deeper as the pressure
   builds — Soft Linen, a warm stone tint, then Stone Pale. On top of that a
   soft wash sits OPPOSITE the plate, so as the plate walks right the weight in
   the field walks left and the empty half of the stagger stops being dead. */
.beat{position:relative;padding:var(--sec-y-tight) 0}
.beat::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:var(--wash);
}
.beat > .inner{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 30px}
.beat-1{background:#F3EEE6;--wash:radial-gradient(58% 86% at 90% 50%,rgba(123,120,111,.15),rgba(123,120,111,0) 72%)}
.beat-2{background:#EDE7DC;--wash:radial-gradient(42% 82% at 6% 50%,rgba(123,120,111,.17),rgba(123,120,111,0) 74%),
                                radial-gradient(42% 82% at 94% 50%,rgba(123,120,111,.17),rgba(123,120,111,0) 74%)}
.beat-3{background:#E7E1D6;--wash:radial-gradient(58% 86% at 10% 50%,rgba(123,120,111,.2),rgba(123,120,111,0) 72%)}
.plate{
  position:relative;border:1px solid rgba(123,120,111,.42);border-radius:2px;
  padding:clamp(26px,3vw,38px) clamp(26px,3vw,40px) 0;
  width:100%;max-width:var(--pw,640px);
  background:rgba(249,245,239,.5);
  transition:border-color .3s;
}
/* all three plates are the same width; the stagger alone carries the drift —
   varying the widths too read as an inconsistency rather than as intent */
.plate--left{margin-right:auto}
.plate--mid{margin-inline:auto}
.plate--right{margin-left:auto}
.plate h2{
  font-size:clamp(1.34rem,2.3vw,1.78rem);letter-spacing:-.032em;line-height:1.1;
  /* the gap under the heading equals the gap between the paragraphs below it.
     .72em on the heading would resolve against the HEADING's size, so it is
     expressed against the body size instead — the same value the p's use. */
  margin:0 0 calc(var(--fs-body) * 0.72);color:var(--ink);
}
.plate .run{font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.plate .run p{margin-bottom:.72em}

/* the floor: no box. The ground carries it, deepened toward the edges so it
   reads as a descent rather than a slab, bracketed top and bottom by the
   measure at full — pressure pegged on the way in and on the way out. */
.floorfield{
  /* solid first so the ground is always defined — the gradient only deepens it */
  background-color:var(--harbor);
  background-image:radial-gradient(104% 82% at 50% 40%, rgba(53,90,103,0) 0%, rgba(53,90,103,0) 38%, rgba(27,46,53,.92) 100%);
  padding:0;
}
.floorfield .inner{
  max-width:var(--container);margin:0 auto;
  padding:var(--sec-y) 30px;
}
.floorfield .col{max-width:640px;margin-inline:auto}
.floorfield h2{
  color:var(--linen);font-size:clamp(1.9rem,3.6vw,2.75rem);
  letter-spacing:-.042em;line-height:1.04;margin:0 0 20px;max-width:20ch;
}
.floorfield .run{color:rgba(243,238,230,.88);font-size:var(--fs-body);line-height:1.56}
.floorfield .run p{margin-bottom:.8em}
/* the closing line is the punch of the section, not the fourth paragraph */
.floorfield .verdict{
  margin:clamp(32px,3.6vw,46px) 0 0;max-width:none;
  font-size:clamp(1.16rem,2.2vw,1.58rem);line-height:1.4;
  color:var(--linen);text-wrap:pretty;
}
/* the break is presentational only — it disappears below the width where the
   second line would no longer fit, and the sentence wraps naturally again */
.floorfield .verdict br{display:none}
@media (min-width:940px){.floorfield .verdict br{display:inline}}
@media (max-width:820px){
  .plate{max-width:none!important}
  .plate--mid,.plate--right{margin-inline:0}
  .beat::before{opacity:.6}
  .floorfield .col{max-width:none;margin-inline:0}
  .floorfield .verdict{max-width:none}
}

/* ---- the turn ---------------------------------------------------------
   The one deliberately centred moment on the page. The road photograph is
   symmetrical about its vanishing point, so the card centres on it and sits at
   the road's near end, half on the image and half hanging into the ground
   below. Same construction as the hero card, so the page's two pivots — the
   promise at the top and the turn in the middle — are visibly the same object. */
.turn{position:relative;background:var(--linen);padding-bottom:var(--sec-y)}
.turn-band{
  position:relative;width:100%;overflow:hidden;margin-top:-1px;font-size:0;
  height:clamp(380px,48vw,620px);
}
.turn-band img{
  /* oversized well beyond the frame so the parallax has room to travel — at
     118% there were only 56px of overhang, which capped the movement at ~5% of
     scroll speed and made it invisible. 140% gives 124px per side. */
  position:absolute;left:0;top:-20%;width:100%;height:140%;
  object-fit:cover;object-position:50% 56%;will-change:transform;
}
.turn-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(34,58,66,.16) 0%,rgba(34,58,66,0) 34%,rgba(34,58,66,.1) 100%);
}
.turn-wrap{position:relative;z-index:2;max-width:var(--container);margin:0 auto;padding:0 30px}
.turn-card{
  /* denser than the hero card on purpose: the asphalt under this one is
     near-black and full of lane detail, so the same alpha shows far more
     through here than it does over the hillside up top. */
  background:rgba(249,245,239,.96);
  max-width:720px;margin-inline:auto;
  margin-top:clamp(-230px,-17vw,-150px);
  padding:clamp(34px,4vw,52px) clamp(28px,4vw,56px) clamp(36px,4.2vw,54px);
  border-radius:2px;
  box-shadow:0 40px 80px -44px rgba(27,46,53,.95);
}
.turn-card h2{
  font-size:clamp(1.9rem,4vw,3.05rem);letter-spacing:-.042em;line-height:1.02;
  margin:0 0 24px;max-width:17ch;color:var(--ink);
}
.turn-card .run{font-size:var(--fs-body-lg);line-height:1.72;color:var(--ink);max-width:60ch}
.turn-card .run p{margin-bottom:.95em}
.turn-card .btn{margin-top:32px}
@media (max-width:820px){
  .turn-band{height:clamp(260px,44vw,360px)}
  .turn-card{margin-top:clamp(-130px,-16vw,-90px)}
}
/* ============ SERVICES — OPEN COLUMNS ==================================
   No containers at rest. The whole column is the link, so there is no "Learn
   More" to read — three things happen together on engagement:
     · the Harbor veil lifts off the photograph
     · the plate frame from the body's language materialises around the column
     · the service name warms and draws its own clay underline
   Nothing of it exists at rest, so none of it sits on the page as decoration. */
.offer{background:var(--linen);padding:var(--sec-y) 0}
.offer .inner{max-width:var(--container);margin:0 auto;padding:0 30px}
.offer h2{font-size:clamp(2rem,3.8vw,2.95rem);letter-spacing:-.045em;line-height:1.04;margin:0 0 clamp(30px,3.4vw,42px)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,44px);align-items:stretch}
.card{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
/* the plate, borrowed from the pain run — drawn only while the card is engaged */
.card::before{
  content:"";position:absolute;z-index:-1;
  inset:calc(-1 * clamp(11px,1.3vw,20px));
  border:1px solid rgba(138,111,87,.55);border-radius:2px;
  background:rgba(249,245,239,.6);
  opacity:0;transform:scale(.985);
  transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1);
}
.card:hover::before,.card:focus-visible::before{opacity:1;transform:scale(1)}
.card-shot{
  position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:2px;
  background:var(--harbor);box-shadow:0 22px 44px -34px rgba(27,46,53,.7);
  transition:box-shadow .5s cubic-bezier(.22,1,.36,1);
}
.card-shot img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.22,1,.36,1)}
.card-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(53,90,103,.24);
  transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.card:hover .card-shot::after,.card:focus-visible .card-shot::after{opacity:0}
.card:hover .card-shot img,.card:focus-visible .card-shot img{transform:scale(1.045)}
.card:hover .card-shot,.card:focus-visible .card-shot{box-shadow:0 30px 56px -30px rgba(27,46,53,.8)}
.card-body{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,24px) 0 0}
/* the name is the link, so it carries the same clay underline the nav uses */
.card h3{
  position:relative;font-size:clamp(1.2rem,1.85vw,1.46rem);letter-spacing:-.032em;
  line-height:1.14;margin:0 0 14px;padding-bottom:11px;color:var(--ink);
  transition:color .35s cubic-bezier(.22,1,.36,1);
}
.card h3::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--clay);transition:width .55s cubic-bezier(.22,1,.36,1);
}
.card:hover h3,.card:focus-visible h3{color:var(--clay-deeper)}
.card:hover h3::after,.card:focus-visible h3::after{width:100%}
.card p{font-size:var(--fs-body-sm);line-height:1.58;color:var(--ink);margin:0;transition:color .35s}
@media (max-width:900px){.cards{grid-template-columns:1fr;gap:32px}.card-shot{aspect-ratio:16/9}}
/* there is no hover on touch, so the resting state carries the whole treatment */
@media (hover:none) and (pointer:coarse){
  .card-shot::after{opacity:0}
  .card::before{opacity:1;transform:none}
  .card h3::after{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .card::before,.card-shot img,.card-shot::after,.card h3,.card h3::after{transition:none}
}


/* ============ BIO B — THE FIELD ========================================
   Full-bleed Primary, portrait bleeding off the left edge to the section's
   full height. The floor used this ground for the pressure; here the same
   ground carries the person — the darkest moment and the warmest moment share
   a colour, which is the point. His pale studio backdrop becomes a bright
   plane against the Harbor instead of vanishing into linen. */
.bio{
  background-color:var(--harbor);
  background-image:radial-gradient(96% 78% at 28% 45%, rgba(53,90,103,0) 0%, rgba(27,46,53,.72) 100%);
  position:relative;overflow:hidden;
}
.bio-grid{
  max-width:1340px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(30px,4vw,64px);align-items:center;
}
/* the portrait keeps its left bleed — that's what makes it a field rather than
   a column — but it no longer stretches to the full height of the copy, so it
   reads as a panel resting on the ground instead of a wall of face. */
.bio-photo{position:relative;margin-left:-6vw}
.bio-photo .mount{position:relative;height:clamp(380px,40vw,530px);overflow:hidden}
/* the image runs taller than its frame and is pinned to the bottom, so the
   crop comes off the empty headroom rather than off his shoulders */
.bio-photo img{
  position:absolute;left:0;bottom:0;width:100%;height:var(--zoom,122%);
  object-fit:cover;object-position:50% 100%;
}
.bio-text{padding:var(--sec-y) 30px var(--sec-y) 0}
.bio h2{font-size:clamp(2.2rem,4vw,3.1rem);letter-spacing:-.048em;margin:0 0 26px;color:var(--linen)}
.bio-body{max-width:56ch;font-size:var(--fs-body-lg);line-height:1.78;color:rgba(243,238,230,.9)}
.bio-body p{margin-bottom:1.02em}
.bio-body p:last-child{color:var(--linen)}
.bio .btn{margin-top:30px;background:transparent;color:var(--linen);border-color:rgba(243,238,230,.55)}
.bio .btn:hover{background:rgba(243,238,230,.12);border-color:var(--linen)}
@media (max-width:860px){
  .bio-grid{grid-template-columns:1fr;gap:0}
  .bio-photo{margin-left:0}
  .bio-photo .mount{height:clamp(330px,68vw,430px);--zoom:116%}
  .bio-text{padding:var(--sec-y-tight) 20px var(--sec-y)}
}

/* ============ FINAL CTA B — INTO THE LIGHT =============================
   The only place on the page where type sits directly on a photograph. Two
   riders, one leading — it earns the room, so the image runs full bleed at
   real height and the copy sits on it. A Harbor grade plus a directional
   scrim keeps the left side dark enough to read against. */
.close{position:relative;isolation:isolate;background:var(--harbor-deep);min-height:clamp(400px,40vw,520px);display:flex;align-items:center}
.close-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.close-media img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;filter:grayscale(1) contrast(1.06) brightness(.6)}
.close-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,#5A8494 0%,#355A67 50%,#8A6F57 100%);
  mix-blend-mode:color;opacity:.9;
}
.close-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(20,34,39,.9) 0%,rgba(20,34,39,.66) 42%,rgba(20,34,39,.22) 100%);
}
.close-inner{position:relative;width:100%;max-width:var(--container);margin:0 auto;padding:var(--sec-y) 30px}
.close-inner h2{font-size:clamp(2.05rem,4.2vw,3.35rem);letter-spacing:-.045em;line-height:1.02;max-width:20ch;margin:0 0 24px;color:var(--linen)}
.close-inner .run{font-size:var(--fs-body-lg);line-height:1.78;color:rgba(243,238,230,.92);max-width:56ch}
.close-inner .run p{margin-bottom:1em}
.close-inner .run p:last-child{color:var(--linen)}
@media (max-width:820px){.close{min-height:0}.close-scrim{background:linear-gradient(180deg,rgba(20,34,39,.86),rgba(20,34,39,.78))}}

/* ============ CONTACT — the page's last card ============================
   Coming straight off a full-bleed dark band, this opens: the lightest ground
   on the page, the widest spacing, and the form in the same card the hero and
   the turn use — promise, pivot, action, all the same object. The contact
   details reuse the header's control construction: an outlined chip with one
   tinted compartment for the glyph. */
.reach{background:var(--linen);padding:var(--sec-y) 0 calc(var(--sec-y) + 8px)}
.reach-grid{
  max-width:var(--container);margin:0 auto;padding:0 30px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);
  gap:clamp(38px,5.5vw,86px);align-items:start;
}
.reach h2{font-size:clamp(2rem,3.8vw,2.95rem);letter-spacing:-.045em;line-height:1.04;margin:0 0 20px;color:var(--ink)}
.reach-intro{font-size:var(--fs-body-lg);line-height:1.76;color:var(--ink);max-width:44ch;margin:0 0 clamp(30px,3.4vw,42px)}
.reach-intro p{margin:0 0 .85em}
.reach-intro p:last-child{margin-bottom:0}
.reach-lines{display:flex;flex-direction:column;gap:14px;max-width:430px}
.reach-line{
  display:flex;align-items:stretch;text-decoration:none;overflow:hidden;
  min-height:64px;border-radius:2px;border:1px solid rgba(123,120,111,.4);
  background:rgba(249,245,239,.6);
  transition:border-color .3s,background-color .3s;
}
.reach-line .ic{
  display:flex;align-items:center;justify-content:center;width:60px;flex:none;
  background:rgba(123,120,111,.12);transition:background-color .3s;
}
.reach-line svg{width:18px;height:18px;fill:var(--clay-deep);transition:fill .3s}
.reach-line .txt{display:flex;flex-direction:column;justify-content:center;padding:10px 18px;min-width:0}
.reach-line .lbl{
  font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone-text);margin:0 0 3px;
}
.reach-line .val{
  font-family:var(--font-head);font-size:1.06rem;font-weight:600;letter-spacing:-.015em;
  color:var(--harbor-ink);margin:0;overflow-wrap:anywhere;
}
a.reach-line:hover{border-color:var(--clay);background:rgba(249,245,239,.95)}
a.reach-line:hover .ic{background:var(--clay-light)}
a.reach-line:hover svg{fill:var(--harbor-deep)}

.form-card{
  background:var(--linen-warm);border-radius:2px;
  padding:clamp(28px,3.2vw,42px);
  box-shadow:0 34px 70px -44px rgba(27,46,53,.55);
}
.form-card h3{font-family:var(--font-head);font-size:1.32rem;letter-spacing:-.035em;margin:0 0 6px;color:var(--ink)}
.form-card .fine{font-size:var(--fs-body-sm);color:var(--stone-text);margin:0 0 26px}
.field{margin-bottom:18px}
.field label{
  font-family:var(--font-head);display:block;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone-text);margin-bottom:7px;
}
.field label .req{color:var(--clay-deep)}
.field input,.field textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;min-height:50px;color:var(--ink);
  background:rgba(243,238,230,.55);
  border:1px solid rgba(123,120,111,.4);border-radius:2px;
  padding:12px 14px;
  transition:border-color .25s,background-color .25s,box-shadow .25s;
}
.field textarea{min-height:104px;resize:vertical}
/* the UA default placeholder grey lands under 4.5:1 on this field colour */
.field ::placeholder{color:var(--stone-text);opacity:1}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--clay);background:#fff;
  box-shadow:0 0 0 3px rgba(138,111,87,.16);
}
/* the dev site ships the default WPForms blue submit — this is the brand fill */
.form-card .btn{width:100%;margin-top:10px}
@media (max-width:900px){
  .reach-grid{grid-template-columns:1fr;gap:40px}
  .reach-lines{max-width:none}
}

/* ---------- footer -----------------------------------------------------
   Same Harbor ground as the header, so the page opens and closes on the same
   colour and the wordmark art drops into both without a knockout. */
.site-footer{background:var(--harbor);color:var(--linen);padding:clamp(46px,5vw,62px) 0 clamp(56px,5vw,68px)}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 30px}
.footer-brand{max-width:430px}
.footer-brand{--fh:34px}
/* the wordmark art carries its own clear space baked into the crop, so the
   letterforms sit ~19% of the image height in from its left edge. Pull it back
   by exactly that so the "D" lines up with the tagline below it. */
.footer-brand img{height:var(--fh);width:auto;display:block;margin-left:calc(var(--fh) * -0.1867)}
.footer-brand p{
  font-size:var(--fs-body-sm);line-height:1.62;color:rgba(243,238,230,.86);
  margin:18px 0 0;max-width:38ch;
}
.footer-links{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.footer-links a{
  position:relative;font-family:var(--font-head);font-size:.92rem;font-weight:600;
  letter-spacing:-.01em;color:rgba(243,238,230,.88);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;transition:color .25s;
}
/* the same clay underline the header nav uses */
.footer-links a::after{
  content:"";position:absolute;left:0;bottom:9px;height:2px;width:0;
  background:var(--clay-light);transition:width .36s cubic-bezier(.22,1,.36,1);
}
.footer-links a:hover{color:var(--linen)}
.footer-links a:hover::after{width:100%}
/* the legal links belong with the copyright — both are fine print, so they
   share one meta row under the rule instead of floating beside the tagline */
.footer-meta{
  max-width:var(--container);margin:clamp(30px,3.4vw,42px) auto 0;
  padding:clamp(14px,1.6vw,20px) 30px 0;
  border-top:1px solid rgba(243,238,230,.18);
  display:flex;align-items:center;justify-content:space-between;
  gap:10px 34px;flex-wrap:wrap;
}
.footer-legal{
  font-family:var(--font-head);font-size:.84rem;color:rgba(243,238,230,.8);margin:0;
}

/* ---------- reveal (2 elements only) ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .header-inner,.wordmark img,.header-cta,.header-cta .lbl,.header-cta .cap,
  .header-phone,.header-phone .ic,.header-phone .num{transition:none}
    html{scroll-behavior:auto}
}


/* ---------- responsive ---------- */
@media (max-width:1120px){
  .header-cta{display:none}
}
@media (max-width:1024px){
  .burger{display:flex}
  .mob-phone{display:inline-flex}
  .header-inner{gap:12px}
  .nav{
    position:fixed;top:var(--hdr);left:0;right:0;bottom:0;background:var(--harbor);
    flex-direction:column;align-items:stretch;gap:0;padding:20px 30px 40px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .38s cubic-bezier(.22,1,.36,1),visibility .38s;
  }
  .nav.open{transform:translateX(0);visibility:visible}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-links>li{border-bottom:1px solid rgba(243,238,230,.18)}
  .nav-links>li>a{padding:15px 0;font-size:.95rem;justify-content:space-between;width:100%}
  .dropdown-menu,
.sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;background:transparent;
    border:0;box-shadow:none;padding:0 0 10px;max-height:0;overflow:hidden;transition:max-height .34s ease;
  }
  .dropdown.open .dropdown-menu,
  .menu-item-has-children.open .sub-menu{max-height:360px}
  .dropdown-menu a,
  .sub-menu a{padding:9px 0 9px 16px;font-size:.92rem;color:rgba(243,238,230,.82)}
  .dropdown-menu a:hover,
  .sub-menu a:hover{background:transparent;color:var(--linen)}
  .header-actions{display:none}
  .column .col,.redline .col{margin-left:0}
  .bio-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:34px}
}
@media (max-width:860px){
  .reach-grid{grid-template-columns:1fr}
  .bio-grid{grid-template-columns:1fr}
  .bio-photo{max-width:400px}
  .bio-photo .mount{aspect-ratio:1/1}
  .cards{grid-template-columns:1fr;gap:22px}
  /* below this the two long support lines can no longer hold one line */
  .hero{min-height:clamp(520px,88vw,640px)}
  .hero-card{width:auto}
  .hero-sub,.hero-service{white-space:normal}
}
@media (max-width:430px){
  .mob-phone b{display:none}
  .mob-phone{padding:11px 13px}
  .wordmark img{height:26px}
}
@media (max-width:520px){
  :root{--fs-body:1.08rem;--fs-body-lg:1.16rem;--fs-body-sm:1rem}
  .container,.header-inner,.hero-wrap,.column,.offer .inner,.bio-grid,
  .reach-grid,.close-inner,.footer-inner,.footer-meta{padding-left:20px;padding-right:20px}
  .hero h1{font-size:2.05rem}
  .hero-card{padding:20px 20px 26px}
  /* Manrope runs wider than the label had room for — trimmed so it holds one line */
  .btn-lg{min-width:100%;padding:18px 14px 18px 20px;min-height:66px;font-size:.95rem;gap:10px;white-space:nowrap}
  .btn-lg .arw{width:30px;height:30px;font-size:1rem}
  .btn{padding:14px 22px;font-size:.86rem}
  .footer-brand{--fh:30px}
  .footer-meta{gap:4px 20px}
  .mockbar{flex-direction:column;gap:2px;font-size:.68rem}
}
/* touch-device accessibility floors */
@media (hover:none) and (pointer:coarse){
  .hero-service,.field label,.footer-links a,.footer-legal,
  .form-card .fine,.reach-line .lbl,.reach-line .val,.nav-links>li>a,.dropdown-menu a,.btn,.card .more,
  .header-cta,.header-phone{font-size:.9rem}
  .hero-service{line-height:1.6}
  .field label,.reach-line .lbl{letter-spacing:.14em}
  .nav-links>li>a,.dropdown-menu a{font-size:.98rem}
  .footer-links a,.dropdown-menu a,.wordmark,.mob-phone,.card .more,
  .reach-line a,.close-lines a,.header-phone{min-height:44px}
  .field input,.field textarea{min-height:48px;font-size:1rem}
  /* Short labels ("Home", "FAQ", "Blog") render 29–43px wide and miss the
     44px floor on width even when the height is right. */
  .nav-links>li>a,.mob-phone{min-width:44px}
  .nav-links>li>a{display:inline-flex;align-items:center;justify-content:center}
  .mob-phone{justify-content:center}
}


/* ========== WORDPRESS NAV INVARIANTS — DO NOT REMOVE ==========
   Parent dropdown items link to href="#": never clickable, but :hover on the
   parent <li> still opens the menu. */
.nav-links .dropdown > a,
.nav-links .menu-item-has-children > a { cursor: default; pointer-events: none; }

/* UA bullets on any <ul> the mockup CSS didn't explicitly reset */
.dropdown-menu, .dropdown-menu li,
.sub-menu, .sub-menu li { list-style: none !important; margin: 0; padding: 0; }
.mobile-nav-links, .mobile-nav-links ul,
.mobile-nav-links .sub-menu, .mobile-nav-links .dropdown-menu { list-style: none !important; padding: 0; margin: 0; }
.mobile-nav-links li, .mobile-nav-links .sub-menu li,
.mobile-nav-links .dropdown-menu li { list-style: none !important; }

/* ========== LEGAL PAGES: NEVER FADE IN ==========
   30-50KB of text means the IO threshold is never reached and the page would
   sit at opacity:0 forever. */
body.page-terms-and-conditions .reveal,
body.page-terms-and-conditions .fade-in,
body.page-privacy-policy .reveal,
body.page-privacy-policy .fade-in,
body.page-thank-you .reveal,
body.page-thank-you .fade-in {
  opacity: 1 !important; transform: none !important;
  animation: none !important; transition: none !important;
}

/* ========== SHORT LANDSCAPE PHONES: HERO MUST CLEAR THE STICKY NAV ========== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; height: auto; padding-top: 96px; padding-bottom: 32px; }
  .hero-card { margin-top: 0; }
}

/* ========== INNER-PAGE CONTAINER ========== */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 30px; }

/* ========== MOBILE DRAWER CLOSE BUTTON ==========
   When the drawer is open the burger can be out of reach; the drawer needs
   its own dismiss. Markup lives in header.php as the first child of .nav. */
.mobile-nav-close{
  position:absolute;top:12px;right:14px;width:44px;height:44px;
  background:transparent;border:0;cursor:pointer;padding:0;display:none;
  align-items:center;justify-content:center;color:var(--linen);
  transition:transform .25s ease;
}
.mobile-nav-close:hover{transform:rotate(90deg)}
.mobile-nav-close svg{width:22px;height:22px;display:block}
@media (max-width:1024px){ .mobile-nav-close{display:flex} }


/* ══════════════════════════════════════════════════════════════════
   INNER PAGES
   Same vocabulary as the homepage: photographs run full-bleed, type sits
   on a plate that overlaps them, and grounds step warmer as you descend.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Hero ------------------------------------------------------------
   Full-colour photograph, no darkening wash. The title reads because it
   sits on its own solid plate, not because the picture was dimmed. */
.inner-hero{
  /* The header is position:sticky, so it already occupies flow space — a
     padding-top here just painted a bare strip of ground above the photo.

     The ground stays TRANSPARENT on purpose. body::before is a fixed paper
     grain at z-index 0 with mix-blend-mode:multiply, and body's children sit
     at z-index 1 — so any section that paints its own opaque background
     covers the grain and loses it. .inner-content is transparent, so an
     opaque colour here produced a visible seam exactly at the hero's bottom
     edge, on the line where the title plate overhangs. */
  position:relative;
  background:transparent;
}
.inner-hero-bg{
  height:clamp(280px,30vw,420px);
  background-size:cover;background-position:center 38%;
  background-repeat:no-repeat;
}
/* No scrim, no filter: the photograph runs at full brightness. The title is
   legible because it sits on its own opaque plate, not because the picture
   was dimmed. */
.inner-hero-scrim{display:none}
.inner-hero-content{
  position:relative;width:100%;max-width:var(--container);
  margin:0 auto;padding:0 30px;
}
.inner-page-title{
  position:relative;
  display:inline-block;
  /* pulled up so the plate sits ON the photo's lower edge and hangs into the
     linen below — the overlap is what ties the two together */
  margin:-84px 0 0;
  padding:24px 44px 26px;
  background:var(--linen-warm);
  color:var(--harbor-ink);
  font-size:clamp(1.9rem,3.5vw,2.85rem);
  line-height:1.1;letter-spacing:-.035em;
  max-width:min(100%,900px);
  box-shadow:0 26px 54px -34px rgba(34,58,66,.6);
}
.inner-page-title::after{
  content:"";position:absolute;left:44px;bottom:0;width:56px;height:3px;
  background:var(--clay);
}
.single-post .inner-hero-content .post-date{
  margin:12px 0 0;font-family:var(--font-head);font-size:.82rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-text);
}

/* ---- Reading column --------------------------------------------------- */
.inner-content{ padding:var(--sec-y) 0 var(--sec-y); }
.inner-content .container{ max-width:1180px; }

.service-body{ max-width:760px; }
.service-body > *:first-child{ margin-top:0; }
.service-body p{
  font-size:var(--fs-body);line-height:1.72;color:var(--ink-soft);
  margin:0 0 .72em;
}
/* Rule: the gap under a heading equals the gap between paragraphs. */
.service-body h2{
  font-size:clamp(1.42rem,2.3vw,1.86rem);line-height:1.2;
  letter-spacing:-.035em;color:var(--harbor-ink);
  margin:1.9em 0 .72em;
}
.service-body h3{
  font-size:clamp(1.16rem,1.7vw,1.34rem);line-height:1.3;
  letter-spacing:-.025em;color:var(--harbor-ink);
  margin:1.5em 0 .72em;
}
/* The bold line under the page title is the lead, and it reads left. */
.service-body > h2:first-child,
.service-body > .inner-lead{
  text-align:left;
  font-size:clamp(1.5rem,2.5vw,2rem);
  margin-top:0;
}
.service-body ul,.service-body ol{
  margin:0 0 1.3em;padding-left:1.15em;
  font-size:var(--fs-body);line-height:1.72;color:var(--ink-soft);
}
.service-body li{ margin:0 0 .5em; }
.service-body a{ color:var(--harbor); text-decoration:underline; text-underline-offset:3px; }
.service-body a:hover{ color:var(--clay-deep); }
.service-body strong{ font-weight:600; color:var(--harbor-ink); }
.service-body blockquote{
  margin:1.9em 0;padding:0 0 0 26px;
  border-left:2px solid var(--clay);
  font-size:var(--fs-body-lg);line-height:1.6;color:var(--harbor-ink);
}
.service-body blockquote p:last-child{ margin-bottom:0; }

/* ---- Image beside text ------------------------------------------------
   Rule #7: the section H2 lives INSIDE .svc-text-col so stretch alignment
   has the full text block to match. Never above the grid. */
.svc-img-section{
  display:grid;grid-template-columns:1fr minmax(280px,44%);
  gap:clamp(28px,3.6vw,52px);
  align-items:stretch;
  margin:var(--sec-y-tight) 0;
  max-width:none;
}
.svc-img-section.svc-img-left{ grid-template-columns:minmax(280px,44%) 1fr; }
.svc-img-section.svc-img-left .svc-img-col{ order:-1; }
.svc-text-col > *:first-child{ margin-top:0; }
.svc-text-col p{
  font-size:var(--fs-body);line-height:1.72;color:var(--ink-soft);margin:0 0 .72em;
}
.svc-text-col h2{
  font-size:clamp(1.42rem,2.3vw,1.86rem);line-height:1.2;
  letter-spacing:-.035em;color:var(--harbor-ink);margin:0 0 .72em;
}
.svc-img-col{ position:relative; min-height:260px; }
.svc-img-col img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  background:var(--stone-pale);
}
/* Body photographs use the same plain rectangular crop as the homepage cards
   and bio — no organic mounts. .svc-shape-* remain valid class names in older
   post_content and simply have no effect. */


/* ---- FAQ — the reader ------------------------------------------------
   An index of every question beside one large reading pane. The markup
   ships every answer in full; .rd--js (added by client.js) is what
   collapses the pane to a single entry. Without JS this stays a plain
   grouped Q&A page, which is also what search engines index. */
.faq-lead{ margin-bottom:var(--sec-y-tight); }
.rd{
  display:grid;grid-template-columns:minmax(280px,360px) 1fr;
  gap:clamp(30px,4vw,64px);align-items:start;
}
.rd-index{ padding-right:6px; }
.rd--js .rd-index{
  position:sticky;top:calc(var(--hdr) + 24px);
  max-height:calc(100vh - var(--hdr) - 48px);overflow-y:auto;
}
.rd-index::-webkit-scrollbar{ width:4px; }
.rd-index::-webkit-scrollbar-thumb{ background:rgba(53,90,103,.28); }
.rd-gp{ margin:0 0 26px; }
.rd-gp-h{
  font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--stone-text);margin:0 0 10px;
}
.rd-list{ list-style:none;margin:0;padding:0; }
.rd-list a,
.rd-list button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-size:.98rem;font-weight:500;line-height:1.36;
  letter-spacing:-.015em;color:var(--ink);text-decoration:none;
  padding:10px 14px;min-height:44px;
  border-left:2px solid transparent;
  transition:background-color .25s,border-color .25s,color .25s;
}
.rd-list a:hover,
.rd-list button:hover{ background:rgba(53,90,103,.06);color:var(--harbor); }
.rd-list [aria-current="true"]{
  background:var(--linen-warm);border-left-color:var(--clay);color:var(--harbor);
}

.rd-pane{
  position:relative;background:var(--linen-warm);
  padding:clamp(30px,3.6vw,52px);
  box-shadow:0 30px 60px -46px rgba(34,58,66,.7);
}
.rd--js .rd-pane{ min-height:420px; }
.rd-pane::before{ content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--clay); }

.rd-entry + .rd-entry{
  margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(28px,3vw,38px);
  border-top:1px solid rgba(53,90,103,.18);
}
/* only once JS is running does a single entry stand alone */
.rd--js .rd-entry{ display:none; }
.rd--js .rd-entry.is-open{
  display:block;margin-top:0;padding-top:0;border-top:0;
  animation:rdIn .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rdIn{ from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .rd--js .rd-entry.is-open{ animation:none; } }

.rd-meta{
  font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--stone-text);margin:0 0 16px;
}
.rd-q{
  font-size:clamp(1.42rem,2.4vw,2rem);line-height:1.18;
  letter-spacing:-.035em;color:var(--ink);margin:0 0 .55em;
}
.rd-a p{ font-size:var(--fs-body-lg);line-height:1.68;color:var(--ink);margin:0 0 .72em; }
.rd-a p:last-child{ margin-bottom:0; }
.rd-a a{ color:var(--harbor);text-decoration:underline;text-underline-offset:3px; }
.rd-a a:hover{ color:var(--clay-deep); }

.rd-nav{
  display:flex;gap:10px;margin-top:clamp(28px,3vw,40px);padding-top:20px;
  border-top:1px solid rgba(53,90,103,.18);
}
.rd-nav button{
  font-family:var(--font-head);font-size:.88rem;font-weight:600;cursor:pointer;
  background:none;border:1px solid rgba(53,90,103,.32);color:var(--harbor);
  padding:11px 18px;min-height:44px;
  transition:background-color .25s,border-color .25s;
}
.rd-nav button:hover{ background:rgba(53,90,103,.08);border-color:var(--harbor); }
.rd-nav button[disabled]{ opacity:.34;cursor:default; }

@media (max-width:900px){
  .rd{ grid-template-columns:1fr; }
  .rd--js .rd-index{ position:static;max-height:none;overflow:visible;order:2; }
  .rd--js .rd-pane{ order:1; }
}
@media (max-width:520px){
  .rd-list a,.rd-list button{ padding:10px 12px; }
}
@media (hover:none) and (pointer:coarse){
  .rd-gp-h,.rd-meta,.abio-name{ font-size:14px;letter-spacing:.12em; }
  .rd-list a,.rd-list button{ font-size:1rem;min-height:48px; }
  .rd-a a{ min-height:44px;display:inline-flex;align-items:center; }
}

/* ---- Contact ---------------------------------------------------------- */



/* ---- Contact ----------------------------------------------------------
   The page copy, the contact details and the form all share one two-column
   band: copy + details on the left, form card on the right. The copy used to
   run full width above the grid, which pushed the form below the fold. */
.contact-page .reach-grid{ padding-left:0;padding-right:0;margin-top:0; }
.contact-page .inner-content{ padding-top:var(--sec-y-tight); }
.contact-col > *:first-child{ margin-top:0; }
.contact-copy{ max-width:none;margin:0 0 clamp(30px,3.4vw,42px); }
.contact-copy > *:first-child{ margin-top:0; }
.contact-copy h2{
  font-size:clamp(1.6rem,2.9vw,2.3rem);line-height:1.1;
  letter-spacing:-.04em;color:var(--harbor-ink);margin:0 0 .58em;
}
.contact-copy p{ font-size:var(--fs-body);line-height:1.72;color:var(--ink);margin:0 0 .72em; }
.contact-copy p:last-child{ margin-bottom:0; }
.contact-page .reach-lines{ max-width:none; }
@media (max-width:900px){
  .contact-page .reach-grid{ grid-template-columns:1fr; }
}


/* ---- About: the bio panel ---------------------------------------------
   Its own ground and its own layout, deliberately unlike the reading column
   above it. Warm stone field rather than the homepage bio's Harbor, so the
   two bios read as siblings rather than a repeat: the portrait bleeds off
   the LEFT edge (the homepage bleeds the other way), and the text sits on a
   raised linen plate that overlaps it. */
.abio{
  position:relative;
  background:var(--stone-pale);
  padding:clamp(52px,6vw,88px) 0;
  margin-top:var(--sec-y);
  overflow:hidden;
}
.abio::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 8% 50%,rgba(53,90,103,.16) 0%,rgba(53,90,103,0) 62%);
  pointer-events:none;
}
.abio-grid{
  position:relative;
  max-width:var(--container);margin:0 auto;padding:0 30px;
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:clamp(0px,3vw,40px);align-items:center;
}
.abio-photo{
  position:relative;z-index:1;
  /* genuinely bleeds off the left edge of the page — the opposite direction
     to the homepage bio, so the two portraits don't read as the same shot */
  margin-left:calc(50% - 50vw);
}
/* Height is stated, not derived from an aspect-ratio: the bleed widens this
   column past its grid track, and a ratio would then drive the portrait to
   1200px tall and swallow the section. */
.abio-photo .mount{
  position:relative;overflow:hidden;background:var(--stone);
  height:clamp(400px,44vw,560px);
}
.abio-photo img{ display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%; }
.abio-text{
  position:relative;z-index:2;
  background:var(--linen-warm);
  padding:clamp(30px,3.6vw,52px);
  margin-left:clamp(-40px,-3vw,0px);
  box-shadow:0 34px 68px -46px rgba(34,58,66,.7);
}
.abio-name{
  font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay-deep);margin:0 0 12px;
}
.abio-text h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.14;letter-spacing:-.04em;
  color:var(--harbor-ink);margin:0 0 .72em;
}
.abio-body p{ font-size:var(--fs-body);line-height:1.72;color:var(--ink);margin:0 0 .72em; }
.abio-body p:last-child{ margin-bottom:0; }
.abio-closer{
  margin-top:clamp(26px,3vw,38px);padding-top:clamp(22px,2.4vw,30px);
  border-top:1px solid rgba(53,90,103,.22);
}
.abio-closer h3{
  font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.3;letter-spacing:-.028em;
  color:var(--harbor);margin:0 0 .72em;
}
.abio-closer p{ font-size:var(--fs-body-sm);line-height:1.7;color:var(--ink);margin:0 0 .72em; }
.abio-closer p:last-child{ margin-bottom:0; }

@media (max-width:900px){
  .abio-grid{ grid-template-columns:1fr;gap:0; }
  .abio-photo{ margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:0; }
  .abio-photo .mount{ height:clamp(280px,58vw,400px); }
  .abio-text{ margin:clamp(-40px,-6vw,-24px) 0 0; }
}
@media (max-width:520px){
  .abio-grid{ padding-left:20px;padding-right:20px; }
  .abio-photo{ margin-left:-20px;margin-right:-20px; }
}

/* ---- Blog ------------------------------------------------------------- */
.post-list{ display:grid;gap:clamp(24px,3vw,40px);max-width:900px; }
.post-card{
  display:grid;grid-template-columns:minmax(200px,34%) 1fr;
  gap:clamp(20px,2.6vw,34px);align-items:start;
}
.post-card:only-child,.post-card.no-shot{ grid-template-columns:1fr; }
.post-shot{ display:block;position:relative;overflow:hidden;background:var(--stone-pale); }
.post-shot img{ display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1); }
.post-card:hover .post-shot img{ transform:scale(1.04); }
.post-date{
  font-family:var(--font-head);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stone-text);
  margin:0 0 8px;
}
.post-body h2{
  font-size:clamp(1.24rem,2vw,1.56rem);line-height:1.24;letter-spacing:-.03em;
  margin:0 0 .5em;
}
.post-body h2 a{ color:var(--harbor-ink);text-decoration:none;transition:color .25s ease; }
.post-body h2 a:hover{ color:var(--harbor); }
.post-excerpt p{ font-size:var(--fs-body-sm);line-height:1.7;color:var(--ink-soft);margin:0 0 .72em; }
.post-more{
  font-family:var(--font-head);font-size:.9rem;font-weight:600;
  color:var(--clay-deep);text-decoration:none;display:inline-flex;
  align-items:center;gap:8px;min-height:44px;
}
.post-more .arw{ transition:transform .34s cubic-bezier(.22,1,.36,1); }
.post-more:hover .arw{ transform:translateX(4px); }
.post-nav{ margin-top:var(--sec-y-tight); }
.post-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 10px;margin-right:6px;
  font-family:var(--font-head);font-size:.95rem;font-weight:600;
  color:var(--harbor);text-decoration:none;
}
.post-nav .page-numbers.current{ background:var(--harbor);color:var(--linen-warm); }
.single-post .post-content{ max-width:760px; }

/* ---- Inner-page responsive ------------------------------------------- */
@media (max-width:900px){
  .svc-img-section,.svc-img-section.svc-img-left{ grid-template-columns:1fr; }
  .svc-img-section.svc-img-left .svc-img-col{ order:0; }
  .svc-img-col{ position:relative;min-height:0;aspect-ratio:4/3; }
  .svc-img-col img{ position:absolute;inset:0; }
  .post-card{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .inner-hero-bg{ height:clamp(210px,38vw,290px); }
  .inner-page-title{ margin-top:-58px;padding:20px 28px 22px; }
  .inner-page-title::after{ left:28px; }
}
@media (max-width:520px){
  .inner-hero-content{ padding-left:20px;padding-right:20px; }
  .inner-page-title{ margin-top:-44px;padding:18px 22px 20px;display:block; }
  .inner-page-title::after{ left:22px;width:44px; }
}

/* Touch floors for the inner-page elements introduced above. */
@media (hover:none) and (pointer:coarse){
  .post-date,.single-post .inner-hero-content .post-date,
  .post-excerpt p,.post-more,.rd-list a,.rd-a p{ font-size:.95rem; }
  .post-date,.single-post .inner-hero-content .post-date{ font-size:.88rem;letter-spacing:.12em; }
  .post-more,.post-nav .page-numbers,.service-body a,.rd-a a{ min-height:44px; }
  .post-more,.rd-a a,.service-body a{ display:inline-flex;align-items:center; }
}

@media (hover:none) and (pointer:coarse){
  .abio-name{ font-size:14px;letter-spacing:.12em; }
}