/* ============================================================
   Insight SRI — site.css

   THREE GLOBAL DIALS
   1. html{font-size}   type scale for the whole site (below).
   2. --col             width of the text/image column on desktop.
   3. --font / --body   the typeface. Currently a system grotesque:
                        Segoe UI Variable on Windows 11, SF on macOS.
                        Nothing to download, renders natively.

   TO SWITCH TO A WEBFONT: SELF-HOST IT. DO NOT LINK GOOGLE FONTS.
   Linking fonts.googleapis.com sends every visitor's IP address to
   Google on every page load. A German court (LG Munchen I, 3 O 17493/20,
   Jan 2022) found that to be a GDPR violation, and it would be the only
   third-party request this site makes. As built, insightsri.com sets no
   cookies and contacts no third party -- which is why it needs no cookie
   banner. A hosted font link forfeits that for a typeface.

   Self-hosting instead (two edits, no other changes, nothing external):
     a) put the .woff2 files in assets/fonts/ and declare them here:
        @font-face{font-family:'Inter';font-style:normal;font-weight:400;
          font-display:swap;src:url('../assets/fonts/inter-400.woff2') format('woff2')}
        ...one block per weight actually used (400/500/600).
     b) set both --font and --body below to:
        'Inter', system-ui, sans-serif
   Download the files from the foundry or fontsource.org, not from
   Google's CDN at runtime. Three weights is about 90KB total -- less
   than one of the photographs in the About strip.

   Current: a system grotesque. Nothing to download, nothing to disclose.
   Good alternatives if switching: Geist, Schibsted Grotesk,
   Instrument Sans. For an editorial look, pair 'Instrument Serif'
   on --font with 'Inter' on --body.
   ============================================================ */

:root{
  /* palette */
  --grey:      #706B60;
  --grey-up:   #7A7569;
  --grey-dn:   #615D53;
  --dark:      #3A3A3A;
  --maroon:    #880008;
  --maroon-lt: #C2323A;
  --paper:     #F3F1EC;
  --ink:       #2B2823;

  /* type — one family, hierarchy from size, weight and tracking */
  --font: "Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body: "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* structure */
  --hair:  1px solid rgba(255,255,255,.13);
  --col:   100%;
  --nav-h: 88px;
  --gutter: clamp(1.1rem,3vw,2rem);
  --r:     10px;          /* corner radius */
  --r-pill: 999px;
  --nav-bg: rgba(97,93,83,.72);
}

/* PAGE 2 runs on the darker ground the layout brief specifies (#3A3A3A).
   Set on <body class="theme-dark">; everything else follows from these
   three values. */
