@keyframes fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.thread-scroll{scrollbar-width:none}.thread-scroll::-webkit-scrollbar{display:none}@supports (-webkit-touch-callout:none){.chat-intro-video{opacity:.92;mix-blend-mode:normal!important}}

/* Floating "Let's work together" chat pill hidden per request. The chat itself
   still opens from data-open-chat links (Get in touch / Let's build something);
   remove this rule to bring the pill back. */
#chat-trigger { display: none; }

/* Video hero (a project whose thumbnail is a looping video). Desktop landscape
   and mobile portrait videos toggled by breakpoint so only the visible one shows. */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-vid--mobile{display:none}
@media (max-width:767.98px){.hero-vid--desktop{display:none}.hero-vid--mobile{display:block}}

/* Header brand wordmark (NINETY9, ~9.3:1). Fixed height per breakpoint so the
   wide wordmark never overflows the bar or overlaps the nav toggle on mobile. */
.brand-logo{height:1.25rem}
@media (min-width:768px){.brand-logo{height:1.625rem}}
@media (min-width:1024px){.brand-logo{height:2rem}}

/* Brand logo variants (theme-aware). The black artwork shows in light mode, the
   white artwork in dark mode; the hidden variant is removed from flow so it never
   occupies its grid/flex slot. Used by the vertical mark in the header and the
   horizontal wordmark in the footer. */
.logo-light{display:block}
.logo-dark{display:none}
.dark .logo-light{display:none}
.dark .logo-dark{display:block}

/* Vertical stacked mark (yes/ter/day, ~0.79:1) in the fixed header. Doubled from the
   original scale per request so the three stacked rows read large in the bar. */
.brand-mark{height:5rem;width:auto}
@media (min-width:768px){.brand-mark{height:5.75rem}}
@media (min-width:1024px){.brand-mark{height:6.5rem}}

/* Footer horizontal wordmark. Runs from the grid start (left) and, on desktop, spans
   up to 65% of the viewport width while keeping its aspect ratio (height follows the
   width — no cap, no letterboxing). Full width on mobile. Theme visibility comes from
   .logo-light/.logo-dark above. */
.footer-logo-wrap{width:100%}
/* Left edge sits at the grid start (the footer's md:px-8 = 2rem inset), so subtract it
   for the right edge to land exactly at 65% of the viewport. */
@media (min-width:768px){.footer-logo-wrap{max-width:calc(65vw - 2rem)}}
.footer-logo{width:100%;height:auto}

/* ── Global top nav — Figma frame 28:1656 ───────────────────────────────────
   Logo left, section links on the right. Helvetica Neue, uppercase. Fixed
   full-width bar with no plate of its own — it sits transparent over whatever
   is beneath it, and its content takes the foreground colour. */
/* Site ground and ink, per mode. Defined here rather than in the compiled
   tw.css so the generated sheet stays untouched; extra.css loads after it, so
   every component that reads the tokens follows automatically.
     dark   the charcoal of Figma 241:1932 / 241:1987, pure white type
     light  the paper the offset frames are drawn on, the charcoal as ink
   Both modes used to be handed the dark pair, which left the toggle changing
   the moon icon and nothing else. */
