:root{
  /* The darkest colour on the site is a deep pine, not black. --ink-rgb is the
     same colour as channels, for the places that need it at part opacity. */
  --dark:#18211d;
  --ink-rgb:24,33,29;
  /* the single hot accent, used by the hero's italic line */
  --accent:#E4622F;
  --light:#f7f6f3;
  --pad:clamp(20px,4.5vw,72px);
  --sans:'Geist','Neue Haas Grotesk Display','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Fraunces','GT Super',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --snap:cubic-bezier(.76,0,.24,1);
  --r-pill:100px; --r-panel:clamp(16px,2vw,28px); --r-img:clamp(12px,1.4vw,20px);
  /* How far the wordmark and the enquiry button sit in from the page edge. */
  --tb-x:clamp(14px,3.2vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--dark);color:var(--light);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden turns the body into a scroll container, which
     stops position:sticky working for the hero. */
  overflow-x:hidden;overflow-x:clip;
}
body.loading{overflow:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============ bands / tokens ============ */
[data-theme="dark"]{--bg:var(--dark);--fg:var(--light);--muted:#9fa8a1;--faint:#6e7a72;--rule:rgba(247,246,243,.16);--surface:#212c26}
[data-theme="light"]{--bg:var(--light);--fg:var(--dark);--muted:#63625c;--faint:#9d9c94;--rule:rgba(var(--ink-rgb),.14);--surface:#eceae5}
/* Charcoal — lighter than the footer, so a dark band above it still reads as separate. */
[data-theme="deep"]{--bg:#2a332d;--fg:var(--light);--muted:#a8b1aa;--faint:#7c867f;--rule:rgba(247,246,243,.2);--surface:#333e37}
[data-theme="green"]{--bg:#1b2a22;--fg:#f2f5f1;--muted:#9db0a4;--faint:#6d8175;--rule:rgba(242,245,241,.18);--surface:#23342b}
[data-theme="ink"]{--bg:#161d29;--fg:#f1f3f7;--muted:#98a2b3;--faint:#6b7686;--rule:rgba(241,243,247,.18);--surface:#1e2734}
/* A colour band; the shade comes from --tint on the element. */
[data-theme="tint"]{--bg:var(--tint,#B7CDBB);--fg:var(--dark);--muted:rgba(var(--ink-rgb),.72);--faint:rgba(var(--ink-rgb),.5);--rule:rgba(var(--ink-rgb),.22);--surface:rgba(var(--ink-rgb),.06)}
.band{background:var(--bg);color:var(--fg);position:relative}
/* Inner pages follow the same density setting as the homepage, so the whole
   site keeps one rhythm rather than two. */
.wrap{padding-left:var(--lc-x);padding-right:var(--lc-x)}
.pt{padding-top:var(--lc-pad)}
.pb{padding-bottom:var(--lc-pad)}

/* ============ type ============ */
.serif{font-family:var(--serif);font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144;font-weight:600;letter-spacing:-.02em}
.d1{font-size:clamp(44px,7vw,100px);line-height:.98}
.d2{font-size:clamp(32px,5vw,68px);line-height:1.02}
.d3{font-size:clamp(27px,3.4vw,48px);line-height:1.07}
.d4{font-size:clamp(22px,2.4vw,34px);line-height:1.12}
.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:400;display:block}
.lede{font-size:clamp(16px,1.22vw,19px);line-height:1.52;color:var(--muted);letter-spacing:-.005em}
.small{font-size:13px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.65em;border-radius:var(--r-pill);padding:15px 28px;
  font-size:15px;letter-spacing:-.01em;background:var(--fg);color:var(--bg);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.btn:hover{opacity:.82;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--rule)}
.btn-ghost:hover{background:var(--fg);color:var(--bg);opacity:1}
.arrow{display:inline-flex;align-items:center;gap:.6em;font-size:15px;letter-spacing:-.008em}
.arrow svg{width:26px;height:8px;overflow:visible;transition:transform .5s var(--ease)}
.arrow:hover svg{transform:translateX(7px)}

/* ============ preloader ============ */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg,var(--dark));color:var(--fg,var(--light));
  display:flex;align-items:center;justify-content:center;
  transition:transform .95s var(--snap) .05s;will-change:transform}
.loader.done{transform:translateY(-101%)}
.loader.gone{display:none}
.ld-centre{display:flex;flex-direction:column;align-items:center;gap:26px;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.loader.done .ld-centre{opacity:0;transform:translateY(-26px)}
.ld-frame{width:min(46vw,230px);aspect-ratio:3/2;border-radius:14px;overflow:hidden;background:var(--surface,#212c26)}
.ld-frame img{opacity:.92}
.ld-mark{font-size:15px;letter-spacing:-.01em;text-align:center;line-height:1.2}
.ld-mark span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint,#8f8e88);margin-top:4px}
.ld-count{position:absolute;left:var(--pad);bottom:calc(var(--pad) - 8px);
  font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(64px,11vw,150px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  transition:opacity .4s var(--ease)}
.loader.done .ld-count{opacity:0}
.ld-hint{position:absolute;right:var(--pad);bottom:var(--pad);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint,#8f8e88)}
.ld-bar{position:absolute;left:0;bottom:0;height:2px;background:currentColor;opacity:.85;width:0%}
@media(prefers-reduced-motion:reduce){.loader{display:none}}

/* ============ nav ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,1.6vw,22px) var(--pad);pointer-events:none;
  opacity:0;transform:translateY(-14px);transition:opacity .8s var(--ease) .25s,transform .8s var(--ease) .25s}
body.loaded .nav{opacity:1;transform:none}
.nav *{pointer-events:auto}
.mark{font-size:15px;letter-spacing:-.015em;line-height:1.1;color:var(--light);transition:color .45s var(--ease)}
.mark b,.mark-words b{font-weight:400;display:block;white-space:nowrap;
  font-size:15px;letter-spacing:-.015em;text-transform:none;opacity:1}
.mark-words{display:block}
.mark-words span,.mark>span{display:block;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;margin-top:2px}
.nav.on-light .mark{color:var(--dark)}
.mark-logo{display:block;height:38px;width:auto;max-width:200px;object-fit:contain}
.mark{display:flex;align-items:center;gap:11px}
.mark-words{display:block}
.f-mark{margin-bottom:16px}
.nav-right{display:flex;align-items:center;gap:10px}
.pill{display:flex;align-items:center;border-radius:var(--r-pill);padding:7px 8px;
  background:rgba(247,246,243,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .45s var(--ease)}
.nav.on-light .pill{background:var(--dark)}
.pill .nav-links{display:flex}
.pill a{padding:8px 16px;border-radius:var(--r-pill);font-size:14px;letter-spacing:-.008em;color:var(--light);transition:background .3s}
.pill a:hover{background:rgba(247,246,243,.14)}
.pill.many a{padding:8px 12px;font-size:13px}
/* ---------- dropdown sub-menus ---------- */
.pill .nav-links{align-items:center}
.has-sub{position:relative;display:inline-flex}
.has-sub>a{display:inline-flex;align-items:center;gap:7px}
.caret{width:8px;height:8px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);opacity:.6;transition:transform .3s var(--ease),opacity .3s}
.has-sub:hover .caret,.has-sub:focus-within .caret{opacity:1;transform:rotate(225deg) translate(-2px,-2px)}
.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);margin-top:12px;
  min-width:230px;padding:10px;border-radius:var(--r-panel);
  background:var(--dark);box-shadow:0 24px 60px rgba(0,0,0,.4);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.nav[data-hero="green"] .sub{background:#22352b}
.nav[data-hero="ink"] .sub{background:#1e2734}
.nav[data-hero="deep"] .sub{background:#2c2b28}
.nav.on-light .sub{background:var(--light);box-shadow:0 24px 60px rgba(var(--ink-rgb),.16)}
/* a hover bridge so the pointer can travel from the link into the panel */
.sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.sub a{display:block;padding:9px 14px;border-radius:calc(var(--r-panel) - 8px);
  font-size:14px;letter-spacing:-.008em;color:var(--light);white-space:nowrap;
  transition:background .25s,color .25s}
.nav.on-light .sub a{color:var(--dark)}
.sub a:hover{background:rgba(247,246,243,.14)}
.nav.on-light .sub a:hover{background:rgba(var(--ink-rgb),.07)}
/* full-screen menu: children sit under their parent */
.ov-nav .primary .ov-sub{list-style:none;margin:8px 0 14px;padding:0 0 0 clamp(14px,1.6vw,22px);
  display:flex;flex-wrap:wrap;gap:0 clamp(16px,2vw,30px);border-left:1px solid var(--rule)}
.ov-nav .primary .ov-sub li a{font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,1.15vw,16px);line-height:2.1;letter-spacing:-.005em;color:#8f8e88}
.ov-nav .primary:hover .ov-sub li a{opacity:1}
.ov-nav .primary .ov-sub li a:hover{color:var(--light)}
.pill-cta{border-radius:var(--r-pill);padding:14px 22px;font-size:14px;letter-spacing:-.008em;
  background:var(--light);color:var(--dark);transition:opacity .3s}
.pill-cta:hover{opacity:.84}
.nav.on-light .pill-cta{background:var(--dark);color:var(--light)}
.nav-menu{display:none}
@media(max-width:900px){
  .pill{display:none}
  .pill-cta{display:none}
  .nav-menu{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-pill);padding:12px 20px;
    background:rgba(247,246,243,.1);backdrop-filter:blur(14px);font-size:14px;color:var(--light)}
  .nav.on-light .nav-menu{background:var(--dark)}
  .nav-menu i{display:block;width:18px;height:7px;position:relative}
  .nav-menu i::before,.nav-menu i::after{content:'';position:absolute;left:0;width:100%;height:1px;background:currentColor}
  .nav-menu i::before{top:0}.nav-menu i::after{top:6px}
}

/* ============ overlay menu ============ */
.overlay{position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--light);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(14px,1.6vw,22px) var(--pad) var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--snap)}
.overlay.open{clip-path:inset(0 0 0 0)}
.ov-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.ov-close{border-radius:var(--r-pill);padding:12px 22px;background:rgba(247,246,243,.1);font-size:14px}
.ov-nav{align-self:center;display:flex;flex-wrap:wrap;gap:clamp(28px,7vw,120px);padding:5vh 0}
.ov-nav ul{list-style:none}
.ov-nav .primary li a{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  letter-spacing:-.025em;font-size:clamp(34px,5vw,64px);line-height:1.16;display:inline-block;transition:opacity .3s}
.ov-nav .primary:hover li a{opacity:.35}.ov-nav .primary li a:hover{opacity:1}
.ov-nav .secondary{padding-top:16px}
.ov-nav .secondary li a{font-size:17px;line-height:1.9;color:#9d9c96;transition:color .3s}
.ov-nav .secondary li a:hover{color:var(--light)}
.ov-bot{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:13px;color:#9d9c96;
  border-top:1px solid rgba(247,246,243,.16);padding-top:18px}
.ov-bot a:hover{color:var(--light)}

/* ============ horizontal film hero ============ */
.film{position:relative}
.film-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.film-track{display:flex;align-items:center;height:100%;will-change:transform}
.panel{display:flex;flex-direction:column;justify-content:flex-end;flex:0 0 auto;margin-right:var(--gap,10vh);
  opacity:0;transform:translateX(54px);transition:opacity .9s var(--ease),transform 1.05s var(--snap)}
body.loaded .panel{opacity:1;transform:none}
body.loaded .panel:nth-of-type(1){transition-delay:.42s}
body.loaded .panel:nth-of-type(2){transition-delay:.5s}
body.loaded .panel:nth-of-type(3){transition-delay:.58s}
body.loaded .panel:nth-of-type(4){transition-delay:.66s}
body.loaded .panel:nth-of-type(5){transition-delay:.74s}
body.loaded .panel:nth-of-type(6){transition-delay:.82s}
body.loaded .panel:nth-of-type(7){transition-delay:.9s}
body.loaded .panel:nth-of-type(8){transition-delay:.98s}
.panel .ph{height:var(--h);width:calc(var(--h) * var(--r));overflow:hidden;background:#232321;
  border-radius:var(--r-img);position:relative;box-shadow:0 18px 50px rgba(0,0,0,.32)}
.panel .ph img{transform:scale(1.06);transition:transform 1.1s var(--ease)}
.panel a.ph:hover img{transform:scale(1)}
.panel figcaption{display:flex;align-items:baseline;justify-content:flex-end;gap:20px;min-height:1px;
  padding-top:12px;font-size:13px;letter-spacing:-.005em;color:var(--muted)}
.panel figcaption em{font-style:normal;color:var(--faint);font-size:11px;letter-spacing:.05em}
.panel.lead{align-self:flex-start;padding-top:14vh}
.panel.trail{align-self:flex-end;padding-bottom:12vh}
.intro-panel{flex:0 0 auto;margin-right:var(--gap,10vh);width:min(640px,80vw);align-self:center;
  opacity:0;transform:translateX(44px);transition:opacity .9s var(--ease) .3s,transform 1.05s var(--snap) .3s}
body.loaded .intro-panel{opacity:1;transform:none}
.line{overflow:hidden}
.line>span{display:block;transform:translateY(115%);transition:transform 1.05s var(--snap)}
body.loaded .line:nth-child(1)>span{transition-delay:.4s}
body.loaded .line:nth-child(2)>span{transition-delay:.49s}
body.loaded .line:nth-child(3)>span{transition-delay:.58s}
body.loaded .line>span{transform:none}
.intro-panel h1{margin:18px 0 24px;max-width:13ch;font-size:clamp(36px,4.5vw,66px);line-height:1.02}
.intro-panel .lede{max-width:34ch;margin-bottom:30px}
.intro-cta{display:flex;flex-wrap:wrap;gap:12px}
.spacer{flex:0 0 auto}
.endcard{flex:0 0 auto;align-self:center;width:min(320px,68vw);margin-right:var(--pad)}
.endcard .eyebrow{margin-bottom:16px}
.endcard p{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:500;
  font-size:clamp(20px,1.9vw,27px);line-height:1.2;letter-spacing:-.02em;margin-bottom:26px}
.film-hud{position:absolute;left:var(--pad);right:var(--pad);bottom:26px;
  display:flex;align-items:center;gap:16px;font-size:11px;color:var(--faint);
  letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transition:opacity 1s var(--ease) 1.2s}
body.loaded .film-hud{opacity:1}
.film-hud .bar{flex:1;height:1px;background:var(--rule);position:relative}
.film-hud .bar i{position:absolute;inset:0 auto 0 0;background:var(--fg);width:0%;transition:width .18s linear}
.film-head{display:none}
@media(max-width:900px){
  .film-hud{display:none}
  .film{height:auto!important}
  .film-pin{position:static;height:auto;display:block}
  .film-track{transform:none!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding:2vh var(--pad) 5vh;height:auto;align-items:flex-end;scrollbar-width:none}
  .film-track::-webkit-scrollbar{display:none}
  .panel{scroll-snap-align:center;margin-right:14px}
  .panel .ph{height:auto;width:min(74vw,400px);aspect-ratio:calc(var(--r))}
  .panel.lead,.panel.trail{align-self:auto;padding:0}
  .film-track .intro-panel,.film-track .endcard{display:none}
  .film-head{display:block;padding:calc(84px + 4vh) var(--pad) 4vh}
  .film-head h1{margin:16px 0 20px;font-size:clamp(36px,10vw,52px);line-height:1.03;max-width:12ch}
  .film-head .lede{margin-bottom:26px;max-width:32ch}
}

/* ============ statement ============ */
.statement .grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,64px)}
@media(min-width:940px){.statement .grid{grid-template-columns:1.5fr 1fr;gap:clamp(50px,8vw,140px)}}
.statement h2{max-width:17ch}
.statement .col p+p{margin-top:1.1em}
.statement .col .arrow{margin-top:32px}
.centred{text-align:center;max-width:min(1000px,92vw);margin:0 auto clamp(44px,5vw,76px)}
.centred h2{max-width:16ch;margin-left:auto;margin-right:auto}
.centred .lede{max-width:52ch;margin:22px auto 0}

/* ============ sticky service showcase ============ */
.split-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,70px)}
@media(min-width:940px){.split-grid{grid-template-columns:.9fr 1.1fr}}
.split-left{display:none}
@media(min-width:940px){.split-left{display:block}}
.split-sticky{position:sticky;top:clamp(90px,12vh,130px)}
.sv-count{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(40px,4vw,64px);letter-spacing:-.03em;line-height:1;margin-bottom:26px;
  font-variant-numeric:tabular-nums}
.sv-count em{font-style:normal;font-size:.45em;color:var(--faint)}
.sv-item{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rule);opacity:.32;cursor:pointer;
  transition:opacity .45s var(--ease),padding-left .45s var(--ease)}
.sv-item:first-child{border-top:1px solid var(--rule)}
.sv-item.active{opacity:1;padding-left:10px}
.sv-item .n{font-size:11px;color:var(--faint);letter-spacing:.08em}
.sv-item h3{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(19px,1.75vw,27px);letter-spacing:-.02em;line-height:1.15}
.sv-item p{grid-column:2;font-size:12.5px;color:var(--muted);margin-top:3px;
  max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.sv-item.active p{max-height:44px}
.sv-figs{display:grid;gap:clamp(24px,3vw,44px)}
.sv-fig{border-radius:var(--r-panel);overflow:hidden;position:relative;background:var(--surface)}
.sv-fig.tall{aspect-ratio:4/5}
.sv-fig.wide{aspect-ratio:4/3}
.sv-fig img{transform:scale(1.06);transition:transform 1.2s var(--ease)}
.sv-fig:hover img{transform:scale(1)}
.sv-fig figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;
  justify-content:space-between;gap:14px;padding:26px 18px 14px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:14px;letter-spacing:-.008em}
.sv-fig figcaption em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}

/* ============ stacked case cards ============ */
.stack{display:block}
.sc{position:sticky;top:calc(86px + var(--i)*18px);margin-bottom:clamp(26px,3.4vw,50px);
  transform-origin:center top;will-change:transform}
.sc-inner{display:grid;grid-template-columns:1fr;background:var(--tint,var(--surface));
  border-radius:var(--r-panel);overflow:hidden;box-shadow:0 -12px 40px rgba(var(--ink-rgb),.08)}
@media(min-width:860px){.sc-inner{grid-template-columns:1.08fr .92fr;min-height:min(56vh,480px)}}
.sc-media{position:relative;min-height:240px}
.sc-copy{padding:clamp(24px,3.4vw,54px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.sc-copy .eyebrow{margin-bottom:2px}
.sc-copy h3{max-width:16ch}
.sc-copy .lede{font-size:15.5px;max-width:44ch}
.sc-copy .arrow{margin-top:10px}

/* ============ faq ============ */
/* Phone first: a plain accordion. The two-column layout arrives at 940px. */
.faq-head{max-width:56ch;margin-bottom:clamp(30px,3.6vw,52px)}
.faq-head .lede{margin-top:16px;max-width:46ch}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-h{margin:0;font-weight:inherit;font-size:inherit}
.faq-q{width:100%;display:flex;align-items:baseline;gap:clamp(14px,1.4vw,22px);
  text-align:left;padding:clamp(18px,2vw,26px) 0;
  font-size:clamp(16px,1.45vw,21px);letter-spacing:-.015em;line-height:1.3;
  transition:color .35s var(--ease)}
.faq-n{flex:0 0 auto;font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:.78em;color:var(--faint);transition:color .35s var(--ease)}
.faq-t{flex:1 1 auto}
.faq-q .ico{flex:0 0 auto;width:16px;height:16px;position:relative;align-self:center}
.faq-q .ico::before,.faq-q .ico::after{content:'';position:absolute;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s}
.faq-q .ico::before{left:0;top:7.5px;width:16px;height:1px}
.faq-q .ico::after{top:0;left:7.5px;height:16px;width:1px}
.faq-item.open .faq-q .ico::after{transform:rotate(90deg);opacity:0}
.faq-item.open .faq-n{color:var(--fg)}
.faq-item:not(.open) .faq-q:hover .faq-n{color:var(--fg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}
.faq-inner{padding-bottom:clamp(22px,2.2vw,30px)}
.faq-a p{color:var(--muted);font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:60ch}
.faq-a p+p{margin-top:1em}
.faq-restate{display:none}
.faq-cta{margin-top:clamp(18px,2vw,26px)}

/* --- wide: questions on the left, a coloured answer panel on the right --- */
@media(min-width:940px){
  .faq-list{position:relative;display:grid;grid-template-columns:1fr 1.06fr;
    column-gap:clamp(40px,5vw,96px);align-items:start;border-top:0;
    /* pack the rows to the top: the floor the script sets for the tallest
       answer must not stretch the questions apart */
    align-content:start;grid-auto-rows:min-content}
  /* the item dissolves so its question and its answer can sit in different
     columns of the same grid — no duplicated markup, no moving nodes */
  .faq-item{display:contents}
  .faq-h{grid-column:1;border-top:1px solid var(--rule)}
  .faq-item:last-child .faq-h{border-bottom:1px solid var(--rule)}
  .faq-q{padding:clamp(20px,2.1vw,28px) 0}
  .faq-item:not(.open) .faq-q{color:var(--muted)}
  .faq-q .ico{display:none}

  /* Every answer sits in the same place at the top of the second column, taken
     out of flow so none of them can stretch a question's row. Only the open one
     is shown; the script gives the list a floor so the tallest one always fits. */
  .faq-a{position:absolute;grid-column:2;grid-row:1;top:0;width:100%;
    max-height:none;overflow:visible;
    opacity:0;visibility:hidden;pointer-events:none;
    /* --faq-y lines the panel up with its own question, so the answer opens
       beside the thing you clicked rather than always at the top */
    transform:translateY(calc(var(--faq-y,0px) + 16px));
    transition:opacity .5s var(--ease),transform .6s var(--ease),visibility .6s}
  .faq-item.open .faq-a{opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(var(--faq-y,0px))}
  .faq-inner{background:var(--surface);color:var(--fg);
    border-radius:var(--r-panel);padding:clamp(28px,2.9vw,46px)}
  .faq-list:not(.plain) .faq-inner{background:var(--tint);color:var(--dark)}
  .faq-list:not(.plain) .faq-a p{color:rgba(var(--ink-rgb),.72)}
  .faq-list:not(.plain) .faq-cta{color:var(--dark)}
  .faq-restate{display:block;font-variation-settings:'opsz' 144;font-weight:600;
    font-size:clamp(22px,2.05vw,30px);line-height:1.12;letter-spacing:-.02em;
    margin-bottom:clamp(14px,1.4vw,20px);max-width:22ch}
  .faq-a p{max-width:46ch}
}
@media(prefers-reduced-motion:reduce){
  .faq-a{transition:none}
}

/* ============ CTA + footer ============ */
.cta-lines{margin-top:clamp(44px,5vw,80px);display:grid;max-width:1100px;margin-left:auto;margin-right:auto}
.cta-lines a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-top:1px solid var(--rule);padding:20px 0;font-size:clamp(19px,2.2vw,32px);letter-spacing:-.022em;
  transition:padding-left .5s var(--ease)}
.cta-lines a:last-child{border-bottom:1px solid var(--rule)}
.cta-lines a:hover{padding-left:16px}
.cta-lines a span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
footer{padding:clamp(48px,6vw,84px) var(--pad) 30px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px}
@media(min-width:860px){.f-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.f-grid h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:400;margin-bottom:16px}
.f-grid ul{list-style:none}
.f-grid li a{font-size:14px;line-height:2;color:var(--muted);transition:color .3s}
.f-grid li a:hover{color:var(--fg)}
/* ---------- contact page ---------- */
.direct-wide{margin-top:clamp(30px,4vw,48px);max-width:none;display:grid;gap:0}
@media(min-width:820px){.direct-wide{grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,60px)}}
.direct-static{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 0;border-top:1px solid var(--rule);font-size:clamp(15px,1.2vw,17px);color:var(--fg)}
.direct-static span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.cblocks{display:grid;gap:clamp(22px,3vw,44px)}
@media(min-width:720px){.cblocks{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cblocks{grid-template-columns:repeat(4,1fr)}}
.cblock{border-top:1px solid var(--rule);padding-top:20px}
.cblock .n{display:block;font-size:11px;letter-spacing:.14em;color:var(--faint);margin-bottom:14px}
.cblock h3{font-size:clamp(16px,1.3vw,19px);font-weight:500;margin-bottom:9px;letter-spacing:-.01em}
.cblock p{font-size:14px;line-height:1.65;color:var(--muted)}

/* ---------- portfolio ---------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.5vw,48px)}
.pf-chip{border:1px solid var(--rule);background:none;border-radius:var(--r-pill);
  padding:9px 18px;font:inherit;font-size:13px;letter-spacing:-.005em;color:var(--muted);
  cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.pf-chip:hover{border-color:var(--fg);color:var(--fg)}
.pf-chip.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}
/* Packed masonry: photographs keep their true shape, no captions.
   CSS columns by default; main.js upgrades it to a packed grid. */
.mgrid{--mgap:clamp(10px,1.3vw,20px);column-count:2;column-gap:var(--mgap)}
@media(min-width:700px){.mgrid{column-count:3}}
@media(min-width:960px){.mgrid{column-count:4}}
.mitem{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 var(--mgap);position:relative}
.mitem.hidden{display:none}
.mopen{display:block;width:100%;padding:0;border:0;background:var(--surface);cursor:zoom-in;
  overflow:hidden;border-radius:var(--r-img);line-height:0}
.mitem img{display:block;width:100%;height:auto;object-fit:cover;
  aspect-ratio:var(--ar,3/2);transition:opacity .5s var(--ease)}
.mopen:hover img{opacity:.86}

/* Upgraded layout: three widths that pack together. */
.mgrid.packed{column-count:auto;display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:4px;gap:var(--mgap);grid-auto-flow:row dense;align-items:start}
.mgrid.packed .mitem{margin:0;width:auto;display:block;grid-column:span 6}
@media(min-width:700px){
  .mgrid.packed .mitem{grid-column:span 4}
  .mgrid.packed .mitem.small{grid-column:span 3}
  .mgrid.packed .mitem.large{grid-column:span 5}
}
@media(min-width:1100px){
  .mgrid.packed .mitem{grid-column:span 3}
  .mgrid.packed .mitem.small{grid-column:span 2}
  .mgrid.packed .mitem.large{grid-column:span 4}
}
@media(prefers-reduced-motion:reduce){.mitem img{transition:none}}
.pf-none{display:none;color:var(--muted);font-size:15px;padding:20px 0}
.pf-filters+.mgrid{margin-top:0}
.pf-none.on{display:block}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(var(--ink-rgb),.96);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px)}
.lb.on{display:flex}
.lb-fig{max-width:min(1400px,100%);max-height:100%;margin:0;display:flex;flex-direction:column;gap:14px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 160px);object-fit:contain;border-radius:8px;display:block;margin:0 auto}
.lb-fig figcaption{text-align:center;color:#8f8e88;font-size:13px;letter-spacing:.02em}
.lb-close{position:absolute;top:clamp(14px,2vw,28px);right:clamp(14px,2vw,28px);
  background:none;border:1px solid rgba(247,246,243,.3);color:#f7f6f3;border-radius:var(--r-pill);
  padding:9px 18px;font:inherit;font-size:13px;cursor:pointer;transition:.3s;z-index:2}
.lb-close:hover{background:rgba(247,246,243,.12)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  color:#f7f6f3;font-size:48px;line-height:1;padding:20px;cursor:pointer;opacity:.5;transition:opacity .3s;z-index:2}
.lb-nav:hover{opacity:1}
.lb-prev{left:clamp(2px,1vw,20px)}
.lb-next{right:clamp(2px,1vw,20px)}
body.lb-open{overflow:hidden}
body.lb-open .nav{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pf-item img{transition:none}}

/* ---------- journal / post list ---------- */
.post-list{display:grid;gap:clamp(18px,2.4vw,30px)}
.post-row{display:grid;gap:clamp(16px,2.2vw,32px);align-items:center;
  background:var(--surface);border-radius:var(--r-panel);overflow:hidden;padding:0;transition:transform .5s var(--ease)}
@media(min-width:760px){.post-row{grid-template-columns:.8fr 1.2fr}}
.post-row:hover{transform:translateY(-4px)}
.post-thumb{display:block;aspect-ratio:4/3;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{display:block;padding:clamp(20px,2.6vw,34px)}
.post-body h2{margin:10px 0 12px}
.post-body .lede{display:block;margin-bottom:18px}
.pager{margin-top:clamp(30px,4vw,52px)}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border-radius:var(--r-pill);border:1px solid var(--rule);font-size:14px;color:var(--muted);transition:.3s}
.pager a:hover{border-color:var(--fg);color:var(--fg)}
.pager .current{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.f-logo{display:block;height:auto;width:auto;max-width:min(240px,100%);max-height:74px;object-fit:contain;margin-bottom:14px}
.f-legal{display:inline-flex;flex-wrap:wrap;gap:4px 18px;align-items:center}
.f-legal a{color:inherit;transition:color .3s}.f-legal a:hover{color:var(--fg)}
.f-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  margin-top:clamp(44px,6vw,84px);padding-top:18px;border-top:1px solid var(--rule);
  font-size:11px;color:var(--faint);letter-spacing:.07em}


/* ============ approach: inline-image headline + steps ============ */
.appr h2{max-width:24ch}
.appr-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,90px);margin-top:clamp(40px,5vw,72px)}
/* Copy and image side by side; the image stretches to the copy's height so
   neither column is left with dead space. */
.appr-top{display:grid;grid-template-columns:1fr;gap:clamp(28px,3.6vw,56px);
  align-items:stretch;margin-top:clamp(30px,3.6vw,52px)}
@media(min-width:940px){.appr-top{grid-template-columns:1.02fr .98fr}}
.appr-top .appr-copy h2{margin-bottom:clamp(20px,2.2vw,30px)}
.appr-img{border-radius:var(--r-panel);overflow:hidden;background:var(--surface);
  margin:0;min-height:clamp(240px,32vw,420px)}
.appr-img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.03);transition:transform 1.1s var(--ease)}