body.theme-dark{
  --nav-bg: rgba(46,46,46,.78);
  background:var(--dark);
  background-image:linear-gradient(180deg,#434343 0%,#3A3A3A 42%,#313131 100%);
}

html{font-size:150%; scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}

@media (min-width:1000px){
  :root{ --col: min(60vw, 1500px) }
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--body);
  font-size:.78rem;
  font-weight:400;
  /* 1.45 is about as tight as a 60%-width column takes before the eye
     starts losing its place returning to the left margin */
  line-height:1.45;
  color:var(--paper);
  background:var(--grey);
  background-image:linear-gradient(180deg,var(--grey-up) 0%,var(--grey) 38%,var(--grey-dn) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.page{width:100%}
/* friction against the one-gesture saves; see initImageGuard() in
   js/site.js. File covers inside .fcard are exempt — those are meant
   to be saveable. */
img{display:block;max-width:100%}
img:not(.fcard__cover),video{
  -webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;
}
a{color:inherit}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap{width:100%;max-width:var(--col);margin:0 auto;padding:0 var(--gutter)}

/* small tracked label, used for every caption-scale item */
.label{
  font-family:var(--body);font-size:.58rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;opacity:.82;line-height:1.3;
}

/* ---------- nav --------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--nav-bg);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:var(--hair);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.nav--hidden{transform:translateY(-100%)}
.nav__inner{
  width:100%;max-width:var(--col);margin:0 auto;min-height:var(--nav-h);
  display:flex;align-items:center;gap:1rem;padding:0 var(--gutter);
}
.nav__brand{display:flex;align-items:center;flex:0 0 auto}
.nav__brand img{height:56px;width:auto}
.nav__links{
  margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:.45rem 1.05rem;
  font-family:var(--body);font-size:.6rem;font-weight:500;letter-spacing:.02em;
}
.nav__links a{
  color:var(--paper);text-decoration:none;text-align:center;line-height:1.2;
  padding:.35em 0;border-bottom:1.5px solid transparent;
  transition:color .18s,border-color .18s;
}
.nav__links a:hover,.nav__links a:focus-visible{border-bottom-color:var(--maroon-lt)}
.nav__links a[aria-current="page"]{border-bottom-color:var(--paper)}

/* ---------- v1 hero (legacy page only) ---------------------- */
.hero{position:relative;overflow:hidden;background:#C98B6E}
.hero img{width:100%;height:auto;object-fit:cover;object-position:72% 42%}
.hero__strap{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(2rem,8vw,5rem) 0 clamp(.6rem,1.6vw,1.1rem);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.8) 100%);
  text-align:center;color:var(--maroon);
}
.hero__since{font-style:italic;font-size:.7rem;letter-spacing:.4em;margin-bottom:.35rem}
.hero__line{font-size:1rem;letter-spacing:.28em;word-spacing:.4em;line-height:1.35}

/* ---------- section frame ----------------------------------- */
.section{
  border-top:var(--hair);
  /* condensed rhythm, tightened again 26 Sep. Was 1.3/3.3/2.6 over
     1.4/3.5/2.8; roughly 30% less air top and bottom. */
  padding:clamp(.9rem,2.3vw,1.8rem) 0 clamp(1rem,2.4vw,1.9rem);
}
.section--first{border-top:none}
/* same treatment as .page-title: one family, hierarchy from size and
   weight. Revert to weight 600 / -.02em for the old, heavier headings. */
.section__title{
  font-family:var(--font);font-size:1.8rem;font-weight:300;
  letter-spacing:-.012em;line-height:1.06;
}
.section__title::before{
  content:"";display:block;width:2.1rem;height:2px;
  background:var(--maroon-lt);margin-bottom:.7rem;border-radius:2px;
}
.section__title--nobar::before{display:none}
.accent{
  width:2.1rem;height:2px;background:var(--maroon-lt);
  border-radius:2px;margin-bottom:.9rem;
}
/* red left rule — the pull-quote treatment, reused */
.redrule{border-left:2px solid var(--maroon-lt);padding-left:1rem}
.section__lede{
  font-size:.78rem;line-height:1.45;opacity:.9;
  max-width:62ch;margin-top:.9rem;
}
.btn{
  font-family:var(--body);font-size:.62rem;font-weight:500;letter-spacing:.03em;
  background:transparent;color:var(--paper);
  border:1px solid rgba(243,241,236,.5);border-radius:var(--r-pill);
  padding:.62em 1.6em;cursor:pointer;text-decoration:none;display:inline-block;
  transition:background .2s,color .2s,border-color .2s,transform .08s;
}
.btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn-row{display:flex;justify-content:center;margin-top:clamp(1.4rem,3vw,2rem)}
.counter{font-size:.6rem;letter-spacing:.08em;opacity:.75;font-variant-numeric:tabular-nums}
.counter b{font-weight:600;opacity:1}

/* ---------- opener (v2) ------------------------------------- */
.opener{padding-top:calc(var(--nav-h) + clamp(1.1rem,3vw,2.5rem))}
.opener__grid{
  display:grid;grid-template-columns:1fr minmax(0,12rem);
  gap:clamp(1.2rem,3.5vw,2.6rem);align-items:start;
}
.proposition{
  font-family:var(--font);font-size:2rem;font-weight:600;
  letter-spacing:-.026em;line-height:1.02;
}
.proposition span{display:block}
.opener__sub{
  font-family:var(--font);font-size:1rem;font-weight:400;
  letter-spacing:-.01em;line-height:1.3;opacity:.82;margin-top:.7rem;
}
.opener__lede{font-size:.78rem;line-height:1.65;margin-top:clamp(1.1rem,2.4vw,1.6rem);opacity:.95}
.opener__foot{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(1rem,3vw,2.4rem);align-items:stretch;
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
}
.opener__pull{
  font-size:.84rem;font-style:italic;line-height:1.5;
  padding-left:1rem;max-width:50ch;margin:0;
  border-left:2px solid var(--maroon-lt);
  display:flex;align-items:center;
}
/* signature fills the quote's height; width follows its own proportions */
.signature{display:flex;align-items:center;justify-content:flex-end}
.signature img{
  height:100%;width:auto;max-height:3.4rem;max-width:10.5rem;
  object-fit:contain;opacity:.9;
}
/* the radius belongs on the image, not the figure — the figure's box
   ends below the caption, so clipping there rounded only the top */
.portrait-sm{}
.portrait-sm img{width:100%;height:auto;border-radius:var(--r);display:block}
.portrait-sm figcaption{
  font-family:var(--body);font-size:.55rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;opacity:.75;margin-top:.55rem;text-align:center;
}
.proof{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.6rem);
  margin-top:clamp(1.2rem,2.6vw,1.8rem);border-top:var(--hair);
  padding-top:clamp(1.1rem,2.4vw,1.5rem);
}
.proof__n{
  font-family:var(--font);font-size:1.65rem;font-weight:600;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.proof__l{
  font-family:var(--body);font-size:.56rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;opacity:.75;margin-top:.5rem;line-height:1.3;
}

/* ---------- projects carousel ------------------------------- */
.carousel{
  /* NOT display:flex. .track is the only child and must fill this box.
     As a flex ITEM with overflow-x:auto it fails to stretch in SAFARI:
     measured 666px inside a 1296px .carousel (desktop Safari 26, 2 Oct
     2026), which threw the active card 315px left of centre and hid the
     peek cards. iOS Safari collapsed the same box to 0. Chromium
     stretches it correctly, so this is invisible in Chrome and Edge.
     .nav-arrow is position:absolute against this rule's position:
     relative, so nothing here needs flex. See .track below. */
  position:relative;display:block;
  --card-w:min(780px, 54vw);   /* the active window; 16:9 sets its height */
  --standby:.74;               /* how far the cards either side shrink */
}
.track{
  display:flex;align-items:center;gap:clamp(4px,.6vw,10px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* width/min-width are load-bearing: without them Safari shrink-wraps
     this box instead of filling .carousel, and the centring padding
     below is then computed against a container it does not match.
     scrollTo() also divides by track.clientWidth, so a wrong width
     mis-positions every card by half the error. */
  padding:10px calc((100% - var(--card-w))/2);
  width:100%;min-width:0;scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.card{
  flex:0 0 var(--card-w);aspect-ratio:16/9;scroll-snap-align:center;
  position:relative;border-radius:var(--r);overflow:hidden;background:#24221e;
  filter:grayscale(1) brightness(.6);opacity:.4;transform:scale(var(--standby));
  transition:filter .55s,opacity .55s,transform .55s,box-shadow .55s;cursor:pointer;
}
.card.active{
  filter:none;opacity:1;transform:scale(1);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.65);cursor:default;
}
.card__media{position:absolute;inset:0}
.card__media img,.card__media video{width:100%;height:100%;object-fit:cover}
.card__media--tint{
  background:linear-gradient(115deg,var(--h1),var(--h2),var(--h1));
  background-size:260% 260%;animation:drift 9s ease-in-out infinite;
}
.card:not(.active) .card__media--tint{animation-play-state:paused}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.card__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.18) 55%,
              rgba(0,0,0,.42) 78%,rgba(0,0,0,.62) 100%);
}
.card__overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,2vw,22px);
  opacity:0;transform:translateY(10px);transition:opacity .45s .05s,transform .45s .05s;
  /* its own gradient, so pale footage cannot swallow the words */
  background:linear-gradient(180deg,rgba(18,16,14,0) 0%,rgba(18,16,14,.34) 30%,
             rgba(18,16,14,.58) 66%,rgba(18,16,14,.68) 100%);
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}
.card.active .card__overlay{opacity:1;transform:none}
.card__title{
  font-family:var(--font);font-size:1.05rem;font-weight:600;letter-spacing:-.02em;
  color:#fff;line-height:1.1;margin-bottom:.5rem;
}
.card__title b{color:#FF8A8A;font-weight:600}
.card__blurb{
  font-size:.68rem;line-height:1.5;color:rgba(255,255,255,.92);max-width:44ch;
  margin-bottom:0;
}
.card__files{
  position:absolute;right:clamp(12px,1.6vw,18px);bottom:clamp(12px,1.6vw,18px);
  z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem;
  max-width:40%;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s .05s,transform .45s .05s;
}
.card.active .card__files{opacity:1;transform:none}
.filemark{position:relative;display:block;width:1.35rem;line-height:0}
.filemark svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
/* needs to out-rank `.filemark svg`, which sets width:100% */
.filemark svg.filemark__lock{
  position:absolute;right:-.1rem;bottom:-.08rem;width:.62rem;height:auto;
}
.nav-arrow{
  position:absolute;z-index:5;top:50%;transform:translateY(-50%);
  width:2.2rem;height:2.2rem;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--r-pill);cursor:pointer;
  background:rgba(20,18,15,.42);backdrop-filter:blur(8px);
  color:#fff;font-size:.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.nav-arrow:hover{background:rgba(20,18,15,.7)}
.nav-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-arrow.prev{left:clamp(6px,1.6vw,18px)}
.nav-arrow.next{right:clamp(6px,1.6vw,18px)}
.footrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.footrow .btn{margin:0 auto}

/* ---------- clients: bars + logo strip ---------------------- */
.bars{display:grid;gap:clamp(8px,1.2vw,12px);margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.bar{display:grid;grid-template-columns:minmax(7rem,10.5rem) 1fr auto;align-items:center;gap:.8rem}
.bar__label{font-size:.64rem;text-align:right;line-height:1.25;opacity:.85}
.bar__track{background:rgba(0,0,0,.16);height:.62rem;border-radius:var(--r-pill);overflow:hidden}
.bar__fill{
  height:100%;width:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(243,241,236,.55),var(--paper));
  transition:width 1.5s cubic-bezier(.22,.7,.25,1);
}
.bar__val{
  font-family:var(--font);font-size:.74rem;font-weight:600;letter-spacing:-.01em;
  min-width:4.4rem;font-variant-numeric:tabular-nums;
}
/* A continuous run that drifts sideways in --rows rows. Fixed height
   whatever the number of marks: rows x --slot-h, the row gap, and the
   panel's own padding. Nothing else. */
.logostrip{
  --rows:2;               /* rows of marks */
  --row-gap:.5rem;
  --slot-h:1.85rem;       /* logo box height — the panel's only size input */
  --slot-min:2.4rem;      /* narrowest box (tall square marks)  */
  --slot-max:6.6rem;      /* widest box (long wordmarks)        */
  --slot-gap:1.35rem;     /* space between marks                */
  --fade:2.6rem;          /* soft edge under the arrows */
  margin-top:clamp(1.8rem,4vw,2.6rem);
  background:rgba(243,241,236,.94);
  border-radius:var(--r);
  padding:.5rem 0;
  position:relative;
  overflow:hidden;
}
.logostrip__viewport{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  /* fade the marks out at both edges so the run reads as continuous */
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
             #000 calc(100% - var(--fade)),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
             #000 calc(100% - var(--fade)),transparent 100%);
}
.logostrip__viewport::-webkit-scrollbar{display:none}
.logostrip__viewport.dragging{cursor:grabbing}
.logostrip__viewport:focus-visible{outline:2px solid var(--maroon-lt);outline-offset:-2px}
.logostrip__rail{
  display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows),var(--slot-h));
  column-gap:var(--slot-gap);row-gap:var(--row-gap);
  justify-items:center;align-items:center;width:max-content;
}
.logoslot{
  /* width comes from the mark's own aspect ratio (set inline by site.js
     from the pixel sizes in js/logos.js), so no mark carries dead space.
     A grid column is as wide as the wider of its two marks. */
  height:var(--slot-h);
  display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:6px;
}
.logoslot img{
  max-height:100%;max-width:100%;width:auto;object-fit:contain;
  /* logos supplied on a white ground blend into the off-white panel */
  mix-blend-mode:multiply;
  -webkit-user-drag:none;user-select:none;
}
.logostrip--color .logoslot img{mix-blend-mode:normal}
/* fallback while a mark has no image file yet */
.logoslot--text{
  background:rgba(43,40,35,.05);padding:0 .5rem;
  font-size:.52rem;line-height:1.2;color:#6b6659;filter:grayscale(1);
}
.logostrip .nav-arrow{
  width:1.7rem;height:1.7rem;font-size:.8rem;
  background:rgba(243,241,236,.82);border-color:rgba(43,40,35,.16);color:#4a463d;
  backdrop-filter:none;
}
.logostrip .nav-arrow:hover{background:#fff;color:var(--ink)}
.logostrip .nav-arrow.prev{left:.35rem}
.logostrip .nav-arrow.next{right:.35rem}

/* ---------- Iain block -------------------------------------- */
/* full-width banner photo leading the section */
.bio__banner{
  position:relative;border-radius:var(--r);overflow:hidden;
  margin-top:clamp(1.2rem,2.6vw,1.8rem);
}
.bio__banner img{width:100%;height:auto;display:block}
.bio__li{
  position:absolute;right:10px;bottom:10px;width:1.5rem;height:1.5rem;border-radius:6px;
  background:rgba(10,102,194,.92);color:#fff;font-weight:600;font-size:.6rem;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
}
.bio__text{font-size:.78rem;line-height:1.65;margin-top:clamp(.6rem,1.4vw,1rem)}
.bio__text p{margin-bottom:.9rem}
.bio__text p:last-child{margin-bottom:0}
.bio__kicker{
  font-family:var(--font);font-size:.98rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.25;margin-bottom:.9rem;
}
.quotes{margin-top:clamp(1.6rem,3.4vw,2.4rem);min-height:4.6rem;display:flex;align-items:center;justify-content:center}
.quotes--lead{
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
  margin-bottom:clamp(1.4rem,3vw,2rem);
  min-height:4.2rem;
}
.quote{
  font-size:.82rem;font-style:italic;text-align:center;max-width:56ch;line-height:1.55;
  opacity:0;transition:opacity .85s;position:absolute;pointer-events:none;
}
.quote.on{opacity:.95;position:static;pointer-events:auto}

/* ---------- ventures ---------------------------------------- */
.ventures__text{font-size:.78rem;line-height:1.65;margin-top:clamp(1rem,2.4vw,1.5rem)}
.ventures__hook{
  font-family:var(--font);font-size:1rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.3;margin-bottom:1rem;
}
.ventures__text p{margin-bottom:.9rem}
.strip-label{text-align:center;margin-top:clamp(1.6rem,3.4vw,2.2rem)}

/* ---------- contact ----------------------------------------- */
.cities{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem clamp(1rem,2.6vw,2.2rem);
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
}
.contact__note{
  font-style:italic;text-align:center;font-size:.76rem;opacity:.88;
  margin:.45rem auto 0;max-width:62ch;
}
.contact__address{line-height:1.35;font-size:.76rem}
.contact__address strong{display:block;margin-bottom:.35rem;font-weight:600}
.contact__reach{margin-top:.9rem;line-height:1.5}
.contact__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.2rem);
  align-items:start;margin-top:clamp(1.8rem,4vw,2.6rem);
}
.contact__block{font-size:.76rem;line-height:1.7}
.contact__block a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(243,241,236,.35)}
.contact__block a:hover{border-bottom-color:var(--paper)}
.contact__block strong{font-weight:600}
/* Map slot: drop a file in at assets/img/map-dc.jpg and it appears.
   Until then the note below shows instead. Box is about 1.9:1 —
   supply roughly 1000x520 for a crisp result on a retina screen. */
