@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Serif+Display&display=swap');

/* ---------------------------------------------------------------
   Tokens — one spacing scale, one radius scale, one type scale.
   --------------------------------------------------------------- */
:root{
  /* Three grounds, used deliberately: white for detail, paper for rest,
     ink for the moments that should stop you. */
  --bg:#f4f1eb; --paper:#faf9f6; --white:#fff; --ink:#101010; --ink-2:#3c3a36; --muted:#6e6b66;
  --line:rgba(16,16,16,.13); --line-strong:rgba(16,16,16,.3); --dark:#0b0c0c;
  --accent:#7d6f56;

  /* spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* rhythm */
  --gutter:clamp(20px,4.6vw,40px);
  --section-y:clamp(60px,7vw,108px);
  --band-y:clamp(30px,3.6vw,48px);
  --gap:clamp(12px,1.4vw,18px);
  --card-pad:clamp(22px,2.2vw,30px);

  /* Type scale — one ratio, four display steps, one reading measure.
     Display is DM Serif Display; everything structural is DM Sans. */
  --f-xs:12px;
  --f-sm:14px;
  --f-base:clamp(16px,.97rem + .18vw,17.5px);
  --f-lead:clamp(17px,1rem + .55vw,21px);
  --f-h3:clamp(19px,1.02rem + .6vw,24px);
  --f-h2:clamp(31px,1.5rem + 2.3vw,58px);
  --f-h1:clamp(40px,2rem + 4.2vw,82px);
  --f-display:clamp(50px,2.2rem + 6.4vw,116px);
  --measure:68ch;
  --lh-display:.98;
  --lh-tight:1.14;
  --lh-body:1.62;

  /* radii */
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --radius:var(--r-lg);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--f-base);line-height:var(--lh-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
figure{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty;max-width:var(--measure)}

/* Visible focus for keyboard users, invisible for mouse users. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.cta :focus-visible,.cta-band :focus-visible,.project-visual:focus-visible{outline-color:#faf9f6}

.container{width:min(1180px,100% - (var(--gutter) * 2));margin-inline:auto}

/* ---------------------------------------------------------------
   Header + mobile menu
   --------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:30;background:rgba(250,249,246,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{min-height:82px;display:flex;align-items:center;gap:clamp(14px,2.6vw,34px);flex-wrap:wrap;padding:var(--s3) 0}
.brand{display:flex;align-items:center;gap:15px;margin-right:auto;min-height:44px}
.brand strong{font-size:clamp(16px,2.2vw,20px);letter-spacing:.2em;white-space:nowrap}
.brand span{font-size:9px;line-height:1.25;letter-spacing:.18em;color:var(--muted);border-left:1px solid var(--line);padding-left:15px}
.navlinks{display:flex;gap:clamp(16px,2.2vw,28px);font-size:14px;align-items:center}
.navlinks a{padding:12px 2px;display:inline-flex;align-items:center;min-height:44px}
.navlinks a:hover{color:var(--muted)}
.site-header .btn{white-space:nowrap}

.nav-toggle{display:none;width:44px;height:44px;flex:0 0 44px;flex-direction:column;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);padding:0;cursor:pointer;color:var(--ink)}
.nav-toggle span{display:block;width:17px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.nav-toggle span + span{margin-top:4px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------------------------------------------------------------
   Buttons, labels
   --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-pill);
  min-height:48px;padding:12px 22px;background:#111;color:#fff;border:1px solid #111;font-weight:500;font-size:15px;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:#2b2b2b;border-color:#2b2b2b}
.btn.light{background:#fff;color:#111;border-color:#fff}
.btn.light:hover{background:#eceae4;border-color:#eceae4}
.btn.ghost{background:transparent;color:#111;border-color:var(--line-strong)}
.btn.ghost:hover{background:rgba(16,16,16,.05);color:#111}
/* Eyebrow: a short rule, then the label. Reads as a tab on the section
   rather than as a second, smaller headline. */
.eyebrow{display:flex;align-items:center;gap:var(--s3);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:#5c5952;line-height:1.5;font-weight:500}
.eyebrow:before{content:"";flex:0 0 22px;height:1px;background:var(--accent);opacity:.8}
.eyebrow--plain:before{display:none}
.actions{display:flex;gap:var(--s3);margin-top:var(--s6);flex-wrap:wrap}

/* An arrow link that moves on hover — the only "fun" interaction on the site. */
.arrow{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:15px;
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.arrow:after{content:"→";transition:transform .22s ease;display:inline-block}
.arrow:hover{border-bottom-color:var(--line-strong)}
.arrow:hover:after{transform:translateX(5px)}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.hero{background:var(--bg);min-height:clamp(560px,78vh,760px);display:grid;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);padding:clamp(40px,5vw,72px) 0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:clamp(30px,4vw,64px)}
.hero-grid > *{min-width:0}
h1,h2,.serif{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.028em}
.hero h1{font-family:"DM Sans",system-ui,sans-serif;font-weight:600;font-size:var(--f-display);
  line-height:.88;margin:var(--s5) 0 var(--s6);letter-spacing:-.045em}
.hero h1 span{color:var(--accent)}
.hero-copy{max-width:46ch;font-size:var(--f-lead);line-height:1.5;color:var(--ink-2)}
.hero-art{aspect-ratio:4/5;max-height:clamp(320px,48vw,560px);position:relative;border-radius:var(--r-xl);overflow:hidden;background:
 linear-gradient(180deg,rgba(11,12,12,.05) 35%,rgba(11,12,12,.78)),
 url("../img/skyline-glass.jpg") center 32%/cover no-repeat;
 box-shadow:0 30px 70px -30px rgba(16,16,16,.45)}
.hero-art:after{content:"FROM IDEAS\A TO OUTCOMES";white-space:pre;position:absolute;left:clamp(20px,2.4vw,32px);
  bottom:clamp(20px,2.6vw,32px);color:#fff;font-size:11px;letter-spacing:.26em;line-height:2.1}
.orb{display:none}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------
   Full-bleed bands: metrics, tools, brands
   --------------------------------------------------------------- */
.metrics{border-bottom:1px solid var(--line);background:var(--dark);color:#faf9f6}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.metric{padding:calc(var(--band-y) + 6px) var(--s5);border-right:1px solid rgba(250,249,246,.14);min-width:0}
.metric:first-child{padding-left:0}
.metric:last-child{border-right:0}
.metric b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(30px,3.4vw,46px);line-height:1;display:block}
.metric small{display:block;color:rgba(250,249,246,.62);text-transform:uppercase;letter-spacing:.16em;
  margin-top:var(--s3);font-size:11px;line-height:1.6}

.tech{padding:calc(var(--band-y) + 8px) 0;border-bottom:1px solid var(--line);background:#fff}
.tool-group + .tool-group{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}
.tool-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
.tool{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:#fff;transition:border-color .2s ease,transform .2s ease}
.tool img{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
.tool em{font-style:normal;font-size:14px;color:#3d3b38}
.tool--text b{font-size:14px;font-weight:600;letter-spacing:.02em}
.tool:hover{border-color:var(--line-strong);transform:translateY(-2px)}

/* Brands: mixed-aspect logo files, normalised into equal optical boxes. */
.brands{border-bottom:1px solid var(--line);background:var(--bg);padding:calc(var(--band-y) + 14px) 0}
.brand-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));align-items:center;
  gap:var(--s5) var(--s6);margin-top:var(--s5)}
.brand-logo{display:flex;align-items:center;justify-content:center;height:52px;min-width:0;color:#3d3b38;opacity:.85;
  transition:opacity .2s ease}
/* Source logos run from 1:1 to 5:1. Capping height AND width evens out their
   optical weight far better than a single max-height would. */
.brand-logo img{max-height:40px;max-width:min(100%,130px);width:auto;height:auto;object-fit:contain}
.brand-logo span{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(17px,1.7vw,20px);letter-spacing:-.01em;
  line-height:1.2;text-align:center;overflow-wrap:break-word}
.brand-logo:hover{opacity:1}

/* ---------------------------------------------------------------
   One treatment for every logo mark on the site — tool pills and
   brand strip alike: quiet and neutral at rest, true colour on
   hover or keyboard focus.
   --------------------------------------------------------------- */
.tool img,.brand-logo img{filter:grayscale(1);opacity:.65;transition:filter .2s ease,opacity .2s ease}
.tool:hover img,.tool:focus-within img,
.brand-logo:hover img,.brand-logo:focus img,.brand-logo:focus-within img{filter:none;opacity:1}

/* Breathing room where the bands hand over to normal sections. */
.tech + .brands{border-top:0}
.brands + .section,.tech + .section,.metrics + .section{padding-top:calc(var(--section-y) + var(--s5))}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
.section{padding:var(--section-y) 0}
/* Three grounds, alternated on purpose so no two neighbouring blocks
   read as the same slab. */
.ground-white{background:var(--white)}
.ground-paper{background:var(--bg)}
.ground-ink{background:var(--dark);color:#faf9f6}
.ground-paper + .ground-paper,.ground-white + .ground-white{border-top:1px solid var(--line)}
.ground-ink .eyebrow,.cta .eyebrow,.cta-band .eyebrow,.feature .eyebrow,.photo-band .eyebrow,
.project-visual .eyebrow{color:rgba(250,249,246,.72)}
.ground-ink .eyebrow:before,.cta .eyebrow:before,.cta-band .eyebrow:before,.feature .eyebrow:before,
.photo-band .eyebrow:before,.project-visual .eyebrow:before{background:rgba(250,249,246,.5)}
.ground-ink .section-lead,.ground-ink p{color:#b9b6b0}

.section-head{display:grid;grid-template-columns:1fr minmax(0,.4fr);gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:var(--s8)}
.section-head > *{min-width:0}
.section h2{font-size:var(--f-h2);line-height:var(--lh-display);margin:var(--s4) 0 0}
.section-lead{color:var(--muted);font-size:var(--f-lead);line-height:1.5;max-width:44ch}
.section-head p{margin:var(--s4) 0 0}
.section-head > div:first-child .section-lead{margin-top:var(--s4)}
.section-head a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s3)}
.section-head a:hover{color:var(--muted)}

/* Service cards — a ruled sheet, not a floating box. The number is the
   ornament; the hover just draws a line under the heading and lifts it. */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card{display:flex;flex-direction:column;border:0;border-radius:0;background:var(--white);
  min-height:270px;padding:clamp(24px,2.4vw,34px);position:relative;
  transition:background .25s ease}
.card:hover{transform:none;box-shadow:none;background:#fcfbf8}
.card .num{font-family:"DM Serif Display",Georgia,serif;font-size:15px;color:var(--accent);letter-spacing:.06em}
.card h2,.card h3{font-family:inherit;font-weight:600;letter-spacing:-.01em;font-size:var(--f-h3);line-height:1.2;
  margin:var(--s7) 0 var(--s3);position:relative;display:inline-block;align-self:flex-start}
.card h2:after,.card h3:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover h2:after,.card:hover h3:after{transform:scaleX(1)}
.card p{color:var(--muted);margin:0;font-size:var(--f-base)}
.card .tags{font-size:13px;line-height:1.7;color:#7a766f;margin-top:auto;padding-top:var(--s6)}

/* Full-width note under a card grid: one row on desktop, stacked when narrow. */
.card--note{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--s5);min-height:0;margin-top:var(--s5);background:transparent;
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:clamp(22px,2.2vw,30px)}
.card--note:hover{background:transparent}
.card--note > div{min-width:0;flex:1 1 320px}
.card--note b{font-size:var(--f-h3);font-weight:600}
.card--note span{color:var(--muted)}
.card--note .btn{flex:0 0 auto}

/* Project / case-study cards. No border, no drop shadow: the visual is the
   card. Hover slides the title up and warms the wash rather than nudging a box. */
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px) var(--gap)}
.project{display:flex;flex-direction:column;border:0;border-radius:0;overflow:visible;background:transparent}
.project:hover{transform:none;box-shadow:none}
.project-visual{position:relative;isolation:isolate;aspect-ratio:4/3;min-height:0;display:flex;align-items:flex-end;
  padding:clamp(20px,2.2vw,28px);color:#fff;border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(135deg,#c7c1b5,#59614d 45%,#121513);text-decoration:none}
/* A fine dot screen stops the gradients reading as a stock template. */
.project-visual:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:5px 5px}
.project-visual:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,10,10,0);transition:background .3s ease}
.project-visual > div{transition:transform .3s ease}
.project:hover .project-visual > div{transform:translateY(-4px)}
.project:hover .project-visual:after{background:rgba(9,10,10,.16)}
.project-visual .big{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(30px,3vw,42px);line-height:1.02;margin-top:var(--s3)}
.project-body{display:flex;flex-direction:column;flex:1;padding:var(--s5) 0 0}
.project-body h2,.project-body h3{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.022em;
  font-size:var(--f-h3);line-height:1.22;margin:0 0 var(--s3)}
.project-body p{color:var(--muted);margin:0 0 var(--s4);font-size:15.5px}
.project-body > a:last-child{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;align-self:flex-start}
.project-body > a:last-child:hover{color:var(--muted)}
.work-all{grid-column:1/-1;display:flex;justify-content:center;margin-top:var(--s4)}

/* A lone case study runs wide rather than leaving the row half empty. */
.project-grid:has(.project:only-child){grid-template-columns:1fr}
.project-grid:has(.project:only-child) .project{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.project-grid:has(.project:only-child) .project-visual{height:100%;aspect-ratio:auto;min-height:300px}
.project-grid:has(.project:only-child) .project-body{padding:var(--s5) 0 0 var(--s5)}

/* Stats row (case studies) */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--s5);margin-top:var(--s6)}
.stat{min-width:0}
.stat b{font-family:"DM Serif Display",Georgia,serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(20px,1.1rem + .7vw,26px);line-height:1.15;display:block;overflow-wrap:break-word}
.stat span{display:block;color:var(--muted);font-size:12px;letter-spacing:.06em;line-height:1.55;margin-top:var(--s2)}