/* ---------- how photographs fill their frames ---------- */
/* Show the whole photograph inside the frame, letterboxed on the band colour. */
.fit-contain img{object-fit:contain!important;transform:none!important;background:var(--surface)}
.fit-contain{background:var(--surface)}
/* Let the frame take the photograph's own shape — nothing cropped, no letterboxing. */
.fit-natural{aspect-ratio:auto!important;min-height:0!important;height:auto!important;
  align-self:start;background:none}
.fit-natural img{position:static!important;width:100%!important;height:auto!important;
  aspect-ratio:auto!important;object-fit:contain!important;transform:none!important}
.fit-natural::before,.fit-natural::after{content:none}
/* Held to a sensible height where a photograph sits beside copy, so a very tall
   portrait is still shown whole without towering over the words. */
.appr-top .fit-natural img{max-height:min(72vh,560px);width:auto!important;max-width:100%}
.hero-media.fit-natural img{max-height:82vh;width:auto!important;max-width:100%;margin-inline:auto}
/* In a card the photograph stays full width and the frame takes its shape,
   so a row of cards never shows bars down the sides. */
.svc-media.fit-natural,.sc-media.fit-natural,.sv-fig.fit-natural{aspect-ratio:auto!important;min-height:0!important}
.svc-media.fit-natural img,.sc-media.fit-natural img,.sv-fig.fit-natural img{width:100%!important;height:auto!important}
.appr-img:hover img{transform:scale(1)}
/* Steps across the full width, so they never sit in a half-empty column. */
/* ---------- section heading + intro ---------- */
.sec-head{max-width:62ch;margin-bottom:clamp(34px,4vw,60px)}
.sec-head .lede{margin-top:16px;max-width:56ch}

/* ---------- services: colour cards ---------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,22px)}
@media(min-width:640px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-panel);background:var(--tint,#B7CDBB);color:var(--dark);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.3)}
.svc-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  background:rgba(var(--ink-rgb),.09)}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1s var(--ease)}
.svc-card:hover .svc-media img{transform:scale(1)}
.svc-n{position:absolute;top:12px;left:14px;font-family:var(--serif);
  font-variation-settings:'opsz' 144;font-weight:600;font-size:15px;
  color:var(--dark);background:var(--tint,#B7CDBB);border-radius:var(--r-pill);
  padding:3px 11px;letter-spacing:.02em}
.svc-body{display:flex;flex-direction:column;flex:1;gap:9px;
  padding:clamp(18px,1.8vw,26px) clamp(18px,1.8vw,26px) clamp(16px,1.7vw,24px)}
.svc-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.svc-body h3{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.svc-from{font-style:normal;font-size:12px;letter-spacing:.04em;
  color:rgba(var(--ink-rgb),.6);white-space:nowrap}
.svc-blurb{font-size:14px;line-height:1.55;color:rgba(var(--ink-rgb),.72)}
.svc-go{display:inline-flex;align-items:center;gap:.6em;margin-top:auto;padding-top:14px;
  font-size:13.5px;letter-spacing:-.005em}
.svc-go svg{width:22px;transition:transform .4s var(--ease)}
.svc-card:hover .svc-go svg{transform:translateX(5px)}
@media(prefers-reduced-motion:reduce){.svc-card,.svc-media img,.svc-go svg{transition:none}}

.appr-solo{max-width:70ch}
/* ---------- pricing ---------- */
.pkgs{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,26px);align-items:stretch}
@media(min-width:760px){.pkgs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.pkgs{grid-template-columns:repeat(3,1fr)}}
.pkg{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.6vw,38px);border-radius:var(--r-panel);
  border:1px solid var(--rule);background:var(--surface)}
.pkg-featured{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pkg-flag{position:absolute;top:-11px;left:clamp(26px,2.6vw,38px);
  background:var(--bg);color:var(--fg);border:1px solid var(--fg);
  border-radius:var(--r-pill);padding:4px 13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.pkg h2{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.015em}
.pkg-price{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(34px,3.6vw,50px);line-height:1.05;letter-spacing:-.02em;margin:12px 0 6px}
.pkg-note{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.pkg-featured .pkg-note{color:rgba(247,246,243,.72)}
.pkg-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.pkg-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pkg-featured .pkg-list li{color:rgba(247,246,243,.82)}
.pkg-list li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);opacity:.65}
.pkg .btn{margin-top:auto;justify-content:center}
.pkg-featured .btn{background:var(--bg);color:var(--fg)}
.pkg-featured .btn-ghost{background:transparent;color:var(--bg);border-color:rgba(247,246,243,.4)}
.pkg-small{margin-top:clamp(26px,3vw,40px);font-size:13px;color:var(--faint);max-width:78ch}

.ptable{margin-top:clamp(30px,3.4vw,50px);border-top:1px solid var(--rule)}
.prow{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;
  padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--rule);
  transition:padding-left .35s var(--ease)}
@media(min-width:760px){.prow{grid-template-columns:1.1fr 1.4fr auto}}
.prow:hover{padding-left:12px}
.prow-name{font-size:clamp(16px,1.4vw,20px);color:var(--fg);letter-spacing:-.01em}
.prow-note{font-size:13.5px;color:var(--muted)}
.prow-price{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(19px,1.8vw,26px);letter-spacing:-.015em;justify-self:end}

/* starting price on a service page */
.from-price{display:inline-flex;align-items:baseline;gap:10px;margin:22px 0 0;
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:10px 20px}
.from-price b{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(19px,1.7vw,24px);letter-spacing:-.015em}
.from-price span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.from-price em{font-style:normal;font-size:13px;color:var(--muted)}
/* Heading and copy side by side, so neither half of the row sits empty. */
.split-copy{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,44px)}
@media(min-width:940px){.split-copy{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}}
.split-copy h2{margin:0}
.steps-row{margin-top:clamp(44px,5.5vw,84px)}
@media(min-width:820px){
  .steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,52px)}
  .steps-row .step{border-bottom:1px solid var(--rule)}
}
@media(min-width:940px){.appr-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
/* Case study: brief, approach and result across the width. */
.case-copy{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,44px)}
@media(min-width:820px){.case-copy{grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,64px)}}
.case-col h3{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  font-weight:400;padding-top:16px;border-top:1px solid var(--rule);margin-bottom:14px}
.appr-copy p+p{margin-top:1.1em}
.appr-copy .arrow{margin-top:30px}
.step{display:grid;grid-template-columns:52px 1fr;gap:6px 18px;padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step .n{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em;color:var(--faint)}
.step h3{font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;font-weight:500}
.step p{grid-column:2;font-size:14px;line-height:1.55;color:var(--muted)}

/* ============ recent shoots: counter-scrolling marquee ============ */
.mq{display:grid;gap:clamp(14px,1.8vw,24px);padding:6px 0 10px;overflow-x:clip}
.mq-row{display:flex;width:max-content;animation:mqa 46s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:56s}
.mq-row:hover{animation-play-state:paused}
.mq-half{display:flex;gap:clamp(14px,1.8vw,24px);padding-right:clamp(14px,1.8vw,24px)}
@keyframes mqa{to{transform:translateX(-50%)}}
.mq-item{position:relative;flex:0 0 auto;width:clamp(210px,23vw,340px);aspect-ratio:3/2;
  border-radius:var(--r-img);overflow:hidden;background:var(--surface);
  box-shadow:0 14px 34px rgba(var(--ink-rgb),.15)}
.mq-item.p{aspect-ratio:3/4;width:clamp(150px,16vw,235px)}
.mq-half .mq-item:nth-child(odd){transform:rotate(-1.3deg)}
.mq-half .mq-item:nth-child(even){transform:rotate(1.4deg) translateY(6px)}
.mq-item img{transform:scale(1.05);transition:transform .8s var(--ease)}
.mq-item:hover img{transform:scale(1)}
.mq-chip{position:absolute;left:10px;bottom:10px;background:rgba(var(--ink-rgb),.66);color:#f7f6f3;
  border-radius:100px;padding:6px 13px;font-size:11px;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.mq-row{animation:none}}

/* ============ tinted case-study copy ============ */
.sc-copy{color:var(--dark)}
.sc-copy .eyebrow{color:rgba(var(--ink-rgb),.55)}
.sc-copy .lede{color:rgba(var(--ink-rgb),.68)}

/* ============ footer contact form ============ */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,100px)}
@media(min-width:940px){.contact-grid{grid-template-columns:.9fr 1.1fr}}
.contact-left h2{margin:16px 0 20px;font-size:clamp(27px,3.2vw,42px);line-height:1.06}
.contact-left .lede{max-width:40ch;font-size:clamp(15px,1.02vw,16.5px)}
.direct{margin-top:clamp(30px,3.4vw,48px)}
.direct a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-top:1px solid var(--rule);padding:15px 0;
  font-size:clamp(16px,1.5vw,22px);letter-spacing:-.015em;transition:padding-left .45s var(--ease)}
.direct a:last-child{border-bottom:1px solid var(--rule)}
.direct a:hover{padding-left:12px}
.direct a span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cform{display:grid;gap:clamp(22px,2.4vw,32px)}
.cf-row{display:grid;gap:clamp(22px,2.4vw,32px)}
@media(min-width:640px){.cf-row{grid-template-columns:1fr 1fr}}
.cf label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:4px}
.cf input,.cf select,.cf textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);color:var(--fg);font:inherit;font-size:17px;
  padding:10px 0;border-radius:0;outline:none;transition:border-color .3s var(--ease)}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-color:var(--fg)}
.cf select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%239d9c96' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;padding-right:26px}
.cf select option{color:var(--dark);background:#f7f6f3}
.cf textarea{resize:vertical;min-height:96px}
.cf ::placeholder{color:var(--faint)}
.cform .btn{justify-self:start;margin-top:4px}
.cf-note{font-size:12px;color:var(--faint);max-width:44ch}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv,.line>span,.hero .eyebrow,.hero .lede,.hero .hero-cta,.hc,.nav,.hero-scroll{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============ inner-page components ============ */
.hero-inner{padding-top:calc(96px + 4vh);padding-bottom:clamp(50px,6vw,84px)}
.hero-inner h1{margin:18px 0 22px;max-width:14ch}
.hero-inner .lede{max-width:44ch}
.crumb{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.crumb a{transition:color .3s}.crumb a:hover{color:var(--fg)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 30px}
.tag{border:1px solid var(--rule);border-radius:100px;padding:8px 16px;font-size:13px;color:var(--muted)}
.hero-media{border-radius:var(--r-panel);overflow:hidden;margin-top:clamp(36px,5vw,64px);
  aspect-ratio:3/2;background:var(--surface)}
@media(min-width:760px){
  .hero-media{aspect-ratio:21/9}
  .hero-media.wide{aspect-ratio:5/2}
}
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,60px);margin-top:clamp(30px,4vw,54px)}
@media(min-width:720px){.meta{grid-template-columns:repeat(4,1fr)}}
.meta div{border-top:1px solid var(--rule);padding:14px 0 4px}
.meta .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block}
.meta .v{font-size:15px;margin-top:5px}
.g2{display:grid;gap:clamp(14px,1.7vw,24px);grid-template-columns:1fr}
@media(min-width:680px){.g2{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.g2{grid-template-columns:repeat(3,1fr)}}
.gfig img{transform:scale(1.04);transition:transform 1s var(--ease)}
.gfig:hover img{transform:scale(1)}
.gfig figcaption{position:absolute;left:10px;bottom:10px;background:rgba(var(--ink-rgb),.66);color:#f7f6f3;
  border-radius:100px;padding:6px 13px;font-size:11px;letter-spacing:.02em;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pull{font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:500;
  font-size:clamp(24px,3vw,42px);line-height:1.12;letter-spacing:-.02em;max-width:22ch;
  margin:clamp(44px,6vw,84px) auto;text-align:center}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-top:1px solid var(--rule);padding:16px 0}
.fact:last-child{border-bottom:1px solid var(--rule)}
.fact b{font-weight:500;font-size:15px;letter-spacing:-.008em}
.fact span{color:var(--muted);font-size:13px;text-align:right}
.portrait-ph{aspect-ratio:4/5;border:1px dashed var(--rule);border-radius:var(--r-panel);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  color:var(--faint);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.8}
.about-portrait{border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);margin-top:clamp(36px,5vw,64px);align-items:start}
@media(min-width:880px){.about-grid{grid-template-columns:.9fr 1.1fr;gap:clamp(50px,7vw,110px)}}
.next-wrap{max-width:1100px;margin:0 auto}

/* WP niceties: rendered content inside lede-style columns */
.lede-content p{font-size:clamp(16px,1.22vw,19px);line-height:1.52;color:var(--muted);letter-spacing:-.005em}
.lede-content p+p{margin-top:1.1em}
.lede-content .arrow{margin-top:30px}
img{max-width:100%}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ featured work reel ============ */
/* A dark panel that rises behind a curved edge. Names left, photographs right,
   the two paired as the page scrolls. Height comes from the number of items. */
.reel-band{padding-left:0;padding-right:0;overflow:clip}
.reel{position:relative;height:calc((var(--reel-n,3) + 1) * 78vh)}
.reel-pin{position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;padding:clamp(14px,2vw,28px)}
.reel-panel{position:relative;width:100%;height:calc(100% - 2px);
  background:var(--bg);color:var(--fg);border-radius:var(--r-panel);
  overflow:hidden;padding:clamp(24px,3.4vw,54px);
  display:flex;flex-direction:column;
  /* The curved top edge. Two elliptical corners meeting in the middle make one
     smooth arch; the script grows them as the panel arrives and returns both to
     the ordinary panel radius once it has settled, so a flat top is genuinely
     flat. Without script they stay at the ordinary radius. */
  border-start-start-radius:var(--arcx,var(--r-panel)) var(--arcy,var(--r-panel));
  border-start-end-radius:var(--arcx,var(--r-panel)) var(--arcy,var(--r-panel))}
.reel-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  flex:0 0 auto;opacity:var(--flat,1);transition:opacity .3s linear}
.reel-cols{flex:1 1 auto;display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,48px);
  align-items:center;min-height:0;margin-top:clamp(18px,2.4vw,34px)}
@media(min-width:900px){.reel-cols{grid-template-columns:1.05fr .95fr}}
.reel-list{list-style:none;margin:0;padding:0}

/* --- names --- */
.reel-names{position:relative;min-height:0;height:100%;display:flex;align-items:center;overflow:hidden}
.reel-names .reel-list{width:100%;will-change:transform}
.reel-name{padding:clamp(10px,1.4vw,20px) 0;opacity:.28;
  transition:opacity .5s var(--ease),filter .5s var(--ease);filter:blur(1px)}
.reel-name.on{opacity:1;filter:none}
.reel-client{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:600;line-height:1.02;letter-spacing:-.022em;
  font-size:clamp(30px,5.2vw,68px)}
.reel-note{display:block;margin-top:.5em;font-size:clamp(13px,1.1vw,15px);
  line-height:1.5;color:var(--muted);max-width:38ch}

/* --- photographs --- */
.reel-shots{position:relative;min-height:0;height:100%;display:flex;align-items:center;overflow:hidden}
.reel-shots .reel-list{width:100%;will-change:transform}
.reel-shot{padding:clamp(8px,1vw,14px) 0;opacity:.3;transition:opacity .5s var(--ease)}
.reel-shot.on{opacity:1}
.reel-shot a{display:block}
.reel-fig{position:relative;margin:0;border-radius:calc(var(--r-panel) - 10px);
  overflow:hidden;background:var(--surface);aspect-ratio:4/3}
.reel-fig img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.1s var(--ease)}
.reel-shot.on .reel-fig img{transform:scale(1)}
.reel-chip{position:absolute;right:12px;bottom:12px;
  background:rgba(var(--ink-rgb),.62);color:#f7f6f3;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r-pill);padding:7px 14px;
  font-size:12px;letter-spacing:-.005em;white-space:nowrap}

/* --- progress --- */
.reel-bar{flex:0 0 auto;height:2px;margin-top:clamp(16px,2vw,28px);
  background:var(--rule);border-radius:2px;overflow:hidden}
.reel-bar i{display:block;height:100%;width:0%;background:currentColor;opacity:.75}

/* --- stacked fallback: phones, reduced motion, and no JavaScript --- */
@media(max-width:899px){
  .reel{height:auto!important}
  .reel-pin{position:static;height:auto;display:block;padding:0 var(--pad)}
  .reel-panel{height:auto;clip-path:none;border-radius:var(--r-panel)}
  .reel-cols{grid-template-columns:1fr;gap:0;align-items:start}
  .reel-names,.reel-shots{height:auto;overflow:visible;display:block}
  .reel-names .reel-list,.reel-shots .reel-list{transform:none!important}
  .reel-name,.reel-shot{opacity:1;filter:none}
  .reel-names{display:none}
  .reel-shot{padding:0 0 clamp(26px,5vw,40px)}
  .reel-shot .reel-fig{margin-bottom:14px}
  .reel-shot::after{content:attr(data-client);display:block;font-family:var(--serif);
    font-variation-settings:'opsz' 144;font-weight:600;font-size:clamp(24px,6vw,34px);
    letter-spacing:-.02em;line-height:1.05}
  .reel-bar{display:none}
}
@media(prefers-reduced-motion:reduce){
  .reel-name,.reel-shot{opacity:1;filter:none;transition:none}
  .reel-fig img{transform:none;transition:none}
}