.map{
  position:relative;border:var(--hair);border-radius:var(--r);
  background:rgba(0,0,0,.16);overflow:hidden;
  height:clamp(160px,15vw,220px);
}
.map__img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1}
.map__await{
  position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem;font-size:.62rem;opacity:.55;
}

.form{margin:clamp(2rem,4vw,3rem) auto 0;max-width:33rem}
.form__row{margin-bottom:.9rem}
.form label{display:block;margin-bottom:.4rem}
.form select,.form input,.form textarea{
  width:100%;font-family:var(--body);font-size:.72rem;padding:.65em .8em;
  border:1px solid rgba(243,241,236,.28);border-radius:8px;
  background:rgba(0,0,0,.14);color:var(--paper);
  transition:border-color .2s,background .2s;
}
.form select option{color:var(--ink)}
.form input::placeholder,.form textarea::placeholder{color:rgba(243,241,236,.45)}
.form select:focus,.form input:focus,.form textarea:focus{
  outline:none;border-color:var(--maroon-lt);background:rgba(0,0,0,.2);
}
.form textarea{min-height:5rem;resize:vertical}
.form__hint{font-size:.58rem;opacity:.65;margin-top:.4rem}
.form__resp{
  font-size:.74rem;line-height:1.55;margin-top:1.1rem;
  background:rgba(243,241,236,.95);color:var(--ink);
  padding:.8em .9em;border-radius:8px;display:none;
}
.form__resp.on{display:block}
.form .btn{margin-top:.3rem}
.sitefoot{
  border-top:var(--hair);padding:1.6rem 0;text-align:center;
  font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;opacity:.55;
}