:root{--color-background:#E8E7E3;--color-foreground:#393933;--color-border:#3939332e}
:root.dark{--color-background:#393933;--color-foreground:#FFFFFF;--color-border:#FFFFFF26}
/* The nav menu carries the page's own ground rather than inverting against it,
   which is what dark has always done — light now matches. */
:root .theme-inverted{--color-background:#E8E7E3;--color-foreground:#393933;--color-border:#3939332e}
:root.dark .theme-inverted{--color-background:#393933;--color-foreground:#FFFFFF;--color-border:#FFFFFF26}
/* Anything sitting on the brand yellow takes the ground colour, not black —
   that is the pairing the frames use wherever a block sits behind type. */
:root{--on-brand-yellow:#393933}
/* Brand accent. The same #F8FEA8 was already hard-coded twice (--ys-hl on the
   home hero, --yellow on the services sequence); this is the shared token for
   anything new that needs it. */
:root{--brand-yellow:#F8FEA8}

/* The display face: Helvetica Neue Condensed Bold, the one the home hero and
   the services sequence are set in. Declared here rather than in a page sheet
   so any page can reach for it — the contact heading does. */
@font-face{
  font-family:"HN Condensed Bold";
  src:local("HelveticaNeue-CondensedBold"),
      local("Helvetica Neue Condensed Bold"),
      url("/fonts/helvetica-neue-condensed/HelveticaNeue-CondensedBold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:block}
.display-face{
  font-family:"HN Condensed Bold","HelveticaNeue-CondensedBold",
              "Helvetica Neue Condensed","Arial Narrow",sans-serif;
  font-weight:700;text-transform:uppercase}

/* ---------------------------------------------------------------------------
   Heading highlight — a brand-yellow block behind a word, sitting on the word's
   own edges (Figma 200:7868, 241:1932, 241:1987). One definition, used wherever
   the site puts a colour block behind heading typography.

   Vertical is derived, not guessed. Helvetica Neue Condensed Bold: ascent
   .961em, descent .221em, cap height .714em. For a line-height L the
   half-leading is (L - 1.182)/2, so the baseline sits that far plus the ascent
   below the box top and the cap top is one cap height above it. Every user sets
   --ys-lh next to its own line-height so the two cannot drift apart. The frames
   set the block a touch outside the glyphs rather than flush to them, so both
   edges are then pulled back by --ys-pad.

   Horizontal is per word, because the bearings differ by letter: Y .003em,
   a .028em, B/E/H/M/P .050em on the left; t .002em, y .005em, r .030em,
   s .023em, a full stop .075em on the right. Each span carries its own pair
   inline.

   The padding is one knob per axis rather than one number, because the frames
   do not use the same air at every size: 0.10em on display type reads as a neat
   margin, but on the small caption the same figure is a fat band around 24px
   caps, and 241:1987 draws it at 0.042em there. Anything display-sized takes
   the default; only genuinely small type overrides --hl-pad-y.
   --------------------------------------------------------------------------- */
.hl-block{position:relative;display:inline-block;color:var(--on-brand-yellow)}
.hl-block::before{
  --ys-cap:0.714em; --ys-asc:0.961em; --ys-desc:0.221em;
  --ys-half:calc((var(--ys-lh,1.074) * 1em - var(--ys-asc) - var(--ys-desc)) / 2);
  --ys-baseline:calc(var(--ys-half) + var(--ys-asc));
  --pad-y:var(--hl-pad-y,0.10em);
  --pad-x:var(--hl-pad-x,0.10em);
  content:"";position:absolute;z-index:-1;
  top:calc(var(--ys-baseline) - var(--ys-cap) - var(--pad-y));
  bottom:calc(var(--ys-lh,1.074) * 1em - var(--ys-baseline) - var(--pad-y));
  left:calc(var(--hl-l,0.05em) - var(--pad-x));
  right:calc(var(--hl-r,0.023em) - var(--pad-x));
  background:var(--brand-yellow)}

/* The header is transparent on every page — content passes underneath it. */
.fig-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--color-background);
  transition:background-color .3s}
.fig-nav-inner{display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:14px 32px}   /* logo left, links right; symmetric pad → shorter bar, content vertically centred */
/* Static header logo — the fly-logo dock target on the homepage (hidden there by
   JS), and the standing brand mark on every inner page. The art is white; invert
   it to foreground-black in light mode, leave it white in dark. */
.fig-nav-logo{flex:none;display:block;line-height:0}
.fig-nav-logo img{height:34px;width:auto;display:block}
/* The wordmark is painted rather than drawn, which is what lets it carry the
   brand yellow on every page — the colour the home opener's lockup arrives
   wearing, so the bar reads the same before and after it docks. 167:51 is the
   file's own ratio. */
.fig-nav-mark{display:block;height:28.9px;width:94.7px;background:var(--brand-yellow,#F8FEA8);
  -webkit-mask:url(/images/logo/yesterday-horizontal-white.svg) no-repeat center/contain;
  mask:url(/images/logo/yesterday-horizontal-white.svg) no-repeat center/contain;
  transition:background-color .3s}
/* Home: the bar carries no wordmark while the reveal is building one. It
   appears when the lockup finishes its flight into the slot — already the
   right colour, so the hand-over is a straight swap between two identical
   marks rather than a colour change. */
.fig-nav-logo.ys-home .fig-nav-mark{opacity:0}
.fig-nav-logo.ys-home.is-docked .fig-nav-mark{opacity:1}
/* the wordmark art is white, and the ground is dark, so it needs no inversion */
.fig-nav-logo img{filter:none}
/* The flying clone is the pixel-build <canvas>; it draws in CSS `color`, so it
   matches the Figma hero wordmark (#494949) and lifts to a light grey in dark
   mode — no filter needed. (.fh-wordmark is the hidden layout anchor.) */
.fly-logo{color:#494949;display:block}
.dark .fly-logo{color:#b6b6b6}
.fig-nav-end{display:flex;align-items:center;gap:24px;flex:none}
.fig-nav-links{display:flex;align-items:center;gap:45.398px;flex:none}
.fig-nav-links a{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;
  font-size:13.805px;line-height:14.917px;letter-spacing:-0.3315px;text-transform:uppercase;
  color:var(--color-foreground);white-space:nowrap;transition:opacity .2s ease}
.fig-nav-links a:hover{opacity:.6}
.fig-nav-links a.current{opacity:.5;pointer-events:none}
.theme-toggle{flex:none;width:20px;height:20px;padding:0;border:0;background:none;
  color:var(--color-foreground);display:flex;align-items:center;justify-content:center;cursor:pointer}

/* Mobile hamburger + dropdown menu — shown < 768px where the inline links hide */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;color:var(--color-foreground)}
.nav-burger span{display:block;width:22px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .3s ease}
.fig-nav.nav-open .nav-burger span:first-child{transform:translateY(3.25px) rotate(45deg)}
.fig-nav.nav-open .nav-burger span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.fig-nav-menu{display:none}

@media (max-width:767.98px){
  .fig-nav-inner{padding:12px 16px}
  .fig-nav-logo img{height:28px}
  .fig-nav-end{gap:16px}
  .fig-nav-links{display:none}
  .nav-burger{display:flex}
  .fig-nav-menu{display:grid;grid-template-rows:0fr;opacity:0;background:var(--color-background);
    transition:grid-template-rows .35s ease,opacity .25s ease}
  .fig-nav.nav-open .fig-nav-menu{grid-template-rows:1fr;opacity:1}
  .fig-nav-menu-inner{overflow:hidden;display:flex;flex-direction:column;padding:2px 16px 18px}
  .fig-nav-menu a{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;
    font-size:26px;line-height:1;letter-spacing:-0.02em;color:var(--color-foreground);
    padding:10px 0;transition:opacity .2s ease}
  .fig-nav-menu a:hover{opacity:.6}
  .fig-nav-menu a.current{opacity:.45;pointer-events:none}
}

/* Flying home logo (mounted by mountFlyingLogo, desktop only). A fixed clone of
   the hero wordmark; JS drives translate+scale from the hero lockup to the docked
   header logo as you scroll. Theme colour comes from the shared invert rule above. */
.fly-logo{position:fixed;top:0;left:0;height:auto;transform-origin:top left;
  z-index:50;pointer-events:none;will-change:transform}

/* ── Mobile (<768px) case-study mosaics ─────────────────────────────────────
   Every tile becomes a full-width row, stacked one under the other, and the
   rhythm is a single 8px gap everywhere: 8px between tiles inside a mosaic and
   8px between two mosaic blocks (4px padding-block on each wrapper).
   Tile height comes from the media's own aspect, which is already exported at
   the Figma frame size — so each tile keeps its designed proportion.          */
@media (max-width:767.98px){
  main .px-4.py-4{padding-top:4px;padding-bottom:4px}
  main .px-4.py-4>.grid{gap:8px!important}
  /* Scoped to the project galleries themselves (.pj-gallery) rather than every
     eight-column grid on the page, so no unrelated grid is caught. The
     !important flags remain only where a Tailwind child utility on the same
     element would otherwise win. */
  .pj-gallery{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    aspect-ratio:auto!important;
    gap:8px!important;
  }
  .pj-gallery>*{
    grid-column:1/-1!important;
    grid-row:auto!important;
    height:auto!important;
  }
  .pj-gallery>*>img,
  .pj-gallery>*>video{
    width:100%!important;
    height:auto!important;
    display:block;
  }
}

/* ── Project gate (password-protected mosaic) ──────────────────────────────
   MOTJ / Pagaya: the hero stays public; the media mosaic below is blurred and
   locked behind a passphrase. The gate lives inside the ScrollSmoother
   transform, where fixed/sticky can't track the viewport, so the lock card is
   placed near the top of the mosaic — right where it scrolls into view. */
.proj-gate{position:relative;overflow:hidden}
.proj-gate__media{
  filter:blur(22px);
  transform:scale(1.05);              /* swallow the soft blurred edges */
  transform-origin:center;
  transition:filter .6s ease, transform .6s ease;
  pointer-events:none;
  user-select:none;
}
.proj-gate__lock{
  position:absolute;inset:0;
  display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(90px,24vh,240px) 20px 40px;
  background:color-mix(in srgb, var(--color-background) 28%, transparent);
  transition:opacity .5s ease, visibility .5s ease;
}
.proj-gate__card{
  width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:12px;
  padding:28px;border-radius:20px;text-align:center;
  background:var(--color-background);
  box-shadow:inset 0 0 0 1px var(--color-border), 0 24px 64px -24px rgba(0,0,0,.4);
}
.proj-gate__title{font-size:1.125rem;font-weight:500;color:var(--color-foreground)}
.proj-gate__sub{font-size:.875rem;color:color-mix(in srgb,var(--color-foreground) 55%,transparent);line-height:1.4}
.proj-gate__row{display:flex;gap:8px;margin-top:6px}
.proj-gate__input{
  flex:1;min-width:0;padding:12px 16px;border-radius:9999px;
  background:transparent;color:var(--color-foreground);font-size:.9375rem;outline:none;
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.proj-gate__input:focus{box-shadow:inset 0 0 0 1.5px var(--color-foreground)}
.proj-gate__btn{
  padding:12px 22px;border-radius:9999px;font-size:.9375rem;font-weight:500;
  background:var(--color-foreground);color:var(--color-background);
  cursor:pointer;white-space:nowrap;transition:opacity .2s ease;
}
.proj-gate__btn:hover{opacity:.82}
.proj-gate__err{font-size:.8125rem;color:#e5484d;min-height:1em;opacity:0;transition:opacity .2s ease}
.proj-gate.is-error .proj-gate__err{opacity:1}
.proj-gate.is-error .proj-gate__card{animation:projGateShake .4s}
@keyframes projGateShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Unlocked: clear the blur, drop the overlay */
.proj-gate.is-unlocked .proj-gate__media{filter:none;transform:none;pointer-events:auto;user-select:auto}
.proj-gate.is-unlocked .proj-gate__lock{opacity:0;visibility:hidden;pointer-events:none}

/* ── Services page — Figma redesign "Making brands feel human again" ─────────
   Ultra-thin large display type set in the site's Neue Montreal variable font.
   The muted tone is the foreground token at ~40%, so it tracks the light/dark
   themes while landing on the Figma grey (#9e9d9b) in the default light theme. */
.svc{
  --svc-muted:color-mix(in srgb, var(--color-foreground) 40%, transparent);
  max-width:1440px;margin:0 auto;
  padding:clamp(96px,15vh,168px) clamp(20px,5vw,60px) clamp(64px,10vh,120px);
}
.svc-hero{
  font-weight:200;letter-spacing:-0.03em;line-height:1.03;
  font-size:clamp(42px,8.3vw,115px);
  max-width:min(92vw,780px);
  margin:0 0 clamp(88px,17vh,175px);color:var(--color-foreground);
}
.svc-hero .svc-muted{color:var(--svc-muted)}
.svc-dot{
  display:inline-block;width:.22em;height:.22em;background:var(--color-foreground);
  margin-left:.14em;vertical-align:baseline;
}
/* Grid mirrors the Figma columns per row: number (119px) │ label (367px box) │
   103px gap │ description (369px). The number/label block is one shared grid
   column (its internal tracks are fixed) so labels align and every description
   lands in the same far-right column — exactly on the Figma grid. */
.svc-list{
  display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:end;
  column-gap:clamp(40px,7.5vw,103px);row-gap:clamp(44px,6.5vh,59px);
}
.svc-numgroup{
  display:grid;
  grid-template-columns:clamp(74px,8.7vw,119px) clamp(150px,26vw,367px);
  align-items:end;
}
.svc-num{
  font-weight:200;letter-spacing:-0.03em;line-height:1;color:var(--svc-muted);
  font-size:clamp(58px,7vw,99px);
}
.svc-label{
  font-weight:500;color:var(--color-foreground);line-height:1.25;white-space:nowrap;
  font-size:clamp(16px,1.4vw,18.66px);padding-bottom:.15em;
}
.svc-desc{
  font-weight:500;color:var(--svc-muted);line-height:1.25;
  font-size:clamp(16px,1.4vw,18.66px);max-width:clamp(280px,27vw,369px);padding-bottom:.15em;
}
/* CTA — the same muted "Let's build something" link used on the home page,
   aligned to the content's left edge so it sits on the grid. */
.svc-cta{
  display:inline-flex;align-items:center;gap:8px;width:fit-content;
  font-weight:500;line-height:1.25;font-size:clamp(16px,1.4vw,18.66px);
  color:var(--svc-muted);transition:color .2s ease;
  margin-top:clamp(88px,15vh,168px);
}
.svc-cta:hover{color:var(--color-foreground)}
.svc-cta svg{width:15px;height:15px;flex:none}
@media (max-width:640px){
  .svc-list{grid-template-columns:1fr;align-items:start;row-gap:clamp(8px,2vh,16px)}
  .svc-numgroup{grid-template-columns:auto auto;justify-content:start;column-gap:14px;margin-top:clamp(24px,5vh,40px)}
  .svc-list>.svc-numgroup:first-child{margin-top:0}
  .svc-desc{max-width:none}
  .svc-cta{margin-top:clamp(56px,10vh,96px)}
}

/* ── Services "Scope" accordion ──────────────────────────────────────────────
   The list-item component from the project pages (Figma "Scope"): a row of
   label + right-aligned index, a hover-in dotted arrow, and a top divider that
   darkens on hover. Here each row is also a click-to-open accordion — the panel
   below reveals the category's copy (the site's 0fr→1fr grid-rows technique, one
   open at a time). The open row wears the component's own active look, so an
   expanded item reads exactly like a hovered/selected one.
   --scope-arrow is the width the first grid track opens to (holds the 24px icon). */
.svc-scope{--scope-arrow:32px}   /* first grid track opens to this (holds the 24px icon) — matches the component's hover:grid-cols-[32px_…] */
.svc-scope-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.svc-scope-item{border-top:1px solid color-mix(in srgb,var(--color-foreground) 8%,transparent);
  transition:border-color .3s ease-in-out}
.svc-scope-item:last-child{border-bottom:1px solid color-mix(in srgb,var(--color-foreground) 8%,transparent)}
.svc-scope-item.is-open{border-color:var(--color-foreground)}

.svc-scope-row{
  width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  display:grid;grid-template-columns:0px minmax(0,1fr) auto;align-items:center;
  padding:.5em 0;color:color-mix(in srgb,var(--color-foreground) 90%,transparent);
  font-weight:500;line-height:1.2;font-size:clamp(20px,1.7vw,24px);   /* text-xl → lg:text-2xl */
  transition:grid-template-columns .3s ease-in-out;
}
.svc-scope-item.is-open .svc-scope-row{grid-template-columns:var(--scope-arrow) minmax(0,1fr) auto}

/* dotted-arrow icon: fixed 24px (the component's size-6), hidden + nudged left,
   slides in and darkens on hover/open */
.svc-scope-arrow{position:relative;display:block;width:1.5rem;height:1.5rem;
  color:color-mix(in srgb,var(--color-foreground) 40%,transparent);
  opacity:0;visibility:hidden;transform:translateX(-1.5rem);
  transition:opacity .3s ease-in-out,transform .3s ease-in-out,color .3s ease-in-out}
.svc-scope-arrow svg{display:block;width:100%;height:100%}
.svc-scope-item.is-open .svc-scope-arrow{
  opacity:1;visibility:visible;transform:translateX(0);color:var(--color-foreground)}

.svc-scope-name{min-width:0}
.svc-scope-num{color:color-mix(in srgb,var(--color-foreground) 40%,transparent);
  padding-left:1em;transition:color .3s ease-in-out}
.svc-scope-item.is-open .svc-scope-num{color:var(--color-foreground)}

/* hover previews of the open look — pointer devices only, so a touch tap does
   not leave a phantom arrow behind after the row is closed */
@media (hover:hover){
  .svc-scope-item:hover{border-color:var(--color-foreground)}
  .svc-scope-row:hover{grid-template-columns:var(--scope-arrow) minmax(0,1fr) auto}
  .svc-scope-row:hover .svc-scope-arrow{
    opacity:1;visibility:visible;transform:translateX(0);color:var(--color-foreground)}
  .svc-scope-row:hover .svc-scope-num{color:var(--color-foreground)}
}

/* collapsible panel — 0fr→1fr grid-rows, matching the site's FAQ accordion */
.svc-scope-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease-out}
.svc-scope-panel-inner{overflow:hidden}
.svc-scope-text{margin:0;color:var(--svc-muted);font-weight:500;line-height:1.4;
  font-size:clamp(15px,1.25vw,17px);max-width:min(60ch,560px);
  padding:.1em 0 1.15em var(--scope-arrow);   /* left-aligned under the label's open position */
  opacity:0;transform:translateY(4px);transition:opacity .3s ease-out .05s,transform .3s ease-out .05s}
.svc-scope-item.is-open .svc-scope-text{opacity:1;transform:none}

/* ── Site footer ─────────────────────────────────────────────────────────────
   NOMA-style footer: three columns (big nav links │ about + socials │ location +
   legal) over the brand wordmark, which fills the content width flush to the
   bottom edge. Injected by mountFooter() into every page's empty
   <footer id="site-footer">. Theme-aware via the design tokens; the wordmark is
   the real logo (yesterday-wordmark.svg) painted through a CSS mask, so it's the
   requested #EFEFEF in light and a matching low-contrast grey in dark. */
.site-footer{background:var(--color-background);color:var(--color-foreground);
  overflow:hidden;margin-top:clamp(64px,10vh,120px);
  font-family:'PP Neue Montreal','Neue Montreal',ui-sans-serif,system-ui,sans-serif}
.ft-inner{padding:clamp(56px,7vw,104px) clamp(20px,5vw,60px) 0}

.ft-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(28px,4vw,64px);
  align-items:start;margin-bottom:clamp(44px,7vw,104px)}
.ft-label{display:block;font-size:13.5px;font-weight:600;letter-spacing:-0.005em;
  color:var(--color-foreground);margin:0 0 1.35em}
.ft-navlinks{display:flex;flex-direction:column}
.ft-navlinks a{font-weight:600;line-height:1.12;letter-spacing:-0.015em;
  color:var(--color-foreground);font-size:clamp(30px,3.3vw,46px);
  transition:opacity .2s ease;width:fit-content}
.ft-navlinks a:hover{opacity:.5}
.ft-block+.ft-block{margin-top:clamp(28px,3vw,44px)}
.ft-text{font-size:14px;line-height:1.5;font-weight:400;margin:0;max-width:34ch;
  color:color-mix(in srgb,var(--color-foreground) 68%,transparent)}
.ft-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4em}
.ft-links a{font-size:14px;transition:opacity .2s ease;
  color:color-mix(in srgb,var(--color-foreground) 68%,transparent)}
.ft-links a:hover{opacity:.5}
.ft-copy{margin-top:1.7em}
.ft-credit{margin-top:1.7em}

/* the brand logo, filling the width, painted with a CSS mask so it stays a flat
   a soft tint of the page's ink, regardless of the SVG's own colour.
   Cropped: the mask keeps its natural proportions (100% width, auto height) and
   sits at the top, while the box is only ~62% of the wordmark's height — so the
   bottom of the letters bleeds off the footer's bottom edge, as requested. */
.ft-wordmark-wrap{line-height:0;overflow:hidden}
.ft-logo{display:block;width:100%;aspect-ratio:515.292 / 92;
  /* a soft tint of the ink on whatever ground the page has, so the wordmark
     reads at the same weight on the dark ground as it did on the light one */
  background-color:color-mix(in srgb,var(--color-foreground) 14%,transparent);
  -webkit-mask:url("/images/logo/yesterday-wordmark.svg?v=2") no-repeat left top / 100% auto;
          mask:url("/images/logo/yesterday-wordmark.svg?v=2") no-repeat left top / 100% auto}
.dark .ft-logo{background-color:color-mix(in srgb,var(--color-foreground) 14%,transparent)}

@media (max-width:900px){
  .ft-cols{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px);row-gap:clamp(32px,6vw,48px)}
  .ft-nav{grid-column:1 / -1}
}
@media (max-width:600px){
  /* stay two-up (nav full-width, then about | location side by side) so the
     footer doesn't grow into one very long stacked column */
  .ft-cols{gap:16px;row-gap:clamp(28px,7vw,40px)}
  .ft-navlinks a{font-size:clamp(26px,7.5vw,38px)}
  .ft-text{max-width:none}
  .ft-inner{padding-top:clamp(40px,10vw,64px)}
}

/* ── Square corners, site-wide ───────────────────────────────────────────────
   Strip every rounded corner across the whole site — Tailwind rounded-* classes,
   inline styles and component CSS alike. Genuine round dots (the custom cursor,
   the blog filter dot) keep their shape: a circle has no corners to square. */
*,::before,::after{border-radius:0 !important}
.filter-dot,.cursor-none>.mix-blend-difference>div{border-radius:9999px !important}

/* ── Contact page ────────────────────────────────────────────────────────────
   Editorial layout from the reference: an oversized "Contact us" pinned top-left,
   and a right-hand block (intro → divider → general enquiries | social) centred
   against it. Neue Montreal, theme-token colours, on the site's gutter grid. */
.contact{position:relative;min-height:100svh;
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,80px);
  padding:clamp(120px,16vh,200px) clamp(20px,5vw,60px) clamp(84px,12vh,128px);
  color:var(--color-foreground);background:var(--color-background)}
/* Set like the services headings — same face, same weight, same tight leading
   and tracking, same brand yellow — so the two pages read as one voice. */
.contact-title{grid-column:1;align-self:start;margin:0;
  letter-spacing:-0.015em;line-height:.85;font-size:clamp(58px,9.6vw,132px);
  color:var(--brand-yellow,#F8FEA8)}
.contact-body{grid-column:2;align-self:center;width:100%;max-width:clamp(300px,33vw,440px)}
.contact-intro{margin:0 0 clamp(30px,4.5vh,52px);font-weight:400;
  font-size:clamp(18px,1.55vw,23px);line-height:1.38}
.contact-divider{border:0;border-top:1px solid color-mix(in srgb,var(--color-foreground) 16%,transparent);
  margin:0 0 clamp(24px,3.2vh,38px)}
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.contact-label{display:block;margin:0 0 1.6em;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
.contact-name{margin:0;font-size:14px;font-weight:400;line-height:1.4}
.contact-role{margin:.25em 0 1.6em;font-size:14px;font-weight:400;line-height:1.4;
  color:color-mix(in srgb,var(--color-foreground) 60%,transparent)}
.contact-field{margin-bottom:1.2em;display:flex;flex-direction:column;gap:.2em}
.contact-k{font-size:14px;color:color-mix(in srgb,var(--color-foreground) 60%,transparent)}
.contact-v{font-size:14px;color:var(--color-foreground);text-decoration:none;transition:opacity .2s ease}
a.contact-v:hover{opacity:.6}
.contact-social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65em}
.contact-social a{font-size:14px;color:var(--color-foreground);text-decoration:none;transition:opacity .2s ease}
.contact-social a:hover{opacity:.6}
.contact-copy{position:absolute;left:clamp(20px,5vw,60px);bottom:clamp(30px,4vh,52px);margin:0;
  font-size:12px;color:color-mix(in srgb,var(--color-foreground) 55%,transparent)}
@media (max-width:768px){
  .contact{grid-template-columns:1fr;
    padding:clamp(104px,15vh,150px) clamp(20px,6vw,32px) clamp(100px,15vh,140px)}
  .contact-title{margin-bottom:clamp(48px,10vh,88px)}
  .contact-body{grid-column:1;align-self:start;max-width:none}
  .contact-copy{left:clamp(20px,6vw,32px)}
}