/* ---------- service page: onward routes ---------- */
.sv-next-row{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
@media(min-width:820px){.sv-next-row{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);border-top:0}}
.sv-next-link{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(20px,2.2vw,28px) 0;border-bottom:1px solid var(--rule);
  font-size:clamp(16px,1.35vw,20px);letter-spacing:-.015em;
  transition:color .3s var(--ease),gap .4s var(--ease)}
@media(min-width:820px){.sv-next-link{border-top:1px solid var(--rule)}}
.sv-next-link:hover{gap:26px}
.sv-next-link svg{width:26px;flex:0 0 auto}

/* ============ full-bleed hero ============ */
.hf{position:relative;height:100svh;min-height:520px;overflow:hidden;
  background:var(--bg);color:var(--fg);display:flex;align-items:flex-end}
.hf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.08);animation:hfDrift 18s var(--ease) forwards}
@keyframes hfDrift{to{transform:scale(1)}}
.hf::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.42) 0%,rgba(var(--ink-rgb),0) 32%,rgba(var(--ink-rgb),.72) 100%)}
.hf-type{position:relative;z-index:2;width:100%;text-align:center;
  padding:0 var(--pad) clamp(74px,13vh,150px)}
.hf-eyebrow{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.9}
.hf-big{display:block;color:#fff;font-weight:600;text-transform:uppercase;
  font-size:clamp(46px,15vw,290px);line-height:.84;letter-spacing:-.045em;margin-top:12px}
.hf-script{display:block;font-family:var(--serif);font-style:italic;font-variation-settings:'opsz' 144;
  font-weight:600;letter-spacing:-.02em;line-height:.9;
  font-size:clamp(30px,8vw,145px);margin-top:-.22em;color:var(--accent,#E4622F)}
.hf-lede{position:absolute;z-index:2;left:var(--pad);bottom:clamp(24px,4vh,44px);
  max-width:34ch;font-size:clamp(13px,1.05vw,16px);color:rgba(255,255,255,.84)}
.hf-plus{position:absolute;z-index:2;right:var(--pad);bottom:clamp(24px,4vh,44px);
  width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.6);color:#fff;
  display:grid;place-items:center;font-size:22px;transition:background .35s,transform .35s var(--ease)}
.hf-plus:hover{background:rgba(255,255,255,.16);transform:scale(1.07)}
@media(max-width:720px){.hf-lede{display:none}}
@media(prefers-reduced-motion:reduce){.hf-img{animation:none;transform:none}}

/* ============ work chooser ============ */
.choose{position:relative;min-height:100svh;overflow:hidden;background:var(--bg);color:var(--fg);
  display:flex;align-items:center}
.ch-beds{position:absolute;inset:0;z-index:0}
.ch-bed{position:absolute;inset:0;opacity:0;transition:opacity 1.05s var(--ease)}
.ch-bed img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);transition:transform 6s var(--ease)}
.ch-bed.on{opacity:1}
.ch-bed.on img{transform:scale(1)}
.ch-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.86) 0%,rgba(var(--ink-rgb),.66) 45%,rgba(var(--ink-rgb),.34) 100%)}
.ch-inner{position:relative;z-index:2;width:100%;
  /* clears the floating header when this is the first thing under the hero */
  padding:clamp(110px,16vh,190px) var(--pad) clamp(70px,11vh,150px)}
.ch-eyebrow{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;opacity:.72;margin-bottom:clamp(20px,3vw,40px)}
.ch-list{list-style:none;margin:0;padding:0}
.ch-row a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(14px,2.4vw,36px);
  padding:clamp(9px,1.3vw,17px) 0;color:#fff}
.ch-n{font-family:var(--serif);font-variation-settings:'opsz' 144;font-size:clamp(12px,1.1vw,15px);
  opacity:.4;min-width:2.4em;transition:opacity .4s}
.ch-label{font-weight:500;letter-spacing:-.034em;line-height:1;
  font-size:clamp(26px,5.4vw,86px);opacity:.42;
  transition:opacity .5s var(--ease),transform .55s var(--ease)}
.ch-note{font-size:13px;opacity:0;transition:opacity .45s var(--ease)}
.ch-row.on .ch-label{opacity:1;transform:translateX(clamp(6px,1.1vw,20px))}
.ch-row.on .ch-n{opacity:.85}
.ch-row.on .ch-note{opacity:.75}
@media(max-width:720px){
  .ch-veil{background:linear-gradient(180deg,rgba(var(--ink-rgb),.55),rgba(var(--ink-rgb),.88))}
  .ch-row a{grid-template-columns:auto 1fr}
  .ch-note{display:none}
  .ch-label{opacity:.95}
}
@media(prefers-reduced-motion:reduce){
  .ch-bed,.ch-bed img,.ch-label{transition:none}
}

/* ============ header: fixed white capsule ============ */
.site-header{position:fixed;top:12px;left:12px;right:12px;z-index:80}
.header-inner{display:flex;align-items:center;gap:16px;height:60px;
  padding:6px 7px 6px 14px;background:var(--light);color:var(--dark);
  border-radius:9999px;border:1px solid rgba(var(--ink-rgb),.09);
  box-shadow:0 2px 6px rgba(var(--ink-rgb),.05),0 18px 40px -30px rgba(var(--ink-rgb),.55)}
.hdr-left,.hdr-right{flex:1 1 0;display:flex;align-items:center}
.hdr-right{justify-content:flex-end;gap:8px}
.hdr-logo{flex:0 0 auto;display:flex;align-items:center}
.hdr-logo a{display:flex;align-items:center;gap:9px;color:var(--dark)}
.hdr-logo img{width:auto;height:30px;object-fit:contain}
.hl-words b{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144;font-weight:600;
  font-size:17px;letter-spacing:-.022em;line-height:1}
.hl-words i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;margin-top:2px}

/* burger → close */
.burger{width:38px;height:38px;border-radius:9999px;background:transparent;color:var(--dark);
  display:grid;place-content:center;gap:5px;transition:background .35s}
.burger:hover{background:rgba(var(--ink-rgb),.07)}
.burger .bl{display:block;width:17px;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s}
body.nav-open .burger{background:var(--dark);color:var(--light)}
body.nav-open .burger .bl:first-child{transform:translateY(3.3px) rotate(45deg)}
body.nav-open .burger .bl:last-child{transform:translateY(-3.3px) rotate(-45deg)}

.hdr-cta{display:inline-flex;align-items:center;gap:7px;height:37px;padding:0 17px;
  border-radius:9999px;background:var(--accent);color:#fff;
  font-size:14px;letter-spacing:-.006em;white-space:nowrap;transition:filter .3s,gap .35s var(--ease)}
.hdr-cta:hover{filter:brightness(1.08);gap:11px}
.hdr-cta .ne{font-size:12px}

/* the panel that drops from under the header */
.navpanel{position:fixed;top:82px;left:12px;right:12px;bottom:12px;z-index:70;
  border-radius:34px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
body.nav-open .navpanel{opacity:1;visibility:visible;transform:none}
.np-menu{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,5vw,76px);
  background:linear-gradient(140deg,var(--np-a,#0B1A14) 0%,var(--np-b,#123528) 58%,var(--np-c,#1B4A38) 100%)}
.np-nav ul{list-style:none;margin:0;padding:0;text-align:right}
.np-nav a{display:block;position:relative;color:var(--light);
  font-weight:600;letter-spacing:-.03em;line-height:1.18;
  font-size:clamp(26px,3.4vw,44px);padding:4px 0;opacity:.82;
  transition:opacity .3s,transform .4s var(--ease)}
.np-nav a:hover{opacity:1;transform:translateX(-6px)}
.np-mark{position:absolute;right:100%;margin-right:12px;opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .35s var(--ease)}
.np-nav a:hover .np-mark{opacity:1;transform:none}
.np-foot{margin-top:auto;padding-top:34px;text-align:right;display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:rgba(247,246,243,.72)}
.np-art{position:relative;overflow:hidden;background:var(--surface)}
.np-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform 1.4s var(--ease)}
body.nav-open .np-art img{transform:scale(1)}
body.nav-open{overflow:hidden}
@media(max-width:820px){
  .navpanel{grid-template-columns:1fr}
  .np-art{display:none}
  .np-nav ul{text-align:left}
  .np-foot{text-align:left}
  .np-mark{right:auto;left:100%;margin:0 0 0 10px}
  .np-nav a:hover{transform:translateX(6px)}
  .hdr-cta{padding:0 13px;font-size:13px}
  .hl-words i{display:none}
}
@media(prefers-reduced-motion:reduce){
  .navpanel,.np-art img,.burger .bl{transition:none}
}


/* ============================================================
   Homepage — the sticky gridded hero and the bands under it
   ============================================================
   Colours are the site's own: pale linen for the light bands, deep pine for
   the dark ones, the warm orange for the accent and the pastels for the
   bento. Type is Geist and Fraunces throughout. */
:root{
  --cap-pale:var(--light);        /* the light bands */
  --cap-deep:var(--dark);         /* the near-black bands, a deep pine */
  --cap-warm:var(--accent);       /* the italic accent */
  --cap-x:clamp(16px,1.9vw,36px); /* the gutter, 36px at full width */
  --cap-gap:clamp(10px,1.05vw,20px);
  --cap-r:clamp(12px,1.05vw,20px);
}

/* ---------- shared type ---------- */
.cap-h1{font-family:var(--sans);font-weight:700;letter-spacing:-.08em;line-height:.8;
  font-size:clamp(50px,7.7vw,158px);text-transform:uppercase}
.cap-h1-sm{font-family:var(--sans);font-weight:600;letter-spacing:-.065em;line-height:.94;
  font-size:clamp(34px,5.1vw,104px);max-width:16ch}
.cap-h2{font-family:var(--sans);font-weight:500;letter-spacing:-.065em;line-height:.96;
  font-size:clamp(32px,4.3vw,88px);max-width:15ch}
.cap-h1-sm em,.cap-h2 em{font-family:var(--serif);font-style:italic;
  font-variation-settings:'opsz' 144;font-weight:500;letter-spacing:-.03em;color:var(--cap-warm)}
.cap-label{display:block;font-size:clamp(11px,.72vw,13px);letter-spacing:.16em;
  text-transform:uppercase;opacity:.45;margin-bottom:clamp(16px,1.5vw,26px)}
.cap-sub{margin-top:clamp(16px,1.4vw,24px);font-weight:600;letter-spacing:-.05em;
  line-height:1.27;font-size:clamp(17px,1.15vw,22px);opacity:.62;max-width:46ch}
.cap-body{font-weight:500;letter-spacing:-.05em;line-height:1.4;
  font-size:clamp(16px,1.05vw,20px);opacity:.62;max-width:44ch}
.cap-body+.cap-body{margin-top:1.15em}
.cap-ne{display:inline-block;transition:transform .45s var(--ease)}
.cap-link{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(22px,2vw,34px);
  font-size:16px;font-weight:600;letter-spacing:-.04em;border-bottom:1px solid currentColor;
  padding-bottom:3px}
.cap-link:hover .cap-ne{transform:translate(3px,-3px)}
.cap-btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(30px,3vw,54px);
  border-radius:100px;padding:16px 30px;font-size:15px;font-weight:600;letter-spacing:-.03em;
  background:var(--cap-deep);color:var(--cap-pale);
  transition:transform .4s var(--ease),opacity .4s var(--ease)}
.cap-btn:hover{transform:translateY(-2px);opacity:.88}
.cap-btn:hover .cap-ne{transform:translate(3px,-3px)}

/* ---------- the bands ---------- */
/* The flow sits above the hero and slides up over it as you scroll. */
.cap-flow{position:relative;z-index:2}
.cap{position:relative;z-index:1;padding:clamp(88px,10.4vw,200px) var(--cap-x)}
.cap-in{max-width:1848px;margin:0 auto}
.cap-pale{background:var(--cap-pale);color:var(--cap-deep)}
.cap-deep{background:var(--cap-deep);color:var(--cap-pale)}
.cap-about{padding-bottom:clamp(70px,8.3vw,160px)}
.cap-bento-band{padding:clamp(70px,8.3vw,160px) var(--cap-x)}
.cap-work-band{padding-top:0}
.cap-say-band{padding:clamp(100px,12vw,230px) var(--cap-x)}
.cap-head{margin-bottom:clamp(38px,4.6vw,88px)}
.cap-head-mid{max-width:960px;margin-left:auto;margin-right:auto;text-align:center}
.cap-head-mid .cap-h2{max-width:none}

/* ============ hero ============ */
/* Sticky, so the About band rides up over the top of it. */
.cap-hero{position:sticky;top:0;z-index:1;overflow:hidden;
  height:100svh;min-height:600px;max-height:1000px;
  background:var(--cap-pale);color:var(--cap-deep);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,11vh,150px) var(--cap-x) clamp(28px,4vh,44px)}
/* four hairlines across the field, the same grid the bands are built on */
.cap-grid{position:absolute;inset:0;z-index:0;max-width:1848px;margin:0 auto;
  left:var(--cap-x);right:var(--cap-x);display:flex;justify-content:space-between}
.cap-grid i{width:1px;background:rgba(var(--ink-rgb),.09)}
@media(max-width:720px){.cap-grid i:nth-child(2),.cap-grid i:nth-child(4){display:none}}

/* the two photographs, tilted, flying up as the page settles */
.cap-shot{position:absolute;z-index:1;overflow:hidden;border-radius:var(--cap-r);
  box-shadow:0 40px 70px -50px rgba(var(--ink-rgb),.55);
  will-change:transform;
  transform:translateY(78vh) rotate(var(--rot,-6deg));
  animation:capFly 1.5s .12s var(--ease) forwards}
.cap-shot img{width:100%;height:100%;object-fit:cover}
@keyframes capFly{to{transform:translateY(0) rotate(var(--rot,-6deg))}}
.cap-shot-l{--rot:-6deg;left:-3%;top:46%;width:clamp(150px,20vw,384px);aspect-ratio:5/4}
.cap-shot-r{--rot:6deg;right:-3%;top:24%;width:clamp(140px,18vw,344px);aspect-ratio:4/5;
  animation-delay:.26s}
@media(max-width:900px){
  .cap-shot-l{left:-9%;top:auto;bottom:-4%;width:46vw}
  .cap-shot-r{right:-10%;top:16%;width:38vw}
}

.cap-hero-in{position:relative;z-index:2;text-align:center;margin:auto 0}
.cap-eyebrow{display:block;font-size:clamp(11px,.72vw,13px);letter-spacing:.2em;
  text-transform:uppercase;opacity:.5;margin-bottom:clamp(18px,2vw,34px)}
.cap-h1-line{display:flex;align-items:center;justify-content:center;
  gap:clamp(4px,.5vw,10px);flex-wrap:nowrap}
/* the O of the headline, drawn as a wide ring */
.cap-ring{display:inline-block;width:clamp(58px,15.2vw,310px);height:.74em;color:var(--cap-warm)}
.cap-ring svg{width:100%;height:100%;display:block;overflow:visible;
  stroke-dasharray:760;stroke-dashoffset:760;animation:capDraw 1.7s .5s var(--ease) forwards}
@keyframes capDraw{to{stroke-dashoffset:0}}
.cap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap-script{display:block;font-family:var(--serif);font-style:italic;
  font-variation-settings:'opsz' 144;font-weight:500;letter-spacing:-.045em;line-height:1;
  font-size:clamp(40px,6.5vw,132px);color:var(--cap-warm);margin-top:.1em;text-transform:none}

.cap-hero-foot{position:relative;z-index:2;display:flex;align-items:flex-end;
  justify-content:space-between;gap:24px}
.cap-hero-foot-l{display:flex;flex-direction:column;gap:clamp(10px,1.1vw,18px)}
.cap-who b{display:block;font-weight:700;font-size:clamp(14px,.95vw,18px);letter-spacing:-.03em}
.cap-who i{display:block;font-style:normal;font-weight:600;font-size:clamp(12px,.73vw,14px);
  letter-spacing:-.02em;opacity:.6;margin-top:2px}
.cap-lede{max-width:36ch;font-size:clamp(12px,.85vw,15px);line-height:1.45;opacity:.55}
.cap-down{flex:none;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(var(--ink-rgb),.24);display:grid;place-items:center;
  transition:background .35s,transform .35s var(--ease)}
.cap-down span{width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.cap-down:hover{background:rgba(var(--ink-rgb),.07);transform:translateY(3px)}
@media(max-width:860px){.cap-lede{display:none}}
@media(prefers-reduced-motion:reduce){
  .cap-shot{animation:none;transform:rotate(var(--rot,-6deg))}
  .cap-ring svg{animation:none;stroke-dashoffset:0}
}

/* ============ about ============ */
.cap-about-cols{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.2vw,60px);align-items:start}
@media(min-width:900px){.cap-about-cols{grid-template-columns:1.05fr 1fr;gap:clamp(40px,5vw,120px)}}
.cap-about-img{overflow:hidden;border-radius:var(--cap-r);background:rgba(var(--ink-rgb),.06)}
.cap-about-img img{width:100%;height:auto;display:block;
  transform:scale(1.07);transition:transform 1.4s var(--ease)}
.cap-about-img.in img,.rv.in .cap-about-img img{transform:none}
.cap-about-txt{padding-top:clamp(0px,1.6vw,30px)}
.cap-about-txt .cap-body{max-width:none}

/* ============ services ============ */
.cap-svc{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,246,243,.14)}
.cap-svc-row{border-bottom:1px solid rgba(247,246,243,.14)}
.cap-svc-row a{display:grid;grid-template-columns:58px 1fr auto auto;align-items:center;
  gap:clamp(16px,1.7vw,32px);padding:clamp(16px,1.6vw,28px) 0;color:inherit}
.cap-svc-th{width:58px;height:58px;border-radius:8px;overflow:hidden;flex:none;
  opacity:.62;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cap-svc-th img{width:100%;height:100%;object-fit:cover}
.cap-svc-row:hover .cap-svc-th{opacity:1;transform:scale(1.06)}
.cap-svc-body{min-width:0}
.cap-svc-t{display:block;font-weight:600;font-size:clamp(18px,1.15vw,22px);letter-spacing:-.05em;
  line-height:1.2;transition:transform .5s var(--ease)}
.cap-svc-row:hover .cap-svc-t{transform:translateX(9px)}
.cap-svc-b{display:block;margin-top:5px;font-size:15px;letter-spacing:-.03em;
  opacity:.55;max-width:56ch}
.cap-svc-from{font-size:15px;letter-spacing:-.03em;opacity:.6;white-space:nowrap}
.cap-svc-n{font-size:16px;opacity:.45;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .cap-svc-row a{grid-template-columns:44px 1fr auto;gap:14px}
  .cap-svc-th{width:44px;height:44px}
  .cap-svc-from{display:none}
}

/* ============ bento ============ */
/* Eight tiles on a four-column grid: the reasons on the pastels, photographs
   between them. It folds to two columns, then one. */
.cap-bento{display:grid;gap:var(--cap-gap);grid-template-columns:1fr;
  grid-auto-rows:minmax(190px,auto)}
.cap-cell{border-radius:var(--cap-r);overflow:hidden;position:relative}
.cap-say{background:var(--tint,#B7CDBB);color:var(--dark);
  padding:clamp(24px,2vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.cap-say h3{font-weight:600;font-size:clamp(19px,1.5vw,28px);letter-spacing:-.05em;
  line-height:1.14;margin-bottom:10px}
.cap-say p{font-size:clamp(14px,.9vw,17px);line-height:1.42;letter-spacing:-.03em;opacity:.72}
.cap-pic{background:rgba(var(--ink-rgb),.08);min-height:190px}
.cap-pic img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.3s var(--ease)}
.cap-pic:hover img{transform:scale(1.11)}
.cap-pic figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;
  font-size:14px;letter-spacing:-.03em;color:#fff;
  background:linear-gradient(transparent,rgba(var(--ink-rgb),.8));
  opacity:0;transition:opacity .45s var(--ease)}
.cap-pic:hover figcaption{opacity:1}
@media(min-width:760px){
  .cap-bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(210px,auto)}
}
@media(min-width:1100px){
  .cap-bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(230px,1fr)}
  .cap-cell-a{grid-column:span 2}
  .cap-cell-b{grid-column:span 2}
  .cap-cell-c{grid-row:span 2}
  .cap-cell-g{grid-column:span 2}
}

/* ============ work grid ============ */
.cap-work{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--cap-gap)}
@media(min-width:900px){.cap-work{grid-template-columns:repeat(4,1fr)}}
.cap-tile{position:relative;overflow:hidden;border-radius:var(--cap-r);aspect-ratio:4/5;
  background:rgba(var(--ink-rgb),.08)}
.cap-tile.wide{grid-column:span 2;aspect-ratio:8/5}
.cap-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.cap-tile:hover img{transform:scale(1.06)}
.cap-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;
  font-size:14px;letter-spacing:-.03em;color:#fff;
  background:linear-gradient(transparent,rgba(var(--ink-rgb),.82));
  opacity:0;transition:opacity .45s var(--ease)}
.cap-tile:hover figcaption{opacity:1}

/* ============ statement ============ */
.cap-say-band .cap-in{max-width:1300px}
.cap-say-b{margin-top:clamp(24px,2.4vw,44px);font-weight:500;letter-spacing:-.05em;
  line-height:1.4;font-size:clamp(16px,1.05vw,20px);opacity:.6;max-width:56ch}

/* ============ header: floating tab, centred ============ */
/* A small tab sitting at the top centre. It shrinks and lifts as you scroll,
   and opening it grows the same tab downwards into the menu — the panel is
   inside the tab rather than a separate sheet. */
/* Every measurement in the header is a variable, so the Header size setting
   scales the three tabs, the type and the menu together. */
:root{
  --hd-top:28px;  --hd-top2:16px;   /* at rest, and once you have scrolled */
  --hd-w:390px;   --hd-w2:300px;
  --hd-h:66px;    --hd-h2:55px;
  --hd-pad:24px;  --hd-label:12px;  --hd-link:27px;
  --hd-logo:26px; --hd-logo2:22px;
  --hd-ico:48px;  --hd-bar:40px;
  --hd-wbar:860px; --hd-wbar2:790px;   /* how wide the bar runs */
  --hd-row:14px;  --hd-meta:70px;
}
body.hd-compact{
  --hd-top:20px;  --hd-top2:12px;
  --hd-w:330px;   --hd-w2:258px;
  --hd-h:56px;    --hd-h2:47px;
  --hd-pad:20px;  --hd-label:11px;  --hd-link:22px;
  --hd-logo:22px; --hd-logo2:19px;
  --hd-ico:40px;  --hd-bar:33px;
  --hd-wbar:780px; --hd-wbar2:720px;
  --hd-row:11px;  --hd-meta:60px;
}
body.hd-large{
  --hd-top:32px;  --hd-top2:20px;
  --hd-w:470px;   --hd-w2:366px;
  --hd-h:80px;    --hd-h2:67px;
  --hd-pad:29px;  --hd-label:13px;  --hd-link:33px;
  --hd-logo:32px; --hd-logo2:27px;
  --hd-ico:56px;  --hd-bar:47px;
  --hd-wbar:960px; --hd-wbar2:880px;
  --hd-row:17px;  --hd-meta:82px;
}
body.hd-xlarge{
  --hd-top:36px;  --hd-top2:22px;
  --hd-w:560px;   --hd-w2:436px;
  --hd-h:94px;    --hd-h2:79px;
  --hd-pad:34px;  --hd-label:14px;  --hd-link:39px;
  --hd-logo:38px; --hd-logo2:32px;
  --hd-ico:64px;  --hd-bar:54px;
  --hd-wbar:1080px; --hd-wbar2:990px;
  --hd-row:20px;  --hd-meta:94px;
}