/* honeypot: off-screen rather than display:none, because some bots skip
   anything display:none. Never focusable, never announced. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- page 2: about ----------------------------------- */
/* the portrait sits in the corner and the bio runs round it, the same
   float the project entries use — see .pentry__media */
.bio{margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.bio::after{content:"";display:block;clear:both}
.bio p{font-size:.78rem;line-height:1.45;margin-bottom:.8rem}
.bio p:last-child{margin-bottom:0}
.bio__portrait{margin:0 0 clamp(.8rem,2vw,1.1rem)}
.bio__portrait img{width:100%;height:auto;border-radius:var(--r);display:block}
@media (min-width:860px){
  /* Two columns, not a float. A float lets the tail of the text wrap back under
     the photo, and how many lines do that depends entirely on the viewport:
     measured 3 lines at 1280, 2 at 1440 (which stranded a single word), 0 at
     1680 and above. A grid is width-independent, and it matches the territories
     below. Cost: empty ground under the photo at narrower desktop widths —
     the same shape the territories already have. */
  .bio{display:grid;grid-template-columns:13rem 1fr;column-gap:1.5rem;align-items:start}
  .bio::after{display:none}
  .bio--close{display:block}
  .bio__portrait{width:auto;margin:.2rem 0 0}
}

/* photographs: one row, drifting, not clickable and not enlarging */
.logostrip--photos{
  --rows:1;
  --slot-h:4.5rem;      /* photo height — the strip's only size input */
  --slot-min:3.1rem;
  --slot-max:8.1rem;
  --slot-gap:.4rem;
  --fade:2rem;
  background:none;padding:0;
}
.logostrip--photos .logoslot{border-radius:6px;overflow:hidden}
.logostrip--photos .logoslot img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;
  mix-blend-mode:normal;
}
.logostrip--photos .nav-arrow{
  background:rgba(20,18,15,.5);border-color:rgba(255,255,255,.22);color:var(--paper);
  backdrop-filter:blur(2px);
}
.logostrip--photos .nav-arrow:hover{background:rgba(20,18,15,.72);color:var(--paper)}

