:root{
    --navy:#15263D; --teal:#27C5CF; --warm:#ADA9A9; --mid:#8D8D8D; --light:#EBECED;
    --paper:#FFFFFF; --paper2:#F7F8F9;
    --serif:'Fraunces',Georgia,'Times New Roman',serif;
    --label:'Manrope',system-ui,Arial,sans-serif;
    --body:'Inter',system-ui,Arial,sans-serif;

    /* fluid type, held inside the brand scale */
    --t-display:clamp(2.5rem,6.2vw,4rem);      /* 40 to 64 */
    --t-h2:clamp(2rem,3.6vw,2.5rem);           /* 32 to 40 */
    --t-h3:clamp(1.5rem,2.1vw,1.75rem);        /* 24 to 28 */
    --t-body:clamp(1rem,1.05vw,1.125rem);      /* 16 to 18 */
    --t-lede:clamp(1.125rem,1.5vw,1.3125rem);  /* 18 to 21 */
    --t-cap:0.875rem;                          /* 14 */
    --t-eyebrow:0.75rem;                       /* 12 */

    /* fluid rhythm, brand section padding 80 to 120 */
    --pad-sec:clamp(5rem,9vw,7.5rem);
    --gut:clamp(1.25rem,4vw,2rem);
    --ease:cubic-bezier(.22,.61,.36,1);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--body);font-size:var(--t-body);line-height:1.6;
    color:var(--navy);background:var(--paper);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit}
  img{max-width:100%;display:block}
  ::selection{background:var(--teal);color:var(--navy)}
  :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}

  .wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
  section,.band{padding-block:var(--pad-sec)}
  [id]{scroll-margin-top:84px}

  /* grain, the granular half of the look. Sits over flat navy, never over a photo. */
  .grain{position:relative;isolation:isolate}
  .grain::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .grain > *{position:relative;z-index:2}

  /* ---------- type ---------- */
  h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.04}
  h1{font-size:var(--t-display)}
  h2{font-size:var(--t-h2);line-height:1.08}
  h3{font-size:var(--t-h3);line-height:1.15}
  .eyebrow{
    font-family:var(--label);font-weight:700;font-size:var(--t-eyebrow);
    letter-spacing:.24em;text-transform:uppercase;color:var(--teal);
  }
  .lead{font-size:var(--t-lede);color:var(--mid);max-width:46ch;margin-top:1.5rem;text-wrap:pretty}
  .on-navy .lead{color:#B9C4D2}
  p{text-wrap:pretty}

  /* ---------- motion, single fade and rise, purposeful only ---------- */
  @media (prefers-reduced-motion:no-preference){
    html.js [data-reveal]{opacity:0;transform:translate3d(0,18px,0);
      transition:opacity .8s var(--ease),transform .8s var(--ease)}
    html.js [data-reveal].in{opacity:1;transform:none}
    html.js [data-reveal][data-delay="1"]{transition-delay:.09s}
    html.js [data-reveal][data-delay="2"]{transition-delay:.18s}
    html.js [data-reveal][data-delay="3"]{transition-delay:.27s}
  }

  /* ---------- nav ---------- */
  header.site{
    position:sticky;top:0;z-index:60;
    transition:background .45s var(--ease),backdrop-filter .45s var(--ease);
  }
  header.site.scrolled{background:rgba(21,38,61,.86);backdrop-filter:blur(14px) saturate(1.2)}
  .navrow{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    max-width:1200px;margin:0 auto;padding:1.15rem var(--gut);
  }
  .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;flex:0 0 auto}
  .brand img{width:36px;height:36px;border-radius:50%}
  .brand .word{
    font-family:var(--label);font-weight:800;font-size:.9375rem;
    letter-spacing:.06em;color:#fff;white-space:nowrap;
  }
  nav.links{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2rem)}
  nav.links a:not(.btn){
    font-family:var(--label);font-weight:600;font-size:.875rem;color:#fff;
    text-decoration:none;position:relative;padding-block:.2rem;
  }
  /* underline draws in from the left rather than snapping on */
  nav.links a:not(.btn)::after{
    content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
    background:var(--teal);transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease);
  }
  nav.links a:not(.btn):hover::after,nav.links a:not(.btn):focus-visible::after{transform:scaleX(1)}

  .btn{
    font-family:var(--label);font-weight:700;font-size:.8125rem;letter-spacing:.04em;
    text-transform:uppercase;padding:.8rem 1.35rem;border-radius:2px;
    text-decoration:none;display:inline-block;border:1px solid transparent;
    transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
    white-space:nowrap;
  }
  .btn.teal{background:var(--teal);color:var(--navy)}
  .btn.teal:hover{background:#fff}
  .btn.ghost{border-color:rgba(255,255,255,.45);color:#fff}
  .btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
  .btn.navy{border-color:var(--navy);color:var(--navy)}
  .btn.navy:hover{background:var(--navy);color:#fff}

  .menu-btn{
    display:none;background:none;border:0;cursor:pointer;padding:.5rem;
    width:44px;height:44px;align-items:center;justify-content:center;
  }
  .menu-btn span{display:block;width:22px;height:1.5px;background:#fff;position:relative;transition:background .3s var(--ease)}
  .menu-btn span::before,.menu-btn span::after{
    content:"";position:absolute;left:0;width:22px;height:1.5px;background:#fff;
    transition:transform .38s var(--ease);
  }
  .menu-btn span::before{top:-6.5px}
  .menu-btn span::after{top:6.5px}
  .menu-btn[aria-expanded="true"] span{background:transparent}
  .menu-btn[aria-expanded="true"] span::before{transform:translateY(6.5px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] span::after{transform:translateY(-6.5px) rotate(-45deg)}

  @media(max-width:860px){
    .menu-btn{display:flex}
    header.site.open{background:var(--navy)}
    nav.links{
      position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
      gap:0;padding:0 var(--gut);background:var(--navy);
      max-height:0;overflow:hidden;transition:max-height .45s var(--ease),padding .45s var(--ease);
    }
    header.site.open nav.links{max-height:70vh;padding-block:.5rem 1.75rem}
    nav.links a:not(.btn){width:100%;padding-block:.95rem;font-size:1.0625rem}
    nav.links .btn{margin-top:.75rem;text-align:center}
  }
  /* on a narrow screen the two hero buttons read better stacked and matched */
  @media(max-width:32rem){
    .ctas{flex-direction:column;align-items:stretch}
    .ctas .btn{text-align:center}
  }

  /* ---------- hero ---------- */
  .hero{
    background:var(--navy);color:#fff;
    margin-top:-76px;
    padding-top:calc(76px + clamp(1.5rem,3.5vw,2.75rem));
    padding-bottom:clamp(4rem,8vw,6rem);
  }
  .heroGrid{
    display:grid;grid-template-columns:1.12fr .88fr;
    gap:clamp(2.5rem,5vw,4rem);align-items:center;
  }
  .hero h1{margin-top:.85rem;max-width:16ch}
  .hero .lede{font-size:var(--t-lede);color:#C6D0DD;max-width:42ch;margin-top:1.35rem}
  .ctas{display:flex;gap:.9rem;margin-top:1.9rem;flex-wrap:wrap}
  .hero .shot{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:1/1}
  .hero .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .hero .shot:hover img{transform:scale(1.035)}
  .credit{
    position:absolute;left:.75rem;bottom:.75rem;font-family:var(--label);
    font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.9);
    background:rgba(21,38,61,.72);padding:.3rem .6rem;border-radius:2px;
  }
  @media(max-width:900px){.heroGrid{grid-template-columns:1fr;gap:2.5rem}.hero .shot{aspect-ratio:3/2}}

  /* ---------- proof, no rules, air does the separating ---------- */
  .proof{padding-block:clamp(3rem,5.5vw,4.5rem)}
  /* not scoped to .proof, the client tiers use this on their own page too */
  .lbl{
    font-family:var(--label);font-weight:700;font-size:var(--t-eyebrow);
    letter-spacing:.2em;text-transform:uppercase;color:var(--mid);
    display:block;
  }
  .proof .names{
    display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3.5vw,2.75rem);margin-top:1.35rem;
  }
  /* current and recent sit apart on air, not on a rule */
  .prooflist + .prooflist{margin-top:clamp(2rem,3.5vw,2.75rem)}

  /* Client logo wall. Every mark arrives a different colour and a different
     shape, so each one is knocked back to a single tone and fitted into a
     common optical box rather than a uniform height. */
  .logos{
    display:flex;flex-wrap:wrap;align-items:center;
    gap:clamp(1.5rem,3.5vw,2.75rem);margin-top:1.5rem;
  }
  .logos img{
    width:clamp(6rem,11vw,8.5rem);height:2.75rem;
    object-fit:contain;object-position:left center;
    filter:brightness(0);opacity:.45;
    transition:opacity .4s var(--ease);
  }
  .logos img:hover{opacity:.85}
  /* a near square mark fitted to the same box reads much smaller than a
     wide wordmark, so it gets more height back */
  .logos img.stacked{height:4rem}
  /* a raster mark that came on a solid white ground has no alpha to knock
     back, so the white is multiplied out instead */
  .logos img.onwhite{
    filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;opacity:.7;
  }
  .logos img.onwhite:hover{opacity:1}
  /* a name with no mark yet, set so it sits level with the logos beside it */
  .logos .asword{
    font-family:var(--label);font-weight:700;
    font-size:clamp(1rem,1.6vw,1.1875rem);color:var(--navy);opacity:.55;
    align-self:center;transition:opacity .4s var(--ease);
  }
  .logos .asword:hover{opacity:1}
  .proof .names span{
    font-family:var(--label);font-weight:700;
    font-size:clamp(1rem,1.6vw,1.1875rem);color:var(--navy);opacity:.62;
    transition:opacity .4s var(--ease);
  }
  .proof .names:hover span{opacity:.34}
  .proof .names span:hover{opacity:1}

  /* ---------- pillars, open columns, no boxes ---------- */
  .pillars{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
    gap:clamp(2.25rem,4.5vw,3.5rem);margin-top:clamp(3rem,5vw,4rem);
  }
  .pillar .num{
    font-family:var(--serif);font-weight:600;font-size:clamp(2.75rem,4.5vw,3.5rem);
    color:var(--teal);line-height:1;letter-spacing:-.03em;
  }
  .pillar h3{margin-top:1.1rem}
  .pillar p{margin-top:.85rem;color:var(--mid);max-width:34ch}
  /* once the three sit side by side, hold the headings to two lines so the copy starts level */
  @media(min-width:64rem){.pillar h3{min-height:2.3em}}

  /* ---------- founder ---------- */
  .founder{background:var(--paper2)}
  .frow{display:grid;grid-template-columns:minmax(0,10.5rem) 1fr;gap:clamp(1.75rem,4vw,3rem);align-items:center}
  .frow img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
  .frow h2{margin-top:.6rem}
  @media(max-width:620px){.frow{grid-template-columns:1fr}.frow img{max-width:11rem}}

  /* ---------- method ---------- */
  .method{background:var(--navy);color:#fff}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
  @media(max-width:900px){.grid2{grid-template-columns:1fr;gap:2.75rem}}
  .method h2{color:#fff}
  .moves{margin-top:clamp(2.25rem,4vw,3rem);display:grid;gap:clamp(1.6rem,2.6vw,2.1rem)}
  .move{display:grid;grid-template-columns:2.75rem 1fr;gap:1.1rem;align-items:start}
  .move .num{
    font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--teal);
    line-height:1.1;letter-spacing:-.02em;
  }
  .move h4{font-family:var(--label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.8125rem;color:#fff}
  .move p{font-size:var(--t-cap);color:#B9C4D2;margin-top:.4rem;max-width:38ch}
  .quoteline{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.5rem);color:#fff;margin-top:clamp(2.25rem,4vw,3rem)}
  .quoteline b{color:var(--teal);font-style:normal;font-weight:600}
  .method .shot{overflow:hidden;border-radius:2px;aspect-ratio:4/5}
  .method .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .method .shot:hover img{transform:scale(1.035)}

  /* ---------- case study teaser, photo + card ---------- */
  .teaser{
    position:relative;overflow:hidden;border-radius:2px;min-height:clamp(24rem,44vw,30rem);
    display:flex;align-items:flex-end;margin-top:clamp(2.5rem,4.5vw,3.5rem);
  }
  .teaser > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
  .teaser:hover > img{transform:scale(1.04)}
  .teaser .card{
    position:relative;z-index:2;margin:clamp(1rem,2.5vw,1.75rem);
    background:var(--navy);color:#fff;border-radius:2px;
    padding:clamp(1.6rem,3vw,2.15rem);max-width:27rem;
  }
  .teaser .card .lbl{font-family:var(--label);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.6875rem;color:var(--teal)}
  .teaser .card h3{margin-top:.7rem}
  .teaser .card p{font-size:var(--t-cap);color:#B9C4D2;margin-top:.75rem}
  .readlink{
    font-family:var(--label);font-weight:700;font-size:.8125rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--teal);text-decoration:none;
    margin-top:1.25rem;display:inline-flex;align-items:center;gap:.5rem;
  }
  .readlink .arw{transition:transform .4s var(--ease)}
  .readlink:hover .arw{transform:translateX(5px)}

  /* ---------- quote band ---------- */
  .quoteband{background:var(--navy);color:#fff;text-align:center}
  .quoteband p{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(1.6rem,3.6vw,2.25rem);line-height:1.28;
    max-width:20ch;margin:0 auto;
  }
  .quoteband p b{color:var(--teal);font-style:normal;font-weight:600}
  .quoteband .who{
    font-family:var(--label);font-weight:700;font-size:var(--t-eyebrow);
    letter-spacing:.16em;text-transform:uppercase;color:var(--warm);margin-top:1.75rem;
  }

  /* ---------- cta ---------- */
  .ctaband{background:var(--teal);color:var(--navy);text-align:center}
  .ctaband h2{color:var(--navy)}
  .ctaband p{margin-top:1rem;color:#0F3B3F;font-size:var(--t-lede)}
  .ctaband .btn{margin-top:1.9rem}
  .ctaband a.line{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(21,38,61,.35);transition:border-color .35s var(--ease)}
  .ctaband a.line:hover{border-color:var(--navy)}

  /* ---------- footer ---------- */
  footer.site{background:var(--navy);color:#B9C4D2;padding-block:clamp(3.5rem,6vw,5rem) 2rem}
  .fgrid{
    display:grid;grid-template-columns:2fr repeat(3,1fr);
    gap:clamp(2rem,4vw,2.75rem);
  }
  @media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:420px){.fgrid{grid-template-columns:1fr}}
  footer.site .tagline{font-size:var(--t-cap);color:#8FA0B5;max-width:30ch;margin-top:1rem}
  footer.site h5{font-family:var(--label);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.6875rem;color:var(--teal);margin-bottom:1rem}
  footer.site ul{list-style:none;display:grid;gap:.6rem}
  footer.site li{font-size:var(--t-cap)}
  footer.site a{text-decoration:none;color:#B9C4D2;transition:color .35s var(--ease)}
  footer.site a:hover{color:var(--teal)}
  .fbottom{
    margin-top:clamp(3rem,5vw,4rem);display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:.6rem;font-size:.75rem;color:#7E8FA4;font-family:var(--label);
    letter-spacing:.04em;
  }

  /* ===================== case study page ===================== */

  /* full bleed cover, navy scrim so the type has a ground to sit on */
  .cover{
    position:relative;overflow:hidden;background:var(--navy);
    min-height:clamp(24rem,58vh,34rem);display:flex;align-items:flex-end;
    margin-top:-76px;padding-top:76px;
  }
  .cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* dark at the top so the nav reads, light through the middle so the photo does,
     dark again at the foot so the headline has a ground */
  .cover::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,
      rgba(21,38,61,.78) 0%,
      rgba(21,38,61,.22) 20%,
      rgba(21,38,61,.55) 60%,
      rgba(21,38,61,.92) 100%);
  }
  .cover .wrap{position:relative;z-index:2;color:#fff;padding-bottom:clamp(2.5rem,5vw,4rem)}
  .cover h1{margin-top:.85rem;max-width:18ch;font-size:clamp(2.125rem,5vw,3.25rem)}

  /* brief list, a teal tick of a dot rather than a ruled row */
  .pts{list-style:none;margin-top:clamp(2rem,3.5vw,2.75rem);display:grid;gap:1.15rem;max-width:60ch}
  .pts li{position:relative;padding-left:1.75rem}
  .pts li::before{
    content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
    border-radius:50%;background:var(--teal);
  }

  /* the three moves that mattered, open columns to match the home page */
  .moments{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
    gap:clamp(2.25rem,4.5vw,3.25rem);margin-top:clamp(2.5rem,4.5vw,3.5rem);
  }
  .moment .step{
    font-family:var(--label);font-weight:800;font-size:.6875rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--teal);
  }
  .moment h3{margin-top:.85rem;font-size:clamp(1.25rem,1.8vw,1.5rem)}
  .moment p{margin-top:.7rem;color:var(--mid);max-width:34ch}

  /* one honest number, big */
  .databand{background:var(--paper2);text-align:center}
  .stat{
    font-family:var(--serif);font-weight:600;color:var(--teal);line-height:.95;
    font-size:clamp(3.5rem,10vw,6rem);letter-spacing:-.03em;
  }
  .databand .sub{
    font-family:var(--label);font-weight:700;font-size:var(--t-eyebrow);
    letter-spacing:.16em;text-transform:uppercase;color:var(--mid);margin-top:1.1rem;
  }
  .databand .note2{color:var(--mid);max-width:52ch;margin:1.75rem auto 0;font-size:var(--t-cap)}

  /* subpage cta sits on navy so the teal button stays the single accent */
  .ctaband.dark{background:var(--navy);color:#fff}
  .ctaband.dark h2{color:#fff}
  .ctaband.dark p{color:#B9C4D2}
  .ctaband.dark a.line{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
  .ctaband.dark a.line:hover{border-bottom-color:#fff}

  /* ===================== seasonal front page ===================== */
  .season{
    position:relative;min-height:100svh;display:grid;
    grid-template-rows:auto 1fr auto;overflow:hidden;background:var(--navy);
    /* it is a <section>, so the global section padding has to be cleared or
       the three rows sit centred with dead space above and below */
    padding-block:0;
  }
  /* the picture wrapper has to be the positioned box, otherwise it collapses
     to nothing and takes the absolutely positioned image down with it */
  .season > picture{position:absolute;inset:0;z-index:0}
  .season .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  /* Dark at the head for the nav and at the foot for the headline, but kept
     off the middle so the fruit stays vivid. The mark earns its own contrast
     by being large rather than by drowning the photograph in scrim. */
  /* no gradient scrims at all: the photograph carries the page raw */
  .season > *{position:relative;z-index:2}
  .season .navrow{padding-block:1.15rem}
  .season .brand .word{color:#fff}
  .seasonMid{display:grid;place-items:center;align-content:center;padding-inline:var(--gut);position:relative}
  /* no scrim behind the mark, the dark bar photograph is its own ground */
  .markline{position:relative;z-index:1}
  /* the roundel carries type inside it, so it needs real size to read.
     Below about 10rem the inner lettering closes up. */
  .dropmark{width:clamp(10rem,26vw,19rem);height:auto;position:relative;z-index:1}
  @media (prefers-reduced-motion:no-preference){
    html.js .dropmark{opacity:0;transform:translate3d(0,-2.5rem,0) scale(.96);
      transition:opacity 1.1s var(--ease),transform 1.15s var(--ease)}
    html.js .dropmark.in{opacity:1;transform:none}
  }
  .seasonFoot{padding:0 var(--gut) clamp(2.5rem,6vw,4rem);color:#fff}
  .seasonFoot .inner{max-width:1200px;margin:0 auto;display:flex;
    align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
  .seasonFoot h1{font-size:clamp(2rem,4.4vw,3.125rem);max-width:15ch;margin-top:.7rem}
  .scrollcue{font-family:var(--label);font-weight:700;font-size:.6875rem;
    letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);
    display:inline-flex;align-items:center;gap:.6rem;text-decoration:none}
  .scrollcue .ln{display:block;width:2.5rem;height:1px;background:rgba(255,255,255,.55);
    transition:width .4s var(--ease)}
  .scrollcue:hover .ln{width:3.5rem}
  .seasonTag{position:absolute;top:50%;right:var(--gut);
    transform:translateY(-50%) rotate(90deg);transform-origin:right center;
    font-family:var(--label);font-weight:700;font-size:.625rem;letter-spacing:.3em;
    text-transform:uppercase;color:rgba(255,255,255,.6);z-index:2}
  @media(max-width:900px){.seasonTag{display:none}}

  /* ===================== inner page shell ===================== */
  /* inner pages open on navy so the sticky nav always has a ground */
  .pagehead{background:var(--navy);color:#fff;
    padding-block:calc(76px + clamp(3rem,6vw,4.5rem)) clamp(3rem,6vw,4.5rem);
    margin-top:-76px}
  .pagehead h1{margin-top:.85rem;max-width:18ch;font-size:clamp(2.25rem,5vw,3.5rem)}
  .pagehead .lead{color:#B9C4D2;margin-top:1.35rem}

  /* front page section links */
  .seclinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
    gap:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
  .seclink{text-decoration:none;display:block;padding-block:1.4rem 0}
  .seclink .n{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--teal);
    line-height:1;letter-spacing:-.02em}
  .seclink h3{margin-top:.9rem;transition:color .35s var(--ease)}
  .seclink p{margin-top:.6rem;color:var(--mid);font-size:var(--t-cap);max-width:32ch}
  .seclink:hover h3{color:var(--teal)}

  /* gallery */
  .gallery{columns:3 16rem;column-gap:clamp(.75rem,1.6vw,1.25rem);
    margin-top:clamp(2rem,4vw,3rem)}
  .gallery figure{break-inside:avoid;margin-bottom:clamp(.75rem,1.6vw,1.25rem);
    position:relative;overflow:hidden;border-radius:2px}
  .gallery img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease)}
  .gallery figure:hover img{transform:scale(1.04)}
  .gallery figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .8rem;
    font-family:var(--label);font-weight:700;font-size:.6875rem;letter-spacing:.1em;
    text-transform:uppercase;color:#fff;
    background:linear-gradient(to top,rgba(21,38,61,.85),rgba(21,38,61,0));
    opacity:0;transition:opacity .4s var(--ease);
  }
  .gallery figure:hover figcaption,.gallery figure:focus-within figcaption{opacity:1}

  /* blog list */
  .posts{display:grid;gap:clamp(2rem,4vw,3rem);margin-top:clamp(2rem,4vw,3rem);max-width:52rem}
  .post{text-decoration:none;display:block}
  .post .meta{font-family:var(--label);font-weight:700;font-size:var(--t-eyebrow);
    letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
  .post h3{margin-top:.7rem;transition:color .35s var(--ease)}
  .post p{margin-top:.7rem;color:var(--mid);max-width:52ch}
  .post:hover h3{color:var(--teal)}
  .placeholder{
    font-family:var(--label);font-weight:700;font-size:.625rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--warm);border:1px dashed var(--light);
    padding:.3rem .6rem;border-radius:2px;display:inline-block;margin-bottom:1rem;
  }

  /* ===================== v2: cool/urban rebuild ===================== */

  /* hero over a photograph. nav brand stays hidden until you scroll off it,
     so the opening is the mark alone, centred, the way David wants it */
  .overhero{position:sticky;top:0;background:none}
  .overhero .brand{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
  .overhero .brand .word{display:none}
  .overhero.scrolled{background:rgba(21,38,61,.9);backdrop-filter:blur(14px) saturate(1.15)}
  .overhero.scrolled .brand{opacity:1;pointer-events:auto}

  /* the tagline sits under the centred roundel, on the scrim */
  .markline{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(1.125rem,2.2vw,1.6rem);color:#fff;text-align:center;
    margin-top:1.1rem;position:relative;z-index:1;letter-spacing:.01em;
  }
  .markline b{color:var(--teal);font-style:normal;font-weight:600}

  /* full-bleed image band with a navy scrim and text over it. the workhorse
     of the cool look: a room or a portrait, words on a scrim, no card */
  .imgband{
    position:relative;overflow:hidden;color:#fff;isolation:isolate;
    min-height:clamp(26rem,52vw,40rem);display:flex;align-items:flex-end;
  }
  .imgband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    transition:transform 1.6s var(--ease)}
  .imgband:hover > img{transform:scale(1.04)}
  .imgband::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(21,38,61,.92) 0%,rgba(21,38,61,.45) 40%,rgba(21,38,61,.1) 75%);}
  .imgband.left::after{
    background:linear-gradient(to right,rgba(21,38,61,.92) 0%,rgba(21,38,61,.6) 42%,rgba(21,38,61,.05) 80%);}
  .imgband .wrap{position:relative;z-index:2;padding-block:clamp(2.5rem,5vw,4rem)}
  .imgband h2{color:#fff}
  .imgband .lead{color:#D6DEE8;max-width:40ch}
  .imgband .eyebrow{color:var(--teal)}

  /* real gallery: masonry, captions rise on hover */
  .gallery{columns:3 17rem;column-gap:clamp(.6rem,1.4vw,1rem);margin-top:clamp(2rem,4vw,3rem)}
  .gallery figure{break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1rem);
    position:relative;overflow:hidden;border-radius:2px;background:var(--navy)}
  .gallery img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
  .gallery figure:hover img{transform:scale(1.05)}
  .gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem .9rem .8rem;
    font-family:var(--label);font-weight:700;font-size:.6875rem;letter-spacing:.12em;
    text-transform:uppercase;color:#fff;
    background:linear-gradient(to top,rgba(21,38,61,.9),rgba(21,38,61,0));
    opacity:0;transform:translateY(.4rem);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .gallery figure:hover figcaption{opacity:1;transform:none}

  /* blog: image + text cards */
  .posts{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,4vw,3.5rem);max-width:60rem}
  .post{display:grid;grid-template-columns:minmax(0,18rem) 1fr;gap:clamp(1.5rem,3vw,2.5rem);
    align-items:center;text-decoration:none}
  .post .shot{overflow:hidden;border-radius:2px;aspect-ratio:5/4}
  .post .shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
  .post:hover .shot img{transform:scale(1.05)}
  .post .cat{font-family:var(--label);font-weight:800;font-size:.625rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--teal)}
  .post h3{margin-top:.6rem;transition:color .35s var(--ease)}
  .post p{margin-top:.7rem;color:var(--mid);max-width:48ch}
  .post .more{font-family:var(--label);font-weight:700;font-size:.75rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--navy);margin-top:1rem;display:inline-block}
  .post:hover h3{color:var(--teal)}
  @media(max-width:640px){.post{grid-template-columns:1fr}.post .shot{aspect-ratio:16/10}}

  /* associates note, a quiet band on navy */
  .assoc{background:var(--navy);color:#fff}
  .assoc h2{color:#fff}
  .assoc .lead{color:#B9C4D2;max-width:52ch}

  /* method diagram sits on light, contained */
  .diagram{background:#fff;border-radius:2px;padding:clamp(1.5rem,3vw,2.5rem);
    display:grid;place-items:center}
  .diagram img{width:100%;max-width:30rem;height:auto}

  /* rule pairs on the oysters post: oyster rule beside its life rule */
  .rules{display:grid;gap:clamp(1.75rem,3.5vw,2.5rem);margin-top:clamp(2.5rem,4vw,3.5rem)}
  .rulepair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
  @media(max-width:700px){.rulepair{grid-template-columns:1fr;gap:.9rem}}
  .rule-col .rlbl{font-family:var(--label);font-weight:800;font-size:.625rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:.45rem}
  .rule-col p{max-width:44ch}
  .rulepair + .rulepair{padding-top:clamp(1.75rem,3.5vw,2.5rem)}