/* Approach — four ruled columns. The rule does the work a card used to. */
.approach{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.approach h2{font-size:var(--f-h2);line-height:var(--lh-display);margin:var(--s4) 0 var(--s5)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) clamp(24px,3vw,48px);margin-top:var(--s8)}
.step{min-width:0;border-top:1px solid var(--line-strong);padding-top:var(--s5)}
.step .n{font-family:"DM Serif Display",Georgia,serif;font-size:clamp(34px,3vw,42px);line-height:1;color:var(--accent);opacity:.75}
.step h3{margin:var(--s4) 0 var(--s2);font-size:var(--f-h3);font-weight:600;letter-spacing:-.01em}
.step p{color:var(--muted);margin:0;font-size:15.5px}

/* Dark CTA bands */
.cta{background:var(--dark);color:#fff;padding:calc(var(--section-y) + var(--s4)) 0;overflow:hidden;position:relative}
.cta-grid{display:grid;grid-template-columns:1.15fr minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.cta-grid > *{min-width:0}
.cta h2{font-size:clamp(36px,2rem + 3.6vw,74px);line-height:.98;margin:0}
.cta h2 span{color:#a79c8c}
.cta p{color:#c9c6c0;font-size:var(--f-lead);line-height:1.5}
.cta .btn{margin-top:var(--s5)}
.cta small{color:#8d8a84}
.cta-band{background:var(--dark);color:#faf9f6;padding:calc(var(--section-y) - var(--s3)) 0;text-align:left}
.cta-band h2{font-size:clamp(32px,1.8rem + 2.8vw,62px);line-height:1;margin:var(--s5) 0 var(--s4)}
.cta-band p{color:#b9b6b0;max-width:52ch;margin:0 0 var(--s6);font-size:var(--f-lead);line-height:1.5}

/* About / portrait */
.about-grid{display:grid;grid-template-columns:.78fr minmax(0,1.22fr);gap:clamp(28px,4.5vw,66px);align-items:center}
.about-grid > *{min-width:0}
.portrait{border-radius:var(--r-md);overflow:hidden;background:#e3ded5;
  position:relative;aspect-ratio:4/5;max-height:540px;min-width:0}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.portrait:after{content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(180deg,rgba(9,10,10,0),rgba(9,10,10,.55))}
.portrait figcaption,.portrait .cap{position:absolute;left:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);
  bottom:clamp(16px,2vw,22px);color:#fff;letter-spacing:.16em;font-size:11px;line-height:1.9;text-transform:uppercase;z-index:1}
.about h2{font-size:var(--f-h2);line-height:var(--lh-display);margin:var(--s4) 0 var(--s5)}
.about p{font-size:var(--f-lead);line-height:1.55;color:var(--ink-2)}
.about .btn{margin-top:var(--s5)}

/* Inner pages */
.page-hero{padding:clamp(52px,6.4vw,104px) 0 clamp(40px,4.8vw,76px);background:var(--bg);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:var(--f-h1);line-height:var(--lh-display);margin:var(--s5) 0 var(--s5);
  letter-spacing:-.03em;overflow-wrap:break-word}
.page-hero .hero-copy{max-width:52ch}
.content{max-width:min(100%,var(--measure))}
.content h2{font-size:clamp(25px,1.35rem + 1.5vw,38px);line-height:1.12;margin-top:clamp(40px,4.6vw,66px);letter-spacing:-.022em}
.content h2:first-child{margin-top:0}
.content p,.content li{font-size:var(--f-base);line-height:var(--lh-body);color:var(--ink-2);overflow-wrap:break-word;max-width:none}
.content p a,.content li a{border-bottom:1px solid var(--line-strong)}
.content p a:hover,.content li a:hover{border-bottom-color:var(--ink)}
.content ul{padding-left:var(--s5)}
.content li{margin-bottom:var(--s2)}
.content .btn{margin-top:var(--s7)}

/* Stat row on a page hero: a ruled strip, not four floating numbers. */
.page-hero .stats{border-top:1px solid var(--line-strong);padding-top:var(--s5);margin-top:var(--s7)}

/* Forms */
.form{display:grid;gap:var(--s4);max-width:760px}
form.form label{display:block;margin-bottom:0;font-size:15px}
input,textarea,select,
form.form input,form.form select,form.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;font:inherit;font-size:16px;margin-top:var(--s2);min-height:48px}
form.form textarea,textarea{min-height:150px;resize:vertical}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.form .btn{justify-self:start}

/* Footer */
.footer{padding:var(--s8) 0 var(--s7);border-top:1px solid var(--line);background:var(--bg)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4) var(--s5);flex-wrap:wrap;color:#6b6862;font-size:13px}
.footer-row strong{letter-spacing:.16em;color:var(--ink)}
.footer-nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.footer-nav a:hover{color:var(--ink)}

/* ---------------------------------------------------------------
   Reveal — content must never be trapped invisible.
   --------------------------------------------------------------- */
.reveal{opacity:1;transform:none;transition:.7s ease}
html.js .reveal:not(.visible){opacity:0;transform:translateY(18px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal:not(.visible){opacity:1;transform:none}
  .reveal,.card,.project,.tool,.btn{transition:none}
  .card:hover,.project:hover,.tool:hover{transform:none}
}

/* ---------------------------------------------------------------
   Breakpoints
   --------------------------------------------------------------- */
@media (max-width:980px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:900px){
  .hero{background:#f7f5f1;min-height:auto;padding:clamp(40px,7vw,70px) 0}
  .hero-grid,.section-head,.cta-grid,.about-grid{grid-template-columns:1fr}
  .section-head{align-items:start;gap:var(--s4)}
  .portrait{max-height:460px;max-width:440px}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metric{border-bottom:1px solid var(--line)}
  .metric:nth-child(2n){border-right:0}
  .metric:nth-last-child(-n+2){border-bottom:0}

  /* Burger menu */
  .nav{min-height:64px;gap:var(--s3);padding:var(--s3) 0}
  .brand span{display:none}
  .nav-toggle{display:inline-flex;order:3}
  .site-header .btn{order:2;min-height:44px;padding:10px 18px;font-size:14px}
  .navlinks{order:4;width:100%;display:none;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);margin-top:var(--s3);padding-bottom:var(--s2)}
  .navlinks a{padding:14px 2px;font-size:16px;border-bottom:1px solid var(--line);min-height:48px;display:flex;align-items:center}
  .navlinks a:last-child{border-bottom:0}
  .navlinks.open{display:flex}
}

@media (max-width:760px){
  .project-grid,.services{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{min-height:0}
  .project-visual{min-height:200px}
  .project-grid:has(.project:only-child) .project{grid-template-columns:1fr}
}

@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:var(--s6)}
  .metric-grid{grid-template-columns:1fr}
  .metric{border-right:0;border-bottom:1px solid var(--line);padding:var(--s5) 0 var(--s5) 0;
    padding-left:var(--gutter);padding-right:var(--gutter)}
  .metric:last-child{border-bottom:0}
  .metrics .container{width:100%}
  .brand-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
  .footer-row{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .hero-art:after{font-size:13px;letter-spacing:.18em}
  .eyebrow{font-size:13px;letter-spacing:.16em}
  .actions .btn{flex:1 1 auto}
}

@media (max-width:420px){
  .site-header .btn{padding:10px 14px;font-size:13px;gap:6px}
  .brand strong{letter-spacing:.14em}
  .stats{grid-template-columns:1fr;gap:var(--s5)}
}

/* Brand wall: an even grid so the row never ends ragged. 16 marks = 8×2 / 4×4 / 2×8. */
.brand-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s3) var(--s4);align-items:center}
@media (max-width:980px){.brand-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.brand-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.brand-logo{justify-content:center;text-align:center}
.brand-logo span{font-size:clamp(15px,1.5vw,19px);line-height:1.15}

/* ===============================================================
   STUDIO — gallery, filters, lightbox
   =============================================================== */

/* Filter chips. Buttons, not links: nothing navigates, so nothing should
   look like it does. Arrow keys move between them, Enter/Space applies. */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.chip{appearance:none;font:inherit;font-size:14px;line-height:1;cursor:pointer;
  min-height:44px;padding:12px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.chip:hover{background:rgba(16,16,16,.05)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#faf9f6}
.chip .n{opacity:.55;margin-left:7px;font-size:12px;font-variant-numeric:tabular-nums}

.filter-bar{position:sticky;top:81px;z-index:20;background:rgba(250,249,246,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.filter-bar-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) 0}
.filter-count{font-size:13px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}

/* The feed. Masonry by CSS columns, edge to edge, tight gutters: the cards
   are the pictures. Every image carries width/height, so the column heights
   are known before a single byte of image data arrives. */
.feed-wrap{width:100%;padding-inline:var(--gutter)}
.gallery{columns:4;column-gap:var(--s3);margin-top:var(--s5)}
.gw{break-inside:avoid;margin:0 0 var(--s3);position:relative;border-radius:var(--r-sm);overflow:hidden}
.gw[hidden]{display:none}
.gw-open{display:block;width:100%;padding:0;border:0;background:#ece8e1;cursor:zoom-in;position:relative;
  color:inherit;font:inherit;text-align:left;border-radius:var(--r-sm);overflow:hidden}
.gw-open img{width:100%;height:auto;display:block;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gw:hover .gw-open img{transform:scale(1.03)}
.gw-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Video affordance: a ring and a triangle drawn in CSS, no icon font. */
.gw-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:rgba(9,10,10,.5);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(2px);
  transition:background .25s ease,transform .25s ease;z-index:2}
.gw-play:before{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.gw:hover .gw-play{background:rgba(9,10,10,.78);transform:scale(1.06)}

/* The only chrome: a title and a tool credit, revealed over the picture.
   On touch and on narrow screens it sits under the image instead, where it
   is always readable. */
.gw-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;pointer-events:none;
  padding:var(--s7) var(--s4) var(--s3);color:#faf9f6;
  background:linear-gradient(180deg,rgba(9,10,10,0),rgba(9,10,10,.5) 45%,rgba(9,10,10,.82));
  opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.gw:hover .gw-cap,.gw:focus-within .gw-cap{opacity:1;transform:none}
.gw-cap b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.gw-cap span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#d5d2cc}

.gallery-empty{padding:var(--s8) 0;color:var(--muted);text-align:center}

/* Honest label — stated once, plainly, and styled like a fact. */
.disclosure{border-left:2px solid var(--accent);padding:var(--s3) 0 var(--s3) var(--s5);
  color:var(--muted);font-size:15px;line-height:1.6;max-width:62ch;margin:var(--s6) 0 0}
.disclosure b{color:var(--ink);font-weight:600}

/* ---------------------------------------------------------------
   Lightbox — vanilla, focus-trapped, arrow keys and Escape.
   --------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:100;display:none;background:rgba(8,9,9,.965);
  padding:clamp(12px,2.4vw,32px)}
.lb.open{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
body.lb-lock{overflow:hidden}
.lb-top{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3);color:#e9e6e0}
.lb-counter{margin-right:auto;font-size:12px;letter-spacing:.16em;color:#8d8a84;font-variant-numeric:tabular-nums}
.lb-btn{appearance:none;font:inherit;cursor:pointer;min-width:46px;min-height:46px;display:inline-flex;
  align-items:center;justify-content:center;border-radius:var(--r-pill);
  border:1px solid rgba(250,249,246,.28);background:transparent;color:#faf9f6;font-size:18px;line-height:1;
  transition:background .2s ease,border-color .2s ease}
.lb-btn:hover{background:rgba(250,249,246,.12);border-color:rgba(250,249,246,.55)}
.lb-btn:focus-visible{outline:2px solid #faf9f6;outline-offset:3px}
/* The stage is the box; the media letterboxes inside it. Percentages on a
   grid-track height resolve cyclically in some engines, so absolute
   positioning plus object-fit is the version that actually behaves. */
.lb-stage{position:relative;min-height:0;padding:var(--s4) 0}
.lb-stage img,.lb-stage video{position:absolute;inset:var(--s4) 0;width:100%;height:calc(100% - var(--s4) * 2);
  object-fit:contain;background:transparent}
.lb-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4) var(--s6);align-items:end;
  color:#e9e6e0;border-top:1px solid rgba(250,249,246,.14);padding-top:var(--s4)}
.lb-info h2{font-size:clamp(19px,1.1rem + .5vw,26px);line-height:1.2;margin:0;color:#faf9f6}
.lb-info p{margin:var(--s2) 0 0;color:#b7b4ae;font-size:15px;line-height:1.55;max-width:70ch}
.lb-tags{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.lb-tags span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfccc6;
  border:1px solid rgba(250,249,246,.24);border-radius:var(--r-pill);padding:6px 12px;white-space:nowrap}

/* ---------------------------------------------------------------
   Work figures — the studio pieces dropped into case studies.
   --------------------------------------------------------------- */
.work-figures .fig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s7)}
.work-figures figure{margin:0}
.work-figures .shot{display:block;border-radius:var(--r-sm);overflow:hidden;background:#ece8e1;aspect-ratio:4/5;position:relative}
.work-figures .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.work-figures figure:hover .shot img{transform:scale(1.035)}
.work-figures figcaption{margin-top:var(--s3);font-size:13.5px;line-height:1.5;color:var(--muted);max-width:none}
.work-figures figcaption b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:2px}
.figures-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.figures-head h2{margin:var(--s4) 0 0;font-size:clamp(24px,1.3rem + 1.3vw,34px);line-height:1.1}
.figures-note{font-size:13px;color:var(--muted);margin:var(--s4) 0 0;max-width:62ch}
.work-figures .shot .vid-mark{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(9,10,10,.6);border:1px solid rgba(255,255,255,.7)}
.work-figures .shot .vid-mark:before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}

/* ---------------------------------------------------------------
   Homepage teaser strip
   --------------------------------------------------------------- */
.teaser{background:var(--bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:var(--section-y) 0;overflow:hidden}
.teaser-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4) var(--s6)}
.teaser-head h2{font-size:clamp(28px,1.5rem + 1.9vw,46px);line-height:1.02;margin:var(--s4) 0 0}
.teaser-head p{color:var(--muted);max-width:40ch;margin:0;font-size:15.5px}
/* Four tiles, one aspect ratio, one label each. Nothing spans, nothing rags. */
.teaser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin-top:var(--s7)}
.tt{display:block;color:inherit;text-decoration:none}
.tt-shot{display:block;position:relative;border-radius:var(--r-sm);overflow:hidden;background:#ece8e1;aspect-ratio:4/5}
.tt-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tt-shot:after{content:"";position:absolute;inset:0;background:rgba(9,10,10,0);transition:background .3s ease}
.tt:hover .tt-shot img{transform:scale(1.05)}
.tt:hover .tt-shot:after{background:rgba(9,10,10,.1)}
.tt:focus-visible .tt-shot{outline:2px solid var(--ink);outline-offset:3px}
.tt-label{display:block;margin-top:var(--s3);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.teaser-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4);margin-top:var(--s6)}
.teaser-foot small{color:var(--muted);font-size:12.5px;letter-spacing:.04em}

/* ---------------------------------------------------------------
   A quiet full-bleed photo band, for pages that would otherwise be text.
   --------------------------------------------------------------- */
.photo-band{position:relative;isolation:isolate;min-height:clamp(240px,32vw,400px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:#151515}
.photo-band img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  object-position:center 34%;opacity:.8}
/* The wash sits ABOVE the photograph, not under it, or the caption disappears
   the moment the crop lands on something bright. */
.photo-band:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(9,10,10,.25) 20%,rgba(9,10,10,.88))}
.photo-band .container{position:relative;z-index:2;padding:clamp(28px,3.4vw,48px) 0}
.photo-band p{margin:var(--s3) 0 0;color:#e8e5df;max-width:46ch;font-size:16px;
  text-shadow:0 1px 18px rgba(0,0,0,.5)}

/* ---------------------------------------------------------------
   Studio breakpoints
   --------------------------------------------------------------- */
@media (max-width:1180px){.gallery{columns:3}}
@media (max-width:900px){
  .filter-bar{top:64px}
  .work-figures .fig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lb-info{grid-template-columns:1fr}
  .lb-tags{justify-content:flex-start}
}
@media (max-width:760px){
  .gallery{columns:2}
  .filter-bar{position:static}
  .filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:var(--s2);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:0 0 auto}
}
@media (max-width:520px){
  /* Phones keep two columns, the way a real feed does. */
  .feed-wrap{padding-inline:var(--s4)}
}
@media (max-width:330px){
  /* Only the very narrowest phones drop to a single column. */
  .gallery{columns:1}
}

/* No hover to reveal a caption on a touch screen, and nothing legible at
   one-column widths either — so the line moves under the picture. */
@media (hover:none),(max-width:760px){
  .gw{overflow:visible}
  .gw-cap{position:static;opacity:1;transform:none;pointer-events:auto;
    background:none;color:var(--ink);padding:var(--s2) 2px 0}
  .gw-cap span{color:var(--muted)}
}

@media (prefers-reduced-motion:reduce){
  .gw-open img,.tt-shot img,.work-figures .shot img{transition:none}
  .gw:hover .gw-open img,.tt:hover .tt-shot img,.work-figures figure:hover .shot img{transform:none}
  .gw-cap{transition:none}
  .arrow:after{transition:none}
  .arrow:hover:after{transform:none}
  .card h2:after,.card h3:after{transition:none}
  .project-visual > div{transition:none}
}

/* ---------------------------------------------------------------
   Enquiry page — form on the left, what-happens-next on the right,
   so the page is not a form alone in a field of paper.
   --------------------------------------------------------------- */
.form-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,76px);align-items:start}
.form-layout > *{min-width:0}
.form-layout .form{max-width:none}
.enquiry-aside{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,36px)}
.next-list{list-style:none;margin:var(--s5) 0 0;padding:0;counter-reset:next}
.next-list li{counter-increment:next;border-top:1px solid var(--line);padding:var(--s4) 0 var(--s4) var(--s7);
  position:relative;color:var(--muted);font-size:15px;line-height:1.55}