/* The logo has a size of its own, so it can be made bigger without growing the
   whole bar with it. --hd-logo is the header size's own figure; this scales it. */
body.lg-small  { --lg-x:.78 }
body.lg-regular{ --lg-x:1 }
body.lg-large  { --lg-x:1.28 }
body.lg-xlarge { --lg-x:1.6 }
body.lg-huge   { --lg-x:2 }

/* the wordmark and the enquiry button, both sitting in the bar */
.mt-logo{flex:none;display:flex;align-items:center;justify-self:start;color:inherit}
.mt-logo img{width:auto;height:calc(var(--hd-logo) * var(--lg-x,1));object-fit:contain;
  max-height:calc(var(--hd-h) - 12px);transition:height .35s var(--ease)}
.menu-shell.scrolled:not(.open) .mt-logo img{height:calc(var(--hd-logo2) * var(--lg-x,1));
  max-height:calc(var(--hd-h2) - 10px)}
.tb-words b{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:calc(var(--hd-label) * 1.25 * var(--lg-x,1));letter-spacing:-.022em;line-height:1}
.tb-words i{display:block;font-style:normal;font-size:calc(var(--hd-label) * .68 * var(--lg-x,1));letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;margin-top:2px}
.mt-cta{flex:none;justify-self:end;display:inline-flex;align-items:center;gap:9px;
  height:calc(var(--hd-h) * .58);padding:0 calc(var(--hd-pad) * .7);border-radius:6px;
  background:var(--accent);color:#fff;white-space:nowrap;
  font-size:calc(var(--hd-label) * .92);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  transition:height .35s var(--ease),filter .3s}
.menu-shell.scrolled:not(.open) .mt-cta{height:calc(var(--hd-h2) * .58)}
.mt-cta .ne{font-style:normal;font-size:11px;transition:transform .4s var(--ease)}
.mt-cta:hover{filter:brightness(1.07)}
.mt-cta:hover .ne{transform:translate(2px,-2px)}
.mt-cta-gap{display:block;width:1px}

.menu-shell{position:fixed;z-index:90;top:var(--hd-top);left:50%;transform:translateX(-50%);
  width:min(var(--hd-wbar),calc(100vw - 2 * var(--tb-x)));
  border-radius:7px;overflow:hidden;color:var(--dark);
  background:rgba(247,246,243,.94);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 66px rgba(var(--ink-rgb),.14);
  transition:top .35s var(--ease),width .35s var(--ease),
             background .35s,border-color .35s,box-shadow .35s}
/* past the fold it draws itself in a little */
.menu-shell.scrolled{top:var(--hd-top2);width:min(var(--hd-wbar2),calc(100vw - 2 * var(--tb-x)));
  box-shadow:0 12px 44px rgba(var(--ink-rgb),.12)}
/* open, it holds the roomier size whatever the scroll position */
.menu-shell.open{top:var(--hd-top2);width:min(var(--hd-wbar),calc(100vw - 2 * var(--tb-x)));
  box-shadow:0 26px 80px rgba(var(--ink-rgb),.2)}

.mt-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,2vw,30px);
  height:calc(var(--hd-h) - 2px);padding:0 calc(var(--hd-pad) * .72);transition:height .35s var(--ease)}
.menu-shell.scrolled:not(.open) .mt-bar{height:calc(var(--hd-h2) - 2px)}
.menu-toggle{display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,18px);height:100%;
  justify-self:center;padding:0 6px}
.mt-label{font-size:var(--hd-label);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  line-height:1}
/* on a phone the three tabs will not fit side by side, so the mark moves into
   the menu tab and the side tabs stand down */
.mt-mark{display:none}
.mt-mark img{width:auto;height:var(--hd-logo);object-fit:contain}

/* two bars that tilt into a shallow cross */
.menu-ico{position:relative;display:block;width:var(--hd-ico);height:20px}
.menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0;height:2px;
  width:var(--hd-bar);background:currentColor;
  transition:transform .35s var(--ease),top .35s var(--ease),width .35s var(--ease)}
.menu-ico::before{top:6px}
.menu-ico::after{top:14px}
.menu-shell.open .menu-ico::before{top:12px;width:var(--hd-ico);transform:rotate(12deg)}
.menu-shell.open .menu-ico::after{top:12px;width:var(--hd-ico);transform:rotate(-12deg)}
/* the panel's rule starts where the bar ends */
.menu-shell.open .mt-bar{border-bottom:1px solid rgba(var(--ink-rgb),.14)}

.menu-panel{max-height:0;overflow:hidden;
  transition:max-height .55s cubic-bezier(.4,0,.2,1)}
.menu-shell.open .menu-panel{max-height:min(84vh,880px);overflow-y:auto;overscroll-behavior:contain}
.menu-links{padding:0 var(--hd-pad)}
.menu-links ul{list-style:none;margin:0;padding:0}
.menu-links li{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.menu-links li:last-child{border-bottom:0}
/* stated outright: these rows are blocks. .has-sub elsewhere in this file is an
   inline-flex dropdown, and a shared class name once turned this list sideways. */
.menu-links li.ml-item{display:block}
.ml-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ml-row>a{flex:1 1 auto;display:block;padding:var(--hd-row) 0;
  font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-size:min(var(--hd-link),5.9vw);
  transition:color .3s,padding-left .35s var(--ease)}
.ml-row>a:hover{padding-left:8px;color:var(--accent)}
/* Anything with pages under it keeps them folded away. The word itself still
   goes to the page; the chevron beside it opens the list in place. */
.ml-more{flex:none;width:calc(var(--hd-link) * 1.26);height:calc(var(--hd-link) * 1.26);border-radius:50%;display:grid;place-items:center;
  transition:background .3s}
.ml-more:hover{background:rgba(var(--ink-rgb),.07)}
.ml-more i{display:block;width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
.ml-item.open .ml-more i{transform:translateY(2px) rotate(-135deg)}
.ml-sub{display:grid;max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.ml-item.open .ml-sub{max-height:1600px}
/* Past a phone the sub-list runs in two columns, so a long list of services
   fits the panel rather than needing to be scrolled to. */
@media(min-width:620px){
  .ml-sub{grid-template-columns:repeat(2,1fr);column-gap:clamp(18px,2.4vw,40px)}
}
.ml-sub a{font-size:calc(var(--hd-link) * .56);font-weight:600;letter-spacing:-.02em;opacity:.6;
  padding:9px 0 9px 14px;border-left:2px solid rgba(var(--ink-rgb),.14);
  transition:opacity .3s,color .3s,border-color .3s,padding-left .3s var(--ease)}
.ml-sub a:first-child{padding-top:2px}
.ml-sub a:last-child{padding-bottom:16px}
.ml-sub a:hover{opacity:1;color:var(--accent);border-color:var(--accent);padding-left:19px}
.ml-cta{color:var(--accent);display:flex;align-items:center;gap:10px}
.ml-cta .ne{font-size:.52em;line-height:1;transition:transform .4s var(--ease)}
.ml-cta:hover .ne{transform:translate(3px,-3px)}

.menu-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:var(--hd-meta);padding:16px var(--hd-pad);border-top:1px solid rgba(var(--ink-rgb),.14);
  font-size:10px;font-weight:700;letter-spacing:.05em}
/* the place is set in caps as a label; the address stays as it is written,
   which is both easier to read and short enough to sit on one line */
.menu-meta span{text-transform:uppercase}
.menu-meta a{font-size:11px;letter-spacing:0}
.menu-meta a{opacity:.55;transition:opacity .3s}
.menu-meta a:hover{opacity:1;color:var(--accent)}
@media(max-width:900px){
  .mt-cta,.mt-cta-gap{display:none}
  .mt-label{display:none}
  .mt-bar{grid-template-columns:1fr auto;padding:0 18px}
  .menu-toggle{justify-self:end}
  .menu-shell,.menu-shell.open{width:calc(100vw - 24px)}
  .menu-shell.scrolled:not(.open){width:calc(100vw - 40px)}
}
@media(max-width:420px){
  .menu-meta{padding:14px 18px}
  .menu-links{padding:0 18px}
  .mt-bar{padding:0 16px}
  .menu-ico{width:38px}
  .menu-ico::before,.menu-ico::after{width:32px}
  .menu-shell.open .menu-ico::before,.menu-shell.open .menu-ico::after{width:38px}
}
@media(prefers-reduced-motion:reduce){
  .menu-shell,.menu-panel,.mt-bar,.mt-logo img,.mt-cta,
  .menu-ico::before,.menu-ico::after,.ml-sub,.ml-more i{transition:none}
}

/* ============================================================
   Homepage — hero, stacking case studies, work rail
   ============================================================
   Built to the proportions of the reference: 78px/900 hero over a full-bleed
   photograph, 56px gutters, ~140–170px band padding, pale #f7f6f3 against the
   deep pine. Type is Geist and Fraunces; the accent is the orange. */
:root{
  --lc-pale:var(--light);
  --lc-ink:var(--dark);
  /* Three numbers set the whole page's proportions: the side gutter, the space
     above and below a band, and the space between a band's heading and its
     content. The density setting swaps all three together, so the rhythm stays
     consistent whichever is chosen. Compact is the default — gutters close to
     the edge so photographs run wide, and bands that sit near each other. */
  --lc-x:clamp(16px,1.8vw,34px);
  --lc-pad:clamp(52px,5.4vw,104px);
  --lc-gap:clamp(22px,2.4vw,42px);
}
body.dn-roomy{
  --lc-x:clamp(18px,2.9vw,56px);
  --lc-pad:clamp(80px,8.9vw,170px);
  --lc-gap:clamp(30px,3.6vw,64px);
}
body.dn-tight{
  --lc-x:clamp(12px,1.1vw,20px);
  --lc-pad:clamp(38px,3.9vw,74px);
  --lc-gap:clamp(18px,1.8vw,30px);
}
.lc{position:relative;padding:var(--lc-pad) var(--lc-x)}
.lc-in{max-width:1808px;margin:0 auto}
.lc-pale{background:var(--lc-pale);color:var(--lc-ink)}
.lc-ink{background:var(--lc-ink);color:var(--lc-pale)}

/* small labels either end of a band */
.lc-eyes{display:flex;justify-content:space-between;gap:16px;
  padding-bottom:var(--lc-gap)}
.lc-eye{font-size:clamp(11px,.85vw,16px);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5}
.lc-h2{font-weight:900;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(30px,4.2vw,64px);text-transform:uppercase;max-width:16ch}
.lc-h1-sm{font-weight:900;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(30px,4vw,78px);text-transform:uppercase;max-width:14ch}
.lc-h2 em,.lc-h1-sm em,.lc-say em,.lc-band-l em,.lc-hl em,.lc-ph-h em,.lc-row-h em{
  font-family:var(--serif);font-variation-settings:'opsz' 144;font-style:italic;
  font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--accent)}
.lc-body{font-size:clamp(16px,1.05vw,20px);line-height:1.5;letter-spacing:-.02em;opacity:.66;
  max-width:46ch}
.lc-link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,2.2vw,34px);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px;transition:color .3s}
.lc-link:hover{color:var(--accent)}

/* ============ hero ============ */
.lc-hero{position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(120px,16vh,190px) var(--lc-x) clamp(80px,11vh,130px);
  background:var(--lc-ink);color:var(--lc-pale);text-align:center}
.lc-hero-media{position:absolute;inset:0;z-index:0}
.lc-hero-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.1);animation:lcDrift 22s var(--ease) forwards}
@keyframes lcDrift{to{transform:scale(1)}}
.lc-hero-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.38) 42%,rgba(var(--ink-rgb),.88) 100%)}
.lc-hero-in{position:relative;z-index:2;width:100%;max-width:1080px}
.lc-hero-h{font-weight:900;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(32px,4.06vw,78px);text-transform:uppercase}
/* each line rises into place, one after the next */
.lc-hl{display:block;overflow:hidden}
.lc-hl>span{display:block;transform:translateY(105%);
  animation:lcRise 1s var(--ease) forwards;animation-delay:calc(.18s + var(--n) * .13s)}
@keyframes lcRise{to{transform:none}}
.lc-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(28px,3.4vw,54px)}
.lc-btn{display:inline-flex;align-items:center;gap:10px;height:51px;padding:0 26px;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-radius:4px;transition:transform .35s var(--ease),filter .3s,background .3s,color .3s;
  opacity:0;animation:lcFade .8s var(--ease) .72s forwards}
@keyframes lcFade{to{opacity:1}}
.lc-btn:hover{transform:translateY(-2px)}
.lc-btn-on{background:var(--accent);color:#fff}
.lc-btn-on:hover{filter:brightness(1.08)}
.lc-btn-off{background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.lc-btn-off:hover{background:#fff;color:var(--lc-ink)}
.lc-scroll{position:absolute;z-index:2;right:var(--lc-x);bottom:clamp(24px,4vh,44px);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.66);writing-mode:vertical-rl}
.lc-scroll i{width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.7),transparent)}
@media(max-width:720px){.lc-scroll{display:none}}
@media(prefers-reduced-motion:reduce){
  .lc-hero-media img{animation:none;transform:none}
  .lc-hl>span,.lc-btn{animation:none;transform:none;opacity:1}
}

/* ============ approach ============ */
.lc-say{font-weight:900;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(26px,3.3vw,64px);max-width:24ch}
.lc-approach-cols{display:grid;gap:clamp(20px,2.4vw,44px);
  margin-top:var(--lc-gap);max-width:1100px}
@media(min-width:820px){.lc-approach-cols{grid-template-columns:1fr 1fr}}
.lc-approach-cols p{font-size:clamp(15px,1vw,18px);line-height:1.55;letter-spacing:-.015em;opacity:.62}

/* ============ case studies, stacking ============ */
/* Reuses the sticky stack: each card holds while the next rides up over it. */
.lc-stack-band{padding-bottom:clamp(110px,12vw,220px)}
.lc-card{top:calc(var(--hd-top2) + var(--hd-h2) + 18px + var(--i) * 16px)}
.lc-card-in{display:block;position:relative;overflow:hidden;
  border-radius:clamp(10px,1vw,18px);background:#1f2a24;
  box-shadow:0 -20px 60px rgba(0,0,0,.45)}
/* Held to the screen, so the whole card — photograph and bar — is visible while
   it sits pinned. A 16:9 ratio at full width would be taller than the viewport. */
.lc-card-media{display:block;height:clamp(200px,54svh,660px);overflow:hidden}
@media(max-width:720px){.lc-card-media{height:clamp(190px,38svh,360px)}}
.lc-card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease)}
.lc-card-in:hover img{transform:scale(1.04)}
.lc-card-bar{display:block;padding:clamp(16px,1.7vw,28px) clamp(18px,1.9vw,34px);
  background:rgba(var(--ink-rgb),.92);color:var(--lc-pale)}
.lc-card-top{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  margin-bottom:clamp(8px,.9vw,15px)}
.lc-card-loc{margin-left:auto}
.lc-card-n{font-size:12px;font-weight:800;letter-spacing:.1em;opacity:.45}
.lc-card-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;opacity:.5}
.lc-card-tag i{font-style:normal;font-size:7px;color:var(--accent)}
.lc-card-t{display:block;font-weight:900;letter-spacing:-.028em;line-height:1.1;
  font-size:clamp(20px,2.1vw,40px);text-transform:uppercase}
.lc-card-loc{font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.42}
.lc-card-go{font-size:18px;opacity:.5;transition:transform .4s var(--ease),opacity .3s}
.lc-card-in:hover .lc-card-go{opacity:1;transform:translate(3px,-3px)}
@media(max-width:640px){
  .lc-card-loc{display:none}
}

/* ============ big type band ============ */
.lc-band{padding-top:var(--lc-pad);padding-bottom:var(--lc-pad)}
/* set at a size that reads as a sentence rather than a wall of letters */
.lc-band-l{display:block;font-weight:900;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(28px,6.2vw,104px);text-transform:uppercase}
.lc-band-l:nth-child(even){text-align:right}
.lc-band-l em{line-height:1}

/* ============ who I am ============ */
.lc-stat{display:flex;align-items:baseline;gap:18px;padding-bottom:clamp(26px,3vw,52px)}
.lc-stat b{font-weight:900;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(56px,8.6vw,168px);color:var(--accent)}
.lc-stat span{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.45}
.lc-about-cols{display:grid;gap:clamp(28px,3.4vw,64px);margin-top:clamp(20px,2.4vw,40px);
  align-items:center}
@media(min-width:900px){.lc-about-cols{grid-template-columns:1fr 1fr}}
.lc-about-txt .lc-eye{margin-bottom:clamp(12px,1.3vw,20px)}
.lc-about-txt .lc-h1-sm{margin-bottom:clamp(14px,1.6vw,24px)}
.lc-about-txt .lc-body{max-width:44ch}
/* a fixed frame, so the column stays level whether or not the picture has
   arrived yet — a bare height:auto image collapses to nothing while loading
   and drags the whole row out of line */
.lc-about-img{overflow:hidden;border-radius:clamp(10px,1vw,18px);
  background:rgba(var(--ink-rgb),.06);aspect-ratio:4/3}
.lc-about-img img{width:100%;height:100%;object-fit:cover;display:block}

/* ============ worked with ============ */
.lc-client-list{list-style:none;margin:var(--lc-gap) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 12px}
.lc-client-list li{border:1px solid rgba(247,246,243,.2);border-radius:100px;
  padding:11px 22px;font-size:clamp(12px,.95vw,16px);font-weight:600;letter-spacing:-.01em;
  transition:background .35s,color .35s,border-color .35s}
.lc-client-list li:hover{background:var(--lc-pale);color:var(--lc-ink);border-color:var(--lc-pale)}

/* ============================================================
   Scope, work, the band above the footer, and the footer
   ============================================================
   Built to the reference's proportions — 1360 container, 64px headings,
   [ 01/09 ] counters, one flat colour block at the bottom — in the site's
   own linen, deep pine, pastels and orange. */
/* The work band once carried its own gutter and container, which is why it sat
   narrower than everything around it. It now uses the page's own spacing
   variables directly, so one rhythm runs the whole way down. Aliasing them on
   :root would not work: the density setting lives on the body, and a variable
   defined on :root resolves against the html element above it. */
.mx{position:relative;padding:var(--lc-pad) var(--lc-x)}
.mx-in{max-width:1808px;margin:0 auto}
.mx-h2{font-weight:900;letter-spacing:-.028em;line-height:1.02;
  font-size:clamp(30px,4.2vw,64px);text-transform:uppercase;max-width:16ch}
.mx-h2 em,.mx-cta-h em{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-style:italic;font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--accent)}
.mx-pag{font-size:clamp(12px,.86vw,16px);letter-spacing:.04em;opacity:.5;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-rule{height:1px;background:currentColor;opacity:.16;
  margin-top:clamp(28px,3.4vw,60px)}
.mx-btn{display:inline-flex;align-items:center;gap:10px;height:51px;padding:0 26px;
  border-radius:4px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;transition:transform .35s var(--ease),background .3s,color .3s,filter .3s}
.mx-btn i{font-style:normal;transition:transform .4s var(--ease)}
.mx-btn:hover{transform:translateY(-2px)}
.mx-btn:hover i{transform:translateX(4px)}
.mx-btn-on{background:var(--accent);color:#fff}
.mx-btn-on:hover{filter:brightness(1.08)}
.mx-btn-off{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);letter-spacing:.04em;text-transform:none}
.mx-btn-off:hover{background:#fff;color:var(--dark)}
.mx-btn-line{background:transparent;color:inherit;border:1px solid currentColor}

/* ============ what I photograph ============ */
/* A panel that holds still while the list runs through it. The band is as tall
   as the list is long; the stage inside it is one screen. */
/* ============ our work ============ */
.mx-work-band{background:var(--dark);color:var(--light);padding-left:0;padding-right:0}
.mx-work-band .mx-in{padding:0 var(--lc-x)}
.mx-work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  flex-wrap:wrap;padding-bottom:clamp(28px,3.6vw,64px)}
.mx-work-side{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.mx-work-side .mx-btn{background:transparent;color:inherit;border:1px solid rgba(247,246,243,.3)}
.mx-work-side .mx-btn:hover{background:var(--light);color:var(--dark)}
.mx-rail{display:flex;gap:clamp(12px,1.4vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 var(--lc-x) 4px;scrollbar-width:none;cursor:grab}
.mx-rail::-webkit-scrollbar{display:none}
.mx-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.mx-rail:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* one project fills the content width, so the photograph is as wide as the
   page allows rather than sitting inside a second, narrower container */
/* the last term is the sliver of the next project left showing, so it is
   obvious there is more to come without giving up the width of this one; it
   shrinks on a phone, where every pixel of the photograph counts */
.mx-slide{flex:0 0 auto;scroll-snap-align:start;
  width:min(calc(100vw - 2 * var(--lc-x) - clamp(6px,1.9vw,28px)), 1760px)}
.mx-slide-in{display:grid;grid-template-columns:1fr;gap:clamp(16px,1.8vw,30px);
  background:var(--light);color:var(--dark);border-radius:4px;
  padding:clamp(16px,1.6vw,24px);height:100%}
@media(min-width:820px){.mx-slide-in{grid-template-columns:1.75fr 1fr;align-items:stretch}}
/* 3:2 sits between a 4:3 and a 3:2 original, so almost nothing is cut away */
.mx-slide-img{position:relative;display:block;overflow:hidden;border-radius:2px;
  background:rgba(var(--ink-rgb),.08);aspect-ratio:3/2;height:auto}
.mx-slide-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.mx-slide-in:hover .mx-slide-img img{transform:scale(1.04)}
.mx-chip{position:absolute;left:14px;top:14px;padding:8px 14px;border-radius:100px;
  background:rgba(247,246,243,.94);color:var(--dark);
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.mx-slide-txt{display:flex;flex-direction:column;justify-content:space-between;gap:18px;
  padding:clamp(6px,1vw,18px) clamp(4px,1vw,16px) clamp(6px,1vw,14px)}
.mx-slide-meta{display:flex;flex-wrap:wrap;gap:8px 22px;
  font-size:12px;letter-spacing:.02em;opacity:.55}
.mx-slide-meta span{display:inline-flex;align-items:center;gap:8px}
.mx-slide-meta i{font-style:normal;font-size:9px;color:var(--accent)}
.mx-slide-t{display:block;font-weight:900;letter-spacing:-.028em;line-height:1.05;
  font-size:clamp(21px,2.4vw,42px);text-transform:uppercase}
.mx-slide-go{display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.55;
  transition:opacity .3s,color .3s}
.mx-slide-go i{font-style:normal;transition:transform .4s var(--ease)}
.mx-slide-in:hover .mx-slide-go{opacity:1;color:var(--accent)}
.mx-slide-in:hover .mx-slide-go i{transform:translate(3px,-3px)}
.mx-bar{display:block;height:1px;background:rgba(247,246,243,.2);position:relative;
  margin-top:clamp(24px,2.6vw,44px)}
.mx-bar i{position:absolute;left:0;top:-1px;height:3px;width:14%;background:var(--accent);
  transition:left .2s linear,width .2s linear}

/* ============ the band above the footer ============ */
.mx-cta{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  min-height:min(84svh,860px);padding:clamp(180px,30vh,478px) var(--lc-x) clamp(80px,12vw,240px);
  background:var(--dark);color:var(--light)}
/* The picture arrives out of focus and dissolves into the band's own colour at
   the top, so there is no hard edge where it starts — the sharp copy is masked
   in from below, the blurred copy covers the top and fades out to nothing. */
.mx-cta-bg{position:absolute;inset:0;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 44%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 44%)}
.mx-cta-bg img{width:100%;height:100%;object-fit:cover}
.mx-cta-blur{position:absolute;inset:0;z-index:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 26%,transparent 52%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 26%,transparent 52%)}
.mx-cta-blur img{width:100%;height:100%;object-fit:cover;
  filter:blur(30px);transform:scale(1.12)}
/* a last wash of the band colour over the very top, so the join is invisible */
.mx-cta-fade{position:absolute;left:0;right:0;top:0;height:26%;z-index:2;
  background:linear-gradient(180deg,var(--dark) 0%,rgba(var(--ink-rgb),.6) 42%,rgba(var(--ink-rgb),0) 100%)}
.mx-cta-shade{position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),0) 0%,rgba(var(--ink-rgb),.42) 42%,rgba(var(--ink-rgb),.88) 100%)}
.mx-cta-in{position:relative;z-index:4;width:100%}
.mx-cta-h{font-weight:900;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(32px,4.4vw,64px);text-transform:uppercase;max-width:14ch;color:#fff}
.mx-cta-p{margin-top:clamp(16px,1.7vw,28px);max-width:594px;
  font-size:clamp(16px,1.06vw,20px);line-height:1.5;color:rgba(255,255,255,.78)}
.mx-cta-btns{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,24px);
  margin-top:clamp(26px,3vw,50px)}

