/* Salt Public Affairs — v3 experimental stylesheet
   Direction: warm paper ground, serif + sans pairing (Source Serif display,
   Calibri body), inset rounded panels, restrained lower headlines,
   scroll-driven motion on the homepage. Inner-page section layouts still
   carry inline styles from the design source and read the tokens here. */

@font-face{font-family:"Calibri Brand";src:url("../fonts/calibri-light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Calibri Brand";src:url("../fonts/calibri-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Calibri Brand";src:url("../fonts/calibri-bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-upright.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}

:root{
  /* brand */
  --color-accent:#3272b0;
  --color-accent-100:#eef4fa;
  --color-accent-200:#d8e6f3;
  --color-accent-300:#b6d0e9;
  --color-accent-400:#6aa3d4;
  --color-accent-600:color-mix(in srgb,var(--color-accent) 84%,#000);
  --color-accent-700:color-mix(in srgb,var(--color-accent) 66%,#000);
  --salt-sky:#40a3dc;

  /* v3 palette: paper, ink, sand */
  --paper:#f6f4ef;
  --ink:#1f1d1b;
  --ink-soft:color-mix(in srgb,var(--ink) 64%,var(--paper));
  --ink-faint:color-mix(in srgb,var(--ink) 46%,var(--paper));
  --sand:#e9dfd0;
  --sand-deep:#d8c6ab;
  --panel:#22201e;
  --panel-text:rgba(255,255,255,.72);

  /* neutrals read by the inner pages' inline styles */
  --color-bg:var(--paper);
  --color-surface:#eeeae2;
  --color-text:var(--ink);
  --color-divider:color-mix(in srgb,var(--ink) 22%,transparent);
  --color-neutral-100:#f9f7f3;
  --color-neutral-200:#ece8e0;
  --color-neutral-300:#dcd6cb;
  --color-neutral-400:#bfb8ac;
  --color-neutral-500:#9d968b;
  --color-neutral-600:#7e786e;
  --color-neutral-700:#605b53;
  --color-neutral-800:#45413b;
  --color-neutral-900:#2d2a26;
  --map-ground:var(--panel);

  /* type — serif weight 370 sits visually between Source Serif Light and Regular,
     chosen to match the colour of Calibri Light (variable font, 300–400 available) */
  --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-heading:"Calibri Brand",Calibri,Candara,"Segoe UI",system-ui,sans-serif;
  --font-body:"Calibri Brand",Calibri,Candara,"Segoe UI",system-ui,sans-serif;

  /* shape */
  --r-panel:clamp(22px,3vw,40px);
  --r-photo:clamp(16px,2vw,28px);
  --r-btn:12px;
  --panel-x:clamp(10px,1.5vw,24px);   /* inset of dark/sand panels from the page edge */

  /* layout */
  --salt-header-h:132px;
  --wrap-max:1440px;
  --gutter:clamp(20px,4vw,64px);
  --section-y:clamp(72px,12vh,150px);
}

/* ── base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;padding-top:var(--salt-header-h);
  background:var(--paper);color:var(--ink);
  font:400 16px/1.6 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:300;line-height:1.12;letter-spacing:-.015em;margin:0}
p{margin:0}
img{display:block;max-width:100%}
a{color:var(--color-accent-600);text-decoration:none}
a:hover{color:var(--color-accent-700)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.grayscale{filter:grayscale(1) contrast(1.08);border-radius:var(--r-photo);overflow:hidden}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* hover states for elements that keep inline styles */
.hv-accent:hover{color:var(--color-accent-600)!important}
.hv-accent-700:hover{color:var(--color-accent-700)!important}
.hv-white:hover{color:#fff!important}
.hv-sky:hover{color:var(--salt-sky)!important}
.hv-bg-accent-400:hover{background:var(--color-accent-400)!important}
.hv-bg-white14:hover{background:rgba(255,255,255,.14)!important}

/* scroll reveal (armed by site.js; content stays visible without JS) */
.reveal-armed{opacity:0;transform:translateY(18px);transition:opacity 700ms cubic-bezier(.2,.6,.2,1),transform 700ms cubic-bezier(.2,.6,.2,1)}
.reveal-armed.reveal-done{opacity:1;transform:none}

/* image placeholder — replaced with real photography before launch */
.ph{
  width:100%;height:100%;min-height:inherit;
  display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--sand);border-radius:var(--r-photo);
}
.ph span{max-width:32em;font:400 13px/1.5 var(--font-body);color:var(--color-neutral-800);text-align:center}

/* ── shared type ──────────────────────────────────────────────────── */
.intro{font:370 clamp(22px,2.05vw,29px)/1.32 var(--font-serif);color:var(--ink);letter-spacing:-.005em}
.intro em{font-style:italic}
.lede{max-width:34em;font:400 clamp(16px,1.2vw,18px)/1.65 var(--font-body);color:var(--ink-soft)}
.kicker{font:400 clamp(12px,.95vw,13px)/1.4 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent-600)}
.text-link{
  display:inline-flex;align-items:center;gap:10px;
  font:400 clamp(15px,1.1vw,17px)/1 var(--font-body);color:var(--ink);
}
.text-link::after{content:"→";transition:transform 220ms ease}
.text-link:hover{color:var(--color-accent-600)}
.text-link:hover::after{transform:translateX(4px)}
.btn-solid{
  display:inline-block;background:var(--ink);color:var(--paper);
  font:400 clamp(16px,1.2vw,18px)/1 var(--font-body);
  padding:21px 36px;border:0;border-radius:var(--r-btn);cursor:pointer;
  transition:background 200ms ease,transform 200ms ease;
}
.btn-solid:hover{background:var(--color-accent);color:#fff;transform:translateY(-1px)}

/* ── header ───────────────────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px}
.site-logo{display:flex;align-items:center;flex:none}
.site-logo img{height:90px;width:auto}
.menu-btn{
  display:flex;align-items:center;gap:14px;background:none;border:0;padding:10px 0;cursor:pointer;
  color:var(--ink);font:370 clamp(17px,1.2vw,19px)/1 var(--font-serif);
}
.menu-btn:hover{color:var(--color-accent-600)}
.menu-btn__bars{display:flex;flex-direction:column;gap:5px}
.menu-btn__bars i{display:block;width:26px;height:2px;background:currentColor}
.menu-btn__x{position:relative;width:26px;height:16px}
.menu-btn__x i{position:absolute;top:7px;left:0;width:26px;height:2px;background:currentColor;transform:rotate(45deg)}
.menu-btn__x i+i{transform:rotate(-45deg)}

/* ── full-screen menu ─────────────────────────────────────────────── */
@keyframes saltMenuIn{from{opacity:0}to{opacity:1}}
@keyframes saltItemIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.menu{
  position:fixed;inset:0;z-index:80;background:var(--panel);
  display:flex;flex-direction:column;overflow:hidden;overscroll-behavior:contain;
  animation:saltMenuIn 320ms ease both;
}
/* the menu only scrolls on very short viewports; otherwise the items' entrance
   animation would flash a scrollbar as they rise into place */
@media (max-height:620px){.menu{overflow-y:auto}}
.menu[hidden]{display:none}
.menu__top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;flex:none}
.menu__top img{height:90px;width:auto;filter:brightness(0) invert(1)}
.menu__top .menu-btn{color:#fff}
.menu__top .menu-btn:hover{color:var(--salt-sky)}
.menu__nav{
  flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(20px,5vh,72px);padding-bottom:clamp(24px,6vh,90px);
}
.menu__nav a{
  display:block;padding:clamp(6px,1.2vh,16px) 0;
  font:370 clamp(26px,min(5.2vw,7.8vh),73px)/1.22 var(--font-serif);letter-spacing:-.005em;
  color:var(--color-neutral-400);
  animation:saltItemIn 460ms cubic-bezier(.22,.61,.24,1) both;
}
.menu__nav a:nth-child(1){animation-delay:40ms}
.menu__nav a:nth-child(2){animation-delay:100ms}
.menu__nav a:nth-child(3){animation-delay:160ms}
.menu__nav a:nth-child(4){animation-delay:220ms}
.menu__nav a:nth-child(5){animation-delay:280ms}
.menu__nav a:hover{color:#fff}
.menu__nav a[aria-current="page"]{color:#fff;font-style:italic}
.menu__nav a.menu__contact{color:var(--salt-sky)}
.menu__nav a.menu__contact:hover{color:#fff}
.menu__foot{
  width:100%;display:flex;flex-wrap:wrap;gap:12px clamp(28px,5vw,72px);flex:none;
  padding-bottom:clamp(28px,5vh,56px);
  animation:saltItemIn 460ms cubic-bezier(.22,.61,.24,1) 340ms both;
}
.menu__foot a{font:400 clamp(14px,1.1vw,16px)/1.5 var(--font-body);color:#fff}
.menu__foot a:hover{color:var(--salt-sky)}

/* ── inset panels ─────────────────────────────────────────────────── */
.panel{
  position:relative;z-index:1;
  margin-left:var(--panel-x);margin-right:var(--panel-x);
  border-radius:var(--r-panel);overflow:hidden;
}
.panel--dark{background:var(--panel);color:#fff}
.panel--sand{background:var(--sand);color:var(--ink)}
.panel--dark .intro{color:#fff}
.panel--dark .lede{color:var(--panel-text)}
/* content column inside a panel: same left edge and width as .wrap outside it */
.panel-wrap{max-width:calc(var(--wrap-max) - 2*var(--panel-x));margin-left:auto;margin-right:auto;padding-left:calc(var(--gutter) - var(--panel-x));padding-right:calc(var(--gutter) - var(--panel-x))}
.panel__in{padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(56px,9vh,110px)}

/* ── footer ───────────────────────────────────────────────────────── */
.site-footer{background:var(--panel);color:var(--color-neutral-500);margin-top:var(--section-y)}
.site-footer__in{
  padding-top:clamp(72px,11vh,120px);padding-bottom:clamp(56px,8vh,88px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(24px,3vw,48px);
  font:400 clamp(16px,1.2vw,18px)/1.5 var(--font-body);
}
.site-footer__logo{height:77px;width:auto;filter:brightness(0) invert(1)}
.site-footer__col--brand{padding-right:clamp(24px,5vw,96px)}
.site-footer__tag{margin-top:34px;margin-bottom:28px;max-width:18em;line-height:1.7}
.site-footer nav{display:flex;flex-direction:column;gap:14px}
.site-footer a{color:var(--color-neutral-300)}
.site-footer a:hover{color:#fff}
.site-footer__li{display:inline-flex;align-items:center;gap:8px}
.site-footer__li svg{width:17px;height:17px;fill:currentColor;display:block}
.site-footer__contact{line-height:1.8}
.site-footer__legal{padding-bottom:34px}
.site-footer__legal div{
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
  font:400 clamp(12px,.95vw,13px)/1.4 var(--font-body);
}

/* ── contact form ─────────────────────────────────────────────────── */
.field>label{display:block;margin-bottom:6px}
.input{
  width:100%;min-height:40px;padding:11px 14px;
  color:var(--ink);caret-color:var(--color-accent);
  background:var(--paper);border:1px solid var(--color-divider);border-radius:10px;
}
.input:hover{border-color:color-mix(in srgb,var(--ink) 50%,transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
textarea.input{min-height:90px;resize:vertical}
.form-status{font:400 clamp(14px,1.05vw,15px)/1.6 var(--font-body);color:var(--ink-soft)}
.form-status.is-ok{color:var(--color-accent-700)}

/* inner pages: page titles pick up the serif even though their size is set inline */
main h1[style]{font-family:var(--font-serif)!important;letter-spacing:-.01em!important}

/* Who We Are: team members after Willy, two per row */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.team-grid{grid-template-columns:minmax(0,1fr)}}

/* ── What We Do: capability index ─────────────────────────────────── */
.subnav-link{color:var(--color-neutral-700)}
.subnav-link:hover{color:var(--color-accent-600)}
.subnav-link.is-active{color:var(--ink)}

/* ══ Homepage ═════════════════════════════════════════════════════ */
.home-section{padding-top:var(--section-y)}

/* sails: two translucent sail shapes, after the logo, that drift and heel slowly */
.sail{position:absolute;pointer-events:none;z-index:0;width:100%;height:100%;overflow:visible}
.sail path{fill:var(--color-accent);opacity:.15}
.sail path+path{fill:var(--salt-sky);opacity:.19}
.sail--light path{opacity:.22}
.sail--light path+path{opacity:.27}
@keyframes sailDrift{
  0%{transform:translate(0,0) rotate(0deg)}
  35%{transform:translate(3.5%,-4%) rotate(-3.5deg)}
  70%{transform:translate(-2%,2.5%) rotate(2.5deg)}
  100%{transform:translate(0,0) rotate(0deg)}
}
.sail{animation:sailDrift 24s ease-in-out infinite;transform-origin:50% 90%}
.sail--2{animation-duration:32s;animation-delay:-9s}

/* hero */
.hero{position:relative;overflow:visible;padding-top:clamp(96px,15vh,190px);padding-bottom:clamp(40px,7vh,90px)}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(36px,5vw,80px);align-items:center;
}
@media (min-width:960px){.hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.hero__copy{padding-top:clamp(8px,2vh,24px)}
.hero__titles{display:grid;align-items:end;max-width:11em;font-size:clamp(40px,5.2vw,84px);line-height:1.02;letter-spacing:-.02em;color:var(--ink)}
.hero__titles>span{grid-area:1/1;opacity:0;transition:opacity 1100ms ease;text-wrap:pretty;font:300 1em/1.02 var(--font-heading);letter-spacing:-.025em}
.hero__titles>span.is-current{opacity:1}
.hero__titles em{display:block;margin-bottom:.1em;font:italic 370 1.02em/1.02 var(--font-serif);letter-spacing:-.01em;color:var(--ink)}
.hero__sub{margin-top:clamp(24px,4vh,40px);max-width:24em;font:400 clamp(17px,1.35vw,20px)/1.55 var(--font-body);color:var(--ink-soft)}
.hero .btn-solid{margin-top:clamp(28px,4.5vh,44px)}
.hero__media{position:relative}
.hero__media .sail{width:100%;height:calc(260% + clamp(96px,15vh,190px));right:0;top:calc(16px - clamp(96px,15vh,190px))}
.hero__photo{
  position:relative;z-index:1;aspect-ratio:4/3;
  border-radius:var(--r-panel);overflow:hidden;will-change:transform;
}
/* zoomed toward the lower-left so the small sailboat reads; mountains stay in frame */
.hero__photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);transform-origin:0% 100%}
.hero__photo--video{aspect-ratio:16/9;background:var(--sand);border:1px solid var(--color-divider)}
.hero__photo--video video{width:100%;height:100%;object-fit:cover;display:block}

/* statement + stats */
.statement{max-width:24em;font:370 clamp(26px,3vw,47px)/1.22 var(--font-serif);letter-spacing:-.01em;text-wrap:pretty;color:#fff}
.stats{margin:clamp(40px,7vh,80px) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(28px,4vw,64px);border-top:1px solid rgba(255,255,255,.16);padding-top:clamp(28px,4vh,44px)}
.stats div{display:flex;flex-direction:column}
.stats dt{font:300 clamp(36px,3.8vw,60px)/1 var(--font-heading);letter-spacing:-.03em;white-space:nowrap;color:var(--salt-sky)}
.stats dd{margin:12px 0 0;max-width:16em;font:400 clamp(14px,1.05vw,16px)/1.55 var(--font-body);color:var(--panel-text)}

/* experience: pinned intro, scrolling list */
.experience{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(36px,6vw,110px);align-items:start}
.experience__pin{position:sticky;top:calc(var(--salt-header-h) + 32px)}
.experience__pin .intro{max-width:18em}
.experience__pin .lede{margin-top:18px}
.experience__pin .intro--follow{margin-top:clamp(26px,3.6vh,40px)}
.experience__list{margin:0;padding:0;list-style:none}
.experience__list li{
  padding:clamp(22px,3.4vh,36px) 0;border-top:1px solid var(--color-divider);
  display:flex;gap:clamp(16px,2vw,28px);align-items:baseline;
  font:300 clamp(22px,2.2vw,34px)/1.2 var(--font-heading);letter-spacing:-.015em;
}
.experience__list li:last-child{border-bottom:1px solid var(--color-divider)}
.experience__list li small{flex:none;width:2.2em;font:italic 370 .6em/1 var(--font-serif);color:var(--color-accent)}

/* capabilities: horizontal strip in a dark panel */
.experience__more{margin-top:clamp(56px,10vh,110px)}
.experience__more .intro{max-width:18em}
/* capabilities: statement + link in a dark panel */
.caps{padding:clamp(56px,9vh,110px) 0}
.caps__in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end}
.caps__statement{max-width:17em;font:370 clamp(28px,3.4vw,54px)/1.14 var(--font-serif);letter-spacing:-.012em;text-wrap:pretty;color:#fff}
.caps__statement em{font-style:italic;color:var(--salt-sky)}
.caps__aside{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vh,32px);max-width:24em}
.caps__sub{margin:0;font:400 clamp(16px,1.2vw,19px)/1.6 var(--font-body);color:var(--panel-text)}
.btn-solid--light{background:#fff;color:var(--ink)}
.btn-solid--light:hover{background:var(--salt-sky);color:#fff}
@media (max-width:760px){.caps__in{grid-template-columns:1fr;gap:28px}}

/* press quotes */
.press{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:clamp(40px,6vw,110px);align-items:start}
.press blockquote{position:relative;z-index:1;margin:0}
.press blockquote p{font:370 clamp(20px,1.8vw,28px)/1.45 var(--font-serif);letter-spacing:-.005em;text-wrap:pretty}
.press blockquote p::before{content:"“";display:block;font:italic 370 3em/0.6 var(--font-serif);color:var(--sand-deep);margin-bottom:.1em}
.press footer{margin-top:clamp(18px,3vh,28px);font:400 clamp(14px,1.05vw,15px)/1.5 var(--font-body);color:var(--ink-soft)}
.press cite{display:block;margin-bottom:4px;font:400 clamp(14px,1.05vw,16px)/1.4 var(--font-body);font-style:normal;color:var(--ink)}
.press-wrap{position:relative;padding-top:var(--section-y)}
.press-wrap .sail{width:46vw;height:64vw;max-width:680px;max-height:940px;left:-8vw;bottom:-30vw}

/* map */
.map-band{margin-top:var(--section-y)}
.map-band__head{
  padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(36px,6vh,64px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,4vw,80px);align-items:end;
}
.map-band__title{max-width:20em;font:370 clamp(24px,2.45vw,39px)/1.2 var(--font-serif);color:#fff;text-wrap:pretty}
.map-band__note{max-width:30em;font:400 clamp(15px,1.15vw,17px)/1.65 var(--font-body);color:var(--panel-text)}
.map-band__frame{position:relative;width:100%;aspect-ratio:16/8;min-height:300px;max-height:640px}
.map-band__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-band__regions{padding-top:clamp(28px,5vh,48px);padding-bottom:clamp(48px,8vh,88px)}
.map-band__regions ul{
  margin:0;padding:18px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px clamp(24px,4vw,64px);
  font:400 clamp(14px,1.05vw,16px)/1.4 var(--font-body);color:var(--panel-text);
}

/* closing call to action */
.cta-band{margin-top:var(--section-y);position:relative}
.cta-band .sail{width:42%;height:200%;right:-5%;top:-34%}
.cta-band__in{
  position:relative;z-index:1;
  padding-top:clamp(64px,11vh,140px);padding-bottom:clamp(64px,11vh,140px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(28px,4vw,64px);align-items:end;
}
.cta-band h2{max-width:16em;font:370 clamp(30px,3.5vw,54px)/1.1 var(--font-serif);letter-spacing:-.01em;text-wrap:pretty}
.cta-band h2 em{font-style:italic}
.cta-band__links{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.cta-band__mail{font:400 clamp(16px,1.2vw,19px)/1 var(--font-body);color:var(--ink);border-bottom:1px solid var(--ink)}
.cta-band__mail:hover{color:var(--color-accent-600);border-color:currentColor}

@media (max-width:720px){
  .hero__media{min-height:300px;order:-1}
  .hero__media .sail{width:100%;height:200%;right:0;top:-30%}
  .experience__pin{position:static}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .menu,.menu__nav a,.menu__foot,.sail{animation:none}
  .reveal-armed{opacity:1;transform:none;transition:none}
  .hero__titles>span{transition:none}
  .hero__photo{transform:none!important}
  .text-link::after,.btn-solid{transition:none}
}

/* ══ Inner pages ══════════════════════════════════════════════════ */
.section{padding-top:var(--section-y)}
.h-serif{font:370 clamp(28px,2.8vw,44px)/1.15 var(--font-serif);letter-spacing:-.01em;text-wrap:pretty;max-width:18em}
.h-serif em{font-style:italic}
.h-serif--lg{font-size:clamp(32px,3.6vw,58px);line-height:1.08}
.panel--dark .h-serif{color:#fff}
.eyebrow{margin:0 0 14px;font:italic 370 clamp(16px,1.2vw,19px)/1.35 var(--font-serif);color:var(--color-accent)}
.eyebrow--sky,.panel--dark .eyebrow{color:var(--salt-sky)}
.lede--ink{color:var(--ink)}
.lede--wide{max-width:40em}
.small{max-width:36em;font:400 clamp(15px,1.05vw,16px)/1.65 var(--font-body);color:var(--ink-soft)}
.panel--dark .small{color:var(--panel-text)}
.small--muted{color:var(--ink-faint)}
.panel--dark .small--muted{color:rgba(255,255,255,.5)}
.note{margin-top:clamp(22px,3vh,32px);max-width:40em;font:400 14px/1.6 var(--font-body);color:var(--ink-faint)}
.panel--dark .note{color:rgba(255,255,255,.5)}
.note a{color:inherit;border-bottom:1px solid currentColor}
.note--wide{max-width:46em;margin-top:clamp(36px,5vh,60px)}
.plain{margin:0;padding:0;list-style:none;font:400 clamp(15px,1.05vw,16px)/1.9 var(--font-body);color:var(--ink-soft)}
.panel--dark .plain{color:var(--panel-text)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(32px,5vw,88px);align-items:start}
.two-col--wide{gap:clamp(36px,6vw,120px)}
.prose p{max-width:36em;font:400 clamp(16px,1.15vw,18px)/1.7 var(--font-body);color:var(--ink-soft)}
.prose p+p{margin-top:16px}
.panel--dark .prose p{color:var(--panel-text)}
.prose--cols{columns:2;column-gap:clamp(28px,4vw,56px);column-width:20em}
.prose--cols p{break-inside:avoid}
.photo{position:relative;z-index:1;border-radius:var(--r-photo);overflow:hidden;background:var(--sand)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo--wide{aspect-ratio:21/9;min-height:260px}
.photo--wide-slate{aspect-ratio:1448/716}
.photo--tall{aspect-ratio:4/5;min-height:320px;max-height:720px}
.photo--portrait{aspect-ratio:4/5}
.photo--flush{border-radius:0;margin:clamp(16px,3vh,32px) 0 0}
.photo .ph{position:absolute;inset:0;min-height:0;border-radius:0}
.pull{margin:clamp(22px,3.5vh,34px) 0;max-width:32em;border-left:3px solid var(--salt-sky);padding-left:clamp(16px,2vw,26px)}
.pull p{font:370 clamp(20px,1.8vw,27px)/1.42 var(--font-serif);letter-spacing:-.005em;text-wrap:pretty}
.pull p+p{margin-top:14px}
.pull--small p{font:400 clamp(15px,1.1vw,17px)/1.7 var(--font-body);color:var(--ink-soft)}
.kv{margin:clamp(28px,4vh,44px) 0 0;max-width:34em}
.kv div{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;padding:16px 0;border-top:1px solid var(--color-divider)}
.kv div:last-child{border-bottom:1px solid var(--color-divider)}
.kv dt{font:italic 370 clamp(16px,1.15vw,18px)/1.4 var(--font-serif);color:var(--ink-soft)}
.kv dd{margin:0;font:400 clamp(15px,1.1vw,17px)/1.4 var(--font-body);color:var(--ink);text-align:right}
.kv--inline{max-width:38em;margin-top:clamp(20px,3vh,32px)}
.kv--inline dd{text-align:left}

/* numbered lists share the homepage experience-list look */
.num-list{margin:clamp(28px,4vh,44px) 0 0;padding:0;list-style:none}
.num-list li{padding:clamp(16px,2.4vh,24px) 0;border-top:1px solid var(--color-divider);display:flex;gap:clamp(16px,2vw,28px);align-items:baseline;font:300 clamp(22px,2.2vw,34px)/1.2 var(--font-heading);letter-spacing:-.015em}
.num-list li:last-child{border-bottom:1px solid var(--color-divider)}
.num-list li small{flex:none;width:2.2em;font:italic 370 .6em/1 var(--font-serif);color:var(--color-accent)}
.num-list--dark li{border-color:rgba(255,255,255,.16);color:#fff;font-size:clamp(19px,1.6vw,26px);font-weight:400}
.num-list--dark li small{color:var(--salt-sky)}

/* page hero */
.page-hero{position:relative;padding-top:clamp(64px,11vh,140px);padding-bottom:clamp(40px,7vh,80px)}
.page-hero .sail{width:min(30vw,420px);height:min(120vw,1500px);right:calc(var(--gutter) + 1vw);top:14px}
.page-hero__in{position:relative;z-index:1}
.page-hero h1{max-width:13em;font:370 clamp(38px,4.6vw,72px)/1.06 var(--font-serif);letter-spacing:-.012em;text-wrap:pretty}
.page-hero h1 em{font-style:italic}
.page-hero__ledes{margin-top:clamp(28px,5vh,56px)}

/* What We Do */
.wwd{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 clamp(24px,4vw,72px)}
.wwd__index{flex:0 1 220px;min-width:190px;position:sticky;top:calc(var(--salt-header-h) + 24px);display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.wwd__index .eyebrow{margin-bottom:6px}
.wwd__index a{font:400 clamp(14px,1.05vw,15px)/1.35 var(--font-body)}
.wwd__body{flex:1 1 520px;min-width:0}
.cap{position:relative;padding:clamp(40px,7vh,80px) 0;border-top:1px solid var(--color-divider);scroll-margin-top:calc(var(--salt-header-h) + 16px)}
.cap:first-child{border-top:0;padding-top:0}
.cap__num{display:block;font:italic 370 clamp(44px,4.4vw,64px)/1 var(--font-serif);color:var(--salt-sky);margin-bottom:10px}
.cap h2{font:370 clamp(28px,2.8vw,42px)/1.15 var(--font-serif);letter-spacing:-.01em;margin-bottom:clamp(18px,2.6vh,26px)}
.cap__lead{margin:0 0 20px;max-width:26em;font:italic 370 clamp(21px,2vw,30px)/1.3 var(--font-serif);color:var(--color-accent)}
.cap .prose+.prose{margin-top:16px}
.facts{margin:clamp(26px,4vh,38px) 0;max-width:40em}
.facts__label{margin:0 0 10px;font:italic 370 clamp(16px,1.15vw,18px)/1.4 var(--font-serif);color:var(--ink-soft)}
.facts dl{margin:0}
.facts div{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid var(--color-divider)}
.facts div:last-child{border-bottom:1px solid var(--color-divider)}
.facts dt{font:300 clamp(26px,2.6vw,38px)/1 var(--font-heading);letter-spacing:-.02em;color:var(--color-accent)}
.facts dd{margin:0;flex:1 1 200px;font:400 14px/1.5 var(--font-body);color:var(--ink-soft);text-align:right}
.cap .photo--inline{margin-top:clamp(28px,4.5vh,44px);max-width:44em;aspect-ratio:16/9}
.cap .photo--inline-portrait{max-width:26em;aspect-ratio:3/4}
.media-grid--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* trims the empty wall on the right of the canvasser photo while keeping both faces */
.photo--zoom-left img{transform:scale(1.28);transform-origin:0% 45%}
.media-grid{margin-top:clamp(26px,4vh,38px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:clamp(14px,2vw,24px);max-width:44em}
.media-grid figure{margin:0}
.media-grid .photo{aspect-ratio:16/10;border:1px solid var(--color-divider)}
.media-grid figcaption{margin-top:10px;font:400 14px/1.4 var(--font-body);color:var(--ink-soft)}
.media-grid--three{max-width:none;gap:clamp(22px,3vw,40px);margin-top:clamp(40px,6vh,72px)}
.media-grid--three figcaption{font-size:clamp(16px,1.2vw,18px);color:var(--ink)}
.media-grid--three figcaption span{display:block;margin-top:4px;font-size:14px;color:var(--ink-faint)}

/* Our Work */
.case__grid{margin-top:clamp(28px,4vh,44px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(24px,3vw,44px);border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
.case__grid--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));border-color:var(--color-divider)}
.case .stats{margin-top:clamp(36px,5vh,56px)}
.case .h-serif--lg{margin-bottom:clamp(24px,4vh,40px)}
.case .photo--flush{margin-top:0}
.clips{margin-top:clamp(20px,3vh,30px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,2vw,24px)}
.clip{margin:0;padding:clamp(20px,2.4vw,28px);border-radius:var(--r-photo);background:rgba(255,255,255,.06);color:#fff}
.clip cite{display:block;font:italic 370 15px/1.4 var(--font-serif);color:var(--salt-sky)}
.clip__head{margin:10px 0 12px;font:400 15px/1.45 var(--font-body);color:rgba(255,255,255,.8)}
.clip__quote{font:370 clamp(17px,1.4vw,20px)/1.45 var(--font-serif);text-wrap:pretty}
.case-light .h-serif{margin-bottom:clamp(20px,3vh,30px)}
.media .lede{margin-top:4px}
.media__feature{margin-top:clamp(36px,6vh,64px)}
.media__feature .h-serif{font-size:clamp(22px,2.2vw,32px);max-width:24em}

/* Who We Are */
.tenets{margin:clamp(32px,5vh,56px) 0 0;padding:0;list-style:none}
.tenets li{display:grid;grid-template-columns:3em minmax(0,300px) minmax(0,1fr);gap:clamp(12px,2vw,44px);padding:clamp(26px,4vh,40px) 0;border-top:1px solid rgba(255,255,255,.16)}
.tenets li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.tenets small{font:italic 370 clamp(15px,1.1vw,17px)/1.5 var(--font-serif);color:var(--salt-sky)}
.tenets h3{font:370 clamp(20px,1.8vw,28px)/1.2 var(--font-serif);color:#fff}
.tenets p{max-width:36em;font:400 clamp(15px,1.1vw,17px)/1.65 var(--font-body);color:var(--panel-text)}
@media (max-width:720px){.tenets li{grid-template-columns:3em minmax(0,1fr)}.tenets p{grid-column:2}}
.team .h-serif{margin-bottom:clamp(32px,5vh,56px)}
.person{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:clamp(20px,2.5vw,36px);align-items:start}
.person--lead{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.person--lead .person__text .prose p{font-size:clamp(16px,1.25vw,19px)}
.person .h-serif{margin-bottom:6px}
.person .eyebrow{margin-bottom:16px}
.team-grid{margin-top:clamp(44px,7vh,80px);gap:clamp(32px,5vw,72px) clamp(28px,4vw,64px)}
@media (max-width:560px){.person,.person--lead{grid-template-columns:minmax(0,1fr)}.person .photo{max-width:260px}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(36px,6vw,110px);align-items:start}
.contact-grid__copy .lede{margin-top:clamp(22px,3.4vh,36px)}
.form-card{position:relative;z-index:1;padding:clamp(24px,3vw,44px);border-radius:var(--r-panel);background:var(--color-surface)}
.form-card form{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,24px)}
.form-card label{font:400 15px/1.4 var(--font-body);color:var(--ink)}
.form-card label span{color:var(--ink-faint)}
.form-card .input{margin-top:6px;font:400 16px/1.5 var(--font-body)}
.form__actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* Who We Are: sail behind the About section; bench note with more presence */
.about{position:relative}
.about>.intro,.about>.prose{position:relative;z-index:1}
.about .sail{width:min(26vw,380px);height:min(110vw,1300px);right:calc(var(--gutter) + 1vw);top:-16%}
.bench{position:relative;z-index:1;margin-top:clamp(44px,7vh,80px);padding-top:clamp(24px,4vh,36px);border-top:1px solid var(--color-divider);max-width:34em;font:370 clamp(20px,1.8vw,27px)/1.42 var(--font-serif);color:var(--ink);text-wrap:pretty}

/* Contact: form on the dark panel colour */
.form-card--dark{background:var(--panel);color:#fff}
.form-card--dark .eyebrow{color:var(--salt-sky);font-weight:600}
.form-card--dark label{color:#fff}
.form-card--dark label span{color:rgba(255,255,255,.55)}
.form-card--dark .input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.form-card--dark .input:hover{border-color:rgba(255,255,255,.55)}
.form-card--dark .input:focus-visible{border-color:var(--salt-sky);outline-color:var(--salt-sky)}
.form-card--dark .btn-solid{background:var(--paper);color:var(--ink)}
.form-card--dark .btn-solid:hover{background:var(--salt-sky);color:#fff}
.form-card--dark .form-status{color:rgba(255,255,255,.72)}
.form-card--dark .form-status.is-ok{color:var(--salt-sky)}