.next-list li:before{content:counter(next,decimal-leading-zero);position:absolute;left:0;top:var(--s4);
  font-family:"DM Serif Display",Georgia,serif;font-size:15px;color:var(--accent)}
.next-list b{display:block;color:var(--ink);font-weight:600;font-size:15.5px;margin-bottom:2px}
.enquiry-aside .portrait{margin-top:var(--s7);max-height:320px;aspect-ratio:4/3}
.enquiry-aside .portrait img{object-position:center 30%}
@media (max-width:900px){
  .form-layout{grid-template-columns:1fr}
  .enquiry-aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s6);margin-top:var(--s6)}
  .enquiry-aside .portrait{max-width:420px}
}

/* Project cards: a real frame from the work, dark enough that the title still reads. */
.project-visual--photo{position:relative;background-image:var(--shot)!important;background-size:var(--size,cover);background-position:var(--pos,50% 40%);background-repeat:no-repeat}
.project-visual--photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,12,12,.10) 0%,rgba(11,12,12,.30) 38%,rgba(11,12,12,.72) 68%,rgba(11,12,12,.93) 100%)}
.project-visual--photo > *{position:relative;z-index:1}
.project-visual--photo .big{text-shadow:0 1px 24px rgba(0,0,0,.45)}
/* Metric numerals in the sans: the serif's + and × sit oddly next to the digits. */
.metric b{font-family:var(--sans);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b{font-family:var(--sans);font-weight:600;letter-spacing:-.015em}

/* Insights list */
.insight-list{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.insight a{display:block;background:var(--paper);padding:var(--s6) var(--s5);text-decoration:none;transition:background .2s ease}
.insight a:hover{background:#fff}
.insight h2{font-size:clamp(26px,3vw,40px);margin:var(--s2) 0 var(--s3);max-width:24ch}
.insight p{color:var(--muted);max-width:var(--measure)}
.insight .arrow-link{display:inline-block;margin-top:var(--s4)}