/* indented from the main column, ragged left so the right edge runs
   straight — the layout brief asks for the smooth line */
.highlights{
  list-style:none;margin-top:clamp(1rem,2.4vw,1.5rem);
  padding:0 clamp(0rem,3vw,3rem);
}
/* Bulleted, not right-justified: nine items of very different lengths —
   one runs four lines — and a straight right edge left the left edge
   ragged, which is the harder one to read a list against. */
.highlights li{
  font-size:.74rem;line-height:1.45;
  position:relative;padding-left:1.15rem;margin-bottom:.7rem;
}
.highlights li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:.3rem;height:.3rem;border-radius:50%;
  background:var(--maroon-lt);
}
.highlights li:last-child{margin-bottom:0}

/* ---------- page 2: citations and testimonials -------------- */
/* one shared attribution block: name on its own line, role beneath */
.tcite cite,.tlead cite,.tquote cite{
  display:block;font-style:normal;margin-top:.5rem;
  font-size:.58rem;letter-spacing:.05em;line-height:1.35;
}
.tcite cite span,.tlead cite span,.tquote cite span{
  display:block;font-size:.54rem;letter-spacing:.04em;opacity:.6;margin-top:.1rem;
}

/* a short citation closing a territory, set off by the site's pull-quote
   rule so it reads as a different voice from the evidence above it */
.tcite{
  margin-top:clamp(.9rem,2vw,1.2rem);
  border-left:2px solid var(--maroon-lt);padding-left:.9rem;
}
.tcite p{font-size:.74rem;line-height:1.4;font-style:italic}

/* the band. One focal quote, then four in a grid — five equal boxes
   would have nothing to look at first. */
.said{margin-top:clamp(.2rem,1vw,.6rem)}
.said__cap{text-align:center;opacity:.55}
.tlead{
  text-align:center;max-width:34rem;
  margin:clamp(1rem,2.4vw,1.6rem) auto clamp(1.4rem,3vw,2.2rem);
}
.tlead p{
  font-family:var(--font);font-weight:300;font-style:italic;
  font-size:clamp(1.1rem,2.7vw,1.6rem);line-height:1.2;letter-spacing:-.01em;
}
.tlead cite{opacity:.8}
.tgrid{display:grid;gap:clamp(1.1rem,2.6vw,1.7rem) clamp(1.4rem,3.4vw,2.6rem)}
@media (min-width:860px){ .tgrid{grid-template-columns:1fr 1fr} }
.tquote{border-top:var(--hair);padding-top:.8rem}
.tquote p{font-size:.74rem;line-height:1.45;font-style:italic;opacity:.94}

/* ---------- page 2 v2: territories -------------------------- */
.aboutnow{
  margin-top:clamp(1.2rem,2.6vw,1.8rem);max-width:34rem;
}
/* italic, matching the home page's equivalent callout */
.aboutnow p{font-size:.78rem;line-height:1.45;font-style:italic}
/* the strip now leads this section, so the closing paragraph needs
   clearing from it rather than sitting hard underneath */
.bio--close{margin-top:clamp(1rem,2.4vw,1.5rem)}
.bio--close p{max-width:52rem}

.terrs{margin-top:clamp(.4rem,1vw,.8rem)}
/* label and quote left, evidence right — the same shape as the home
   page bars. The five quotes down the left edge are the scannable
   view, which is why nothing here hides behind a click. */
.terr{
  display:grid;gap:.5rem clamp(1.2rem,3vw,2.2rem);
  padding:clamp(1rem,2.2vw,1.5rem) 0;border-top:var(--hair);
}
.terr:first-child{border-top:none;padding-top:0}
@media (min-width:860px){
  .terr{grid-template-columns:minmax(0,10fr) minmax(0,21fr);align-items:start}
}
.terr__label{
  font-family:var(--font);font-weight:500;font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.3;
  opacity:.75;
}
.terr__quote{
  font-family:var(--font);font-weight:300;font-style:italic;
  font-size:.92rem;line-height:1.28;letter-spacing:-.008em;
  margin-top:.5rem;
}
.terr__body{font-size:.76rem;line-height:1.45}
.terr__body em{font-style:italic}
.terr__body::after{content:"";display:block;clear:both}
.terr__media{margin:0 0 .6rem;border-radius:var(--r);overflow:hidden;max-width:9rem}
.terr__media img{width:100%;height:auto;display:block}
@media (min-width:860px){
  .terr__media{float:right;width:9rem;margin:.15rem 0 .7rem 1.1rem}
}
.aboutfoot{gap:.6rem;flex-wrap:wrap}
.aboutfoot .btn{margin:0}

/* ---------- page 3: sectors + services ---------------------- */
/* clears the fixed nav on the inner pages */
.page-top{padding-top:calc(var(--nav-h) + clamp(1rem,2.6vw,2rem))}
.page-title{
  font-family:var(--font);font-weight:300;letter-spacing:-.012em;line-height:1.02;
  font-size:clamp(1.5rem,4.4vw,2.6rem);
}
.page-lede{font-size:.82rem;line-height:1.6;margin-top:.7rem;opacity:.95;max-width:42rem}
/* one sentence per line, centred under the title */
.page-lede--split{max-width:none;text-align:center;margin-top:clamp(.8rem,2vw,1.2rem)}
.page-lede--split span{display:block}

/* Sectors: a statement, not a control. Set as a masthead-style block —
   plain words in a fixed grid, hairline rules, nothing that looks
   pressable, because nothing here is. */