/* ============ footer ============ */
/* One quiet block at the bottom: the mark and a line about the business on the
   left, the links and contact on the right, then a slim legal bar. */
.ft{background:var(--foot,#18211d);padding:clamp(46px,5.4vw,84px) var(--dm-x,24px) clamp(24px,2.6vw,38px)}
.ft[data-tone="ink"]{color:var(--dark);--fl:rgba(var(--ink-rgb),.62);--fr:rgba(var(--ink-rgb),.16)}
.ft[data-tone="light"]{color:var(--light);--fl:rgba(247,246,243,.62);--fr:rgba(247,246,243,.16)}
.ft-in{max-width:1460px;margin:0 auto}
/* Four columns across the top, on the shape of the wedding site: who you are,
   the services, the rest of the site, and how to reach you. The services
   column is the long one, so it is given the room to run. */
.ft-grid{display:grid;gap:clamp(26px,2.6vw,44px);
  grid-template-columns:1fr;align-items:start;
  padding-bottom:clamp(30px,3.4vw,58px)}
@media(min-width:640px){.ft-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.ft-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1240px){
  .ft-grid{grid-template-columns:1.25fr 1fr .85fr 1.05fr}
  .ft-grid-5{grid-template-columns:1.2fr 1fr .8fr .8fr 1.05fr}
  .ft-grid-4{grid-template-columns:1.25fr 1fr .85fr 1.05fr}
  .ft-grid-3{grid-template-columns:1.3fr 1fr 1.05fr}
  .ft-grid-2{grid-template-columns:1.3fr 1.05fr}
}
.ft-mark{display:inline-flex;align-items:center}
.ft-mark img{width:auto;height:clamp(40px,3.4vw,58px);object-fit:contain}
.ft-mark b{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.022em;line-height:1}
.ft-mark i{display:block;font-style:normal;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fl);margin-top:5px}
.ft-blurb{margin:clamp(14px,1.5vw,22px) 0 0;max-width:36ch;
  font-size:clamp(14px,1vw,16px);line-height:1.6;color:var(--fl)}
.ft-about{margin:clamp(10px,1vw,14px) 0 0;max-width:40ch;
  font-size:clamp(13px,.95vw,15px);line-height:1.65;color:var(--fl)}
.ft-brand-reach{display:grid;gap:4px;margin:clamp(14px,1.5vw,22px) 0 0;
  font-size:clamp(14px,1vw,16px)}
.ft-brand-reach a{overflow-wrap:break-word;transition:color .3s}
.ft-brand-reach a:hover{color:var(--accent)}
.ft-brand .ft-soc{margin-top:clamp(16px,1.8vw,26px)}
.ft-soc{display:flex;gap:14px}
.ft-soc a{display:grid;place-items:center;width:24px;height:24px;color:var(--fl);
  transition:color .3s,transform .3s var(--ease)}
.ft-soc svg{width:100%;height:100%;fill:currentColor}
.ft-soc a:hover{color:var(--accent);transform:translateY(-2px)}

.ft-col{min-width:0}
.ft-col h2{margin:0 0 clamp(14px,1.5vw,22px);
  font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-style:italic;font-weight:800;font-size:clamp(16px,1.2vw,20px);
  letter-spacing:-.01em;line-height:1.3;color:var(--accent)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ft-col li{font-size:clamp(14px,1.02vw,17px);overflow-wrap:break-word;word-break:normal;hyphens:none}
/* the contact column carries an email address, which is long and must not be
   cut in half; it is set a little smaller and given a line of its own */
.ft-col-contact .ft-reach li{display:grid;gap:2px;font-size:clamp(13px,.94vw,15px)}
.ft-col-contact .ft-reach li span{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ft-col-contact .ft-reach a,.ft-col-contact .ft-reach i{font-style:normal;
  font-size:clamp(14px,1vw,16px);overflow-wrap:break-word}
.ft-col a{transition:color .3s}
.ft-col a:hover{color:var(--accent)}
.ft-col li span{color:var(--fl)}
.ft-cta{display:inline-flex;align-items:center;margin-top:clamp(16px,1.8vw,26px);
  border-radius:4px;padding:12px 22px;font-size:15px;font-weight:700;
  background:var(--accent);color:#fff;transition:filter .3s,transform .3s var(--ease)}
.ft-cta:hover{filter:brightness(1.07);transform:translateY(-2px)}

.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:10px 28px;flex-wrap:wrap;
  padding-top:clamp(18px,2vw,28px);border-top:1px solid var(--fr);
  font-size:13px;color:var(--fl)}
.ft-copy{margin-right:auto}
.ft-smallprint{display:inline-flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.ft-smallprint a{transition:color .3s}
.ft-smallprint a:hover{color:var(--accent)}
.ft-legal{display:inline-flex;flex-wrap:wrap;gap:6px 24px;align-items:center}
.ft-legal a{transition:color .3s}
.ft-legal a:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .mx-slide-img img,.mx-btn,.mx-bar i{transition:none}
}

/* ============================================================
   Homepage — the studio layout
   ============================================================
   Built to the reference's proportions: 1360 container, 240px between bands,
   78/64/56/24/20/16 type all at weight 600 and uppercase for the headings.
   The ground is the site's linen rather than their cream, the ink is the deep
   pine, and the one hot colour is the orange. */
.mh-h56{font-weight:900;letter-spacing:-.028em;line-height:1.14;
  font-size:clamp(28px,3.7vw,56px);text-transform:uppercase}
.mh-h56 em,.mh-hero-h em{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-style:italic;font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--accent)}
.mh-eyebrow{display:block;font-size:clamp(11px,.85vw,16px);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5}
.mh-link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,2.2vw,34px);
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:4px;transition:color .3s}
.mh-link i{font-style:normal;transition:transform .4s var(--ease)}
.mh-link:hover{color:var(--accent)}
.mh-link:hover i{transform:translateX(4px)}
.mh-btn-ghost{background:transparent;color:inherit;border:1px solid currentColor}
.mh-btn-ghost:hover{background:var(--dark);color:var(--light);border-color:var(--dark)}

/* ============ hero ============ */
/* Pale to begin with, the statement over an outlined frame. Scrolling fills
   the frame with the photograph and grows it to the full width, on the spot. */
/* The photograph fills the band from the moment you land on it — no outlined
   frame growing out as you scroll, and no second screen of travel to pay for
   the move. */
.mh-hero{position:relative;height:100svh;min-height:560px;background:var(--light)}
.mh-hero-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(110px,15vh,180px) var(--lc-x) clamp(40px,7vh,80px);
  background:var(--light);color:var(--dark)}
/* The photograph is in the frame from the first frame you see; scrolling grows
   the frame out to the full width. It sits high so the statement below it is
   readable against the pale ground before the picture arrives underneath. */
.mh-hero-frame{position:absolute;z-index:0;inset:0;overflow:hidden;
  border:0;border-radius:0;background:rgba(var(--ink-rgb),.05)}
.mh-hero-frame img{width:100%;height:100%;object-fit:cover}
/* With more than one photograph they are stacked and cross-faded. The stack
   only kicks in past the first, so a hero with a single photograph is laid out
   exactly as it was and nothing has to load before it shows. */
.mh-hero-many .mh-hero-shot{position:absolute;inset:0;opacity:0;
  transition:opacity 1.5s var(--ease)}
.mh-hero-many .mh-hero-shot.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .mh-hero-many .mh-hero-shot{transition:none}
}
.mh-hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.34) 0%,rgba(var(--ink-rgb),.22) 42%,rgba(var(--ink-rgb),.84) 100%);
  opacity:1}
.mh-hero-in{position:relative;z-index:2;width:100%;color:var(--light)}
.mh-hero-h{font-weight:900;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(32px,4.9vw,78px);text-transform:uppercase;max-width:17ch}
.mh-hl{display:block;overflow:hidden}
.mh-hl>span{display:block;transform:translateY(105%);
  animation:mhRise .95s var(--ease) forwards;animation-delay:calc(.15s + var(--n) * .12s)}
@keyframes mhRise{to{transform:none}}
.mh-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,3vw,56px);
  flex-wrap:wrap;margin-top:clamp(24px,3.4vw,56px);
  opacity:0;animation:mhFade .8s var(--ease) .62s forwards}
@keyframes mhFade{to{opacity:1}}
.mh-hero-p{max-width:46ch;font-size:clamp(15px,1.06vw,20px);line-height:1.5;opacity:.7}
.mh-hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.mh-scroll{position:absolute;z-index:2;right:var(--lc-x);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--light);opacity:.6}
.mh-scroll i{width:1px;height:56px;background:currentColor}
@media(max-width:900px){.mh-scroll{display:none}}
@media(prefers-reduced-motion:reduce){
  .mh-hl>span,.mh-hero-foot{animation:none;transform:none;opacity:1}
}

/* ============ the standard ============ */
.mh-std{background:var(--light);color:var(--dark)}
.mh-std-top{display:grid;gap:clamp(22px,3vw,64px);align-items:start}
@media(min-width:900px){.mh-std-top{grid-template-columns:1fr .62fr}}
.mh-std-p p{font-size:clamp(15px,1.06vw,20px);line-height:1.5;opacity:.66;max-width:44ch}
.mh-std-p p+p{margin-top:1.1em}
.mh-std-pair{display:grid;gap:clamp(12px,1.6vw,28px);
  margin-top:clamp(34px,4.6vw,88px);align-items:start}
@media(min-width:820px){
  .mh-std-pair{grid-template-columns:1.06fr 1fr}
  /* the second one hangs lower than the first, as on the reference */
  .mh-std-img.low{margin-top:clamp(30px,5vw,96px)}
}
/* No fixed height: each photograph keeps its own shape, so nothing is trimmed
   to a letterbox and both run as large as the column allows. */
.mh-std-img{overflow:hidden;border-radius:4px;background:rgba(var(--ink-rgb),.07)}
/* the grow-into-place reveal is gone with the fixed heights: at natural size a
   1.05 scale clips five per cent of the picture until the reveal lands, which
   is the opposite of showing the whole thing */
.mh-std-img img{width:100%;height:auto;display:block}

/* ============ how a job runs ============ */
.mh-caps{background:var(--light);color:var(--dark);padding-bottom:clamp(72px,8.4vw,160px)}
.mh-caps-top{position:relative;overflow:hidden;
  padding:clamp(90px,13vw,240px) var(--lc-x) clamp(80px,10vw,190px);
  color:var(--light)}
.mh-caps-bg{position:absolute;inset:0;z-index:0}
.mh-caps-bg img{width:100%;height:100%;object-fit:cover}
.mh-caps-veil{position:absolute;inset:0;z-index:1;background:rgba(var(--ink-rgb),.68)}
.mh-caps-head{position:relative;z-index:2}
.mh-caps-head p{margin-top:clamp(16px,1.8vw,28px);max-width:52ch;
  font-size:clamp(15px,1.06vw,20px);line-height:1.5;color:rgba(247,246,243,.76)}
.mh-caps-cards{list-style:none;margin:clamp(-60px,-5vw,-40px) 0 0;padding:0;
  display:grid;gap:clamp(12px,1.4vw,24px);position:relative;z-index:3}
@media(min-width:820px){.mh-caps-cards{grid-template-columns:repeat(3,1fr)}}
.mh-cap{background:var(--light);border:1px solid rgba(var(--ink-rgb),.14);border-radius:4px;
  padding:clamp(24px,2.6vw,44px);transition:transform .45s var(--ease),box-shadow .45s}
.mh-cap:hover{transform:translateY(-4px);box-shadow:0 24px 60px -40px rgba(var(--ink-rgb),.6)}
.mh-cap h3{margin:clamp(14px,1.6vw,26px) 0 10px;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(19px,1.6vw,24px);text-transform:uppercase}
.mh-cap p{font-size:clamp(14px,.98vw,16px);line-height:1.55;opacity:.64}

/* ============ first one in ============ */
.mh-stats{background:var(--light);color:var(--dark);
  padding:clamp(72px,8.4vw,160px) var(--lc-x);overflow:hidden}
.mh-stats-top{display:grid;gap:clamp(20px,2.6vw,56px);align-items:end}
@media(min-width:900px){.mh-stats-top{grid-template-columns:1fr .6fr}}
.mh-stats-p{font-size:clamp(15px,1.06vw,20px);line-height:1.5;opacity:.66;max-width:42ch}
.mh-stat-row{list-style:none;margin:clamp(36px,4.4vw,84px) 0 0;padding:0;
  display:grid;gap:clamp(20px,2.4vw,44px);
  border-top:1px solid rgba(var(--ink-rgb),.14);padding-top:clamp(24px,2.8vw,50px)}
@media(min-width:760px){.mh-stat-row{grid-template-columns:repeat(3,1fr)}}
.mh-stat-row b{display:block;font-weight:900;letter-spacing:-.04em;line-height:.92;
  font-size:clamp(44px,6vw,110px);color:var(--accent)}
.mh-stat-row span{display:block;margin-top:10px;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;opacity:.45}
/* the word arrives a letter at a time as the band comes up */
.mh-word{margin:clamp(34px,4vw,72px) 0 0;display:flex;flex-wrap:wrap;
  gap:0 .28em;font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(26px,5.2vw,88px);text-transform:uppercase}
/* each word is one unbreakable group, so a line can only turn between words */
.mh-word-w{display:inline-flex;white-space:nowrap}
.mh-word span{display:inline-block;opacity:0;transform:translateY(38%);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  transition-delay:calc(var(--n) * 34ms)}
.mh-word.in span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mh-word span{opacity:1;transform:none;transition:none}
}

/* ============ who you are dealing with ============ */
.mh-who{background:var(--light);color:var(--dark);padding:clamp(72px,8.4vw,160px) var(--lc-x)}
.mh-who-in{display:grid;gap:clamp(28px,3.4vw,72px);align-items:center}
@media(min-width:900px){.mh-who-in{grid-template-columns:1fr .82fr}}
.mh-who-p{margin:clamp(16px,1.8vw,28px) 0 clamp(22px,2.4vw,38px);max-width:44ch;
  font-size:clamp(15px,1.06vw,20px);line-height:1.5;opacity:.66}
.mh-who .mx-h2{margin-top:clamp(12px,1.4vw,22px)}
.mh-who-img{overflow:hidden;border-radius:4px;background:rgba(var(--ink-rgb),.07)}
.mh-who-img img{width:100%;height:auto;display:block}

/* ============ four-up: a photograph you choose through ============ */
.mh-pick{position:relative;overflow:hidden;color:var(--light);
  min-height:min(92svh,900px);display:flex;align-items:flex-end;
  padding:clamp(90px,12vw,200px) var(--lc-x) clamp(50px,6vw,100px)}
.mh-pick-beds{position:absolute;inset:0;z-index:0}
.mh-pick-bed{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.mh-pick-bed img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transition:transform 6s var(--ease)}
.mh-pick-bed.on{opacity:1}
.mh-pick-bed.on img{transform:none}
.mh-pick-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.42) 0%,rgba(var(--ink-rgb),.3) 40%,rgba(var(--ink-rgb),.86) 100%)}
.mh-pick-in{position:relative;z-index:2;width:100%}
.mh-pick-head{margin-bottom:clamp(26px,3.4vw,60px)}
.mh-pick-head .mh-eyebrow{opacity:.66;margin-bottom:clamp(12px,1.4vw,22px)}
.mh-pick-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.1vw,18px)}
@media(min-width:820px){.mh-pick-list{grid-template-columns:repeat(4,1fr)}}
.mh-pick-item a{display:flex;align-items:center;gap:14px;
  padding:clamp(16px,1.6vw,26px) clamp(16px,1.5vw,24px);
  border:1px solid rgba(247,246,243,.34);border-radius:4px;color:#fff;
  background:rgba(var(--ink-rgb),.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .4s var(--ease),border-color .4s,transform .4s var(--ease)}
.mh-pick-item.on a,.mh-pick-item a:hover{background:var(--light);color:var(--dark);
  border-color:var(--light);transform:translateY(-3px)}
.mh-pick-n{font-size:11px;font-weight:800;letter-spacing:.14em;opacity:.55}
.mh-pick-t{flex:1 1 auto;font-weight:900;letter-spacing:-.024em;line-height:1.1;
  font-size:clamp(15px,1.2vw,21px);text-transform:uppercase}
.mh-pick-go{font-size:15px;opacity:.6;transition:transform .4s var(--ease)}
.mh-pick-item.on .mh-pick-go,.mh-pick-item a:hover .mh-pick-go{opacity:1;transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){
  .mh-pick-bed,.mh-pick-bed img,.mh-pick-item a{transition:none}
}

/* ============================================================
   Homepage — one system, applied everywhere
   ============================================================
   The reference's discipline is the point: a single typeface at two weights,
   five heading sizes and nothing else, no letter-spacing tricks, no italics,
   four surfaces, two buttons. Every deviation from that list is what makes a
   page feel assembled rather than designed, so there are none. */
:root{
  --dm-x:clamp(16px,1.4vw,22px);
  --dm-pad:clamp(56px,6.4vw,104px);   /* the one vertical rhythm */
  --dm-ink:#18211d;                   /* headings, dark bands, dark buttons */
  --dm-body:rgba(24,33,29,.86);       /* running text */
  --dm-page:#f7f6f3;                  /* the page */
  --dm-alt:#eceae5;                   /* the alternate band */
  --dm-card:#fff;                     /* cards */
  --dm-gold:var(--accent);            /* primary buttons and the small labels */
}

/* --- the type scale: these five sizes and no others --- */
.dm-h-hero{font-size:clamp(24px,2.3vw,32px);font-weight:700;line-height:1.19}
.dm-h-sec {font-size:clamp(26px,2.7vw,38px);font-weight:700;line-height:1.3}
.dm-h-sub {font-size:clamp(22px,2.15vw,30px);font-weight:700;line-height:1.3}
.dm-h-card{font-size:clamp(19px,1.7vw,24px);font-weight:700;line-height:1.21}
.dm-h-lead{font-size:clamp(18px,1.6vw,22px);font-weight:700;line-height:1.32}
.dm-body,.dm-band p,.dm-ask p{font-size:clamp(16px,1.35vw,19px);font-weight:400;line-height:1.63;
  color:var(--dm-body)}
.dm-small{font-size:clamp(13px,1vw,15px);line-height:1.66;color:var(--dm-body)}
/* two label styles, used exactly where the reference uses them */
.dm-eye{display:block;font-size:clamp(14px,1.15vw,16px);font-weight:700;color:var(--dm-ink);
  margin-bottom:10px}
.dm-eye-caps{display:block;font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dm-gold);margin-bottom:14px}

/* --- surfaces --- */
.dm-band{background:var(--dm-page);color:var(--dm-ink);
  padding:clamp(14px,1.4vw,20px) var(--dm-x) clamp(10px,1vw,14px)}
/* the bands that need to breathe carry it themselves, as on the reference */
.dm-band.dm-air{padding-top:clamp(34px,3.6vw,56px);padding-bottom:clamp(34px,3.6vw,56px)}
.dm-alt{background:var(--dm-alt)}
.dm-in{max-width:1460px;margin:0 auto}
.dm-centre{text-align:center;margin-top:clamp(26px,2.8vw,40px)}
.dm-centre-h{text-align:center}

/* --- two buttons --- */
.dm-btn{display:inline-flex;align-items:center;gap:9px;border-radius:5px;
  padding:clamp(12px,1.05vw,14px) clamp(20px,1.7vw,26px);
  font-size:clamp(16px,1.3vw,18px);font-weight:600;line-height:1.3;
  transition:filter .3s,transform .3s var(--ease)}
.dm-btn i{font-style:normal}
.dm-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.dm-btn-gold{background:var(--dm-gold);color:#fff}
.dm-btn-ink{background:var(--dm-ink);color:var(--dm-page)}

/* ============ hero ============ */
.dm-hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(400px,54svh,474px);
  padding:clamp(96px,12vh,130px) var(--dm-x) clamp(34px,4vh,54px);
  background:var(--dm-ink)}
.dm-hero-img{position:absolute;inset:0;z-index:0}
.dm-hero-img img{width:100%;height:100%;object-fit:cover}
/* The photograph is the hero. Only enough of a scrim under the type to keep it
   readable — the previous version washed the picture out to near-solid, which
   is the single biggest reason this did not look like the reference. */
.dm-hero-wash{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(247,246,243,.62) 0%,rgba(247,246,243,.3) 20%,rgba(247,246,243,.04) 40%,rgba(247,246,243,0) 56%)}
.dm-hero-in{position:relative;z-index:2;width:100%;max-width:1460px;margin:0 auto}
.dm-hero-h{color:var(--dm-ink);max-width:26ch}
.dm-hero .dm-btn{margin-top:clamp(24px,2.6vw,36px);
  padding:clamp(15px,1.4vw,20px) clamp(24px,2.1vw,30px);
  font-size:clamp(17px,1.45vw,20px);font-weight:700}
@media(max-width:760px){
  .dm-hero-wash{background:linear-gradient(180deg,rgba(247,246,243,.9) 0%,rgba(247,246,243,.72) 46%,rgba(247,246,243,.28) 100%)}
}
/* the type carries its own soft halo so it holds over a busy frame without
   needing the whole picture dimmed */