.sectors{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:clamp(1rem,2.4vw,1.5rem);
  border-top:var(--hair);border-bottom:var(--hair);
}
.sectors li{
  padding:.75rem .5rem;text-align:center;
  font-size:.66rem;line-height:1.3;letter-spacing:.055em;text-transform:uppercase;
  opacity:.9;border-left:var(--hair);
}
.sectors li:nth-child(5n+1){border-left:none}
.sectors li:nth-child(n+6){border-top:var(--hair)}

/* eight tiles over one shared panel: the page keeps a stable height
   and only the open service's logos are ever in the DOM */
.services{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.55rem;margin-top:clamp(1rem,2.4vw,1.5rem);
}
.stile{
  font-family:var(--body);font-size:.7rem;line-height:1.25;letter-spacing:.015em;
  color:var(--paper);background:rgba(243,241,236,.10);
  border:1px solid rgba(243,241,236,.16);border-radius:var(--r);
  padding:.9rem .7rem;min-height:3.5rem;cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.stile:hover{background:rgba(243,241,236,.18)}
.stile:focus-visible{outline:2px solid var(--maroon-lt);outline-offset:2px}
.stile[aria-selected="true"]{
  background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:600;
}
.spanel{margin-top:clamp(.9rem,2vw,1.3rem)}

/* tagline and marks share one light card, so the whole answer to
   "what is this service" is a single object on the page */
.scard{
  background:rgba(243,241,236,.94);color:var(--ink);
  border-radius:var(--r);border-top:2px solid var(--maroon);
  padding:clamp(.6rem,1.3vw,.85rem) clamp(1rem,2.6vw,1.8rem) clamp(1rem,2.2vw,1.4rem);
}
.scard__line{
  font-size:.8rem;font-style:italic;line-height:1.5;
  max-width:42rem;margin:0 auto;text-align:center;
}
/* the whole line is italic, so an emphasis goes upright to stay emphatic */
.scard__line em{font-style:normal}
.scard__cap{
  margin-top:clamp(1rem,2.2vw,1.4rem);text-align:center;
  color:var(--ink);opacity:.5;
}

/* even columns, every row centred — including a short last row, which a
   plain grid would leave hanging to the left */
.logogrid{
  /* five to a row at the desktop column width: a 13-mark service then
     falls 5/5/3 rather than 4/4/4/1, which leaves one mark stranded */
  --cell:5.6rem;--cell-h:2.1rem;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.7rem 0;margin-top:.7rem;
}
.logogrid__cell{
  flex:0 0 var(--cell);height:var(--cell-h);
  display:flex;align-items:center;justify-content:center;
}
.logogrid__cell img{
  max-width:82%;max-height:100%;width:auto;object-fit:contain;
  mix-blend-mode:multiply;-webkit-user-drag:none;user-select:none;
}
.logogrid__cell--txt{
  font-size:.52rem;line-height:1.2;color:#6b6659;text-align:center;padding:0 .35rem;
}
.spanel .btn-row{margin-top:clamp(1rem,2.2vw,1.4rem)}

/* ---------- page 3: selected projects ----------------------- */
.plist{margin-top:clamp(1.4rem,3vw,2.2rem)}
.pentry{
  padding-bottom:clamp(1.3rem,2.8vw,2rem);margin-bottom:clamp(1.3rem,2.8vw,2rem);
  border-bottom:var(--hair);
}
.pentry__title{
  font-family:var(--font);font-weight:300;letter-spacing:-.012em;line-height:1.1;
  font-size:1.15rem;margin-bottom:.5rem;
}
.pentry__body p{font-size:.76rem;line-height:1.45;margin-bottom:.65rem}
.pentry__body p:last-of-type{margin-bottom:0}

/* small media in one corner with the copy wrapping round and under it,
   side alternating down the page. A float rather than a grid column:
   in a column, a long entry leaves a tall empty gap beside the image.
   --pmw is the only size input. */
.pentry__cols{--pmw:15rem}
.pentry__cols::after{content:"";display:block;clear:both}
.pentry__media{margin:0;border-radius:var(--r);overflow:hidden}
@media (min-width:860px){
  .pentry__media{float:left;width:var(--pmw);margin:.15rem 1.5rem .8rem 0}
  .pentry--flip .pentry__media{float:right;margin:.15rem 0 .8rem 1.5rem}
}
@media (max-width:859px){
  .pentry__media{margin-bottom:clamp(.8rem,2vw,1.1rem)}
}
.pentry__media img{width:100%;height:auto;display:block}
.pentry__media--video{aspect-ratio:16/9;background:rgba(0,0,0,.22)}
.pentry__media--video video{width:100%;height:100%;object-fit:cover;display:block}
/* one class for every image credit on the site — Projects entries and
   the About territory photo both use it. Sized to hold a gallery name
   on a single line, and set tight to the image it belongs to. */
.pentry__credit{
  font-size:.42rem;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.3;opacity:.45;padding:.18rem .05rem 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* client marks on the dark ground. The source PNGs are greyscale on
   white: inverting them and screen-blending drops the white away, so a
   long list does not need a paper panel behind every entry. */
.plogos{clear:both;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.9rem}
.plogos__slot{height:1.4rem;display:inline-flex;align-items:center}
.plogos__slot img{
  height:100%;width:auto;max-width:5rem;object-fit:contain;
  filter:invert(1) contrast(1.05);mix-blend-mode:screen;opacity:.82;
  -webkit-user-drag:none;user-select:none;
}
/* fallback: marks on paper, as everywhere else on the site */
.plogos--panel{background:rgba(243,241,236,.94);border-radius:6px;padding:.5rem .7rem}
.plogos--panel .plogos__slot img{filter:none;mix-blend-mode:multiply;opacity:1}

/* file marks: each one wears its own first page. Covers are title
   pages, so the box crops from the top — the masthead is the part
   worth showing. */
.filerow{
  clear:both;display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:.65rem .45rem;margin-top:clamp(1rem,2.2vw,1.3rem);
}
/* --fw is set so that eight marks — Colonel Blood's full set — sit on
   one row at the desktop column width. Every file row uses it. */
.fcard{
  --fw:3.5rem;
  display:flex;flex-direction:column;gap:.3rem;width:var(--fw);
  font-family:var(--body);font-size:.5rem;letter-spacing:.01em;line-height:1.3;
  color:var(--paper);text-align:left;text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer;
}
.fcard__face{
  position:relative;display:block;width:100%;aspect-ratio:4/3;
  border-radius:4px;overflow:hidden;background:#EDEBE6;
  box-shadow:0 2px 6px rgba(0,0,0,.32);
  transition:transform .16s ease,box-shadow .16s ease;
}
.fcard:hover .fcard__face{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.42)}
.fcard:focus-visible .fcard__face{outline:2px solid var(--maroon-lt);outline-offset:2px}
.fcard__cover{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fcard__blank{width:62%;height:auto;margin:14% auto 0;display:block;opacity:.55}
.fcard__badge{
  position:absolute;right:.12rem;bottom:.12rem;
  font-size:.34rem;font-weight:700;letter-spacing:.03em;color:#fff;
  padding:.05rem .18rem;border-radius:2px;line-height:1.35;
}
.fcard__lock{
  position:absolute;left:.12rem;bottom:.12rem;width:.52rem;height:auto;
}
.fcard.is-locked .fcard__face{opacity:.72}
.fcard.is-locked:hover .fcard__face{opacity:1}
.fcard__label{opacity:.85}
.fcard:hover .fcard__label{opacity:1}

/* the brief run: two columns of short entries */
.plist__more{margin:clamp(.4rem,1.4vw,1rem) 0 .9rem}
.pbriefs{display:grid;gap:clamp(1rem,2.4vw,1.6rem) clamp(1.4rem,3.4vw,2.6rem)}
@media (min-width:860px){ .pbriefs{grid-template-columns:1fr 1fr} }
.pbrief__title{
  font-family:var(--font);font-weight:500;font-size:.8rem;letter-spacing:-.004em;
  margin-bottom:.25rem;
}
.pbrief__text{font-size:.72rem;line-height:1.45;opacity:.92}

/* ---------- page 4: downloads ------------------------------- */
.dnotes{
  margin-top:clamp(1.2rem,2.6vw,1.8rem);
  border-left:2px solid var(--maroon-lt);padding-left:1rem;
  max-width:44rem;
}
.dnotes p{font-size:.7rem;line-height:1.45;opacity:.9}
.dnotes p + p{margin-top:.5rem}
.dnotes strong{font-weight:600;opacity:1}

.dlist{margin-top:clamp(1.2rem,2.6vw,1.8rem)}
.dgroup{padding:clamp(.9rem,2vw,1.3rem) 0;border-bottom:var(--hair)}
.dgroup:last-child{border-bottom:none}
.dgroup__title{
  font-family:var(--font);font-weight:300;letter-spacing:-.008em;
  font-size:1rem;line-height:1.15;
}
/* the company intro leads the list, so it carries the accent rule */
.dgroup--lead{border-top:2px solid var(--maroon);padding-top:1rem}
.dgroup .filerow{margin-top:.8rem}

/* the featured clip: square, because a CT scan is */
.dfeature{
  display:grid;gap:clamp(.9rem,2.2vw,1.5rem);
  padding-bottom:clamp(1.2rem,2.6vw,1.8rem);margin-bottom:clamp(.4rem,1vw,.8rem);
  border-bottom:var(--hair);
}
@media (min-width:860px){
  .dfeature{grid-template-columns:13rem minmax(0,1fr);align-items:start}
}
.dfeature__media{
  margin:0;border-radius:var(--r);overflow:hidden;
  aspect-ratio:1/1;background:rgba(0,0,0,.28);max-width:13rem;
}
.dfeature__media video{width:100%;height:100%;object-fit:cover;display:block}
.dfeature__text{font-size:.76rem;line-height:1.45;margin-top:.5rem}

.dband .filerow{margin-top:clamp(1rem,2.2vw,1.4rem)}

/* ---------- the locked-file notice -------------------------- */
.lockdlg{
  /* the reset's *{margin:0} removes the UA margin:auto that centres a
     modal dialog, so put it back explicitly */
  margin:auto;
  border:none;border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem);
  max-width:24rem;width:calc(100% - 2rem);
  background:var(--paper);color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.lockdlg::backdrop{background:rgba(20,18,15,.62);backdrop-filter:blur(2px)}
.lockdlg__h{
  font-family:var(--font);font-weight:300;font-size:1.1rem;letter-spacing:-.01em;
  margin-bottom:.6rem;
}
.lockdlg__p{font-size:.72rem;line-height:1.6;margin-bottom:.5rem}
.lockdlg__p a{color:var(--maroon);border-bottom:1px solid rgba(136,0,8,.35);text-decoration:none}
.lockdlg .btn{color:var(--ink);border-color:rgba(43,40,35,.3);margin:0 auto}
.lockdlg .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lockdlg .btn-row{margin-top:1.1rem}

/* ---------- responsive -------------------------------------- */
@media (max-width:760px){
  html{font-size:118%}
  /* logo left and larger, links spread edge to edge — the centred stack
     read as a collapsed desktop header rather than a designed one, and
     left-aligning also matches the desktop arrangement */
  .nav__inner{flex-wrap:wrap;gap:.45rem;padding:.6rem var(--gutter);min-height:0;justify-content:flex-start}
  .nav__brand{width:100%;justify-content:flex-start}
  .nav__brand img{height:54px}
  .nav__links{width:100%;margin-left:0;justify-content:space-between;gap:.2rem;font-size:.62rem}
  .hero img{height:300px}
  .hero__line{letter-spacing:.08em;word-spacing:.24em}
  .opener{padding-top:calc(var(--nav-h) + .8rem)}
  /* keep the portrait BESIDE the text, not stacked under it. The
     headline is one word per line already, so a narrow column costs
     it nothing. */
  .opener__grid{grid-template-columns:1fr minmax(0,8rem);gap:1rem}
  .proposition{font-size:1.4rem}
  .opener__sub{font-size:.92rem}
  .portrait-sm{max-width:none}   /* sized by its grid column now */
  .opener__foot{grid-template-columns:1fr auto;gap:.8rem}   /* signature stays beside the quote */
  .signature{justify-content:flex-end;align-items:flex-end;padding:0}
  .signature img{max-height:2.4rem;max-width:5.4rem}
  .proof{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .proof__n{font-size:1.3rem}
  /* ---- carousel: one card at a time, NOT centred ------------------
     The desktop track centres its cards with
         padding: 10px calc((100% - var(--card-w))/2)
     iOS Safari mishandles horizontal padding on a scrolling flex
     container (long-standing WebKit bug), so every snap position shifts
     and the active card lands ~150px left of centre — title cut
     mid-word, dead space to its right. Chromium computes it correctly,
     which is why this survived desktop testing.
     The fix deletes the arithmetic rather than correcting it: full-width
     cards, snap to START, no track padding. The shrunken peek cards were
     284px of unreadable thumbnail at this width anyway.
     Card is 100vw: a percentage flex-basis collapses to zero inside this
     scroll container. Radius goes to 0 because a rounded corner against
     the screen edge reads as a mistake. */
  /* .carousel is display:flex and .track is a flex item with
     overflow-x:auto. Chromium resolves that item to the container
     width; iOS SAFARI COLLAPSES IT TO ZERO once the side padding that
     was propping it open is removed. A 0-width scrollport clips every
     card, so the carousel renders as blank space of exactly card
     height -- with the video inside playing, unseen. It also breaks
     scrollTo(), which subtracts track.clientWidth/2 and so lands half
     a card off every time. Block layout + an explicit width removes
     the dependency on flex sizing entirely. Do not restore flex here
     without checking track.clientWidth on a real iPhone. */
  .carousel{--card-w:100vw;--standby:1;display:block}
  .track{padding:10px 0;gap:0;width:100%;min-width:0}
  .card{scroll-snap-align:start;border-radius:0}
  /* NO transform and NO filter on the cards, and this is why the home
     carousel videos were dead on iOS while the Projects page played
     fine: an inline <video> inside a transformed or filtered ancestor
     does not composite in iOS Safari — you get the poster and nothing
     else. .card carries transform:scale() and filter:grayscale(); the
     Projects page media carries neither. Setting --standby:1 was not
     enough, because scale(1) is still a transform.
     With one card per screen there is no inactive state to signal. */
  .card,.card.active{transform:none;filter:none;opacity:1;transition:box-shadow .55s}
  .carousel .nav-arrow{top:32%;width:1.8rem;height:1.8rem}
  .card__title{font-size:.9rem;margin-bottom:.3rem}
  .card__overlay{padding:10px 12px}
  .card__blurb{
    font-size:.62rem;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  /* file marks move to the TOP of the card on a phone: at full-bleed
     width the overlay text runs the whole card, and bottom-right put
     the icons straight on top of the blurb's last line */
  .card__files{gap:.35rem;right:10px;top:10px;bottom:auto;max-width:46%}
  .filemark{width:1.05rem}
  .logostrip{--slot-h:1.7rem;--slot-min:2.1rem;--slot-max:5.6rem;--slot-gap:1.05rem;--fade:1.6rem;padding:.4rem 0}
  /* the rotating quote sat as italic centred text directly against
     italic body text, with nothing to separate them */
  .quotes{border-top:var(--hair);border-bottom:var(--hair);padding:1rem 0;margin-top:1.4rem}
  .quotes--lead{border:none;padding:0}
  .contact__grid{grid-template-columns:1fr}
  /* the map is decorative and was pushing the form off-screen.
     NOTE: .map itself has height:clamp(160px,15vw,220px) — capping the
     IMAGE instead left a gap between it and the bottom of the box. */
  .map{height:7.5rem}
  /* label on its own line; bar and value side by side, as on desktop */
  .bar{grid-template-columns:1fr auto;gap:.18rem .7rem;align-items:center}
  .bar__label{grid-column:1 / -1;text-align:left}
  .bar__track{grid-column:1;height:.78rem}
  .bar__val{grid-column:2;min-width:0;white-space:nowrap;font-size:.78rem}
  .services{grid-template-columns:repeat(2,1fr)}
  .stile{font-size:.64rem;padding:.75rem .5rem;min-height:3rem}
  .scard{padding:.6rem .8rem 1rem}
  .scard__line{font-size:.72rem}
  .logogrid{--cell:5rem;--cell-h:1.8rem}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .sectors li{font-size:.6rem;padding:.6rem .4rem;letter-spacing:.045em}
  .sectors li:nth-child(5n+1){border-left:var(--hair)}
  .sectors li:nth-child(odd){border-left:none}
  .sectors li:nth-child(n+3){border-top:var(--hair)}
  .pentry__title{font-size:1.02rem}
  .plogos__slot{height:1.25rem}
  .plogos__slot img{max-width:4.2rem}
  .fcard{--fw:3.2rem;font-size:.46rem}
  .dgroup__title{font-size:.9rem}
  .dfeature__media{max-width:none}
  /* --hair is rgba(255,255,255,.13) — all but invisible on #3A3A3A,
     so the five territories ran together as one block of text */
  .terr{border-top:1px solid rgba(255,255,255,.28);padding:1.5rem 0 1.3rem}
  .terr__label{color:var(--maroon-lt);opacity:1}
  .terr__quote{font-size:.84rem}
  .tlead p{font-size:1rem}
  .terr__label{font-size:.6rem}
  .logostrip--photos{--slot-h:3.8rem;--slot-max:6.7rem;--fade:1.2rem}
  .highlights li{font-size:.7rem;margin-bottom:.6rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nav{transition:none}
  .track{scroll-behavior:auto}
  .card__media--tint{animation:none}
  .card,.card__overlay,.bar__fill,.quote{transition:none}
}