.dm-hero-h,.dm-hero-in .dm-btn{text-shadow:0 1px 0 rgba(247,246,243,.55)}
.dm-hero-in .dm-btn{text-shadow:none}

/* ============ intro and service cards ============ */
/* a large, very faint arc sits behind the pale band — the reference's one
   decorative motif, and a big part of why that band does not read as a slab */
.dm-alt{position:relative;overflow:hidden}
.dm-alt>*{position:relative;z-index:1}
.dm-alt::before{content:"";position:absolute;z-index:0;left:50%;top:-46%;
  width:min(1500px,150vw);aspect-ratio:1/1;transform:translateX(-50%);
  border-radius:50%;background:rgba(24,33,29,.028);pointer-events:none}
.dm-intro{max-width:900px;margin:0 auto clamp(36px,4vw,62px);text-align:center}
.dm-intro p{margin-top:.85em}
.dm-cards{display:grid;gap:clamp(16px,1.7vw,26px);grid-template-columns:1fr}
@media(min-width:680px){.dm-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.dm-cards{grid-template-columns:repeat(3,1fr)}}
.dm-card{background:var(--dm-card);border-radius:5px;overflow:hidden;
  box-shadow:0 1px 3px rgba(24,33,29,.08),0 14px 30px -24px rgba(24,33,29,.5);
  transition:transform .35s var(--ease),box-shadow .35s}
.dm-card:hover{transform:translateY(-4px);box-shadow:0 2px 5px rgba(24,33,29,.09),0 26px 48px -30px rgba(24,33,29,.6)}
.dm-card a{display:flex;flex-direction:column;height:100%;color:inherit}
.dm-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--dm-alt);
  margin:14px 14px 0;border-radius:4px}
.dm-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dm-card:hover .dm-card-img img{transform:scale(1.04)}
.dm-card-body{display:flex;flex-direction:column;flex:1 1 auto;gap:12px;padding:20px 18px 22px}
.dm-card-body p{margin-bottom:auto}
.dm-more{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;
  color:var(--dm-gold)}
.dm-more i{font-style:normal;transition:transform .3s var(--ease)}
.dm-card:hover .dm-more i{transform:translateX(4px)}

/* ============ picture-and-copy rows (used by both list sections) ============ */
.dm-row,.dm-long-row{display:grid;gap:clamp(24px,2.8vw,48px);align-items:center;
  padding:clamp(16px,1.5vw,20px) 0 clamp(10px,1vw,14px)}
.dm-row+.dm-row,.dm-long-row+.dm-long-row{border-top:1px solid rgba(24,33,29,.1);
  margin-top:clamp(10px,1vw,14px)}
@media(min-width:900px){
  /* their image is ~44% of the viewport, the copy ~56% */
  .dm-row,.dm-long-row{grid-template-columns:1fr 1.2fr}
  .dm-row.flip,.dm-long-row.flip{grid-template-columns:1.2fr 1fr}
  .dm-row.flip .dm-row-img,.dm-long-row.flip .dm-long-img{order:2}
}
.dm-row-img,.dm-long-img{overflow:hidden;border-radius:5px;background:var(--dm-alt);
  height:clamp(260px,34vw,500px)}
.dm-row-img img,.dm-long-img img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1.4s var(--ease)}
.dm-row-img.in img,.dm-long-img.in img{transform:none}
.dm-row-txt h2,.dm-long-txt h3{margin-bottom:14px}
.dm-row-txt p,.dm-long-txt p{max-width:46ch}
.dm-row-txt .dm-btn,.dm-long-txt .dm-btn{margin-top:clamp(22px,2.2vw,30px)}
.dm-long-lead{margin-top:1em;font-weight:700;color:var(--dm-ink)}
.dm-long-txt .dm-long-lead+p{margin-top:.35em}
.dm-from{margin-top:1em;font-weight:700;color:var(--dm-ink)}

/* ============ the enquiry band ============ */
.dm-ask{background:var(--dm-ink);color:var(--dm-page);padding:var(--dm-pad) var(--dm-x)}
.dm-ask-in{display:grid;gap:clamp(26px,3vw,52px);align-items:center;max-width:1460px;margin:0 auto}
@media(min-width:900px){.dm-ask-in{grid-template-columns:1.3fr .7fr}}
.dm-ask h2{margin-bottom:14px}
.dm-ask p{color:rgba(247,246,243,.84);max-width:48ch}
.dm-ask-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
@media(min-width:900px){.dm-ask-side{align-items:center}}
.dm-ask-line{display:inline-flex;align-items:center;gap:11px;
  font-size:clamp(16px,1.35vw,19px);color:rgba(247,246,243,.9);transition:color .3s}
.dm-ask-line i{font-style:normal;color:var(--dm-gold)}
.dm-ask-line:hover{color:#fff}

/* ============ a snapshot of the work ============ */
.dm-snap .dm-centre-h{margin-bottom:clamp(28px,3vw,46px)}
.dm-snap-grid{display:grid;gap:clamp(12px,1.2vw,18px);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.dm-snap-grid{grid-template-columns:repeat(4,1fr)}}
.dm-snap-cell{overflow:hidden;border-radius:5px;aspect-ratio:4/5;background:var(--dm-alt)}
.dm-snap-cell img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.dm-snap-cell:hover img{transform:scale(1.05)}

/* ============ explore more ============ */
.dm-explore{background:var(--dm-alt);padding:clamp(26px,3vw,44px) var(--dm-x);text-align:center}
.dm-explore a{display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(17px,1.45vw,20px);font-weight:700;color:var(--dm-ink);
  border-bottom:2px solid var(--dm-gold);padding-bottom:5px;transition:color .3s}
.dm-explore i{font-style:normal;transition:transform .3s var(--ease)}
.dm-explore a:hover{color:var(--dm-gold)}
.dm-explore a:hover i{transform:translateX(5px)}

.dm-long-head{max-width:820px;margin:0 auto clamp(32px,3.6vw,56px);text-align:center}
.dm-long-head p{margin-top:14px}

/* ============ header: contact strip, logo, links, enquiry ============ */
/* 32px strip over a 134px bar, drawing in to 64px once you scroll — the
   reference's proportions, in the site's own colours. */
.bar-top{background:var(--dark);color:rgba(247,246,243,.82);font-size:13px}
.bar-top .bar-in{display:flex;justify-content:flex-end;align-items:center;gap:clamp(14px,2vw,30px);
  min-height:32px;padding-top:5px;padding-bottom:5px}
.bar-top a{display:inline-flex;align-items:center;gap:7px;transition:color .3s}
.bar-top a:hover{color:#fff}
.bar-top span,.bar-top i{font-style:normal;color:var(--accent)}
@media(max-width:640px){.bar-top .bar-in{justify-content:center;font-size:12px}}

.bar-in{max-width:1460px;margin:0 auto;padding-left:var(--dm-x,22px);padding-right:var(--dm-x,22px)}
.bar-head{position:sticky;top:0;z-index:90;background:var(--light);color:var(--dark);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.1);transition:box-shadow .3s}
.bar-head.stuck{box-shadow:0 8px 26px -18px rgba(var(--ink-rgb),.7)}
.bar-head>.bar-in{display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  height:var(--bar-h,134px);transition:height .35s var(--ease)}
.bar-head.stuck>.bar-in{--bar-h:64px}
.bar-logo{flex:none;display:flex;align-items:center}
.bar-logo img{width:auto;height:calc(var(--bar-logo,88px) * var(--lg-x,1));object-fit:contain;
  transition:height .35s var(--ease)}
.bar-head.stuck .bar-logo img{--bar-logo:44px}
.bar-words b{display:block;font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:600;font-size:clamp(17px,1.4vw,22px);letter-spacing:-.022em;line-height:1}
.bar-words i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;margin-top:3px}

.bar-nav{flex:1 1 auto;display:flex;justify-content:center}
.bar-nav>ul{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.bar-nav>ul>li{position:relative}
.bar-nav>ul>li>a{display:flex;align-items:center;gap:6px;padding:12px 11px;
  font-size:16px;font-weight:600;transition:color .3s}
.bar-nav>ul>li>a:hover{color:var(--accent)}
.bar-caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s}
.bar-has:hover .bar-caret,.bar-has:focus-within .bar-caret{transform:translateY(1px) rotate(225deg)}
.bar-sub{position:absolute;left:0;top:100%;min-width:238px;list-style:none;margin:0;padding:8px 0;
  background:var(--light);border-radius:4px;
  box-shadow:0 20px 44px -22px rgba(var(--ink-rgb),.6),0 0 0 1px rgba(var(--ink-rgb),.08);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.bar-has:hover .bar-sub,.bar-has:focus-within .bar-sub{opacity:1;visibility:visible;transform:none}
.bar-sub a{display:block;padding:9px 18px;font-size:16px;font-weight:400;transition:background .25s,color .25s}
.bar-sub a:hover{background:rgba(var(--ink-rgb),.05);color:var(--accent)}

.bar-right{flex:none;display:flex;align-items:center;gap:clamp(10px,1.3vw,18px)}
.bar-soc{display:grid;place-items:center;width:26px;height:26px;color:var(--dark);
  transition:color .3s,transform .3s var(--ease)}
.bar-soc svg{width:100%;height:100%;fill:currentColor}
.bar-soc:hover{color:var(--accent);transform:translateY(-2px)}
.bar-cta{display:inline-flex;align-items:center;border-radius:5px;white-space:nowrap;
  padding:clamp(12px,1.05vw,14px) clamp(18px,1.7vw,26px);
  font-size:clamp(16px,1.3vw,18px);font-weight:600;
  background:var(--accent);color:#fff;
  transition:background .35s,transform .3s var(--ease),filter .3s}
.bar-cta:hover{filter:brightness(1.07);transform:translateY(-2px)}
/* past the fold the button goes dark, as on the reference */
.bar-head.stuck .bar-cta{background:var(--dark);color:var(--light)}
.bar-head.stuck .bar-cta:hover{filter:brightness(1.3)}

.bar-burger{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;
  gap:5px;align-items:center}
.bar-burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s}
.bar-head.open .bar-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bar-head.open .bar-burger span:nth-child(2){opacity:0}
.bar-head.open .bar-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.bar-panel{max-height:0;overflow:hidden;background:var(--light);
  transition:max-height .45s cubic-bezier(.4,0,.2,1)}
.bar-head.open .bar-panel{max-height:min(78svh,720px);overflow-y:auto}
.bar-panel ul{list-style:none;margin:0;padding:0}
.bar-panel>ul{padding:8px var(--dm-x,24px) 18px}
.bar-panel>ul>li>a{display:block;padding:13px 0;font-size:18px;font-weight:700;
  border-bottom:1px solid rgba(var(--ink-rgb),.1)}
.bar-panel ul ul{padding:6px 0 12px 14px;border-left:2px solid rgba(var(--ink-rgb),.12);margin:8px 0 4px}
.bar-panel ul ul a{display:block;padding:7px 0;font-size:15px;font-weight:600;opacity:.72}
.bar-panel-foot{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px var(--dm-x,24px) 20px;
  border-top:1px solid rgba(var(--ink-rgb),.1);font-size:14px;font-weight:600}
.bar-panel-foot a{color:var(--accent)}

@media(max-width:1100px){
  .bar-nav{display:none}
  .bar-burger{display:flex}
  .bar-head>.bar-in{--bar-h:82px}
  .bar-head.stuck>.bar-in{--bar-h:64px}
  .bar-logo img{--bar-logo:52px}
}
@media(max-width:520px){
  .bar-cta{display:none}
  .bar-panel-foot a{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .bar-head>.bar-in,.bar-logo img,.bar-sub,.bar-panel,.bar-burger span{transition:none}
}

/* ============ a snapshot of the work ============ */
.dm-snap .dm-centre-h{margin-bottom:clamp(26px,3vw,48px)}
.dm-snap-grid{display:grid;gap:clamp(10px,1.2vw,18px);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.dm-snap-grid{grid-template-columns:repeat(4,1fr)}}
.dm-snap-cell{overflow:hidden;border-radius:5px;aspect-ratio:4/5;
  background:rgba(var(--ink-rgb),.07)}
.dm-snap-cell img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.dm-snap-cell:hover img{transform:scale(1.06)}

/* ============ explore more ============ */
.dm-explore{background:var(--dm-alt-c);padding:clamp(24px,3vw,44px) var(--dm-x);text-align:center}
.dm-explore a{display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(16px,1.25vw,21px);font-weight:700;letter-spacing:-.01em;
  color:var(--dm-ink);border-bottom:2px solid var(--accent);padding-bottom:5px;
  transition:color .3s}
.dm-explore i{font-style:normal;transition:transform .35s var(--ease)}
.dm-explore a:hover{color:var(--accent)}
.dm-explore a:hover i{transform:translateX(5px)}

/* ============ the enquiry form, brought into the same system ============ */
/* It was still speaking the old language — serif heading, its own dark, its own
   type sizes — which is exactly what made the page feel assembled from parts.
   One dark, one scale, one set of controls. */
#contact.band{background:var(--dm-ink);color:var(--dm-page);
  padding:var(--dm-pad) var(--dm-x)}
#contact .contact-grid{max-width:1460px;margin:0 auto;
  gap:clamp(34px,4vw,72px)}
#contact .eyebrow{font-size:clamp(13px,1.1vw,16px);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dm-gold)}
#contact .contact-left h2{font-family:var(--sans);font-variation-settings:normal;
  font-size:clamp(26px,2.7vw,38px);font-weight:700;line-height:1.3;letter-spacing:normal;
  margin:14px 0 14px}
#contact .contact-left .lede{font-size:clamp(16px,1.35vw,19px);font-weight:400;line-height:1.63;
  letter-spacing:normal;color:rgba(247,246,243,.84);max-width:46ch}
#contact .direct a{font-size:clamp(15px,1.2vw,17px);padding:14px 0}
#contact .direct a span{font-size:clamp(13px,1.05vw,15px);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dm-gold)}
/* scoped to the older enquiry band's markup: the rebuilt pages use .lc-f,
   and an id selector was quietly beating it */
#contact .cf label{font-size:14px;font-weight:600;letter-spacing:normal;text-transform:none}
#contact .cf input,#contact .cf select,#contact .cf textarea{border-radius:5px;font-size:16px}
#contact .cform .btn,#contact .cform button[type="submit"]{border-radius:5px;
  padding:clamp(12px,1.05vw,14px) clamp(20px,1.7vw,26px);
  font-size:clamp(16px,1.3vw,18px);font-weight:600;letter-spacing:normal;
  background:var(--dm-gold);color:#fff}
#contact .cform .btn:hover,#contact .cform button[type="submit"]:hover{filter:brightness(1.08);opacity:1}

.ft-mark i{letter-spacing:.08em}
.bar-words i{letter-spacing:.08em}
/* arrows inherit whatever the button around them had; pin them to the system */
.dm-btn i,.dm-more i,.dm-explore i,.dm-ask-line i,.ft-cta i{letter-spacing:normal}

/* ---- work rail: visible controls ---- */
/* The rail hides its scrollbar and a mouse wheel over it scrolls the page, so
   without these there is no obvious way to move it on a desktop. */
.mx-arrows{display:inline-flex;gap:8px}
.mx-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(247,246,243,.34);color:var(--light);background:transparent;
  transition:background .3s,color .3s,border-color .3s,opacity .3s}
.mx-arrow svg{width:20px;height:20px}
.mx-arrow:hover:not(:disabled){background:var(--light);color:var(--dark);border-color:var(--light)}
.mx-arrow:disabled{opacity:.3;cursor:default}
.mx-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.mx-arrow{width:38px;height:38px}.mx-arrow svg{width:17px;height:17px}}

/* ============================================================
   The written sections
   ============================================================
   Prose, the areas covered and the questions people ask. These exist so the
   site says in plain words what it is and where it works — for a search
   engine, and for the reader who wants the detail before enquiring. Same
   type scale and spacing as every other band; nothing new introduced. */

.lc-seo-in{display:grid;gap:clamp(30px,3.4vw,64px)}
@media(min-width:900px){.lc-seo-in{grid-template-columns:1.6fr 1fr;gap:clamp(40px,5vw,96px)}}
/* a supporting block, so its heading sits a step under the section headings */
.lc-seo-main .lc-h1-sm{font-size:clamp(24px,2.5vw,46px);max-width:22ch;
  margin-bottom:clamp(20px,2.2vw,36px)}
.lc-seo-main p{font-size:clamp(15px,1vw,18px);line-height:1.6;letter-spacing:-.015em;
  opacity:.62;max-width:62ch}
.lc-seo-main p + p{margin-top:clamp(14px,1.3vw,22px)}
.lc-seo-side .lc-eye{display:block;margin-bottom:clamp(14px,1.4vw,22px)}
.lc-seo-side ul{list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(var(--ink-rgb),.14)}
.lc-seo-side li{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.lc-seo-side a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;font-size:clamp(15px,1vw,18px);font-weight:600;letter-spacing:-.02em;
  transition:color .3s,padding-left .3s var(--ease)}
.lc-seo-side a::after{content:"\2197";font-size:.8em;opacity:.4}
.lc-seo-side a:hover{color:var(--accent);padding-left:8px}

.lc-faq-head{padding-bottom:var(--lc-gap)}
.lc-faq-head .lc-eye{display:block;margin-bottom:clamp(12px,1.3vw,20px)}
.lc-faq-list{margin:0;border-top:1px solid rgba(var(--ink-rgb),.14)}
.lc-faq-row{display:grid;gap:8px;padding:clamp(22px,2.4vw,38px) 0;
  border-bottom:1px solid rgba(var(--ink-rgb),.14)}
@media(min-width:900px){.lc-faq-row{grid-template-columns:1fr 1.35fr;gap:clamp(30px,4vw,80px)}}
.lc-faq-row dt{font-weight:900;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(18px,1.5vw,26px);text-transform:uppercase;max-width:22ch}
.lc-faq-row dd{margin:0;font-size:clamp(15px,1vw,18px);line-height:1.6;
  letter-spacing:-.015em;opacity:.62;max-width:62ch}
.lc-faq-row dd p{margin:0}
.lc-faq-row dd p + p{margin-top:clamp(10px,1vw,16px)}

/* ---- the homepage photo grid ---- */
/* Reuses the portfolio's packed masonry so there is one gallery in the theme.
   Only the spacing and the frame belong to this band; the packing, the shapes
   and the lightbox are the portfolio's. */
.lc-gal .lc-h1-sm{max-width:18ch}
.lc-gal-grid{margin-top:var(--lc-gap)}
.lc-gal .mgrid{--mgap:clamp(10px,1.1vw,18px)}
.lc-gal .mopen{background:rgba(var(--ink-rgb),.06);border-radius:clamp(8px,.7vw,12px)}
.lc-gal .mitem img{border-radius:clamp(8px,.7vw,12px)}
.lc-gal .lc-link{margin-top:clamp(26px,2.6vw,44px)}
/* a touch more room on a wide screen, so nine photographs still read as a set
   rather than a wall of thumbnails */
/* three balanced columns on a wide screen, so nine photographs read as a set
   rather than a wall of thumbnails, and the band ends on a level edge */
@media(min-width:960px){.lc-gal .mgrid{column-count:3}}
@media(min-width:1500px){.lc-gal .mgrid{column-count:4}}

/* ============================================================
   Inner pages
   ============================================================
   About, Portfolio, the case studies and Contact, built from the same pieces
   as the homepage: one very large uppercase heading with an italic accent, the
   small uppercase labels, the pale and ink bands, and the page's own density.
   The band colour settings still drive these bands, so a colour chosen in the
   admin continues to mean something. */

/* The page top is centred and set at a readable size rather than shouted —
   the pattern the inner pages were rebuilt to. */
/* ============ the top of an inner page ============
   The same opening as the homepage: the photograph fills the band and the
   page's name sits over it, on the left. Without a photograph the band keeps
   its flat colour and the type sits on that instead. */
.lc-phero{position:relative;overflow:hidden;
  background:var(--bg);color:var(--fg);
  display:flex;align-items:flex-end;
  padding:calc(var(--lc-pad) + clamp(70px,10vh,140px)) var(--lc-x) var(--lc-pad)}
.lc-phero-shot{color:var(--light);background:var(--dark);
  min-height:min(74svh,760px)}
.lc-phero-media{position:absolute;inset:0;z-index:0}
.lc-phero-media img{width:100%;height:100%;object-fit:cover}
.lc-phero-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.88) 0%,rgba(var(--ink-rgb),.6) 50%,rgba(var(--ink-rgb),.28) 100%),
             linear-gradient(0deg,rgba(var(--ink-rgb),.7) 0%,rgba(var(--ink-rgb),0) 60%)}
.lc-phero-in{position:relative;z-index:2;width:100%;max-width:1808px}
.lc-phero .mh-eyebrow{display:block;padding-bottom:clamp(10px,1.2vw,18px);opacity:.72}
.lc-phero-shot .lc-crumb,.lc-phero-shot .lc-ph-lede{opacity:.78}
.lc-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:clamp(11px,.7vw,13px);font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;opacity:.5;padding-bottom:clamp(20px,2.2vw,38px)}
.lc-crumb a{border-bottom:1px solid transparent;transition:border-color .3s}
.lc-crumb a:hover{border-color:currentColor}
.lc-crumb i{font-style:normal;opacity:.5}
.lc-phero .lc-eye{display:block;padding-bottom:clamp(10px,1.2vw,18px)}
.lc-ph-h{font-weight:900;letter-spacing:-.028em;line-height:1.02;text-transform:uppercase;
  font-size:clamp(34px,4.6vw,78px);max-width:17ch}
.lc-ph-lede{margin-top:clamp(14px,1.5vw,24px);max-width:52ch;
  font-size:clamp(15px,1.05vw,19px);line-height:1.6;letter-spacing:-.015em;opacity:.72}
.lc-meta{display:flex;flex-wrap:wrap;gap:0;margin:clamp(26px,3vw,50px) 0 0;
  border-top:1px solid currentColor}
.lc-meta>div{flex:1 1 190px;padding:16px 20px 16px 0;border-bottom:1px solid currentColor}
.lc-meta dt{font-size:clamp(10px,.66vw,12px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.5;margin-bottom:6px}
.lc-meta dd{margin:0;font-size:clamp(15px,1.05vw,19px);font-weight:600;letter-spacing:-.02em}
/* the band's rules are drawn in the text colour at low strength, which keeps
   them correct on every one of the palette's backgrounds */
.lc-meta,.lc-meta>div{border-color:rgba(127,127,127,.32)}
.lc-ph-img{margin:clamp(30px,3.6vw,64px) 0 0;overflow:hidden}
.lc-ph-img img{width:100%;height:auto;display:block;border-radius:4px}

/* prose set from the editor */
.lc-prose{font-size:clamp(16px,1.05vw,20px);line-height:1.6;letter-spacing:-.018em;
  opacity:.72;max-width:62ch}
.lc-prose h2,.lc-prose h3{font-weight:900;letter-spacing:-.025em;text-transform:uppercase;
  opacity:1;margin:1.6em 0 .5em;font-size:clamp(19px,1.6vw,28px)}
.lc-prose p{margin:0 0 1em}
.lc-prose a{border-bottom:1px solid currentColor}
.lc-prose ul,.lc-prose ol{margin:0 0 1em 1.1em}
.lc-prose li{margin:0 0 .35em}

/* About: the facts */
.lc-facts{list-style:none;margin:0;padding:0;border-top:1px solid rgba(var(--ink-rgb),.14)}
.lc-facts li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 20px;padding:15px 0;border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.lc-facts b{font-size:clamp(14px,.98vw,17px);font-weight:800;letter-spacing:-.01em}
.lc-facts span{font-size:clamp(14px,.98vw,17px);opacity:.6;text-align:right}
.lc-about-page{display:grid;gap:clamp(28px,3.4vw,64px);align-items:start}
@media(min-width:900px){.lc-about-page{grid-template-columns:1.25fr 1fr}}

/* Portfolio: the filter chips, in the site's own language */
.lc-chips{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:var(--lc-gap)}
.lc-chip{border:1px solid rgba(var(--ink-rgb),.2);background:none;border-radius:100px;
  padding:10px 20px;font:inherit;font-size:clamp(12px,.9vw,14px);font-weight:700;
  letter-spacing:-.01em;color:inherit;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.lc-chip:hover{border-color:currentColor}
.lc-chip.active{background:var(--lc-ink);border-color:var(--lc-ink);color:var(--lc-pale)}

/* Case studies index: one big row per project */
.lc-rows{display:grid;gap:clamp(30px,4vw,80px)}
.lc-row{display:grid;gap:clamp(16px,2vw,38px);align-items:center}
@media(min-width:860px){
  .lc-row{grid-template-columns:1.55fr 1fr}
  .lc-row:nth-child(even) .lc-row-media{order:2}
}
.lc-row-media{display:block;overflow:hidden;border-radius:clamp(8px,.7vw,12px);
  background:rgba(var(--ink-rgb),.06);aspect-ratio:3/2}
.lc-row-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.lc-row:hover .lc-row-media img{transform:scale(1.035)}
.lc-row-h{font-weight:900;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(24px,2.7vw,52px);text-transform:uppercase;margin:10px 0 12px}
.lc-row .lc-eye{display:block}
.lc-row p{font-size:clamp(15px,1vw,18px);line-height:1.55;letter-spacing:-.015em;
  opacity:.62;max-width:46ch;margin:0}

/* A case study: the brief, the quote, the pictures */
.lc-case-cols{display:grid;gap:clamp(24px,2.8vw,54px)}
@media(min-width:900px){.lc-case-cols{grid-template-columns:repeat(3,1fr)}}
.lc-case-col h2{font-size:clamp(11px,.72vw,13px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.45;margin:0 0 clamp(10px,1.1vw,16px)}
.lc-case-col p{margin:0;font-size:clamp(15px,1.05vw,19px);line-height:1.55;
  letter-spacing:-.018em;opacity:.72}
.lc-pull{margin:clamp(40px,5vw,96px) 0 0;font-weight:900;letter-spacing:-.03em;
  line-height:1.08;font-size:clamp(24px,3.2vw,60px);text-transform:uppercase;max-width:20ch}
.lc-case-shots{margin-top:clamp(34px,4vw,72px)}
.lc-next{margin-top:var(--lc-gap)}

/* Contact */
.lc-contact-cols{display:grid;gap:clamp(30px,3.6vw,72px);align-items:start}
.lc-contact-say .lc-h1-sm{margin-bottom:clamp(14px,1.6vw,24px)}
.lc-contact-say .lc-body{max-width:44ch}
@media(min-width:920px){.lc-contact-cols{grid-template-columns:1fr 1.1fr}}
.lc-direct{list-style:none;margin:clamp(24px,2.6vw,44px) 0 0;padding:0;
  border-top:1px solid rgba(247,246,243,.2)}
.lc-direct li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 18px;padding:14px 0;border-bottom:1px solid rgba(247,246,243,.2);min-width:0}
/* on a narrow screen the label sits above the value, so a long email address
   is never squeezed against the edge */
@media(max-width:560px){.lc-direct li{display:grid;gap:5px;justify-items:start}}
.lc-direct span{font-size:clamp(10px,.66vw,12px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.5}
.lc-direct a{font-size:clamp(15px,1.05vw,19px);font-weight:600;letter-spacing:-.02em;
  overflow-wrap:anywhere;border-bottom:1px solid transparent;transition:border-color .3s}
.lc-direct a:hover{border-color:currentColor}
.lc-hp{position:absolute;left:-9999px}
.lc-form{display:grid;gap:clamp(12px,1.2vw,18px)}
.lc-form-row{display:grid;gap:clamp(12px,1.2vw,18px)}
@media(min-width:620px){.lc-form-row{grid-template-columns:1fr 1fr}}
.lc-f{margin:0;display:grid;gap:7px;min-width:0}
.lc-f label{font-size:clamp(10px,.66vw,12px);font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;opacity:.5}
.lc-f input,.lc-f select,.lc-f textarea{width:100%;font:inherit;color:inherit;
  font-size:clamp(15px,1.02vw,18px);letter-spacing:-.02em;
  background:rgba(247,246,243,.06);border:1px solid rgba(247,246,243,.22);
  border-radius:4px;padding:14px 16px;transition:border-color .3s,background .3s}
.lc-f textarea{resize:vertical;min-height:120px}
.lc-f input::placeholder,.lc-f textarea::placeholder{color:currentColor;opacity:.34}
.lc-f input:focus,.lc-f select:focus,.lc-f textarea:focus{outline:none;
  border-color:var(--accent);background:rgba(247,246,243,.1)}
.lc-f select option{color:var(--dark)}
.lc-form .lc-btn{justify-self:start;border:0;cursor:pointer;font-family:inherit;
  opacity:1;animation:none}
.lc-note{margin:0;font-size:clamp(14px,.98vw,16px);letter-spacing:-.01em}
.lc-note.ok{color:#B7CDBB}
.lc-note.bad{color:#E8B394}

@media(prefers-reduced-motion:reduce){
  .lc-row:hover .lc-row-media img{transform:none}
}

/* the numbered blocks used by Contact */
.lc-steps-num{list-style:none;margin:var(--lc-gap) 0 0;padding:0;
  display:grid;gap:clamp(20px,2.4vw,40px)}
@media(min-width:700px){.lc-steps-num{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.lc-steps-num{grid-template-columns:repeat(4,1fr)}}
.lc-steps-num li{border-top:1px solid rgba(var(--ink-rgb),.16);padding-top:clamp(14px,1.4vw,22px)}
.lc-steps-num .lc-eye{display:block;color:var(--accent);opacity:1;margin-bottom:clamp(10px,1vw,16px)}
.lc-steps-num h3{margin:0 0 8px;font-weight:900;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(17px,1.35vw,24px);text-transform:uppercase}
.lc-steps-num p{margin:0;font-size:clamp(14px,.98vw,17px);line-height:1.55;
  letter-spacing:-.015em;opacity:.62}

/* ============================================================
   Agency homepage
   ============================================================
   A marketing agency's shape rather than a portfolio's: a colour-washed hero,
   a dark band that introduces you, the services as full-bleed colour panels
   each carrying a dark card over its foot, and a small label with a rule under
   it running through the whole page. Sentence case and a tighter type scale
   than the rest of the site — that is the point of it — but the colours are
   the site's own six pastels, the pine and the orange. */

.ag{position:relative;padding:var(--lc-pad) var(--lc-x);
  background:var(--lc-pale);color:var(--lc-ink)}
.ag-in{max-width:1808px;margin:0 auto}
.ag-dark{background:var(--lc-ink);color:var(--lc-pale)}

/* the label with a rule under it — the reference's signature */
.ag-eye{display:block;font-size:clamp(11px,.75vw,13px);font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;opacity:.6;
  padding-bottom:10px;margin-bottom:clamp(16px,1.8vw,26px);
  position:relative}
.ag-eye::after{content:"";position:absolute;left:0;bottom:0;
  width:clamp(90px,9vw,150px);height:4px;background:var(--accent);border-radius:2px}

/* sentence case, tight, nothing shouted */
.ag-h1{font-weight:800;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(28px,3.1vw,56px);max-width:18ch;margin:0}
.ag-h2{font-weight:800;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(23px,2.2vw,40px);max-width:20ch;margin:0}
.ag-h1 em,.ag-h2 em,.ag-hl em{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-style:italic;font-weight:500;letter-spacing:-.015em;color:var(--accent)}
.ag-body{margin:clamp(14px,1.5vw,24px) 0 0;font-size:clamp(15px,1.05vw,19px);
  line-height:1.6;letter-spacing:-.015em;opacity:.7;max-width:48ch}
.ag-link{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(18px,1.8vw,28px);
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:2px solid var(--accent);padding-bottom:3px;transition:color .3s}
.ag-link:hover{color:var(--accent)}
.ag-btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(20px,2.2vw,34px);
  height:54px;padding:0 30px;border-radius:6px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:800;letter-spacing:.02em;
  transition:transform .3s var(--ease),filter .3s}
.ag-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}

/* hero — the colour wash */
/* One photograph fills the band with the chosen colour laid over it, so the
   page still opens on a picture rather than a panel of type. The wash is what
   keeps it recognisably this layout rather than the editorial hero. */
.ag-hero{--wash:var(--accent);position:relative;overflow:hidden;color:#fff;
  min-height:clamp(560px,80svh,900px);display:flex;align-items:flex-end;
  padding-top:calc(var(--lc-pad) + clamp(50px,8vw,120px));
  padding-bottom:clamp(50px,7vw,110px);background:var(--lc-ink)}
.ag-hero-media{position:absolute;inset:0;z-index:0}
.ag-hero-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);animation:agDrift 20s var(--ease) forwards}
@keyframes agDrift{to{transform:none}}
/* two layers: a plain dark gradient that makes the type legible, and the colour
   laid over the photograph as a tint rather than a curtain, so the picture is
   still a picture */
.ag-hero-wash{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(var(--ink-rgb),.44) 0%, rgba(var(--ink-rgb),.2) 38%, rgba(var(--ink-rgb),.82) 100%)}
.ag-hero-wash::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 110% at 6% 100%, var(--wash) 0%, transparent 58%);
  mix-blend-mode:soft-light;opacity:.9}
/* with no photograph set, the wash alone still makes a hero rather than a gap */
.ag-hero-flat .ag-hero-wash{background:
  linear-gradient(160deg, var(--wash) 0%, rgba(var(--ink-rgb),.9) 70%)}
.ag-hero-in{position:relative;z-index:2;width:100%}
.ag-hero-h{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(34px,4.9vw,92px);max-width:15ch;
  text-shadow:0 2px 30px rgba(var(--ink-rgb),.42)}
.ag-hl{display:block;opacity:0;transform:translateY(18px);
  animation:agRise .8s var(--ease) forwards;animation-delay:calc(.1s + var(--n) * .12s)}
@keyframes agRise{to{opacity:1;transform:none}}
.ag-hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ag-btn-ghost{background:rgba(255,255,255,.12);color:#fff;
  border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.ag-btn-ghost:hover{background:#fff;color:var(--lc-ink);filter:none}

/* who you are */
.ag-split{display:grid;gap:clamp(28px,3.4vw,66px);align-items:center}
@media(min-width:920px){.ag-split{grid-template-columns:1.1fr 1fr}}
/* separate bordered cells rather than one ruled table, so an odd number of
   clients never leaves an empty box at the end of the last row */
.ag-clients{list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(10px,1.1vw,16px);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.ag-clients{grid-template-columns:repeat(3,1fr)}}
.ag-clients li{border:1px solid rgba(247,246,243,.18);border-radius:6px;overflow:hidden;
  transition:border-color .3s,transform .4s var(--ease)}
.ag-clients li:hover{border-color:var(--accent);transform:translateY(-3px)}
.ag-clients a{display:block;color:inherit}
.ag-clients li:not(.has-img){display:grid;place-items:center;text-align:center;
  padding:clamp(16px,2vw,28px) 14px;min-height:clamp(90px,9vw,130px)}
.ag-client-img{display:block;aspect-ratio:4/3;overflow:hidden;
  background:rgba(247,246,243,.06)}
.ag-client-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.ag-clients li:hover .ag-client-img img{transform:scale(1.05)}
.ag-client-n{display:block;padding:12px 14px;text-align:center;
  font-size:clamp(12px,.92vw,15px);font-weight:700;letter-spacing:-.01em;opacity:.8}
.ag-body-lead{max-width:44ch}

/* a picture beside the pitch */
.ag-pitch{display:grid;gap:clamp(24px,3vw,60px);align-items:center}
@media(min-width:920px){.ag-pitch{grid-template-columns:1fr 1.05fr}}
/* no fixed shape: the photograph keeps its own, so a portrait stays a portrait
   and nobody's head is cropped off */
.ag-pitch-img{margin:0;border-radius:6px;overflow:hidden;
  background:rgba(var(--ink-rgb),.06)}
/* The photograph keeps its own shape up to a sensible height. Past that it is
   trimmed from the bottom only — never the top — so a portrait always keeps
   the face, which is the whole reason this picture is here. */
.ag-pitch-img img{width:100%;height:auto;display:block;
  max-height:min(76vh,780px);object-fit:cover;object-position:center top}
.ag-pitch-img.fit-cover{aspect-ratio:4/3}
.ag-pitch-img.fit-cover img{height:100%;object-fit:cover}

/* how a job runs */
.ag-how-in{display:grid;gap:clamp(22px,2.6vw,50px)}
@media(min-width:920px){.ag-how-in{grid-template-columns:1.1fr 1fr}}
.ag-how-copy p{margin:0 0 1em;font-size:clamp(15px,1.05vw,19px);line-height:1.6;
  letter-spacing:-.015em;opacity:.7;max-width:46ch}

/* the services, as colour panels with a card over the foot */
.ag-panels{display:grid;background:var(--lc-pale)}
@media(min-width:820px){.ag-panels{grid-template-columns:1fr 1fr;align-items:stretch}}
.ag-panel{position:relative;background:var(--tint,#B7CDBB);color:var(--lc-ink);
  display:flex;flex-direction:column;padding:clamp(24px,2.6vw,46px)}
.ag-panel .ag-card{margin-top:auto}
/* two lines' worth of room whether the line wraps or not, so the photographs
   in a row start at the same height */
.ag-panel-line{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(20px,1.9vw,34px);max-width:16ch}
@media(min-width:820px){.ag-panel-line{min-height:2.28em}}
.ag-panel-img{margin:clamp(20px,2.2vw,36px) 0 0;border-radius:6px;overflow:hidden;
  aspect-ratio:16/10;background:rgba(var(--ink-rgb),.08)}
.ag-panel-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.ag-panel:hover .ag-panel-img img{transform:scale(1.04)}
.ag-card{background:var(--lc-ink);color:var(--lc-pale);border-radius:6px;
  padding:clamp(20px,2.1vw,34px);margin-top:clamp(28px,3vw,54px)}
/* The card rides up over the foot of the photograph — but at the same width as
   it, so the photograph, the card and the link underneath all share one left
   and right edge. Insetting the card left the edges disagreeing. */
.ag-card-lap{margin-top:clamp(-64px,-4vw,-28px);position:relative;z-index:1}
/* Each part of the card reserves the same room whatever the words are — two
   lines for the name, three for the description — so every card is the same
   height and the photographs, cards and links across a row all line up. Longer
   descriptions are trimmed with an ellipsis rather than pushing the card out. */
.ag-card h3{margin:0 0 10px;font-weight:800;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(20px,1.7vw,30px)}
.ag-card p{margin:0;font-size:clamp(14px,.98vw,17px);line-height:1.55;
  letter-spacing:-.015em;opacity:.68}
@media(min-width:820px){
  .ag-card h3{min-height:2.28em}
  .ag-card p{min-height:4.65em;display:-webkit-box;-webkit-line-clamp:3;
    -webkit-box-orient:vertical;overflow:hidden}
}
.ag-card .ag-link{margin-top:clamp(14px,1.4vw,22px)}

/* The bands borrowed from the other homepages carry the plain small labels
   used elsewhere on the site. This page has its own — the label with a rule
   under it — so the borrowed ones are dropped rather than run two kinds of
   label down one page. */
.ag-panels + .lc{padding-top:var(--lc-pad)}
body.ly-agency .lc-gal .lc-eyes,
body.ly-agency .lc-contact .lc-eyes{display:none}
body.ly-agency .lc-gal .lc-h1-sm,
body.ly-agency .lc-contact .lc-h1-sm{margin-top:0}

@media(prefers-reduced-motion:reduce){
  .ag-hl{animation:none;opacity:1;transform:none}
  .ag-hero-media img{animation:none;transform:none}
  .ag-btn:hover,.ag-clients li:hover{transform:none}
  .ag-panel:hover .ag-panel-img img,.ag-clients li:hover .ag-client-img img{transform:none}
}

/* ---- footer: the trust marks, the reach list and the about row ---- */
.ft-trust{list-style:none;margin:clamp(16px,1.8vw,26px) 0 0;padding:0;display:grid;gap:8px;
  max-width:230px}
.ft-trust a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  border:1px solid var(--fr);border-radius:6px;padding:9px 12px;
  transition:border-color .3s,transform .3s var(--ease)}
.ft-trust a:hover{border-color:var(--accent);transform:translateY(-2px)}
.ft-trust b{font-size:clamp(12px,.9vw,14px);font-weight:700;letter-spacing:-.01em}
.ft-trust span{font-size:clamp(11px,.82vw,13px);color:var(--fl)}

.ft-reach{list-style:none;margin:clamp(16px,1.8vw,24px) 0 0;padding:0;display:grid;gap:12px}
.ft-reach li{display:grid;gap:2px;min-width:0}
.ft-reach span{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fl)}
.ft-reach a,.ft-reach i{font-style:normal;font-size:clamp(14px,1.02vw,17px);font-weight:600;
  letter-spacing:-.015em;overflow-wrap:anywhere}
.ft-reach a{transition:color .3s}
.ft-reach a:hover{color:var(--accent)}

/* ============================================================
   Inner page components
   ============================================================
   Built to the pattern of the reference the pages were modelled on: a centred
   page top, bands that put a photograph beside centred copy, and cards with a
   picture, a category pill, a name and a pill button. Colours, type and the
   accent are the site's own. */

/* a photograph beside a block of copy, alternating sides down the page */
.fb-rows{display:grid;gap:clamp(40px,5vw,110px)}
.fb-row{display:grid;gap:clamp(22px,3vw,64px);align-items:center}
@media(min-width:900px){
  .fb-row{grid-template-columns:1fr 1fr}
  .fb-row:nth-child(even) .fb-row-img{order:2}
}
.fb-row-img{margin:0;border-radius:12px;overflow:hidden;background:rgba(var(--ink-rgb),.06)}
.fb-row-img img{width:100%;height:auto;display:block;
  max-height:min(72vh,700px);object-fit:cover;object-position:center top}
.fb-row-txt{text-align:center}
/* Without a photograph beside it the row has no reason to sit in one half of
   the page — it centres instead. */
.fb-row-solo{grid-template-columns:1fr !important}
.fb-row-solo .fb-row-txt{max-width:68ch;margin-inline:auto}
.fb-row-txt h2{margin:0 0 clamp(12px,1.4vw,20px);font-weight:800;letter-spacing:-.025em;
  line-height:1.1;font-size:clamp(24px,2.4vw,42px)}
.fb-row-txt p{margin:0 0 1em;font-size:clamp(15px,1.02vw,18px);line-height:1.65;
  letter-spacing:-.012em;opacity:.72}
.fb-row-txt p:last-child{margin-bottom:0}
.fb-row-txt .lc-link{margin-top:clamp(16px,1.8vw,26px)}

/* cards: a picture, a pill, a name, a line and a button */
.fb-grid{display:grid;gap:clamp(16px,1.8vw,28px);grid-template-columns:1fr}
@media(min-width:640px){.fb-grid{grid-template-columns:repeat(2,1fr)}}
.fb-grid-3{grid-template-columns:1fr}
@media(min-width:640px){.fb-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.fb-grid-3{grid-template-columns:repeat(3,1fr)}}
.fb-card{display:flex;flex-direction:column;overflow:hidden;border-radius:4px;
  background:var(--lc-ink);color:var(--lc-pale);border:1px solid rgba(247,246,243,.09);
  transition:transform .4s var(--ease),border-color .3s}
.fb-card:hover{transform:translateY(-4px);border-color:rgba(247,246,243,.26)}
.fb-card-img{display:block;overflow:hidden;aspect-ratio:4/3;background:rgba(247,246,243,.06)}
.fb-card-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.fb-card:hover .fb-card-img img{transform:scale(1.045)}
.fb-card-body{display:flex;flex-direction:column;gap:9px;flex:1;
  padding:clamp(18px,1.9vw,28px)}
.fb-pill{align-self:flex-start;border:1px solid rgba(247,246,243,.28);border-radius:999px;
  padding:5px 13px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  opacity:.75}
.fb-card h3{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.16;
  font-size:clamp(18px,1.5vw,25px)}
.fb-card .fb-sub{margin:0;font-size:clamp(13px,.95vw,15px);font-weight:600;
  letter-spacing:-.01em;opacity:.62}
.fb-card p{margin:0;font-size:clamp(13px,.95vw,15px);line-height:1.6;letter-spacing:-.012em;
  opacity:.6}
.fb-btn{align-self:flex-start;margin-top:auto;padding-top:clamp(12px,1.3vw,18px)}
.fb-btn span{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;
  border:1px solid rgba(247,246,243,.34);border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s}
.fb-card:hover .fb-btn span{background:var(--accent);border-color:var(--accent);color:#fff}

/* Contact: the form in a bordered card, the details beside it */
.fb-contact{display:grid;gap:clamp(26px,3vw,60px);align-items:start}
@media(min-width:920px){.fb-contact{grid-template-columns:1fr 1fr}}
.fb-formcard{background:var(--lc-ink);color:var(--lc-pale);border-radius:8px;
  border:1px solid rgba(247,246,243,.18);padding:clamp(22px,2.6vw,40px)}
.fb-details h2{margin:0 0 clamp(12px,1.4vw,18px);font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;opacity:.55}
.fb-details > p{margin:0 0 clamp(20px,2.2vw,34px);font-size:clamp(15px,1.05vw,18px);
  line-height:1.65;letter-spacing:-.012em;opacity:.72;max-width:46ch}
.fb-lines{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.3vw,18px)}
.fb-lines li{display:flex;align-items:center;gap:14px;min-width:0}
.fb-lines i{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;
  border-radius:8px;background:var(--accent);color:#fff;font-style:normal}
.fb-lines svg{width:19px;height:19px;fill:currentColor}
.fb-lines div{min-width:0}
.fb-lines b{display:block;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;opacity:.55;margin-bottom:2px}
.fb-lines a,.fb-lines span{font-size:clamp(14px,1.02vw,17px);font-weight:600;
  letter-spacing:-.015em;overflow-wrap:anywhere}
.fb-lines a{transition:color .3s}
.fb-lines a:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .fb-card:hover{transform:none}
  .fb-card:hover .fb-card-img img{transform:none}
}

/* ============================================================
   A service page
   ============================================================
   The photograph fills a framed hero with the name over it, then the pitch
   beside a picture, what a shoot covers, who it suits, the reasons to book,
   how a job runs as a set of openable rows, and recent work. */

.sv-hero-band{padding-top:clamp(18px,2vw,34px);padding-bottom:0;
  background:var(--lc-pale);color:var(--lc-ink)}
.sv-hero{position:relative;overflow:hidden;border-radius:4px;
  background:var(--lc-ink);color:var(--lc-pale);
  min-height:clamp(460px,60vw,660px);display:flex;align-items:flex-end;
  padding:clamp(26px,3.4vw,64px)}
.sv-hero-media{position:absolute;inset:0;z-index:0}
.sv-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.sv-hero-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg, rgba(var(--ink-rgb),.92) 0%, rgba(var(--ink-rgb),.72) 42%, rgba(var(--ink-rgb),.3) 100%)}
.sv-hero-flat .sv-hero-shade{background:var(--lc-ink)}
.sv-hero-in{position:relative;z-index:2;max-width:62ch}
.sv-hero-in .lc-crumb{padding-bottom:clamp(14px,1.6vw,24px);opacity:.6}
.sv-badge{display:inline-flex;align-items:center;border:1px solid rgba(247,246,243,.34);
  border-radius:999px;padding:6px 15px;margin-bottom:clamp(14px,1.6vw,22px);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(247,246,243,.08)}
.sv-hero-h{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.04;
  font-size:clamp(30px,3.9vw,68px);max-width:16ch}
.sv-hero-lede{margin:clamp(12px,1.4vw,20px) 0 0;font-size:clamp(15px,1.15vw,20px);
  line-height:1.55;letter-spacing:-.015em;opacity:.8;max-width:46ch}
.sv-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  margin:clamp(16px,1.8vw,26px) 0 0;padding:0}
.sv-tags li{border:1px solid rgba(247,246,243,.28);border-radius:999px;padding:7px 15px;
  font-size:clamp(11px,.82vw,13px);font-weight:700;letter-spacing:-.005em;opacity:.85}
.sv-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin-top:clamp(18px,2vw,30px)}
/* its own line under the buttons, rather than floating out to one side */
.sv-from{flex:1 0 100%;font-size:clamp(12px,.9vw,14px);letter-spacing:.02em;opacity:.72}
.sv-from b{font-weight:800}

/* the mid-page headings, centred like the reference */
.sv-mid-h{margin:0 0 var(--lc-gap);text-align:center;font-weight:800;letter-spacing:-.025em;
  line-height:1.12;font-size:clamp(23px,2.3vw,40px);max-width:20ch;
  margin-left:auto;margin-right:auto}

/* what a shoot covers */
/* The list is centred as a block while each line still reads from the left,
   so it sits under its heading rather than pinned to the edge of the band. */
.sv-covers{list-style:none;margin:0 auto;padding:0;display:inline-grid;gap:10px;
  text-align:left;justify-items:start}
.sv-covers li{position:relative;padding-left:26px;font-size:clamp(14px,1vw,17px);
  line-height:1.55;letter-spacing:-.012em;opacity:.72}
.sv-covers li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;
  background:var(--accent);border-radius:2px}

/* who it suits */
.sv-ideal{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:1fr}
@media(min-width:700px){.sv-ideal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.sv-ideal{grid-template-columns:repeat(3,1fr)}}
.sv-ideal-card{border:1px solid rgba(var(--ink-rgb),.16);border-radius:16px;
  padding:clamp(20px,2.1vw,32px);transition:border-color .3s,transform .4s var(--ease)}
.sv-ideal-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.sv-ideal-card h3{margin:0 0 8px;font-weight:800;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(17px,1.35vw,23px)}
.sv-ideal-card p{margin:0;font-size:clamp(14px,.98vw,16px);line-height:1.6;
  letter-spacing:-.012em;opacity:.66}

/* the reasons to book */
.sv-points{display:grid;gap:clamp(22px,2.6vw,44px);grid-template-columns:1fr}
@media(min-width:700px){.sv-points{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.sv-points{grid-template-columns:repeat(4,1fr)}}
.sv-point h3{margin:0 0 9px;font-weight:800;letter-spacing:-.02em;line-height:1.2;
  font-size:clamp(16px,1.25vw,21px)}
.sv-point p{margin:0;font-size:clamp(14px,.98vw,16px);line-height:1.6;
  letter-spacing:-.012em;opacity:.66}

/* how a job runs, as openable rows */
.sv-steps{max-width:900px;margin:0 auto;border-top:1px solid rgba(var(--ink-rgb),.14)}
.sv-steps details{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
.sv-steps summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;
  padding:clamp(16px,1.7vw,26px) 0;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(16px,1.3vw,22px);transition:color .3s}
.sv-steps summary::-webkit-details-marker{display:none}
.sv-steps summary::after{content:"+";margin-left:auto;font-weight:700;font-size:1.2em;
  opacity:.5;transition:transform .3s var(--ease)}
.sv-steps details[open] summary::after{content:"\2013"}
.sv-steps summary:hover{color:var(--accent)}
.sv-steps summary span{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent)}
.sv-steps p{margin:0;padding:0 0 clamp(18px,1.9vw,28px) 46px;max-width:70ch;
  font-size:clamp(14px,1vw,17px);line-height:1.65;letter-spacing:-.012em;opacity:.68}
@media(max-width:600px){.sv-steps p{padding-left:0}}

@media(prefers-reduced-motion:reduce){ .sv-ideal-card:hover{transform:none} }


/* ---- what I photograph, as photographs ---- */
.mh-photos{background:var(--light);color:var(--dark)}
.mh-photos-grid{margin-top:clamp(28px,3.4vw,60px)}
.mh-photos .mgrid{--mgap:clamp(10px,1.1vw,18px)}
.mh-photos .mopen{background:rgba(var(--ink-rgb),.06);border-radius:clamp(8px,.7vw,12px)}
.mh-photos .mitem img{border-radius:clamp(8px,.7vw,12px)}
.mh-photos-more{padding-top:clamp(22px,2.6vw,44px);text-align:center}
.mh-photos-more .lc-link{margin-top:0}

/* ============================================================
   SIGNATURE homepage (ly-signature)
   The commercial half of the same brand as the wedding site:
   solid colour bands, arch-topped photographs, a flourished line
   above a heavy serif heading, and buttons that sit on a hard
   shadow. The colours are this site's own — deep pine and burnt
   orange, not the wedding site's purple and pink.
   ============================================================ */
body.ly-signature{
  --sg-sand:#EFE3C6;        /* the warm band */
  --sg-cream:#F8F1E2;       /* the pale band */
  --sg-ink:#141C18;         /* the dark band, a shade under --dark */
  --sg-deep:#1F4A3C;        /* the green band */
  --sg-amber:#E8B85C;       /* the flourished line, on dark */
  --sg-x:clamp(18px,4vw,72px);
  --sg-pad:clamp(56px,7vw,124px);
  background:var(--sg-cream);
}
.sg{position:relative;padding:var(--sg-pad) var(--sg-x)}
.sg-in{max-width:1560px;margin:0 auto}
.sg-sand{background:var(--sg-sand);color:var(--dark)}
.sg-cream{background:var(--sg-cream);color:var(--dark)}
.sg-ink{background:var(--sg-ink);color:var(--light)}
.sg-deep{background:var(--sg-deep);color:var(--light)}

/* ---- type ---- */
.sg-h1,.sg-h2{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:900;letter-spacing:-.022em;line-height:1.02}
.sg-h1{font-size:clamp(40px,7.2vw,112px)}
.sg-h2{font-size:clamp(30px,4.2vw,64px)}
.sg-h1 em,.sg-h2 em{font-style:italic;color:var(--accent)}
.sg-ink .sg-h1 em,.sg-ink .sg-h2 em,.sg-hero .sg-h1 em{color:var(--sg-amber)}
.sg-eye{display:block;margin-bottom:clamp(12px,1.4vw,20px);
  font-family:'Shrikhand',var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(14px,1.15vw,20px);line-height:1.3;color:var(--accent)}
.sg-eye i{font-style:normal;font-size:.72em;vertical-align:.12em;opacity:.85;
  margin:0 .5em}
.sg-ink .sg-eye,.sg-hero .sg-eye,.sg-deep .sg-eye{color:var(--sg-amber)}

/* ---- buttons: a solid block on a hard shadow ---- */
.sg-btns{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(22px,2.6vw,38px)}
.sg-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 clamp(20px,2vw,30px);border-radius:100px;
  background:var(--accent);color:#fff;border:2px solid var(--dark);
  box-shadow:5px 5px 0 var(--dark);
  font-weight:700;font-size:clamp(12px,.85vw,14px);letter-spacing:.11em;
  text-transform:uppercase;white-space:nowrap;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.sg-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--dark)}
.sg-btn-ink{background:var(--dark);color:var(--light)}
.sg-btn-deep{background:var(--sg-deep);color:var(--light)}
.sg-btn-line{background:transparent;color:inherit;border-color:currentColor;
  box-shadow:5px 5px 0 rgba(var(--ink-rgb),.24)}
.sg-btn-line:hover{background:rgba(var(--ink-rgb),.08)}
.sg-ink .sg-btn-line:hover,.sg-hero .sg-btn-line:hover{background:rgba(255,255,255,.12)}
.sg-hero .sg-btn,.sg-ink .sg-btn{border-color:var(--sg-ink);box-shadow:5px 5px 0 rgba(0,0,0,.55)}
.sg-hero .sg-btn:hover,.sg-ink .sg-btn:hover{box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.sg-hero .sg-btn-line,.sg-ink .sg-btn-line,.sg-cta .sg-btn-line{box-shadow:5px 5px 0 rgba(0,0,0,.3)}

/* ---- the arch: the shape both sites share ---- */
.sg-arch{position:relative;overflow:hidden;background:rgba(var(--ink-rgb),.08);
  border-radius:999px 999px 20px 20px}
.sg-arch img{width:100%;height:100%;object-fit:cover}

/* ---- hero ---- */
.sg-hero{position:relative;min-height:min(92svh,940px);display:flex;align-items:flex-end;
  padding:clamp(120px,14vh,190px) var(--sg-x) clamp(48px,7vh,96px);
  background:var(--sg-ink);color:var(--light);overflow:hidden}
.sg-hero-media{position:absolute;inset:0}
.sg-hero-media img{width:100%;height:100%;object-fit:cover}
.sg-hero-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,24,.9) 0%,rgba(20,28,24,.68) 46%,rgba(20,28,24,.2) 100%),
             linear-gradient(0deg,rgba(20,28,24,.72) 0%,rgba(20,28,24,0) 55%)}
.sg-hero-in{position:relative;width:100%}
.sg-hero-p{margin-top:clamp(16px,1.8vw,26px);max-width:44ch;
  font-size:clamp(15px,1.15vw,19px);line-height:1.5;color:rgba(247,246,243,.86)}
.sg-hero-note{margin-top:clamp(14px,1.4vw,20px);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(247,246,243,.6)}

/* ---- the standard ---- */
.sg-std-in{display:grid;gap:clamp(30px,4.5vw,84px);align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.sg-std-art{position:relative;width:100%;max-width:500px;margin-inline:auto;
  padding-bottom:clamp(30px,4vw,64px)}
.sg-std-art .sg-arch{aspect-ratio:4/5}
.sg-snap{position:absolute;right:-2%;bottom:0;width:38%;max-width:260px;
  border-radius:14px;overflow:hidden;border:7px solid var(--sg-cream);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.6);transform:rotate(3deg)}
.sg-snap img{aspect-ratio:1;width:100%;height:auto}
.sg-std-copy p{margin-top:clamp(12px,1.3vw,20px);max-width:56ch;
  font-size:clamp(15px,1.05vw,18px);line-height:1.62;color:rgba(var(--ink-rgb),.78)}
.sg-std-copy .sg-h2{margin-bottom:4px}

/* ---- the full-width statement ---- */
.sg-break{position:relative;min-height:clamp(340px,46vw,620px);display:flex;align-items:center;
  padding:clamp(60px,8vw,120px) var(--sg-x);background:var(--sg-ink);color:var(--light);overflow:hidden}
.sg-break-media{position:absolute;inset:0}
.sg-break-media img{width:100%;height:100%;object-fit:cover}
.sg-break-shade{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,28,24,.82) 0%,rgba(20,28,24,.5) 60%,rgba(20,28,24,.24) 100%)}
.sg-break .sg-in{position:relative;width:100%}
.sg-quote{font-family:var(--serif);font-variation-settings:'opsz' 144;font-style:italic;
  font-weight:800;letter-spacing:-.018em;line-height:1.08;max-width:22ch;
  font-size:clamp(26px,3.6vw,60px)}
.sg-quote em{font-style:italic;color:var(--sg-amber)}

/* ---- band heads ---- */
.sg-head{display:grid;gap:clamp(14px,2vw,48px);align-items:end;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  margin-bottom:clamp(28px,3.4vw,54px)}
.sg-head-p{font-size:clamp(15px,1.05vw,18px);line-height:1.55;opacity:.78;max-width:46ch}
.sg-head-mid{grid-template-columns:1fr;justify-items:center;text-align:center}
.sg-head-mid .sg-head-p{margin-top:12px}
.sg-mid{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,52px)}

/* ---- the work grid ---- */
.sg-work .mgrid{gap:clamp(10px,.9vw,18px)}
.sg-work .mitem{border-radius:16px;overflow:hidden}

/* ---- the service tiles ---- */
.sg-tiles{list-style:none;display:grid;gap:clamp(14px,1.6vw,28px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.sg-tile a{display:block}
.sg-arch-sm{aspect-ratio:3/4;border-radius:999px 999px 16px 16px;
  background:rgba(255,255,255,.07)}
.sg-arch-sm img{transition:transform .7s var(--ease)}
.sg-tile a:hover .sg-arch-sm img{transform:scale(1.05)}
.sg-tile-n{display:block;margin-top:14px;font-family:var(--serif);
  font-variation-settings:'opsz' 144;font-style:italic;font-weight:800;
  font-size:clamp(15px,1.2vw,22px);color:var(--sg-amber)}

/* ---- how a job runs ---- */
.sg-steps{list-style:none;display:grid;gap:clamp(16px,1.8vw,30px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
.sg-step{background:var(--sg-cream);border:2px solid var(--dark);border-radius:20px;
  padding:clamp(20px,1.9vw,30px);box-shadow:5px 5px 0 var(--dark)}
.sg-step-n{display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  font-weight:800;font-size:14px;letter-spacing:.04em;margin-bottom:16px}
.sg-step h3{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:800;font-size:clamp(18px,1.4vw,25px);line-height:1.15;letter-spacing:-.015em}
.sg-step p{margin-top:9px;font-size:clamp(14px,.95vw,16px);line-height:1.55;
  color:rgba(var(--ink-rgb),.74)}

/* The shared case-study slider, in this layout's green and its lettering. */
body.ly-signature .mx-work-band{background:var(--sg-deep)}
body.ly-signature .mx-work-band .mx-h2,
body.ly-signature .mx-slide-t{font-family:var(--serif);font-variation-settings:'opsz' 144;
  font-weight:900;letter-spacing:-.022em;line-height:1.04;text-transform:none}
body.ly-signature .mx-slide-in{border-radius:20px}
body.ly-signature .mx-slide-img{border-radius:14px}

/* ---- the band above the footer ---- */
.sg-cta{background:var(--accent);color:#fff}
.sg-cta-in{display:grid;gap:clamp(28px,4vw,64px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.58fr)}
.sg-cta .sg-eye{color:#fff}
.sg-cta-h em{color:var(--dark)}
.sg-cta-p{margin-top:clamp(14px,1.4vw,22px);max-width:54ch;
  font-size:clamp(15px,1.1vw,19px);line-height:1.55;color:rgba(255,255,255,.9)}
.sg-cta-art{aspect-ratio:4/5;width:100%;max-width:460px;margin-left:auto;
  border:5px solid rgba(255,255,255,.9)}

@media(max-width:1100px){
  .sg-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-head{grid-template-columns:1fr}
}
@media(max-width:860px){
  .sg-std-in,.sg-cta-in{grid-template-columns:1fr}
  .sg-std-art{max-width:460px}
  .sg-cta-art{margin:0;max-width:320px}
  .sg-hero{min-height:82svh}
}
@media(max-width:560px){
  .sg-tiles{grid-template-columns:1fr 1fr}
  .sg-steps{grid-template-columns:1fr}
  .sg-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .sg-btn,.sg-arch-sm img{transition:none}
}


/* ============================================================
   Inner pages, opening the way the homepage does
   ============================================================
   The service page's pills and price line used to sit inside a framed panel;
   they now sit on the full-bleed photograph with the rest of the type. */
.lc-phero-shot .sv-tags li{border-color:rgba(255,255,255,.4);color:#fff}
.lc-phero-shot .sv-from{color:rgba(255,255,255,.8)}
.lc-phero .sv-tags{margin-top:clamp(16px,1.8vw,26px)}
.lc-phero .sv-hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(22px,2.6vw,38px)}
.lc-phero-shot .mx-btn-on{background:var(--accent);color:#fff}
.lc-phero-shot .mh-btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.lc-phero-shot .mh-btn-ghost:hover{background:#fff;color:var(--dark);border-color:#fff}
/* the meta pairs on a case study, drawn on the photograph */
.lc-phero-shot .lc-meta,.lc-phero-shot .lc-meta>div{border-color:rgba(255,255,255,.28)}
@media(max-width:720px){
  .lc-phero-shot{min-height:min(66svh,620px)}
}

/* the line under an enquiry form */
.jr-form-privacy{margin:14px 0 0;font-size:13px;line-height:1.5;opacity:.66}
.jr-form-privacy a{border-bottom:1px solid currentColor}

/* ---------- Forminator enquiry form, dressed as the theme's own ----------
   The form is set to "None" in Forminator's Appearance, so everything it
   looks like comes from here. Colours follow the band it sits on. */
.jr-fm{display:block}
.jr-fm .forminator-ui.forminator-custom-form{margin:0!important;padding:0;display:grid;
  gap:clamp(12px,1.2vw,18px)}
.jr-fm .forminator-row{display:grid;gap:clamp(12px,1.2vw,18px);margin:0!important}
.jr-fm .forminator-col{min-width:0;padding:0!important;margin:0!important}
@media(min-width:620px){
  .jr-fm .forminator-custom-form{grid-template-columns:1fr 1fr}
  .jr-fm .forminator-custom-form > *{grid-column:1/-1}
  .jr-fm .forminator-custom-form > .forminator-row:has(.forminator-field-name){grid-column:1}
  .jr-fm .forminator-custom-form > .forminator-row:has(.forminator-field-email){grid-column:2}
}
.jr-fm .forminator-field{margin:0;display:grid;gap:7px}
.jr-fm .forminator-label{display:block;margin:0;font-size:clamp(10px,.66vw,12px);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;opacity:.5;line-height:1.4}
.jr-fm .forminator-required{color:inherit;margin-left:2px}
.jr-fm .forminator-description{font-size:13px;opacity:.6;margin:4px 0 0}
.jr-fm input.forminator-input,.jr-fm select,.jr-fm textarea.forminator-textarea{
  width:100%;box-sizing:border-box;font:inherit;color:inherit;margin:0;
  font-size:clamp(15px,1.02vw,18px);letter-spacing:-.02em;
  background:rgba(247,246,243,.06);border:1px solid rgba(247,246,243,.22);
  border-radius:4px;padding:14px 16px;transition:border-color .3s,background .3s;box-shadow:none}
.jr-fm select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.jr-fm select option{color:var(--dark);background:#f7f6f3}
.jr-fm .select2-container{display:none!important} /* plain select only */
.jr-fm select.forminator-select2{display:block!important;position:static!important;
  width:100%!important;height:auto!important;opacity:1!important;clip:auto!important}
.jr-fm textarea.forminator-textarea{resize:vertical;min-height:120px}
.jr-fm input::placeholder,.jr-fm textarea::placeholder{color:currentColor;opacity:.34}
.jr-fm input.forminator-input:focus,.jr-fm select:focus,.jr-fm textarea:focus{outline:none;
  border-color:var(--accent);background-color:rgba(247,246,243,.1)}
.jr-fm .forminator-has_error input,.jr-fm .forminator-has_error textarea{border-color:#E8B394}
.jr-fm .forminator-error-message{display:block;margin:6px 0 0;font-size:13px;color:#E8B394}
.jr-fm .forminator-button-submit{justify-self:start;width:auto!important;display:inline-flex;align-items:center;gap:10px;height:51px;
  padding:0 26px;border:0;border-radius:4px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#fff;transition:transform .35s var(--ease),filter .3s}
.jr-fm .forminator-button-submit:hover{transform:translateY(-2px);filter:brightness(1.08)}
.jr-fm .forminator-button-submit:disabled{opacity:.6;cursor:wait;transform:none}
.jr-fm .forminator-response-message{margin:0;font-size:clamp(14px,.98vw,16px);letter-spacing:-.01em}
.jr-fm .forminator-response-message:empty,.jr-fm .forminator-response-message[aria-hidden="true"]{display:none}
.jr-fm .forminator-response-message p{margin:0}
.jr-fm .forminator-response-message.forminator-success{color:#B7CDBB}
.jr-fm .forminator-response-message.forminator-error{color:#E8B394}
.jr-fm .forminator-response-message ul{margin:6px 0 0;padding-left:18px}
/* the older enquiry band's button colour, where that band is used */
#contact .cform.jr-fm .forminator-button-submit{background:var(--dm-gold);height:auto;
  padding:clamp(12px,1.05vw,14px) clamp(20px,1.7vw,26px);font-size:clamp(16px,1.3vw,18px);
  font-weight:600;letter-spacing:normal;text-transform:none;border-radius:5px}
#contact .cform.jr-fm .forminator-label{font-size:14px;font-weight:600;letter-spacing:normal;
  text-transform:none;opacity:.8}
.jr-fm .forminator-hidden,.jr-fm .forminator-hidden-input,.jr-fm .forminator-screen-reader-only{position:absolute!important;
  left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- Photograph framing ----------
   Chosen under Website → Other Pages, and overruled page by page: how tall the
   band at the top stands, which part of a photograph a crop keeps, and how a
   gallery is laid out. */
.lc-phero-shot.ph-h-short{min-height:min(54svh,560px)}
.lc-phero-shot.ph-h-std{min-height:min(74svh,760px)}
.lc-phero-shot.ph-h-tall{min-height:min(92svh,940px)}
.ph-f-top .lc-phero-media img{object-position:50% 12%}
.ph-f-mid .lc-phero-media img{object-position:50% 50%}
.ph-f-bot .lc-phero-media img{object-position:50% 88%}

/* gallery: how many across */
.fb-grid-2{grid-template-columns:1fr}
@media(min-width:640px){.fb-grid-2{grid-template-columns:repeat(2,1fr)}}
.fb-grid-4{grid-template-columns:1fr}
@media(min-width:640px){.fb-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.fb-grid-4{grid-template-columns:repeat(4,1fr)}}

/* staggered: every other photograph dropped lower, on wide screens only */
@media(min-width:1040px){
  .fb-grid-stagger .fb-card:nth-child(even){margin-top:clamp(24px,3vw,56px)}
}

/* the shape one photograph is cut to */
.fb-card-img.sh-wide{aspect-ratio:4/3}
.fb-card-img.sh-square{aspect-ratio:1/1}
.fb-card-img.sh-tall{aspect-ratio:4/5}
.fb-card-img.sh-whole{aspect-ratio:auto}
.fb-card-img.sh-whole img{height:auto;object-fit:contain}
/* and the part of it the crop keeps */
.fb-card-img.fo-top img{object-position:50% 12%}
.fb-card-img.fo-mid img{object-position:50% 50%}
.fb-card-img.fo-bot img{object-position:50% 88%}
/* a photograph that is not a button still fills its frame */
span.fb-card-img{display:block}