/* =========================================================================
   ADWORKS — shared visual system  ·  "Elite Editorial"
   One stylesheet powers BOTH sites (adworks.ca / adworksglobal.com).
   Type: Fraunces (display) + Archivo (UI/body)
   Service-coded palette: Branding = teal · Digital = blue · Marketing = purple
   Colors read from the vector brand source, not invented.
   ---------------------------------------------------------------------------
   HOW THIS FILE IS ORGANISED (search the banner text to jump):
     Tokens (:root vars) · HEADER/NAV · HERO · MARQUEE · SECTION HEADERS ·
     SERVICES · APPROACH · WORK (.case cards) · AUTHORITY (legacy base for
     LEADERSHIP) · LOCATIONS · CONTACT/CTA · FOOTER · REVEAL animation ·
     CANADA HERO (split variant, .site-canada only) · LEADERSHIP (.person
     blocks, used by #team) · RESPONSIVE NAV.
   Site-specific styling is scoped with `.site-canada …` / `.site-global …`.
   Change a token or a shared rule here → BOTH sites update.
   Full editing guide: ../README.md
   ========================================================================= */

/* ----- Fonts ----------------------------------------------------------
   Fraunces + Archivo are loaded with <link rel="preconnect"> + <link rel=
   "stylesheet"> in the <head> of every page, NOT with @import here.
   @import made the browser wait for this stylesheet to arrive before it even
   discovered the font CSS, which delayed first paint on every page. If you add
   a new page, copy the three font <link> tags from canada/index.html.
   -------------------------------------------------------------------- */

/* ----- Tokens ---------------------------------------------------------- */
:root{
  /* Brand (confirmed from SVG source) */
  --teal:#00bbaf;   /* Branding  */
  --teal-deep:#00776f; /* same hue, dark enough to carry white type */
  --blue:#00aeef;   /* Digital   */
  --purple:#9e63b9; /* Marketing */
  --purple-hi:#bab3d2;

  /* Ink & paper */
  --ink:#1c1a1b;
  --ink-2:#333132;   /* brand dark grey */
  --outline:#231f20; /* brand near-black */
  --paper:#ffffff;
  --paper-2:#f5f4f1; /* warm off-white */
  --paper-3:#ecebe6;
  --line:#e2e1dc;
  --mute:#6b6a67;
  --mute-2:#9a9995;
  --light:#e6e7e8;   /* brand light grey */

  /* Type */
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --maxw:1280px;
  --gutter:clamp(1.25rem,4vw,4rem);
  --radius:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ----- Reset-ish ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(15px,.4vw + 14px,17px);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.015em}
p{margin:0}
::selection{background:var(--teal);color:#fff}

/* ----- Layout helpers -------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(4.5rem,9vw,9rem)}
.eyebrow{
  font-family:var(--ui);font-weight:700;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;align-items:center;gap:.7em;
}
/* No leading rule before small headlines: the client asked for the dash to go
   (see "House style: no dashes" in ../../branding.md). */

/* Accent color hooks per service */
.t-teal{color:var(--teal)} .t-blue{color:var(--blue)} .t-purple{color:var(--purple)}

/* ======================================================================
   HEADER / NAV
   ====================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-block:.75rem;
}
.brand{display:flex;align-items:center;gap:.7rem;z-index:2}
.brand .mark{width:34px;height:34px}
.brand .word{height:22.8px;width:auto;transition:opacity .3s} /* logotype 20% larger than icon; AD icon (.mark) unchanged */
.brand .word.on-dark{position:absolute;opacity:1}
.brand .word.on-light{opacity:0}
.scrolled .brand .word.on-dark{opacity:0}
.scrolled .brand .word.on-light{opacity:1}
/* Locale marker beside the wordmark. Set as bare "/ CANADA" or "/ GLOBAL":
   the client asked for the outlined pill to go, so no border, radius or
   padding here. The slash lives in the markup, not a ::before, so the label
   reads correctly to a screen reader and is obvious when editing. */
.brand .locale{
  font-family:var(--ui);font-weight:700;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);
  margin-left:.15rem; /* was .5rem; pulled closer to the wordmark, 2026-09-21 */
}

.nav{display:flex;align-items:center;gap:2.2rem}
.nav a{
  font-family:var(--ui);font-weight:500;font-size:.85rem;letter-spacing:.02em;
  color:#fff;opacity:.85;transition:opacity .25s;position:relative;
}
.scrolled .nav a:not(.btn){color:var(--ink)}
.nav a:hover{opacity:1}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--teal);transition:right .3s var(--ease)}
.nav a:not(.btn):hover::after{right:0}
.nav .btn{margin-left:.4rem}

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--ui);font-weight:600;font-size:.85rem;letter-spacing:.01em;
  padding:.72em 1.3em;border-radius:12px;border:1px solid transparent;
  background:var(--teal);color:#fff;cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--teal)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn.ghost{background:transparent;border-color:currentColor;color:#fff}
.scrolled .nav .btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{box-shadow:0 12px 28px -14px var(--ink)}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;z-index:2}
.nav-toggle span{display:block;width:26px;height:2px;background:#fff;margin:5px 0;transition:.3s var(--ease)}
.scrolled .nav-toggle span{background:var(--ink)}

/* ======================================================================
   HERO
   ====================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;
  background:radial-gradient(120% 120% at 78% 8%,#2a2f33 0%,var(--outline) 55%,#141414 100%);
}
.hero__grid{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line-c,rgba(255,255,255,.06)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-c,rgba(255,255,255,.06)) 1px,transparent 1px);
  background-size:clamp(48px,7vw,86px) clamp(48px,7vw,86px);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(80% 80% at 50% 40%,#000 30%,transparent 100%);
}
/* Glowing service-coded orbs drifting behind the type */
.hero__orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none;will-change:transform}
.hero__orb.a{width:44vw;height:44vw;background:var(--teal);top:-8%;right:-6%}
.hero__orb.b{width:30vw;height:30vw;background:var(--purple);bottom:-12%;left:6%;opacity:.42}
.hero__orb.c{width:24vw;height:24vw;background:var(--blue);top:22%;left:34%;opacity:.3}

.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,7vh,6rem);padding-top:8rem}
.hero__kicker{
  font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.72);display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:2rem;
}
.hero__kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--teal)}
.hero h1{
  font-size:clamp(2.9rem,9.2vw,8.4rem);font-weight:500;letter-spacing:-.03em;line-height:.92;
}
.hero h1 .ital{font-style:italic;font-weight:400}
.hero h1 .tint{
  background:linear-gradient(100deg,var(--teal),var(--blue) 60%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{
  margin-top:1.8rem;max-width:46ch;font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:rgba(255,255,255,.8);font-weight:300;line-height:1.55;
}
.hero__cta{margin-top:2.6rem;display:flex;gap:1rem;flex-wrap:wrap}
/* .hero__meta is the hero stat row (a number + a caption, with a hairline rule
   above it). Both sites dropped it on 2026-09-10 at the client's request, so
   these rules are currently UNUSED. Kept because restoring the row is then just
   pasting the markup back. The hairline "line above" the stats is the
   border-top here, not a separate element. */
.hero__meta{
  margin-top:3.4rem;display:flex;gap:2.6rem;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.6rem;max-width:640px;
}
.hero__meta .n{font-family:var(--display);font-size:2rem;font-weight:500;display:block;line-height:1}
.hero__meta .l{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.5rem;display:block}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:2rem;z-index:2;
  writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.6);display:flex;align-items:center;gap:1rem;
}
.hero__scroll::after{content:"";width:1px;height:52px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ======================================================================
   MARQUEE  (client / brand strip)
   ====================================================================== */
.marquee{background:var(--ink);color:#fff;padding-block:1.5rem;overflow:hidden;border-block:1px solid rgba(255,255,255,.08)}
.marquee__label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute-2);text-align:center;margin-bottom:1.1rem}
.marquee__track{display:flex;gap:3.4rem;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2.1rem);font-weight:500;
  color:rgba(255,255,255,.42);white-space:nowrap;letter-spacing:-.01em;transition:color .3s;
}
.marquee__track span:hover{color:#fff}
.marquee__track .sep{color:var(--teal);font-size:1rem;align-self:center}
@keyframes slide{to{transform:translateX(-50%)}}

/* ======================================================================
   SECTION HEADERS (editorial)
   ====================================================================== */
.shead{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.shead h2{font-size:clamp(2.1rem,5vw,4rem);font-weight:400;max-width:16ch}
.shead h2 .ital{font-style:italic}
.shead p{max-width:52ch;color:var(--mute);font-size:1.05rem}
@media(min-width:860px){
  .shead{grid-template-columns:1.1fr .9fr;align-items:end;gap:2.5rem}
  .shead.stack{grid-template-columns:1fr}
}

/* ======================================================================
   SERVICES  (three color-coded pillars)
   ====================================================================== */
.services{background:var(--paper-2)}
/* the two-sentence head needs a little more room per line than the 16ch default,
   otherwise "AI." is left stranded on a line of its own */
.services .shead h2{max-width:28ch;font-size:clamp(2rem,3.9vw,3.05rem)}
.pillars{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:760px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:0;
  padding:2.2rem 1.9rem 2.4rem;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.pillar::after{content:"";position:absolute;right:-40%;top:-40%;width:70%;aspect-ratio:1;border-radius:50%;
  background:var(--c);opacity:.08;transition:transform .55s var(--ease),opacity .55s}
.pillar:hover{transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(0,0,0,.35);border-color:transparent}
.pillar:hover::after{transform:scale(1.5);opacity:.14}
.pillar__icon{width:56px;height:56px;margin-bottom:1.5rem;position:relative;z-index:1}
.pillar__no{position:absolute;top:1.6rem;right:1.7rem;font-family:var(--display);font-size:1rem;color:var(--mute-2)}
.pillar h3{font-size:1.7rem;font-weight:500;margin-bottom:.7rem;position:relative;z-index:1;line-height:1.1}
.pillar__era{
  display:block;margin-top:.28rem;font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.92rem;letter-spacing:.005em;color:var(--c);
}
.pillar li code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.94em;color:var(--c);font-weight:600;
}
.bk__lead code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:var(--paper-3);border:1px solid var(--line);
  border-radius:5px;padding:.08em .4em;color:var(--ink);
}
.pillar p{color:var(--mute);position:relative;z-index:1;font-size:.97rem}
.pillar ul{list-style:none;padding:0;margin:1.4rem 0 0;position:relative;z-index:1}
.pillar li{font-size:.88rem;color:var(--ink-2);padding:.5rem 0;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:.6em;line-height:1.45}
.pillar li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);flex:none;margin-top:.55em}
.pillar.branding{--c:var(--teal)} .pillar.marketing{--c:var(--purple)} .pillar.digital{--c:var(--blue)}

/* ======================================================================
   BRAND KIT  (the brand.md handover — the promoted differentiator)
   Sits between SERVICES (warm off-white) and APPROACH (dark), so it runs on
   white: paper-2 -> paper -> ink. Two-column top (pitch + a sample of the
   file itself, rendered as a dark code card), then the pros as a 4-up grid.
   ====================================================================== */
.brandkit{background:var(--paper);position:relative;overflow:hidden}

.bk__top{display:grid;gap:clamp(2rem,4vw,3.4rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.bk__top{grid-template-columns:1.08fr .92fr}}

.bk__intro h2{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:400;line-height:1.03;margin-top:1.1rem;max-width:17ch}
.bk__intro h2 .ital{font-style:italic}
.bk__lead{margin-top:1.4rem;color:var(--mute);font-size:1.05rem;line-height:1.62;max-width:54ch}
.bk__note{
  margin-top:1.2rem;padding-left:1rem;border-left:2px solid var(--teal);
  color:var(--ink-2);font-size:.95rem;max-width:50ch;
}

/* ---- the sample file, as a code card ---- */
.bk__file{
  margin:0;border-radius:var(--radius);overflow:hidden;background:var(--outline);
  box-shadow:0 34px 64px -38px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.08);
}
.bk__file-bar{
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem;background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.09);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.72);
}
.bk__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none}
.bk__code{
  margin:0;padding:1.3rem 1.1rem 1.5rem;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.75;color:rgba(255,255,255,.72);white-space:pre;
}
.bk__code .h{color:#fff;font-weight:600}
.bk__code .v{color:rgba(255,255,255,.95)}

/* ---- the pros ---- */
.bk__pros{
  list-style:none;padding:0;margin:clamp(2.4rem,5vw,3.6rem) 0 0;
  display:grid;gap:0 clamp(1.4rem,2.6vw,2.4rem);grid-template-columns:1fr;
}
@media(min-width:620px){.bk__pros{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.bk__pros{grid-template-columns:repeat(4,1fr)}}
/* Three-up variant, for the reduced bullet set. Additive and keyed to a class
   only adworks.ca carries, so adworksglobal.com is unaffected by it. */
@media(min-width:1040px){.bk__pros--three{grid-template-columns:repeat(3,1fr)}}
.bk__pros li{padding:1.15rem 0;border-top:1px solid var(--line)}
.bk__pros b{
  display:block;position:relative;padding-left:1.15em;
  font-weight:600;font-size:.97rem;margin-bottom:.35rem;color:var(--ink);
}
.bk__pros b::before{content:"+";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.bk__pros b em{font-style:italic}
.bk__pros span{display:block;color:var(--mute);font-size:.89rem;line-height:1.55}

.bk__kicker{
  margin-top:clamp(1.6rem,3vw,2.4rem);padding-top:1.3rem;border-top:1px solid var(--ink);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.7rem 1.6rem;
  font-size:1.02rem;color:var(--ink-2);
}
.bk__kicker span{max-width:66ch}
.bk__kicker em{font-style:italic;color:var(--ink)}
.bk__kicker a{color:var(--ink);border-bottom:1px solid var(--teal);white-space:nowrap;font-weight:600}
.bk__kicker a .arw{display:inline-block;transition:transform .3s var(--ease)}
.bk__kicker a:hover .arw{transform:translate(3px,-3px)}

/* ======================================================================
   APPROACH  (the engagement as a pinned, side-scrolling timeline)

   Same pinned horizontal mechanism used elsewhere: .ap-stage pins for the
   height of the section and adworks.js maps the vertical scroll distance 1:1
   onto the track's horizontal travel. NOTE: `overflow` lives on .ap-stage and
   never on .approach, because an overflow on the sticky element's containing
   block kills the pin.

   The rail is one absolutely positioned line across the whole track, with a
   dot per phase sitting on it, so it reads as a continuous timeline rather
   than a stack of slides.
   ====================================================================== */
.approach{
  background:var(--ink);color:#fff;position:relative;padding-block:0;
  --railY:clamp(240px,40svh,360px);
}

.ap-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.ap-track{display:flex;height:100%;position:relative;will-change:transform;transform:translate3d(0,0,0)}

/* the continuous rail, drawn once across the whole track */
.ap-rail{position:absolute;left:0;right:0;top:var(--railY);height:1px;background:rgba(255,255,255,.16)}
/* the line draws itself in as the timeline travels; width is set by adworks.js */
.ap-rail i{
  position:absolute;left:0;top:-1px;height:3px;width:0;display:block;
  background:linear-gradient(90deg,rgba(0,187,175,.5),var(--teal));
  box-shadow:0 0 14px rgba(0,187,175,.45);border-radius:2px;
}

.ap-panel{
  flex:0 0 auto;position:relative;z-index:2;
  width:var(--w,min(34vw,430px));
  padding-inline:clamp(1.5rem,2.6vw,3.1rem);
  display:grid;grid-template-rows:var(--railY) 1fr;align-content:start;
}
.ap-panel + .ap-panel{border-left:1px solid rgba(255,255,255,.09)}

/* ---- opening panel: the section head ---- */
/* the head panel is not on the timeline, so it opts out of the rail grid */
.ap-panel--open{
  width:var(--w,min(46vw,620px));
  display:flex;flex-direction:column;justify-content:center;
  padding-left:var(--gutter);padding-top:5rem;
}
.approach .eyebrow{color:var(--mute-2)}
.ap-title{font-size:clamp(2.2rem,4.6vw,3.9rem);font-weight:400;line-height:1.02;margin-top:1.1rem;max-width:13ch}
.ap-title .ital{font-style:italic}
/* "brand" runs through the service palette as the timeline is scrolled.
   adworks.js publishes progress on .approach as --apP (0 to 1) and the only
   thing moving here is the gradient's background-position, so this stays a
   CSS effect rather than a per-frame repaint of the text itself.
   The gradient is symmetrical (teal, blue, purple, blue, teal) so the word
   arrives back on brand teal at the end rather than stopping mid-blend. */
.ap-title .tint--scroll{
  background:linear-gradient(100deg,
    var(--teal) 0%, var(--blue) 25%, var(--purple) 50%, var(--blue) 75%, var(--teal) 100%);
  background-size:300% 100%;
  background-position:calc(var(--apP,0) * -200%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(prefers-reduced-motion:reduce){
  /* no pin, so no progress to follow: hold the standard .tint blend */
  .ap-title .tint--scroll{background-size:100% 100%;background-position:0 0}
}
.ap-lead{margin-top:1.5rem;color:rgba(255,255,255,.66);font-size:1.02rem;line-height:1.62;max-width:46ch}
.ap-swipe{
  display:flex;align-items:center;gap:.9rem;margin-top:clamp(1.8rem,4vh,2.8rem);
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.ap-swipe i{display:block;width:clamp(44px,6vw,92px);height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.ap-swipe i::after{content:"";position:absolute;inset:0 auto 0 0;width:36%;background:var(--teal);animation:apSwipe 2.6s var(--ease) infinite}
@keyframes apSwipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(320%)}}

/* ---- a phase on the timeline ---- */
.ph__head{
  align-self:end;padding-bottom:1.15rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem;
}
.ph__icon{display:block;color:rgba(255,255,255,.42);transition:color .5s var(--ease),transform .5s var(--ease)}
.ph__icon svg{display:block;height:80px;width:auto}
.ph__icon .ac{color:rgba(255,255,255,.42);transition:color .5s var(--ease)}
.ph.on .ph__icon{color:rgba(255,255,255,.9);transform:translateY(-2px)}
.ph.on .ph__icon .ac{color:var(--teal)}
.ph__wk{
  font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.5);transition:color .4s var(--ease);
}
.ph.on .ph__wk{color:var(--teal)}
/* the dot, sitting on the rail */
.ph::after{
  content:"";position:absolute;top:var(--railY);left:clamp(1.5rem,2.6vw,3.1rem);
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.32);
  transform:translate(-1px,-50%);z-index:3;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.ph.on::after{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 6px rgba(0,187,175,.16)}
.ph__body{padding-top:1.9rem}
.ph__no{
  display:block;font-family:var(--display);font-size:.95rem;color:var(--mute-2);
  letter-spacing:.06em;margin-bottom:.7rem;
}
.ph__t{font-size:clamp(1.5rem,2.1vw,2.05rem);font-weight:500;line-height:1.08;margin-bottom:.85rem;max-width:14ch}
.ph__p{color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.6;max-width:40ch}
.ph__p b{color:#fff;font-weight:600}

/* ---- Week 1: three steps stacked in one panel ----
   The client asked for the first three phases to share a week. They keep their
   original titles and copy, so the panel is wider and the step titles step
   down a size to buy the vertical room. .ph__t is scoped per context below. */
.ph--stack{width:var(--w,min(46vw,620px))}
.ph--stack .ph__steps{display:flex;flex-direction:column;gap:clamp(1rem,2.2vh,1.6rem)}
.ph--stack .ph__step{position:relative;padding-left:1.1rem}
.ph--stack .ph__step::before{
  content:"";position:absolute;left:0;top:.42em;width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.28);transition:background .4s var(--ease);
}
.ph--stack.on .ph__step::before{background:var(--teal)}
.ph--stack .ph__t{font-size:clamp(1.05rem,1.35vw,1.3rem);margin-bottom:.4rem;max-width:22ch}
/* A wider measure than the other phases on purpose: it is the cheapest way to
   buy vertical room, since fewer wrapped lines beats smaller type. */
.ph--stack .ph__p{font-size:.87rem;line-height:1.55;max-width:58ch}
/* Short viewports: three blocks of copy stop fitting under the rail, and the
   stage clips rather than scrolls. Step the type down rather than lose a line. */
@media(max-height:780px){
  .ph--stack .ph__t{font-size:1rem}
  .ph--stack .ph__p{font-size:.81rem;line-height:1.46}
  .ph--stack .ph__steps{gap:.85rem}
}
@media(max-height:660px){
  .ph--stack .ph__t{font-size:.94rem}
  .ph--stack .ph__p{font-size:.77rem;line-height:1.4}
  .ph--stack .ph__steps{gap:.65rem}
  .ph--stack .ph__step{padding-left:.9rem}
}

/* ---- the presentation beat, between weeks 5 and 6 ----
   Not a week of its own, so it carries no number. Its single rail dot is
   replaced by a run of candidate dots: the date is picked from several, and
   they light one by one as the timeline crosses them. */
.ph--present{width:var(--w,min(30vw,390px))}
.ph--present::after{display:none}
.ph--present .ph__wk{color:rgba(255,255,255,.38);font-style:normal}
.ph--present.on .ph__wk{color:rgba(255,255,255,.7)}
/* Boxed, so it reads as a beat between the weeks rather than one of them. */
.ph--present .ph__body{
  /* hug the copy: the body sits in the panel's 1fr row, which would otherwise
     stretch the box down the whole column and leave it mostly empty */
  align-self:start;
  margin-top:1.1rem;padding:1.3rem 1.35rem;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.ph--present.on .ph__body{border-color:rgba(0,187,175,.42);background:rgba(0,187,175,.07)}
.ph--present .ph__t{font-size:clamp(1.3rem,1.8vw,1.7rem);margin-bottom:.6rem}
.ph--present .ph__p{font-size:.88rem;line-height:1.55;max-width:36ch}
.ap-present__dots{
  position:absolute;top:var(--railY);left:clamp(1.5rem,2.6vw,3.1rem);
  right:clamp(1.5rem,2.6vw,3.1rem);height:0;z-index:3;
  display:flex;justify-content:space-between;align-items:center;
}
.ap-dot{
  display:block;width:9px;height:9px;border-radius:50%;
  background:var(--ink);border:2px solid rgba(255,255,255,.28);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.ap-dot.on{background:var(--teal);border-color:var(--teal);transform:scale(1.1)}
/* the chosen date: the middle dot settles larger once it is reached */
.ap-dot:nth-child(3){width:13px;height:13px}
.ap-dot:nth-child(3).on{box-shadow:0 0 0 6px rgba(0,187,175,.16)}

/* ---- the delivery panel carries more, so it is wider and flagged ---- */
.ph--final{width:var(--w,min(50vw,660px))}
.ph--final::after{width:15px;height:15px}
.ph--final.on::after{box-shadow:0 0 0 8px rgba(0,187,175,.2)}
.ph--final .ph__t{color:#fff;max-width:18ch}
.ph--final .ph__p{max-width:52ch}
.ph__ships{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem}
.ph__ships li{
  font-size:.74rem;letter-spacing:.05em;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.4em .85em;
}
.ph__ships li.key{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:600;color:#fff;border-color:var(--teal);background:rgba(0,187,175,.18);
}

/* ---- DELIVERABLES: an 80svh panel at the end of the track ----
   Off the rail on purpose (no .ph class, so adworks.js gives it no node and
   the timeline finishes on week 8). Two groups: what every branding
   engagement ships, and what is scoped per project. brand.md is flagged as the
   one that is ours, and links back up to the Brand Kit section. */
.ap-deliver{
  width:var(--w,min(74vw,980px));
  display:flex;align-items:center;
  padding-block:clamp(1.5rem,4vh,3rem);
}
/* .ap-box is the shared treatment for the closing panels: deliverables, then
   the creative director. The rail runs on past the last week and arrives at
   each in turn, and the box takes the rail's own colour and weight when it
   does. The ring is 2px inset over the 1px border, which reads as the 3px rail
   fill without thickening the border, so nothing shifts as the scroll lands.
   adworks.js measures every .ap-box and ends the rail on the last one. */
.ap-box{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.ap-box.on{
  border-color:var(--teal);
  box-shadow:inset 0 0 0 2px var(--teal), 0 0 30px rgba(0,187,175,.26);
}
.dl.on,.dir.on{background:linear-gradient(180deg,rgba(0,187,175,.10),rgba(255,255,255,.02))}
.dl{
  width:100%;height:80svh;max-height:80svh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:clamp(1.5rem,3.2vh,2.6rem) clamp(1.4rem,2.4vw,2.4rem);
  display:flex;flex-direction:column;gap:clamp(1.2rem,2.6vh,2rem);
}
/* The deliverables eyebrow is the one that names the payoff, so it carries the
   brand accent rather than the muted grey the other in-section eyebrows use. */
.dl__head .eyebrow{
  color:var(--teal);
  background:rgba(0,187,175,.12);border:1px solid rgba(0,187,175,.35);
  border-radius:999px;padding:.42em .95em;
}
.dl__title{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.6rem);font-weight:400;line-height:1.04;margin:.9rem 0 0}
.dl__lead{margin-top:.8rem;color:rgba(255,255,255,.6);font-size:.92rem;line-height:1.6;max-width:70ch}
.dl__groups{display:grid;gap:clamp(1.2rem,2.4vw,2.2rem);grid-template-columns:1fr}
@media(min-width:760px){.dl__groups{grid-template-columns:1fr 1fr}}
.dl__gt{
  font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-2);margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.12);
}
.dl__grid{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.dl__item{display:flex;align-items:flex-start;gap:.85rem}
.dl__icon{flex:0 0 auto;display:block;color:rgba(255,255,255,.5)}
.dl__icon svg{display:block;width:30px;height:30px}
.dl__icon .ac{color:var(--teal)}
.dl__text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.dl__text b{font-size:.9rem;font-weight:600;color:#fff;letter-spacing:.005em}
.dl__text em{font-style:normal;font-size:.79rem;line-height:1.45;color:rgba(255,255,255,.52)}
.dl__item--key{
  border:1px solid rgba(0,187,175,.45);background:rgba(0,187,175,.12);
  border-radius:10px;padding:.7rem .8rem;margin-block:.2rem;
}
.dl__item--key .dl__icon{color:#fff}
.dl__item--key .dl__text b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dl__item--key .dl__text em{color:rgba(255,255,255,.72)}
.dl__note{margin:1rem 0 0;font-size:.82rem}
.dl__note a{
  color:#fff;font-weight:600;border-bottom:1px solid var(--teal);padding-bottom:2px;
  display:inline-flex;align-items:center;gap:.4em;
}
.dl__note a .arw{transition:transform .3s var(--ease)}
.dl__note a:hover .arw{transform:translate(3px,-3px)}

/* ---- CREATIVE DIRECTOR: the closing panel ----
   Moved out of its own full-width section so it reads as the end of the
   timeline. Wide, with side space, and the same .ap-box outline treatment as
   deliverables. Portrait column, argument column, then the figures. */
.ap-director{
  width:var(--w,min(88vw,1180px));
  display:flex;align-items:center;
  padding-block:clamp(1.5rem,4vh,3rem);
}
.dir{
  /* Not a fixed 80svh like deliverables. This panel carries the argument plus
     five sourced figures, which is more than 80svh holds at most window sizes,
     so it takes the height it needs up to whatever the pinned stage can give.
     It still scrolls internally on genuinely short windows and on phones,
     which is the same behaviour the deliverables box has there. */
  width:100%;height:auto;max-height:calc(100svh - 4.5rem);overflow-y:auto;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  padding:clamp(1.4rem,3vh,2.4rem) clamp(1.4rem,2.4vw,2.4rem);
  display:grid;gap:clamp(1.2rem,2.2vw,2.2rem);
  grid-template-columns:1fr;align-content:start;
}
@media(min-width:900px){
  .dir{grid-template-columns:minmax(180px,250px) 1fr;align-content:center}
  .dir__stats{grid-column:1 / -1}
}
/* Wide: give the figures their own column. Stacked under the argument they
   pushed the box past its 80svh and the heading scrolled out of view. */
@media(min-width:1180px){
  .dir{grid-template-columns:250px minmax(0,1fr) 272px;align-items:center}
  /* .dir prefix on purpose: the base .dir__stats rule is defined further down
     the file and would otherwise win on source order and keep the two-up grid,
     which squeezes each label into about 118px. */
  .dir .dir__stats{
    grid-column:auto;margin:0;padding:0 0 0 clamp(1rem,1.6vw,1.8rem);
    border-top:0;border-left:1px solid rgba(255,255,255,.12);
    grid-template-columns:1fr;gap:1.05rem;align-self:center;
  }
}
.dir__portrait{margin:0;display:flex;flex-direction:column;gap:1rem}
.dir__portrait img{
  /* Portrait crop, 9:16 at most, filling the column's full width and running
     down beside the argument. height:auto is load bearing: the <img> carries
     height="800", and with a non-auto height the aspect-ratio is ignored, so
     the picture rendered at its intrinsic 800px and pushed the heading out of
     the box. max-height keeps it inside the 80svh frame on short screens,
     where object-fit crops rather than the box overflowing. */
  display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;
  max-height:min(52svh,470px);
  border-radius:var(--radius);filter:grayscale(1) contrast(1.04);
}
.dir__portrait figcaption{display:flex;flex-direction:column;gap:.25rem}
.dir__sig{font-family:var(--display);font-size:1.15rem;color:#fff}
.dir__role{font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.5);line-height:1.4}
/* The invitation to write to Akin, sitting under his name. It replaced a
   portfolio link: the panel is about reaching the person who does the work,
   not about sending people to a second portfolio. */
.dir__reach{
  margin:.7rem 0 .1rem;font-size:.78rem;line-height:1.5;color:rgba(255,255,255,.6);
}
.dir__reach b{color:#fff;font-weight:600}
.dir__link{
  margin-top:.5rem;font-size:.8rem;font-weight:600;color:#fff;align-self:flex-start;
  border-bottom:1px solid var(--teal);padding-bottom:2px;word-break:break-word;
}
.dir__link .arw{display:inline-block;transition:transform .3s var(--ease)}
.dir__link:hover .arw{transform:translate(3px,-3px)}
.dir__title{
  font-family:var(--display);font-size:clamp(1.4rem,2.3vw,2.05rem);font-weight:400;
  line-height:1.08;margin:.85rem 0 1rem;max-width:22ch;
}
.dir__title .ital{font-style:italic}
.dir__text{color:rgba(255,255,255,.66);font-size:.86rem;line-height:1.58;max-width:72ch;margin:0 0 .75rem}
.dir__text b{color:#fff;font-weight:600}
.dir__text em{font-style:italic;color:rgba(255,255,255,.82)}
.dir__note{margin:.4rem 0 0;font-size:.82rem}
.dir__note a{
  color:#fff;font-weight:600;border-bottom:1px solid var(--teal);padding-bottom:2px;
  display:inline-flex;align-items:center;gap:.4em;
}
.dir__note a .arw{transition:transform .3s var(--ease)}
.dir__note a:hover .arw{transform:translate(3px,-3px)}
/* The figures. $1B+ / 6M+ / 20+ countries belong to Sütaş and say so in the
   label: they are that brand's scale, not a claim about ADWORKS revenue. */
.dir__stats{
  list-style:none;margin:.4rem 0 0;padding:1.2rem 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:1rem 1.6rem;grid-template-columns:repeat(2,1fr);
}
/* Between 900 and 1179 the figures sit under the argument rather than in their
   own column. Two up, not four: the labels carry real sentences now and four
   across pushed the box past its 80svh frame. */
/* 900 to 1179: the three-column arrangement does not fit here, and shrinking
   type only postponed the problem. Stack instead. A full width argument wraps
   in far fewer lines than a 505px column, which buys more height than any type
   reduction did, and the portrait becomes a compact square beside the name.
   The tall 9:16 portrait belongs to the wide layout above. */
@media(min-width:900px) and (max-width:1179px){
  .dir{grid-template-columns:1fr;align-content:center;gap:1.1rem}
  .dir__portrait{flex-direction:row;align-items:center;gap:1rem}
  .dir__portrait img{width:92px;max-width:92px;max-height:none;aspect-ratio:1;border-radius:12px}
  .dir__portrait figcaption{gap:.15rem}
  .dir__title{font-size:clamp(1.25rem,2vw,1.7rem);margin:.6rem 0 .7rem;max-width:34ch}
  .dir__text{font-size:.83rem;line-height:1.55;margin-bottom:.6rem;max-width:none}
  .dir__stats{grid-template-columns:repeat(3,1fr);gap:.9rem 1.4rem;padding-top:1rem}
  .dir__stats .n{font-size:1.45rem}
  .dir__stats .l{font-size:.67rem;line-height:1.35;max-width:none}
  .dir__stats .src{font-size:.57rem}
}

.dir__stats .src{
  display:block;margin-top:.3rem;font-size:.6rem;letter-spacing:.04em;
  color:rgba(255,255,255,.32);line-height:1.35;
}
.dir__stats .n{
  display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:500;line-height:1;color:#fff;
}
.dir__stats li:first-child .n{color:var(--teal)}
.dir__stats .l{
  display:block;margin-top:.4rem;font-size:.69rem;line-height:1.42;
  color:rgba(255,255,255,.52);max-width:30ch;
}

/* Short viewports: the box is capped at 80svh, so the argument has to give a
   little rather than start scrolling inside its own frame. */
@media(max-height:780px){
  .dir{padding-block:clamp(.9rem,1.8vh,1.4rem)}
  .dir__title{font-size:clamp(1.2rem,1.9vw,1.62rem);margin:.6rem 0 .65rem}
  .dir__text{font-size:.8rem;line-height:1.48;margin-bottom:.5rem}
  .dir__stats{gap:.8rem}
  .dir__stats .l{margin-top:.32rem;line-height:1.36}
  .dir__stats .src{margin-top:.22rem}
}
@media(max-height:660px){
  .dir__text{font-size:.77rem;line-height:1.44;margin-bottom:.5rem}
  .dir__stats .l{font-size:.64rem;line-height:1.32;margin-top:.3rem}
  .dir__stats .src{font-size:.55rem;margin-top:.2rem}
  .dir__stats .n{font-size:1.35rem}
  .dir__stats{gap:.6rem}
}

/* A zero-size anchor so #team lands where the timeline FINISHES.
   bottom:100svh, not bottom:0. The stage only stays pinned while there is a
   stage height of section left to scroll, so an anchor at the true bottom
   scrolls straight past the pin and the panel is gone by the time you arrive. */
.ap-anchor{position:absolute;left:0;bottom:100svh;width:1px;height:1px;pointer-events:none}

/* ---- progress ----
   .ap-bar was a second, full-width progress bar pinned to the bottom edge of
   the stage, separate from the .ap-rail timeline that carries the week nodes.
   Both sites dropped it on 2026-09-10 at the client's request, so these rules
   are currently UNUSED. Kept so restoring it is just pasting
   <div class="ap-bar"><i></i></div> back after .ap-track; adworks.js still
   drives it if the element exists (every write is guarded by `if (bar)`).
   The week progress line is .ap-rail, which is unaffected. */
.ap-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.1);z-index:5}
.ap-bar i{display:block;height:100%;background:var(--teal);transform:scaleX(0);transform-origin:0 50%}

/* ---- fallback: no pin (reduced motion). Same content, native snap rail. --- */
.approach:not(.ap--pinned) .ap-stage{position:static;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.approach:not(.ap--pinned) .ap-track{transform:none!important}
.approach:not(.ap--pinned) .ap-panel{scroll-snap-align:start;min-height:78svh;padding-block:clamp(3rem,7vh,5rem)}
.approach:not(.ap--pinned) .ap-bar{display:none}
.approach:not(.ap--pinned) .ap-rail i{display:none}
.approach:not(.ap--pinned) .ph{--on:1}
/* The pin never arms here, so adworks.js never adds .on. Anything that only
   lights via .on has to be lit by this fallback instead, or it stays dim while
   everything around it reads as reached. */
.approach:not(.ap--pinned) .ph--stack .ph__step::before{background:var(--teal)}
.approach:not(.ap--pinned) .ap-dot{background:var(--teal);border-color:var(--teal)}
.approach:not(.ap--pinned) .ph::after{background:var(--teal);border-color:var(--teal)}
.approach:not(.ap--pinned) .ph__wk{color:var(--teal)}
.approach:not(.ap--pinned) .ph__icon{color:rgba(255,255,255,.9)}
.approach:not(.ap--pinned) .ph__icon .ac{color:var(--teal)}

@media(max-width:900px){
  .approach{--railY:clamp(215px,30svh,265px)}
  .ph__icon svg{height:64px}
  .ap-panel{width:var(--w,84vw)}
  .ap-panel--open{width:var(--w,88vw)}
  .ph--final{width:var(--w,92vw)}
}

/* ======================================================================
   WORK  (case studies)
   ====================================================================== */
.work-grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:820px){.work-grid{grid-template-columns:repeat(6,1fr)}}
.case{
  position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.8rem;color:#fff;background:var(--cbg,#2a2a2a);
  border:1px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.case:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(0,0,0,.5)}
.case::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,color-mix(in srgb,var(--ca) 55%,transparent) 0%,transparent 46%),
             linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.28) 58%,rgba(0,0,0,.05));}
.case::after{content:"";position:absolute;inset:0;z-index:-3;background:
  radial-gradient(140% 100% at 100% 0,color-mix(in srgb,var(--ca) 55%,#111),#161616);}
.case__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);}
.case:hover .case__bg{transform:scale(1.05)}
.case .tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.28em .8em;display:inline-block;margin-bottom:1rem;width:max-content}
.case h3{font-size:1.9rem;font-weight:500;line-height:1.02;margin-bottom:.5rem}
.case p{font-size:.92rem;color:rgba(255,255,255,.78);max-width:34ch}
.case .role{margin-top:1rem;font-size:.76rem;letter-spacing:.04em;color:rgba(255,255,255,.6)}
.case .role b{color:#fff;font-weight:600}
/* spans */
.case.lg{grid-column:span 4} .case.md{grid-column:span 3} .case.sm{grid-column:span 2}
@media(max-width:819px){.case.lg,.case.md,.case.sm{grid-column:auto}}
.case--teal{--ca:var(--teal)} .case--blue{--ca:var(--blue)} .case--purple{--ca:var(--purple)} .case--dark{--ca:#3a3f45}

/* ======================================================================
   AUTHORITY  (Akin / founder)
   ====================================================================== */
.authority{background:var(--paper-2);overflow:hidden}
.authority__grid{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.authority__grid{grid-template-columns:.85fr 1.15fr}}
.authority__portrait{position:relative}
.authority__portrait .frame{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--ink-2),var(--outline));border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.authority__portrait .frame img{width:100%;height:100%;object-fit:cover}
.authority__portrait .badge{
  position:absolute;left:-14px;bottom:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:.6em 1.1em;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.4);display:flex;align-items:center;gap:.6em}
.authority__portrait .badge .d{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.authority blockquote{
  font-family:var(--display);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:400;line-height:1.12;
  letter-spacing:-.015em;margin:0 0 1.8rem;
}
.authority blockquote .ital{font-style:italic}
.authority__bio{color:var(--mute);max-width:56ch;margin-bottom:2rem}
.authority__bio strong{color:var(--ink)}
.creds{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem}
.creds .n{font-family:var(--display);font-size:1.9rem;display:block;line-height:1}
.creds .l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:.4rem;display:block;max-width:16ch}
.sig{font-family:var(--display);font-style:italic;font-size:1.5rem;margin-top:1.8rem;color:var(--ink-2)}

/* ======================================================================
   LOCATIONS
   ====================================================================== */
.locations{background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(2.5rem,4.4vw,4.4rem)} /* low-profile band; map image size unchanged */
.locations .shead{margin-bottom:clamp(1.3rem,2.8vw,2rem)}
.locations__map{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.locations__map img{width:min(1100px,92%);opacity:.16;filter:brightness(0) invert(1)}
.locations .wrap{position:relative;z-index:2}
.locations .shead h2{color:#fff}
.loc-row{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:700px){.loc-row{grid-template-columns:repeat(3,1fr)}}
.loc{border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);padding:1.8rem;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.loc:hover{border-color:var(--teal);background:rgba(0,187,175,.06)}
.loc .city{font-family:var(--display);font-size:1.7rem;margin-bottom:.3rem}
.loc .region{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1rem}
.loc .detail{color:rgba(255,255,255,.6);font-size:.92rem}
.loc.primary{background:linear-gradient(150deg,rgba(0,187,175,.14),rgba(255,255,255,.02));border-color:rgba(0,187,175,.4)}

/* ======================================================================
   CONTACT / CTA
   ====================================================================== */
.cta{background:var(--paper);text-align:center;position:relative;overflow:hidden}
.cta__inner{max-width:820px;margin-inline:auto;position:relative;z-index:2}
.cta h2{font-size:clamp(2.6rem,7vw,6rem);font-weight:400;letter-spacing:-.03em;line-height:.98}
.cta h2 .tint{background:linear-gradient(100deg,var(--teal),var(--blue) 55%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Set in the button's own colour, so the headline and the thing it is asking
   you to click are visibly the same gesture. No block behind it: boxed, it
   read as a label stuck onto the sentence rather than part of it. */
.cta h2 .mark{color:var(--teal)}
.cta h2 .ital{font-style:italic}
.cta p{color:var(--mute);max-width:48ch;margin:1.6rem auto 2.6rem;font-size:1.1rem}
.cta__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta__contact{margin-top:3.2rem;display:flex;gap:2.4rem;justify-content:center;flex-wrap:wrap;color:var(--mute);font-size:.92rem}
.cta__contact a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--teal);padding-bottom:2px}

/* ======================================================================
   FOOTER
   ====================================================================== */
.foot{background:var(--ink);color:#fff;padding-block:clamp(3.5rem,6vw,5.5rem) 2rem}
.foot__top{display:grid;gap:2.5rem;grid-template-columns:1fr;margin-bottom:3rem}
@media(min-width:820px){.foot__top{grid-template-columns:1.4fr 1fr 1fr;gap:3rem}}
.foot__brand .word{height:24px;margin-bottom:1.3rem}
.foot__brand p{color:rgba(255,255,255,.55);max-width:34ch;font-size:.95rem}
.foot__brand .sisters{margin-top:1.6rem;display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem}
.foot__brand .sisters a{color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;transition:color .25s,border-color .25s}
.foot__brand .sisters a:hover{color:#fff;border-color:var(--teal)}
.foot__col h5{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2);margin:0 0 1.1rem;font-family:var(--ui);font-weight:700}
.foot__col a,.foot__col p{display:block;color:rgba(255,255,255,.7);font-size:.92rem;padding:.35rem 0;transition:color .25s}
.foot__col a:hover{color:var(--teal)}
.foot__bar{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:1.6rem;font-size:.8rem;color:var(--mute-2)}
.foot__bar a{color:var(--mute-2)}
.foot__bar a:hover{color:#fff}

/* ======================================================================
   REVEAL animation
   ====================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ======================================================================
   CANADA HERO — split editorial variant (distinct from Global)
   ====================================================================== */
.site-canada .hero{
  background:radial-gradient(120% 120% at 12% 12%,#26302f 0%,var(--outline) 52%,#101413 100%);
  align-items:center;
}
.site-canada .hero__orb.a{background:var(--teal);top:auto;bottom:-14%;right:auto;left:-8%;opacity:.4}
.site-canada .hero__orb.c{background:var(--teal);top:8%;left:auto;right:14%;opacity:.22}
.hero__inner--split{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;padding-top:9rem}
@media(min-width:960px){.hero__inner--split{grid-template-columns:1.08fr .92fr}}
.site-canada .hero h1{font-size:clamp(2.7rem,7.4vw,6.6rem)}
.site-canada .hero__meta{margin-top:2.6rem}
.hero__flag{width:20px;height:auto;border-radius:2px;vertical-align:-3px;margin-right:.1em}

/* Showcase panel — framed real project work, editorial stagger */
.hero__showcase{position:relative;min-height:clamp(340px,52vh,540px)}
.showcase-card{
  position:absolute;margin:0;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.14);
  background:#1a1a1a;
}
.showcase-card img{width:100%;height:100%;object-fit:cover;display:block}
.showcase-card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.2rem;color:#fff;
  background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);
  font-family:var(--display);font-size:1.15rem;font-weight:500;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.showcase-card figcaption .tag{
  font-family:var(--ui);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:var(--teal);border-radius:6px;padding:.32em .8em;
}
.showcase-card.main{inset:0 8% 22% 0;z-index:2}
.showcase-card.sub{width:46%;right:0;bottom:0;z-index:3;aspect-ratio:16/10}
.showcase-card.sub figcaption{font-size:.95rem;padding:.8rem .9rem}
@media(min-width:960px){
  .showcase-card.main{transform:rotate(-1.4deg)}
  .showcase-card.sub{transform:rotate(2.2deg)}
}
@media(max-width:600px){
  .hero__showcase{min-height:360px}
  .showcase-card.main{inset:0 20% 30% 0}
  .showcase-card.sub{width:56%}
}

/* ======================================================================
   CREATIVE DIRECTOR, the old full-width statement block (.director-section)

   UNUSED since 2026-09-10. The creative director moved into the Approach
   timeline as its closing panel at the client's request; the live styles are
   .ap-director / .dir, in the APPROACH block above. Kept so the old section
   can be restored by pasting its markup back, and left here rather than
   deleted because nothing else references these names.
   Dark background so Akin's dark-studio portrait blends into the section.
   Replaced the old two-person team layout.
   ====================================================================== */
/* SIGNED STATEMENT band (both sites): a large COLOUR portrait fills the full
   height of the band, the message sits beside it, and Akin's name is set large
   as the authorship signature (true to the "AI can't author" thesis).
   Flat charcoal, no glow, no divider line. Image large; section short. */
/* Boxed, not full-width: the charcoal ground is now a contained panel sitting
   on the page rather than a full-bleed band, so the message reads as a single
   deliberate object. The section itself is transparent; .director carries the
   dark box and its own padding. */
.director-section{position:relative;background:transparent;color:#fff;isolation:isolate;
  padding-block:clamp(2.8rem,4.6vw,4.6rem)}
.director-section .eyebrow{color:rgba(255,255,255,.5)}
/* no leading rule on this label — it reads as a message header, not a
   section tag, and the dash made it look like a list item */
.director-section .eyebrow{gap:0}
.director-bg{display:none} /* no ambient glow — that reads as AI-default */

.director{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:clamp(1.8rem,3.5vw,3rem);
  align-items:stretch;max-width:1140px;margin-inline:auto;
  background:#191a1c;overflow:hidden;border-radius:4px;
  padding:clamp(1.5rem,3vw,2.6rem)}
@media(min-width:820px){.director{grid-template-columns:minmax(330px,400px) 1fr;gap:clamp(2.4rem,4vw,4rem)}}

/* portrait — full-height colour photo */
.director__portrait{position:relative;margin:0;min-height:380px;overflow:hidden}
.director__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.director__portrait::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* message + signature */
.director__body{position:relative;display:flex;flex-direction:column;justify-content:center}
.director__label{margin:0 0 1.15rem}
.director__title{font-size:clamp(1.9rem,3.3vw,2.9rem);font-weight:300;letter-spacing:-.02em;line-height:1.08;color:#fff;margin-bottom:1.2rem;max-width:22ch}
.director__title em{font-style:italic;font-weight:400;color:#fff;border-bottom:2px solid var(--teal);padding-bottom:.03em}
.director__text{color:rgba(255,255,255,.72);max-width:52ch;font-size:1.04rem;line-height:1.65;font-weight:300;margin-bottom:1.8rem}
.director__text strong{color:#fff;font-weight:500}
.director__sign{display:flex;flex-direction:column;gap:.35rem;border-top:1px solid rgba(255,255,255,.16);padding-top:1.4rem}
.director__sign .sig{font-family:var(--display);font-style:normal;font-size:2rem;color:#fff;line-height:1}
.director__sign .role{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1.5}
.director__sign .portfolio{display:flex;flex-direction:column;gap:.15rem;margin-top:.5rem}
.director__sign .portfolio__label{font-family:var(--ui);font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.director__sign .portfolio a{font-family:var(--ui);font-size:.92rem;font-weight:500;color:var(--teal);align-self:start;
  border-bottom:1px solid rgba(0,187,175,.5);padding-bottom:1px;transition:border-color .25s}
.director__sign .portfolio a:hover{border-color:var(--teal)}
@media(max-width:819px){.director__portrait{min-height:320px}}

/* ======================================================================
   CO-FOUNDER — Didem Lutwak. Prominent feature on GLOBAL (main character,
   Co-Founder & Brand Executive, runs the U.S. business); compact card on
   CANADA that points to the full Global feature. Light section — contrasts
   the dark Creative-Director block for editorial rhythm.
   ====================================================================== */
.founder{background:var(--paper-2);position:relative;overflow:hidden}
.founder__grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){.founder__grid{grid-template-columns:1.05fr .95fr}}
.founder__portrait{position:relative;order:-1}
@media(min-width:900px){.founder__portrait{order:1}}
.founder__frame{aspect-ratio:4/5;border-radius:4px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--ink-2),var(--outline));border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.founder__frame img.cover{width:100%;height:100%;object-fit:cover}
.founder__frame .ph{width:38%;opacity:.14;filter:brightness(0) invert(1)}
.founder__frame.empty::after{content:"Portrait to be added";position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35)}
.founder__frame .badge{position:absolute;left:-14px;bottom:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:.6em 1.1em;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.4);display:flex;align-items:center;gap:.6em;white-space:nowrap}
.founder__frame .badge .d{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.founder__name{font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:400;letter-spacing:-.02em;line-height:1;margin:.3rem 0 .35rem}
.founder__role{font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:1.5rem}
.founder blockquote{font-family:var(--display);font-size:clamp(1.5rem,2.7vw,2.3rem);font-weight:400;line-height:1.13;letter-spacing:-.015em;margin:0 0 1.6rem}
.founder blockquote em{font-style:italic;color:var(--teal)}
.founder__bio{color:var(--mute);max-width:56ch;margin-bottom:1.4rem}
.founder__bio strong{color:var(--ink)}
.founder__mail{margin-bottom:1.9rem}
.founder__mail a{font-family:var(--ui);font-weight:500;font-size:.95rem;color:var(--ink-2);border-bottom:1px solid var(--teal);padding-bottom:2px;transition:color .25s}
.founder__mail a:hover{color:var(--teal)}

/* Canada — compact card that hands off to the Global feature */
/* ---- Didem hand-off card (Canada) ---------------------------------------
   Grown from a 64px avatar strip into a proper leadership block: a portrait
   at real scale beside a full-size heading, so the U.S. lead reads as a
   person rather than a footnote pointing at the Global site. */
.founder-card{
  display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.6rem);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--teal);
  padding:clamp(1.6rem,3.4vw,3rem);
}
@media(min-width:820px){.founder-card{grid-template-columns:minmax(200px,290px) 1fr;gap:clamp(2rem,4vw,3.4rem)}}
.founder-card__photo{
  margin:0;width:100%;max-width:290px;aspect-ratio:4/5;
  border-radius:4px;overflow:hidden;background:var(--outline);
}
.founder-card__photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-card__body h3{
  margin:.7rem 0 0;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;
}
.founder-card__body h3 .nm{color:var(--teal)}
.founder-card__body > p{margin:1rem 0 0;max-width:52ch}
.founder-card__mail a{border-bottom:1px solid var(--outline)}
.founder-card__body .btn{margin-top:1.5rem}
.founder-card .eyebrow{margin-bottom:.5rem}
.founder-card h3{font-size:clamp(1.3rem,2.2vw,1.6rem);font-weight:500;margin-bottom:.4rem}
.founder-card p{color:var(--mute);font-size:.95rem;max-width:54ch}
.founder-card p a{color:var(--ink);border-bottom:1px solid var(--teal)}
.founder-card .btn{white-space:nowrap}

/* ======================================================================
   BUSINESS CARDS — low "studio artifact" band (section = .cards-section)
   Sits directly under the leadership section on both sites, so it runs on
   white with a hairline rule top and bottom: the band above it (.founder) is
   the same warm off-white, and the rules keep the two from merging.
   Kept deliberately short — copy column beside one row of three square
   photos, then a single closing question. Structure is identical on both
   sites; only the headline wording and the second photo differ (Canada shows
   Akin's adworks.ca card, Global the pair carrying Didem's San Diego card).
   ====================================================================== */
.cards-section{
  background:var(--paper);position:relative;overflow:hidden;
  border-block:1px solid var(--line);
  padding-block:clamp(2.75rem,5vw,4.25rem);
}

/* faint QR-module lattice echoing the code on the card backs */
.cards-section__grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(0,187,175,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,187,175,.16) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(42% 65% at 3% 10%,#000 0%,transparent 76%);
          mask-image:radial-gradient(42% 65% at 3% 10%,#000 0%,transparent 76%);
}
.cards-section .wrap{position:relative;z-index:1}

.cards{display:grid;gap:clamp(1.6rem,3vw,2.6rem);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.cards{grid-template-columns:.92fr 1.58fr}}

/* ---- copy column ---- */
.cards__copy h2{
  font-size:clamp(1.75rem,2.9vw,2.55rem);font-weight:400;line-height:1.04;
  letter-spacing:-.01em;margin-top:.8rem;max-width:15ch;
}
.cards__copy h2 .ital{font-style:italic}
.cards__lead{margin-top:.9rem;color:var(--mute);font-size:.97rem;line-height:1.6;max-width:44ch}

/* ---- one row of square photos ---- */
.cards__shots{display:grid;gap:clamp(.6rem,1.2vw,.9rem);grid-template-columns:repeat(2,1fr)}
.cards__shot{
  position:relative;margin:0;overflow:hidden;border-radius:var(--radius);
  background:var(--ink);aspect-ratio:1;
  box-shadow:0 22px 44px -32px rgba(0,0,0,.5);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.cards__shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.cards__shot:hover{transform:translateY(-5px);box-shadow:0 30px 56px -32px rgba(0,0,0,.55)}
.cards__shot:hover img{transform:scale(1.04)}
.cards__shot--feature{grid-column:span 2}
@media(min-width:700px){
  .cards__shots{grid-template-columns:repeat(3,1fr)}
  .cards__shot--feature{grid-column:span 1}
}

/* ---- closing line ---- */
.cards__kicker{
  margin-top:clamp(1.2rem,2.2vw,1.7rem);padding-top:1.1rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1.6rem;
  font-size:.97rem;color:var(--ink-2);
}
.cards__kicker span{max-width:64ch}
/* The kicker's links are real buttons now, so the underline treatment that
   applied to every anchor in here has to stop applying to them. */
.cards__kicker a:not(.btn){color:var(--ink);border-bottom:1px solid var(--teal);white-space:nowrap;font-weight:600}

/* Outline sibling for the secondary destination. .btn.ghost is built for dark
   grounds and goes white on white here, which is why this needs its own rule. */
.btn.outline{
  background:transparent;color:var(--ink);border-color:var(--line);
}
.btn.outline:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:none}
/* The kicker now carries two links (the QR post, then the blog index), grouped
   so they stay together on the right instead of being split by the
   space-between on the parent. */
.cards__kicker .cards__links{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;max-width:none}
.cards__kicker .cards__links a.secondary{color:var(--mute);border-bottom-color:var(--line);font-weight:500}
.cards__kicker .cards__links a.secondary:hover{color:var(--ink);border-bottom-color:var(--teal)}
.cards__kicker a .arw{display:inline-block;transition:transform .3s var(--ease)}
.cards__kicker a:hover .arw{transform:translate(3px,-3px)}

/* ======================================================================
   (legacy) two-person LEADERSHIP blocks — no longer used in markup, kept for reference
   ====================================================================== */
.person{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;align-items:center}
.person + .person{margin-top:clamp(3.5rem,7vw,6.5rem);padding-top:clamp(3.5rem,7vw,6.5rem);border-top:1px solid var(--line)}
@media(min-width:900px){
  .person{grid-template-columns:.85fr 1.15fr}
  .person.reverse{grid-template-columns:1.15fr .85fr}
  .person.reverse .person__portrait{order:2}
}
.person__portrait{position:relative}
.person__portrait .frame{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;position:relative;
  background:linear-gradient(150deg,var(--ink-2),var(--outline));border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.person__portrait .frame img{width:100%;height:100%;object-fit:cover}
.person__portrait .frame.empty::after{
  content:"Portrait to be added";position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;
  font-family:var(--ui);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.person__portrait .frame .ph{width:38%;opacity:.14;filter:brightness(0) invert(1)}
.person__portrait .badge{
  position:absolute;bottom:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:.6em 1.1em;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.4);display:flex;align-items:center;gap:.6em;white-space:nowrap}
.person__portrait .badge .d{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.person:not(.reverse) .person__portrait .badge{left:-14px}
.person.reverse .person__portrait .badge{right:-14px}
.person__name{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;margin-bottom:.2rem}
.person__role{font-family:var(--ui);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:.7rem}
.person__mail{margin-bottom:1.5rem}
.person__mail a{font-family:var(--ui);font-weight:500;font-size:.95rem;color:var(--ink-2);border-bottom:1px solid var(--teal);padding-bottom:2px;transition:color .25s}
.person__mail a:hover{color:var(--teal)}
.person blockquote{
  font-family:var(--display);font-size:clamp(1.4rem,2.5vw,2.1rem);font-weight:400;line-height:1.14;
  letter-spacing:-.015em;margin:0 0 1.5rem;}
.person blockquote .ital{font-style:italic}
.person__bio{color:var(--mute);max-width:56ch;margin-bottom:1.8rem}
.person__bio strong{color:var(--ink)}
.person .creds{display:flex;gap:2.4rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.6rem}
.person .creds .n{font-family:var(--display);font-size:1.7rem;display:block;line-height:1}
.person .creds .l{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:.4rem;display:block;max-width:18ch}

/* ======================================================================
   RESPONSIVE NAV
   ====================================================================== */

/* Between the mobile breakpoint and ~1080px the desktop nav is shown but is
   now two items wider than it used to be (Blog, then AI Brand-kit). At the default
   2.2rem gap it wrapped onto a second line and collided with the wordmark.
   Close the gaps through that band instead of wrapping. If another nav item
   is ever added, re-check this range at 900px before shipping. */
@media(min-width:881px) and (max-width:1080px){
  .nav{gap:1.25rem}
  .nav .btn{margin-left:.15rem}
  .nav .btn{padding-inline:1.05em}
}
/* Tightest point in that band. Global is the narrower fit of the two sites:
   its nav says "Leadership" where Canada says "Studio", and both brands now
   carry a "/ LOCALE" label. At 1.25rem the Global brand and nav met with zero
   clearance at 881px, so close the gaps further at the bottom of the band. */
@media(min-width:881px) and (max-width:979px){
  .nav{gap:1rem}
}

@media(max-width:880px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(84vw,360px);flex-direction:column;
    align-items:flex-start;gap:1.6rem;padding:2.5rem;
    background:var(--ink);transform:translateX(100%);transition:transform .45s var(--ease);z-index:1;
    /* At 360x640 the seven items plus the CTA already fill the panel exactly.
       Allow scrolling so an eighth item cannot become unreachable, and use
       "safe center" so overflowing content is never clipped off the top.
       Browsers without `safe` fall back to the plain `center` above it. */
    justify-content:center;
    justify-content:safe center;
    overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{color:#fff;font-size:1.3rem;font-family:var(--display)}
  .scrolled .nav a{color:#fff}

  /* The CTA is .btn.dark, and .btn.dark's background is var(--ink), which is
     exactly this panel's background: inside the open menu it was invisible, so
     it read as one more big serif link rather than a button. Give it the teal
     fill and its own UI type back, and drop the desktop margin-left so it
     lines up with the items above it. */
  .nav .btn{
    color:#fff;background:var(--teal);
    font-family:var(--ui);font-size:.95rem;font-weight:600;letter-spacing:.01em;
    margin-left:0;margin-top:.7rem;padding:.85em 1.4em;
  }
  .nav .btn:hover{background:var(--teal);box-shadow:none;transform:none}

  /* The brand sits above the panel (z-index 2 vs 1), so with the menu open the
     wordmark and the "/ LOCALE" label were painted across the panel's left
     edge and cut in half. The AD mark is clear of the panel at these widths,
     so hide only the parts that overlap. */
  body.menu-open .brand .word,
  body.menu-open .brand .locale{opacity:0;transition:opacity .25s var(--ease)}

  body.menu-open{overflow:hidden}
  .nav-toggle.active span{background:#fff}
  .scrolled .nav-toggle.active span{background:#fff}
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.active span:nth-child(2){opacity:0}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ======================================================================
   BLOG  (blog/index.html + blog/<slug>/index.html)
   ----------------------------------------------------------------------
   The blog reuses the site header, footer, .wrap, .btn, .eyebrow and
   .reveal. Everything specific to it lives here. Pages carry
   `class="site-blog"` on <body>.
   Note: blog pages open with a COMPACT dark hero (.page-hero) rather than
   the full-viewport site hero, so the fixed white nav still has a dark
   backdrop to sit on before .scrolled kicks in.
   ====================================================================== */
.site-blog{background:var(--paper)}

/* ---- compact dark hero ---- */
.page-hero{
  position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 15% 10%,#26302f 0%,var(--outline) 55%,#101413 100%);
  color:#fff;padding-block:clamp(8rem,14vw,11rem) clamp(3rem,6vw,4.5rem);
}
.page-hero::after{
  content:"";position:absolute;inset:auto -10% -60% 40%;height:70%;
  background:radial-gradient(circle,var(--teal) 0%,transparent 62%);opacity:.16;pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:var(--teal)}
.page-hero h1{
  font-size:clamp(2.3rem,5.4vw,4.1rem);font-weight:400;line-height:1.04;
  margin-top:1.2rem;max-width:19ch;
}
.page-hero h1 .ital{font-style:italic}
.page-hero .sub{margin-top:1.4rem;max-width:56ch;color:rgba(255,255,255,.66);font-size:1.05rem}

/* breadcrumb sits above the headline */
.crumb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600}
.crumb a{color:rgba(255,255,255,.72);transition:color .25s}
.crumb a:hover{color:var(--teal)}
.crumb .sep{margin-inline:.6em;color:rgba(255,255,255,.3)}

/* ---- post meta line ---- */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;color:rgba(255,255,255,.6);
}
.post-meta strong{color:#fff;font-weight:600}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--teal);display:inline-block}

/* ---- index: list of posts ---- */
/* Index grid: two up on desktop. With an even number of posts that lands as a
   clean block; the cards are wide enough for the headline to breathe, which a
   three-up grid stopped doing once the fourth post arrived. */
.post-list{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:820px){.post-list{grid-template-columns:repeat(2,1fr);gap:1.6rem}}
.post-card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper);padding:1.9rem 1.7rem 1.6rem;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(0,0,0,.45);border-color:var(--mute-2)}
.post-card__tag{
  align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.35em .7em;border-radius:6px;color:#fff;margin-bottom:1.3rem;
}
.post-card__tag.branding{background:var(--teal)}
.post-card__tag.digital{background:var(--blue)}
.post-card__tag.ai{background:var(--purple)}
.post-card h3{font-size:1.5rem;font-weight:500;line-height:1.14;letter-spacing:-.01em}
.post-card h3 .ital{font-style:italic}
.post-card p{color:var(--mute);font-size:.95rem;margin:.9rem 0 0}
.post-card__foot{
  margin-top:auto;padding-top:1.6rem;display:flex;justify-content:space-between;align-items:center;
  gap:1rem;font-size:.78rem;color:var(--mute-2);
}
.post-card__more{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:.4em}
.post-card:hover .post-card__more .arw{transform:translate(3px,-3px)}
.post-card__more .arw{transition:transform .3s var(--ease)}

/* ---- article body ---- */
.article{padding-block:clamp(3.5rem,7vw,6rem)}
.article__body{max-width:68ch;margin-inline:auto}
.article__body>*+*{margin-top:1.5rem}
.article__body .lede{
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:400;
  line-height:1.4;color:var(--ink);letter-spacing:-.01em;
}
.article__body h2{
  font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:400;line-height:1.1;
  margin-top:3.4rem;max-width:24ch;
}
.article__body h2 .ital{font-style:italic}
.article__body h3{
  font-family:var(--ui);font-size:1rem;font-weight:700;letter-spacing:.02em;
  margin-top:2.4rem;
}
.article__body p{color:#3a3839;line-height:1.72}
.article__body a:not(.btn){
  color:var(--ink);font-weight:500;
  border-bottom:1px solid var(--teal);padding-bottom:1px;transition:background .25s;
}
.article__body a:not(.btn):hover{background:rgba(0,187,175,.12)}
.article__body ul,.article__body ol{padding-left:1.15rem;color:#3a3839}
.article__body li+li{margin-top:.6rem}
.article__body li::marker{color:var(--teal)}
.article__body strong{font-weight:600;color:var(--ink)}
.article__body blockquote{
  margin:2.6rem 0;padding:1.6rem 0 1.6rem 1.8rem;border-left:2px solid var(--teal);
  font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.45rem);font-weight:400;
  font-style:italic;line-height:1.4;color:var(--ink);
}
.article__body blockquote p{font:inherit;color:inherit;margin:0}
.article__body hr{border:0;border-top:1px solid var(--line);margin:3rem 0}

/* A figure inside an article. Used for the skyline QR, which has to stay
   SCANNABLE: the plate keeps a generous white margin on all four sides, which
   is the quiet zone the post itself insists on, and the image is capped at a
   width that still resolves cleanly on a phone. Never crop this plate tight to
   the artwork, and never put it on a tinted background: both break the code. */
.article__figure{margin:2.6rem 0}
.article__figure__plate{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.2rem,3vw,2rem);
  display:flex;justify-content:center;
}
.article__figure img{
  display:block;width:100%;max-width:270px;height:auto;
}
.article__figure figcaption{
  margin-top:.9rem;font-size:.82rem;line-height:1.55;color:var(--mute);
  max-width:58ch;
}

/* a pulled-out point inside an article */
.note{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.6rem;margin-top:2.2rem;
}
.note h3{margin-top:0;color:var(--ink)}
.note p{margin-top:.7rem;font-size:.95rem}
.note :last-child{margin-bottom:0}

/* ---- end-of-article CTA ---- */
.article__cta{
  max-width:68ch;margin:4rem auto 0;padding:2.4rem 2rem;text-align:center;
  background:var(--ink);color:#fff;border-radius:var(--radius);
}
.article__cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:400;margin:0 0 .9rem;max-width:none}
.article__cta p{color:rgba(255,255,255,.62);margin:0 auto 1.7rem;max-width:44ch;font-size:.95rem}

/* ---- prev / next ---- */
.post-next{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem)}
/* "Keep reading" shows every OTHER post, so with four posts it is three cards.
   Three up on desktop keeps that row even. */
.post-next__grid{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:760px){.post-next__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.post-next__grid{grid-template-columns:repeat(3,1fr)}}

/* ---- director: technical track record ----
   A scannable credential list rather than another paragraph. The point of this
   block is that a creative director also ships code, and a reader checking that
   claim wants dates and artifacts, not prose. Keyed to a class only adworks.ca
   carries, so adworksglobal.com is unaffected. */
/* The director panel runs on a dark ground, so this list takes the same
   reversed tokens as .dir__text beside it. The light-ground --ink-2 and --line
   used at first were invisible here. */
.dir__track{
  list-style:none;margin:1.6rem 0 0;padding:1.3rem 0 0;
  border-top:1px solid rgba(255,255,255,.14);display:grid;gap:.85rem;
}
.dir__track li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1rem;align-items:baseline}
.dir__track-k{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal);white-space:nowrap;
}
.dir__track-v{font-size:.86rem;line-height:1.58;color:rgba(255,255,255,.66)}
.dir__track-v b{color:#fff;font-weight:600}
@media(max-width:560px){
  .dir__track li{grid-template-columns:1fr;gap:.15rem}
}

/* ---- director box on short windows ----
   The panel is pinned, so anything past the viewport becomes an internal
   scrollbar inside a stuck box, which reads as broken rather than as more
   content. Measured: the condensed box needs a 722px viewport, so 1280x720
   laptops and any 768px screen with browser chrome were still clipping it.
   Rather than cut more substance, the type and the gaps tighten. */
@media(max-height:780px){
  .dir__title{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.12}
  .dir__text{font-size:.8rem;line-height:1.5;margin-bottom:.55rem}
  .dir__track{margin-top:1rem;padding-top:.9rem;gap:.55rem}
  .dir__track-v{font-size:.8rem;line-height:1.48}
  .dir__track li{gap:.8rem;grid-template-columns:6.8rem minmax(0,1fr)}
  .dir__stats{gap:.7rem 1.2rem}
  .dir__note{margin-top:.25rem}
}
/* The portrait column, not the copy, sets this box's height: the photograph
   plus its caption runs taller than either text column. On short windows the
   image gives up height first, since it is the one element that can lose some
   without losing meaning. */
@media(max-height:780px){
  .dir__portrait img{max-height:min(42svh,340px);object-fit:cover;object-position:center 22%}
  .dir__reach{font-size:.78rem;line-height:1.5}
}
/* A touch more leading than the .98 desktop display setting, since the phrase
   wraps on every phone width. */
@media(max-width:700px){
  .cta h2{line-height:1.06}
}

/* =========================================================================
   CASE STUDY  (miller-advisors-brand-kit.html)
   Reuses the blog's page-hero, .article and .article__cta. Only the three
   blocks below are new: the spec list inside the article, the deliverable
   cards, and the promo strip that sits inside #brand-kit on index.html.
   ========================================================================= */

/* ----- Spec list: the package contents, counted ----------------------- */
.spec{list-style:none;padding:0;margin:2rem 0;display:grid;gap:0;
  grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:620px){.spec{grid-template-columns:repeat(2,1fr);column-gap:2.5rem}}
.spec li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1rem;
  align-items:baseline;padding:.95rem 0;border-bottom:1px solid var(--line)}
.spec b{font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1;
  color:var(--teal-deep);font-variant-numeric:lining-nums tabular-nums}
.spec span{color:#3a3839;font-size:.92rem;line-height:1.55}

/* ----- Deliverable cards ---------------------------------------------- */
.docs-sec{background:var(--paper-2)}
.docs{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:820px){.docs{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
.doc{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.1rem);text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.doc:hover{border-color:var(--teal);transform:translateY(-3px)}
.doc:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.doc__tag{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep);
  background:rgba(0,187,175,.12);padding:.3rem .6rem;border-radius:999px}
.doc h3{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.6vw,1.8rem);
  line-height:1.08;margin:1.1rem 0 .7rem}
.doc p{color:var(--mute);font-size:.92rem;line-height:1.6;margin:0 0 1.5rem}
.doc__go{margin-top:auto;font-weight:600;font-size:.9rem;color:var(--ink);
  border-bottom:1px solid var(--teal);align-self:flex-start;padding-bottom:2px}
.doc .arw{display:inline-block;transition:transform .3s var(--ease)}
.doc:hover .arw{transform:translate(3px,-3px)}
.docs__note{margin-top:1.8rem;font-size:.82rem;color:var(--mute-2);line-height:1.55;max-width:70ch}

/* ----- Promo strip inside #brand-kit on index.html --------------------- */
.bk__case{margin-top:clamp(2.2rem,4vw,3.2rem);display:grid;gap:1.4rem;
  grid-template-columns:1fr;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);background:var(--paper-2)}
@media(min-width:880px){.bk__case{grid-template-columns:minmax(0,1fr) auto;gap:2.4rem}}
.bk__case-k{font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);margin:0 0 .6rem}
.bk__case h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.1;margin:0 0 .7rem}
.bk__case h3 .ital{font-style:italic}
.bk__case p{color:var(--mute);font-size:.94rem;line-height:1.6;margin:0;max-width:62ch}
.bk__case-nums{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1rem;
  font-size:.82rem;color:var(--ink)}
.bk__case-nums b{font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--teal-deep);margin-right:.35rem;font-variant-numeric:lining-nums tabular-nums}
.bk__case .btn{white-space:nowrap}

/* ----- The system: the client's own visuals, as delivered -------------- */
.msys{background:var(--paper)}
.msys__grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:2.6rem}
@media(min-width:760px){.msys__grid{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
.msys__tile{margin:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.msys__tile>img{width:100%;height:auto;display:block}
.msys__tile figcaption{padding:1rem 1.15rem 1.15rem;color:var(--mute);
  font-size:.85rem;line-height:1.55;margin-top:auto}
@media(min-width:760px){.msys__tile--full{grid-column:1 / -1}}
.msys__tile--full>img{max-height:420px;object-fit:cover;object-position:center 45%}

/* icons sit on the client's indigo, which is where they are approved to sit */
.msys__tile--dark{background:#273B64;border-color:#273B64}
.msys__tile--dark figcaption{color:#AEB9D2}
.msys__icons{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;
  padding:clamp(1.3rem,3vw,2rem)}
.msys__icons img{width:100%;height:auto;aspect-ratio:1;display:block}

/* the tile, repeated at its real size so the seam claim is checkable */
.msys__pattern{background:#273B64 url('miller/pattern-white.svg') repeat;
  background-size:113px 129px;min-height:240px;flex:1}

.msys__tile--poster{background:var(--paper-2)}
.msys__tile--poster>img{max-height:420px;object-fit:contain;padding:1.2rem 1.2rem 0}

.msys__swatches{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,1fr);flex:1;min-height:200px}
.msys__swatches li{display:flex;flex-direction:column;justify-content:flex-end;
  gap:.15rem;padding:.7rem .55rem}
.msys__swatches b{font-size:.7rem;font-weight:700;line-height:1.2}
.msys__swatches span{font-size:.62rem;opacity:.75;font-variant-numeric:tabular-nums}

/* ----- Book covers on the deliverable cards --------------------------- */
.doc__book{width:112px;height:auto;display:block;margin:0 0 1.3rem;
  filter:drop-shadow(0 14px 22px rgba(28,26,27,.16));
  transition:transform .35s var(--ease)}
.doc:hover .doc__book{transform:translateY(-4px) rotate(-1.5deg)}

/* ----- Case strip artwork on index.html ------------------------------- */
.bk__case{grid-template-columns:1fr}
@media(min-width:880px){
  .bk__case{grid-template-columns:auto minmax(0,1fr) auto;gap:2rem}
}
.bk__case-art{display:flex;justify-content:center}
.bk__case-books{position:relative;display:inline-flex;align-items:flex-end;padding-right:22px}
/* Enlarged 2026-09-22 (Akin): the covers are the proof, so they read at a glance. */
.bk__case-books{padding-right:34px}
.bk__case-books img{width:132px;height:auto;display:block;
  filter:drop-shadow(0 14px 24px rgba(28,26,27,.2))}
.bk__case-books img:last-child{position:absolute;right:0;bottom:-8px;width:114px;
  transform:rotate(4deg);transform-origin:bottom right}
@media(max-width:879px){
  .bk__case-books img{width:112px}
  .bk__case-books img:last-child{width:96px}
}
.bk__case-cta{display:grid;gap:.7rem;width:max-content;max-width:100%}
/* sits at the foot of the strip rather than centred against the copy */
@media(min-width:880px){.bk__case-cta{align-self:end}}
/* the outline button on the paper strip needs a firmer edge to read as a button */
.bk__case-cta .btn.outline{border:1.5px solid var(--ink);color:var(--ink)}
.bk__case-cta .btn.outline:hover,.bk__case-cta .btn.outline:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink)}
.bk__case-cta .btn{justify-content:center}

/* =====================================================================
   PRESENTATION GLOW (2026-09-22, Akin: "more visible when it lights up").
   Keyed to .ph--glow, which only adworks.ca carries until Global is told
   to take it. The box lights like the .ap-box panels (teal border, inner
   rule, outer bloom) and the bloom breathes once as the timeline arrives.
   ===================================================================== */
.ph--glow .ph__body{transition:border-color .45s var(--ease),background .45s var(--ease),box-shadow .6s var(--ease)}
.ph--glow.on .ph__body{
  border-color:var(--teal);
  background:linear-gradient(180deg,rgba(0,187,175,.16),rgba(0,187,175,.05));
  box-shadow:inset 0 0 0 1px var(--teal),0 0 34px rgba(0,187,175,.34),0 0 90px rgba(0,187,175,.14);
  animation:phGlow 1.6s cubic-bezier(.16,1,.3,1) 1;
}
.ph--glow.on .ph__t{color:#fff;text-shadow:0 0 18px rgba(0,187,175,.45)}
@keyframes phGlow{
  0%{box-shadow:inset 0 0 0 1px var(--teal),0 0 0 rgba(0,187,175,0),0 0 0 rgba(0,187,175,0)}
  35%{box-shadow:inset 0 0 0 1px var(--teal),0 0 56px rgba(0,187,175,.55),0 0 130px rgba(0,187,175,.22)}
  100%{box-shadow:inset 0 0 0 1px var(--teal),0 0 34px rgba(0,187,175,.34),0 0 90px rgba(0,187,175,.14)}
}
/* reduced motion never arms the pin, so .on never arrives: show it lit */
.approach:not(.ap--pinned) .ph--glow .ph__body{
  border-color:var(--teal);background:rgba(0,187,175,.12);
  box-shadow:inset 0 0 0 1px var(--teal),0 0 34px rgba(0,187,175,.3);
}
@media(prefers-reduced-motion:reduce){.ph--glow.on .ph__body{animation:none}}

/* =====================================================================
   DIRECTOR, SPLIT LAYOUT (2026-09-22, adworks.ca only via .dir--split).
   Portrait on the left; the heading and argument run the full width to its
   right; underneath, two records side by side: branding and web/code/UX.
   Both are the same ledger shape, keys included (teal mono), so they read
   as a matched pair (Akin, 2026-09-22).
   ===================================================================== */
@media(min-width:1180px){
  .dir.dir--split{grid-template-columns:250px minmax(0,1fr);align-items:start}
  .dir--split .dir__title{max-width:none}
  .dir--split .dir__text{max-width:none}
}
.dir--split .dir__lists{
  display:grid;grid-template-columns:1fr;gap:1.4rem clamp(1.4rem,2.6vw,2.6rem);
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14);
}
@media(min-width:760px){.dir--split .dir__lists{grid-template-columns:1fr 1fr}}
.dir--split .dir__col-t{
  font-family:var(--ui);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);margin:0 0 .9rem;
  display:flex;align-items:center;gap:.6em;
}
.dir--split .dir__col-t::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.dir--split .dir__track{margin:0;padding:0;border-top:0;gap:.8rem}
.dir--split .dir__track li{grid-template-columns:5.6rem minmax(0,1fr);gap:.8rem}
.dir--split .dir__track-v{font-size:.82rem;line-height:1.5}
.dir--split .dir__track-v .src{
  display:block;margin-top:.2rem;font-size:.6rem;letter-spacing:.04em;color:rgba(255,255,255,.34);
}
@media(max-height:780px){
  .dir--split .dir__lists{margin-top:1rem;padding-top:.9rem}
  .dir--split .dir__track{gap:.5rem}
  .dir--split .dir__track-v{font-size:.76rem;line-height:1.42}
  .dir--split .dir__col-t{margin-bottom:.6rem}
}
@media(max-width:560px){
  .dir--split .dir__track li{grid-template-columns:1fr;gap:.15rem}
}

/* =========================================================================
   CASE STUDY: HUDDLIE  (huddlie-app-case-study.html, adworks.ca only)
   App branding and UI/UX. Everything is keyed to .hd-* classes, so the
   synced mirrors carry it without changing any other page. ADWORKS chrome,
   the Digital blue as the page accent; huddlie's own colours appear only
   inside its work (screens, the mark, the palette strip).
   ========================================================================= */
.hd{--hd-ac:var(--blue);--hd-plum:#2A1F45;--hd-ease:cubic-bezier(.16,1,.3,1)}
.hd ::selection{background:var(--blue);color:#fff}

/* ---- phone: a captured screen in a thin bezel ---- */
.hd-phone{margin:0;position:relative;aspect-ratio:390/844;border-radius:clamp(22px,3.2vw,38px);
  background:#15121c;padding:clamp(5px,.6vw,7px);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -30px rgba(0,0,0,.55)}
.hd-phone img{width:100%;height:100%;object-fit:cover;border-radius:inherit;border-radius:calc(clamp(22px,3.2vw,38px) - 6px)}

/* ---- hero ---- */
.hd-hero{padding-bottom:clamp(3rem,6vw,5rem)}
.hd-hero::after{background:radial-gradient(circle,var(--blue) 0%,transparent 62%);opacity:.2}
.hd-hero::before{content:"";position:absolute;inset:-20% auto auto 55%;width:60%;height:90%;
  background:radial-gradient(circle,#E03599 0%,transparent 60%);opacity:.14;pointer-events:none}
.hd-hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:980px){.hd-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.hd-hero h1{max-width:15ch;font-size:clamp(2.4rem,5.6vw,4.6rem);letter-spacing:-.025em}
.hd-hero h1 .ital{color:#8fd8f5}
.hd-jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.hd-jump a{display:inline-flex;align-items:center;gap:.6rem;padding:.6rem 1rem .6rem .7rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);font-size:.85rem;font-weight:500;color:#fff;
  transition:border-color .3s var(--hd-ease),background .3s var(--hd-ease)}
.hd-jump a span{font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--blue)}
.hd-jump a:hover,.hd-jump a:focus-visible{border-color:var(--blue);background:rgba(0,174,239,.1)}

.hd-hero__fan{position:relative;height:clamp(420px,52vw,600px);max-width:560px;width:100%;margin-inline:auto}
.hd-hero__fan .hd-phone{position:absolute;top:50%;left:50%;width:clamp(170px,21vw,250px)}
.hd-phone--c{transform:translate(-50%,-50%);z-index:3}
.hd-phone--l{transform:translate(-112%,-44%) rotate(-7deg);z-index:2;opacity:.92}
.hd-phone--r{transform:translate(12%,-44%) rotate(7deg);z-index:2;opacity:.92}
.hd-hero__fan .hd-phone{animation:hdRise 1.1s var(--hd-ease) both}
.hd-phone--c{animation-delay:.15s!important}.hd-phone--l{animation-delay:.3s!important}.hd-phone--r{animation-delay:.42s!important}
@keyframes hdRise{from{opacity:0;margin-top:60px}to{margin-top:0}}
@media(max-width:560px){
  .hd-hero__fan{height:400px}
  .hd-hero__fan .hd-phone{width:170px}
  .hd-phone--l{transform:translate(-100%,-44%) rotate(-7deg)}
  .hd-phone--r{transform:translate(0%,-44%) rotate(7deg)}
}

/* ---- eyebrow with a number, used in the three showcase sections ---- */
.hd-k{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.hd-k span{font-family:var(--display);font-size:1.5rem;letter-spacing:0;font-weight:400;color:var(--blue);line-height:1}
.hd-lede{font-size:clamp(1rem,.3vw + .95rem,1.12rem);color:var(--mute);max-width:54ch;line-height:1.65}
.hd-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:2rem}
.hd-actions--center{justify-content:center}
.hd-btn{background:var(--ink);font-size:.95rem;padding:.9em 1.5em}
.hd-btn:hover{box-shadow:0 14px 30px -14px var(--blue)}
.hd-note{font-size:.82rem;color:var(--mute-2)}

/* ---- origin: sketch to mark ---- */
.hd-origin{background:var(--paper-2)}
.hd-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:820px){.hd-steps{grid-template-columns:1.25fr 1fr 1fr;gap:1.4rem;align-items:start}}
.hd-step__art{margin:0 0 1.1rem;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:1;background:var(--paper)}
.hd-step__art img{width:100%;height:100%;object-fit:cover}
.hd-step__art--paper{background:#fff}
.hd-step__art--paper img{object-fit:contain;padding:8%}
.hd-step__art--mark{background:var(--hd-plum);display:grid;place-items:center}
.hd-lottie{position:absolute;inset:14%}
.hd-lottie svg{width:100%!important;height:100%!important}
.hd-lottie__still{position:absolute;inset:0;margin:auto;width:66%!important;height:auto!important;object-fit:contain!important}
.hd-step__art--mark.is-live .hd-lottie__still{display:none}
.hd-replay{position:absolute;right:.8rem;bottom:.8rem;display:none;font:600 .72rem var(--ui);letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.45rem .8rem;cursor:pointer;transition:background .3s var(--hd-ease)}
.hd-replay:hover,.hd-replay:focus-visible{background:rgba(255,255,255,.2)}
.hd-step__art--mark.is-live .hd-replay{display:block}
.hd-step__n{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hd-step__t{margin-top:.45rem;color:var(--mute);font-size:.92rem;line-height:1.55;max-width:40ch}
@media(min-width:820px){.hd-step:first-child .hd-step__art{aspect-ratio:1.25/1}
  .hd-steps .hd-step:not(:first-child){margin-top:clamp(2rem,6vw,5rem)}}

.hd-palette{margin-top:clamp(3rem,6vw,4.5rem)}
.hd-palette__k{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:1rem}
.hd-palette ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(min-width:620px){.hd-palette ul{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.hd-palette ul{grid-template-columns:repeat(7,1fr)}}
.hd-palette li{background:var(--c);color:var(--i,#fff);border-radius:12px;min-height:150px;padding:.9rem;
  display:flex;flex-direction:column;justify-content:flex-end;gap:.15rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.hd-palette b{font-family:var(--display);font-weight:500;font-size:1.15rem}
.hd-palette span{font-size:.72rem;opacity:.8;font-variant-numeric:tabular-nums}
.hd-palette em{font-style:normal;font-size:.72rem;opacity:.7}

/* ---- 01 the app ---- */
.hd-app{overflow:hidden}
.hd-app__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media(min-width:980px){.hd-app__grid{grid-template-columns:auto minmax(0,1fr)}}
.hd-app h2{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:400;max-width:14ch;margin-bottom:1.3rem}
.hd-app h2 .ital,.hd-kit h2 .ital,.hd-sys h2 .ital{font-style:italic}
.hd-live{width:390px;height:820px;border-radius:54px;background:#15121c;padding:10px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08),0 50px 100px -40px rgba(42,31,69,.55)}
.hd-live iframe{width:370px;height:800px;border:0;border-radius:44px;display:block;background:#F9F6FA}
.hd-live__hint{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--mute);
  display:flex;align-items:center;justify-content:center;gap:.5rem}
.hd-live__hint::before{content:"";width:7px;height:7px;border-radius:50%;background:#2E8A6A;
  box-shadow:0 0 0 4px rgba(46,138,106,.18)}
@media(max-width:979px){.hd-app__device{display:none}}
.hd-list{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.hd-list li{padding:1rem 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:.94rem;line-height:1.55;
  display:grid;grid-template-columns:1fr;gap:.2rem}
@media(min-width:620px){.hd-list li{grid-template-columns:10rem minmax(0,1fr);gap:1.2rem}}
.hd-list b{font-family:var(--display);font-weight:500;font-size:1.1rem;color:var(--ink)}

.hd-strip{margin-top:clamp(3.5rem,7vw,6rem);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;padding-inline:var(--gutter)}
.hd-strip::-webkit-scrollbar{display:none}
.hd-strip__track{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;margin-inline:auto;padding-bottom:1rem}
.hd-strip .hd-phone{width:clamp(170px,13.4vw,220px);scroll-snap-align:center;flex:none;
  box-shadow:0 30px 60px -32px rgba(42,31,69,.5);transition:transform .5s var(--hd-ease)}
.hd-strip .hd-phone:nth-child(even){transform:translateY(2.2rem)}
.hd-strip .hd-phone:hover{transform:translateY(-.4rem)}
.hd-strip figcaption{position:absolute;left:0;right:0;top:calc(100% + .8rem);text-align:center;font-size:.78rem;color:var(--mute)}
.hd-strip__track{padding-bottom:4.5rem}

/* ---- 02 the kit (dark band with a tilted wall of screens) ---- */
.hd-kit{position:relative;overflow:hidden;background:#17131f;color:#fff}
.hd-kit .hd-k{color:rgba(255,255,255,.6)}
.hd-kit .hd-lede{color:rgba(255,255,255,.68)}
.hd-kit h2{font-size:clamp(2.4rem,5.6vw,4.8rem);font-weight:400;letter-spacing:-.025em;max-width:12ch;margin-bottom:1.4rem}
.hd-kit__inner{position:relative;z-index:2}
.hd-kit__inner>.hd-lede{max-width:48ch}
.hd-wall{position:absolute;inset:0;pointer-events:none;perspective:1600px;
  -webkit-mask-image:linear-gradient(90deg,transparent 46%,#000 78%);mask-image:linear-gradient(90deg,transparent 46%,#000 78%)}
.hd-wall__plane{position:absolute;top:-10%;right:-8%;width:min(900px,70vw);display:grid;grid-template-columns:repeat(4,1fr);
  gap:22px;transform:rotateX(28deg) rotateZ(-24deg) rotateY(-6deg);transform-origin:center;opacity:.9}
.hd-wall__col{display:grid;gap:22px}
.hd-wall__col:nth-child(even){margin-top:-140px;animation:hdDrift 26s linear infinite alternate}
.hd-wall__col:nth-child(odd){animation:hdDrift 30s linear infinite alternate-reverse}
.hd-wall img{width:100%;border-radius:22px;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
@keyframes hdDrift{from{transform:translateY(0)}to{transform:translateY(-90px)}}
@media(max-width:819px){
  .hd-wall{-webkit-mask-image:linear-gradient(180deg,transparent 45%,#000 85%);mask-image:linear-gradient(180deg,transparent 45%,#000 85%);opacity:.45}
  .hd-wall__plane{width:130vw;right:-40vw;top:auto;bottom:-20%}
}
.hd-nums{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.4rem 2rem;max-width:620px}
@media(min-width:620px){.hd-nums{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hd-nums li{border-top:1px solid rgba(255,255,255,.18);padding-top:.9rem}
.hd-nums b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;
  color:#fff;font-variant-numeric:lining-nums tabular-nums}
.hd-nums span{display:block;margin-top:.5rem;font-size:.8rem;line-height:1.45;color:rgba(255,255,255,.6)}
.hd-kit .hd-btn{background:var(--blue);color:#0b1a22}
.hd-kit .hd-btn:hover{box-shadow:0 14px 34px -12px var(--blue)}

.hd-browser{margin:clamp(3rem,6vw,4.5rem) 0 0;border-radius:14px;overflow:hidden;background:#221c2d;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 100px -50px rgba(0,0,0,.8)}
.hd-browser__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:rgba(255,255,255,.05)}
.hd-browser__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.hd-browser img{width:100%;height:auto;transition:transform .8s var(--hd-ease)}
.hd-browser a{display:block;overflow:hidden}
.hd-browser a:hover img{transform:scale(1.015)}
.hd-browser--light{background:#fff;box-shadow:0 0 0 1px var(--line),0 50px 90px -50px rgba(42,31,69,.45)}
.hd-browser--light .hd-browser__bar{background:var(--paper-2)}
.hd-browser--light .hd-browser__bar i{background:var(--line)}

/* ---- 03 the design system ---- */
.hd-sys{background:#F9F6FA}
.hd-sys__head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.hd-sys h2{font-size:clamp(2.2rem,4.8vw,4rem);font-weight:400;letter-spacing:-.02em;margin-bottom:1.3rem;max-width:14ch}
.hd-bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:860px){.hd-bento{grid-template-columns:1.25fr 1fr;gap:1.2rem}}
.hd-tile{margin:0;background:#fff;border-radius:22px;padding:clamp(1.3rem,3vw,2rem);
  box-shadow:0 0 0 1px #ECE5F1,0 20px 40px -30px rgba(42,31,69,.35)}
.hd-tile__k{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#B8287A;margin-bottom:1.2rem}
.hd-tile figcaption{margin-top:1.1rem;color:var(--mute);font-size:.86rem;line-height:1.55}
.hd-type{color:#2B2438;line-height:1.05}
.hd-type--d{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.3rem,4.4vw,3.4rem);letter-spacing:-.02em;color:#3B2D5C}
.hd-type--t{font-family:'Instrument Sans',sans-serif;font-stretch:85%;font-weight:600;font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:1.4rem}
.hd-type--b{font-family:'Inter',sans-serif;font-size:1.05rem;line-height:1.4;margin-top:1.4rem;max-width:30ch}
.hd-type__m{font-size:.76rem;color:var(--mute);margin-top:.5rem}
.hd-icons{display:flex;gap:clamp(.8rem,2vw,1.4rem);align-items:flex-end}
.hd-icons img{width:30%;max-width:130px;aspect-ratio:1;border-radius:22.5%;box-shadow:0 18px 30px -16px rgba(42,31,69,.5)}
.hd-icons img:first-child{width:36%;max-width:156px}
.hd-avs{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem}
.hd-avs img{width:100%;aspect-ratio:1;border-radius:50%;transition:transform .45s var(--hd-ease)}
.hd-avs img:hover{transform:translateY(-4px) rotate(-4deg)}
@media(max-width:480px){.hd-avs{grid-template-columns:repeat(3,1fr)}}
.hd-tile--nums{background:#2A1F45;box-shadow:none;display:flex;align-items:center}
.hd-nums--ink{margin:0;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
.hd-sys .hd-btn{background:linear-gradient(115deg,#F2562B 0%,#E03599 52%,#A24FE0 100%)}
.hd-sys .hd-btn:hover{box-shadow:0 14px 30px -12px rgba(224,53,153,.7)}
.hd-sys .hd-browser{margin-bottom:0}
.hd-sys .hd-actions{margin-top:2.4rem}

/* ---- for startups ---- */
.hd-start{background:var(--paper)}
.hd-offer{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media(min-width:760px){.hd-offer{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.hd-offer{grid-template-columns:repeat(4,1fr)}}
.hd-offer li{padding:1.6rem 1.4rem 1.8rem 0;border-bottom:1px solid var(--line)}
@media(min-width:1100px){.hd-offer li{border-bottom:0;padding-right:2rem}
  .hd-offer li+li{border-left:1px solid var(--line);padding-left:1.6rem}}
.hd-offer span{font-family:var(--display);font-size:1.6rem;color:var(--blue);line-height:1}
.hd-offer h3{font-size:1.45rem;font-weight:400;margin:1rem 0 .6rem}
.hd-offer p{color:var(--mute);font-size:.92rem;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .hd-hero__fan .hd-phone,.hd-wall__col{animation:none!important}
}

/* =========================================================================
   HOME HERO: HUDDLIE  (index.html #top, adworks.ca only, 2026-09-29)
   The hero showcase is three huddlie phones fanned, with the crayon sketch
   pinned at the front like a print. Uses .hd-phone from the case study block.
   ========================================================================= */
.hero__app{position:relative;display:block;height:clamp(440px,62vh,620px);max-width:560px;width:100%;margin-inline:auto}
.hero__app .hd-phone{position:absolute;top:50%;left:50%;width:clamp(170px,19vw,245px);
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hero__app-c{transform:translate(-50%,-50%);z-index:3}
.hero__app-l{transform:translate(-108%,-45%) rotate(-7deg);z-index:2}
.hero__app-r{transform:translate(8%,-45%) rotate(7deg);z-index:2}
.hero__app:hover .hero__app-l{transform:translate(-118%,-46%) rotate(-9deg)}
.hero__app:hover .hero__app-r{transform:translate(18%,-46%) rotate(9deg)}
.hero__app:hover .hero__app-c{transform:translate(-50%,-52%)}
.hero__sketch{position:absolute;z-index:4;left:-2%;bottom:2%;width:clamp(120px,12vw,168px);margin:0;
  background:#fff;padding:8px 8px 30px;border-radius:4px;transform:rotate(-8deg);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.7)}
.hero__sketch img{width:100%;aspect-ratio:1;object-fit:cover}
.hero__sketch figcaption{position:absolute;left:0;right:0;bottom:7px;text-align:center;
  font-family:var(--display);font-style:italic;font-size:.82rem;color:#3a3839}
.site-canada .hero__orb.c{background:#E03599;opacity:.16}
@media(max-width:959px){.hero__app{height:440px;margin-top:-1rem}}
@media(max-width:560px){
  .hero__app{height:400px}
  .hero__app .hd-phone{width:160px}
  .hero__app-l{transform:translate(-100%,-45%) rotate(-7deg)}
  .hero__app-r{transform:translate(0,-45%) rotate(7deg)}
  .hero__sketch{width:112px;left:0;bottom:0}
}

/* ---- WORK: the featured app card (full row) ---- */
.case.xl{grid-column:1 / -1}
.case--app{--ca:#E03599;display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;
  min-height:0;padding:clamp(1.6rem,3.4vw,2.8rem);border-color:transparent;
  background:radial-gradient(90% 120% at 90% 10%,#3B2D5C 0%,#2A1F45 45%,#17131f 100%)}
.case--app::before,.case--app::after{display:none}
@media(min-width:820px){.case--app{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.case--app h3{font-size:clamp(2.2rem,4vw,3.2rem)}
.case--app p{max-width:44ch}
.case-app__go{display:inline-flex;gap:.5rem;margin-top:1.6rem;font-weight:600;font-size:.9rem;
  border-bottom:1px solid #E03599;padding-bottom:2px;width:max-content}
.case-app__go .arw{transition:transform .3s var(--ease)}
.case--app:hover .case-app__go .arw{transform:translate(3px,-3px)}
.case-app__phones{display:flex;justify-content:center;align-items:flex-end;gap:clamp(.6rem,1.4vw,1.2rem)}
.case-app__phones .hd-phone{width:clamp(110px,12vw,180px);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.case-app__phones .hd-phone:nth-child(2){transform:translateY(-1.4rem)}
.case--app:hover .case-app__phones .hd-phone:nth-child(2){transform:translateY(-2.2rem)}
@media(max-width:480px){.case-app__phones .hd-phone:nth-child(3){display:none}}
/* the longer huddlie kicker: on phones let dot, flag and text flow as one line of text */
@media(max-width:560px){
  .site-canada .hero__kicker{display:block;line-height:2;letter-spacing:.2em}
  .site-canada .hero__kicker .dot{display:inline-block;vertical-align:middle;margin-right:.55rem}
  .site-canada .hero__kicker .hero__flag{display:inline-block;margin-right:.55rem}
}

/* =========================================================================
   WORK GRID v2  (adworks.ca, 2026-09-30)
   Every card is now a link to its own project page. A card can carry two
   tags: .tag--disc is the discipline (filled with the card's accent), the
   plain .tag is the sector. .case--duo is the COG card, two live sites.
   ========================================================================= */
.case .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.case .tags .tag{margin-bottom:0}
.case .tag--disc{background:var(--ca);border-color:var(--ca);color:#fff}
.case--app .tag--disc{background:#E03599;border-color:#E03599}
.case__go{display:inline-flex;gap:.45rem;margin-top:1.1rem;font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:#fff;border-bottom:1px solid var(--ca);padding-bottom:2px;width:max-content}
.case__go .arw{transition:transform .3s var(--ease)}
.case:hover .case__go .arw,.case:focus-visible .case__go .arw{transform:translate(3px,-3px)}
a.case:focus-visible{outline:2px solid var(--ca);outline-offset:4px}
.case__bg--top{object-position:50% 12%}
.case__bg--r{object-position:70% 50%}

/* the COG card: copy on the left, the two live sites fanned on the right.
   On phones the frames sit in the top half and the copy below them. */
.case--duo{--ca:#4f9d5b;min-height:440px;justify-content:flex-end;
  background:linear-gradient(135deg,#2a2622 0%,#1d231d 55%,#141714 100%)}
.case--duo::after{display:none}
.case--duo::before{background:linear-gradient(90deg,rgba(14,16,14,.97) 34%,rgba(14,16,14,.6) 52%,transparent 72%)}
.case--duo > h3,.case--duo > p{max-width:24ch}
.case--duo > p{max-width:36ch}
.duo{position:absolute;inset:0;z-index:-2;pointer-events:none}
.duo__shot{position:absolute;width:54%;margin:0;border-radius:8px;overflow:hidden;background:#111;
  box-shadow:0 30px 50px -24px rgba(0,0,0,.8);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.duo__shot::before{content:"";display:block;height:14px;background:#e9e6e1 radial-gradient(circle at 10px 7px,#c9c5bf 2.5px,transparent 3px)}
.duo__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.duo__shot--a{top:9%;right:14%;transform:rotate(-4deg)}
.duo__shot--b{top:38%;right:-4%;transform:rotate(3deg)}
.case--duo:hover .duo__shot--a{transform:rotate(-6deg) translate(-3%,-4%)}
.case--duo:hover .duo__shot--b{transform:rotate(5deg) translate(2%,-2%)}
@media(max-width:819px){
  .case--duo{min-height:560px}
  .case--duo::before{background:linear-gradient(0deg,rgba(14,16,14,.97) 48%,rgba(14,16,14,.4) 66%,transparent 80%)}
  .duo__shot{width:66%}
  .duo__shot--a{top:4%;left:4%;right:auto}
  .duo__shot--b{top:14%;right:3%}
}

/* =========================================================================
   PROJECT PAGES  (work-*.html, adworks.ca)
   One family for every portfolio page: dark .page-hero.pj-hero with facts,
   a lead media block, then .pj-chapter sections. Each page sets its accent
   on <body> with --pj and adds ONE signature module of its own:
     .pj-duo   COG      two live sites that scroll inside their frames
     .pj-wall  Mercedes the configurator films, switched like the menu
     .pj-bay   Dyson    the stand film plus its ultra-wide attract loop
     .pj-tri   Mediteria the three divisions side by side
     .pj-pair  Dodoner  drawing next to the sign as built
   ========================================================================= */
.pj{--pj:var(--teal);background:var(--paper)}
.pj-hero::after{background:radial-gradient(circle,var(--pj) 0%,transparent 62%);opacity:.22}
.pj-hero .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.pj-hero .tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.32em .85em;color:rgba(255,255,255,.85)}
.pj-hero .tag--disc{background:var(--pj);border-color:var(--pj);color:#fff}
.pj-hero h1{max-width:18ch;font-size:clamp(2.4rem,5.8vw,4.6rem);letter-spacing:-.025em}
.pj-hero h1 .ital{color:color-mix(in srgb,var(--pj) 55%,#fff)}
.pj-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.2rem 2rem;
  margin:2.4rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.pj-facts div{min-width:0}
.pj-facts dt{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);font-weight:600}
.pj-facts dd{margin:.4rem 0 0;font-size:.95rem;color:#fff;line-height:1.45}
.pj-facts dd a{border-bottom:1px solid var(--pj)}

/* lead media: overlaps the hero's bottom edge */
.pj-lead{position:relative;z-index:3;margin-top:clamp(-3rem,-4vw,-2rem)}
.pj-lead figure{margin:0;border-radius:var(--radius);overflow:hidden;background:#111;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.pj-lead img,.pj-lead video{display:block;width:100%;height:auto}
.pj-cap{margin-top:.8rem;font-size:.8rem;color:var(--mute)}

/* chapters */
.pj-chapter{padding-block:clamp(4rem,8vw,7rem)}
.pj-chapter:not(.pj-chapter--alt):not(.pj-chapter--dark) + .pj-chapter:not(.pj-chapter--alt):not(.pj-chapter--dark){padding-top:0}
.pj-chapter--alt{background:var(--paper-2)}
.pj-chapter--dark{background:var(--outline);color:#fff}
.pj-chapter--dark .pj-text p{color:rgba(255,255,255,.66)}
.pj-chapter--dark .pj-cap{color:rgba(255,255,255,.5)}
.pj-text{display:grid;grid-template-columns:1fr;gap:1rem 3rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
@media(min-width:900px){.pj-text{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:end}}
.pj-text .eyebrow{color:var(--pj)}
.pj-text h2{font-size:clamp(1.9rem,4vw,3.1rem);font-weight:400;max-width:17ch;margin-top:.6rem}
.pj-text h2 .ital{font-style:italic}
.pj-text p{color:var(--mute);font-size:1.05rem;max-width:54ch}
.pj-text p + p{margin-top:1rem}

/* media grids */
.pj-grid{display:grid;gap:clamp(.8rem,1.6vw,1.4rem);grid-template-columns:1fr}
@media(min-width:720px){
  .pj-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pj-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pj-grid--wide{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
}
.pj-grid figure{margin:0}
.pj-grid img,.pj-grid video{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px;background:#eee}
.pj-grid .fit img{object-fit:contain;background:transparent}
.pj-grid .sq img{aspect-ratio:1}
.pj-grid .tall img{aspect-ratio:4/5}

/* browser frame + phone frame (screenshots) */
.pj-browser{margin:0;border-radius:10px;overflow:hidden;background:#fff;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.45);border:1px solid var(--line)}
.pj-browser__bar{display:flex;align-items:center;gap:.8rem;height:34px;padding-inline:.9rem;background:#ecebe6;
  font-size:.74rem;color:var(--mute);font-weight:500}
.pj-browser__bar i{display:flex;gap:5px}
.pj-browser__bar i b{width:9px;height:9px;border-radius:50%;background:#cfccc6}
.pj-browser__bar span{flex:1;background:#fff;border-radius:6px;padding:.2rem .7rem;max-width:22rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pj-browser > img{display:block;width:100%}
.pj-phone{margin:0;width:100%;max-width:260px;border-radius:32px;padding:8px;background:#141414;
  box-shadow:0 30px 50px -26px rgba(0,0,0,.55)}
.pj-phone img{display:block;width:100%;border-radius:25px}

/* ---- .pj-duo: two sites that scroll inside their frames (COG) ---- */
.pj-duo{display:grid;gap:clamp(1.4rem,3vw,2.4rem);grid-template-columns:1fr}
@media(min-width:900px){.pj-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pj-duo__item h3{font-size:1.5rem;font-weight:500;margin-bottom:.35rem}
.pj-duo__item > p{color:var(--mute);font-size:.95rem;max-width:44ch;margin-bottom:1.2rem}
.pj-duo__view{position:relative;height:clamp(360px,44vw,560px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.pj-duo__view img{display:block;width:100%;height:auto;
  transition:transform 9s cubic-bezier(.45,.05,.35,1)}
@media(hover:hover) and (pointer:fine){
  .pj-duo__view{overflow:hidden}
  .pj-duo__item:hover .pj-duo__view img,.pj-duo__item:focus-within .pj-duo__view img{
    transform:translateY(calc(-100% + clamp(360px,44vw,560px)))}
}
.pj-duo__hint{margin-top:.7rem;font-size:.78rem;color:var(--mute-2)}
.pj-duo__visit{display:inline-flex;gap:.4rem;margin-top:1rem;font-weight:600;font-size:.9rem;
  border-bottom:1px solid var(--pj);padding-bottom:2px}
.pj-link{display:flex;align-items:center;justify-content:center;gap:1rem;margin:clamp(2rem,4vw,3rem) 0 0;
  font-family:var(--display);font-style:italic;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--mute)}
.pj-link::before,.pj-link::after{content:"";height:1px;flex:1;max-width:120px;background:var(--line)}

/* ---- .pj-wall: the configurator films, one screen, a menu to switch (Mercedes) ---- */
.pj-wall{border-radius:var(--radius);overflow:hidden;background:#050505;border:1px solid #222}
.pj-wall__screen{position:relative;aspect-ratio:32/9;background:#000}
.pj-wall__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-wall__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--pj);transform-origin:0 50%;transform:scaleX(0)}
.pj-wall__menu{display:flex;flex-wrap:wrap;border-top:1px solid #222}
.pj-wall__menu button{flex:1 1 33%;min-width:0;display:flex;flex-direction:column;gap:.2rem;text-align:left;
  padding:1rem 1.1rem;background:transparent;border:0;border-right:1px solid #222;color:rgba(255,255,255,.55);
  font:inherit;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
@media(min-width:900px){.pj-wall__menu button{flex-basis:0}}
.pj-wall__menu button:last-child{border-right:0}
.pj-wall__menu button small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.35)}
.pj-wall__menu button span{font-family:var(--display);font-size:1.05rem}
.pj-wall__menu button:hover{color:#fff;background:#111}
.pj-wall__menu button[aria-pressed="true"]{color:#fff;background:#141414;box-shadow:inset 0 2px 0 var(--pj)}
.pj-wall__menu button[aria-pressed="true"] small{color:var(--pj)}
.pj-wall__menu button:focus-visible{outline:2px solid var(--pj);outline-offset:-2px}
@media(max-width:560px){.pj-wall__screen{aspect-ratio:2.6/1}.pj-wall__menu button{flex-basis:50%;border-bottom:1px solid #222}}

/* ---- .pj-bay: stand film + ultra-wide attract loop (Dyson) ---- */
.pj-bay{display:grid;gap:clamp(.8rem,1.6vw,1.4rem)}
.pj-bay video{display:block;width:100%;border-radius:10px;background:#111}
.pj-bay__strip{border-radius:10px;overflow:hidden;background:#111}
.pj-bay__strip video{border-radius:0;aspect-ratio:1600/300;object-fit:cover}

/* ---- .pj-tri: three divisions (Mediteria) ---- */
.pj-tri{display:grid;gap:clamp(.8rem,1.6vw,1.4rem);grid-template-columns:1fr}
@media(min-width:820px){.pj-tri{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pj-tri figure{margin:0}
.pj-tri img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.pj-tri figcaption{margin-top:.9rem}
.pj-tri figcaption b{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem}
.pj-tri figcaption span{font-size:.9rem;color:var(--mute)}

/* ---- .pj-pair: drawing beside the thing as built (Dodoner) ---- */
.pj-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem);align-items:stretch}
.pj-pair figure{margin:0;position:relative}
.pj-pair img{display:block;width:100%;height:100%;aspect-ratio:927/1199;object-fit:cover;border-radius:10px}
.pj-pair figcaption{position:absolute;left:.8rem;bottom:.8rem;background:rgba(20,20,20,.78);color:#fff;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:.35em .8em;border-radius:6px}

/* ---- next project ---- */
.pj-next{background:var(--paper-2);border-top:1px solid var(--line)}
.pj-next__in{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;padding-block:clamp(3rem,6vw,4.5rem)}
@media(min-width:820px){.pj-next__in{grid-template-columns:1fr auto}}
.pj-next a.pj-next__card{display:grid;grid-template-columns:120px 1fr;gap:1.4rem;align-items:center}
.pj-next__card img{width:120px;aspect-ratio:1;object-fit:cover;border-radius:10px}
.pj-next__card small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.pj-next__card b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.05;margin-top:.3rem}
.pj-next__card .arw{display:inline-block;transition:transform .3s var(--ease)}
.pj-next__card:hover .arw,.pj-next__card:focus-visible .arw{transform:translate(4px,-4px)}
.case h3 .ital{font-style:italic;font-weight:300;color:rgba(255,255,255,.7)}

/* =========================================================================
   PROJECT PAGES, round 2 (2026-09-30)
     .md-*      Mediteria brand story: the three words, swatches, divisions
     .pj-tabs   a tab set that swaps figures (Shabby Chic scents). Without
                JS every panel shows, stacked; adworks.js hides all but one.
     .apps      ADWORKS Global home: the Startup App Creation band
   ========================================================================= */
.md-words{display:flex;flex-wrap:wrap;gap:.2em .5em;margin:0;font-family:var(--display);
  font-size:clamp(2.4rem,7vw,5.6rem);font-weight:300;letter-spacing:-.03em;line-height:1}
.md-words span{padding:.12em .3em .18em;border-radius:10px}
.md-words .med{background:#174350;color:#fcfaf9}
.md-words .cos{background:#fcfaf9;color:#34484b;border:1px solid var(--line)}
.md-words .rel{background:#e7bbae;color:#fff}
.md-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(.8rem,1.6vw,1.2rem);list-style:none;margin:0;padding:0}
.md-swatches li{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff}
.md-swatches li::before{content:"";height:clamp(110px,14vw,170px);background:var(--c)}
.md-swatches b{font-family:var(--display);font-weight:500;font-size:1.2rem;padding:.9rem 1rem 0}
.md-swatches code{font-family:var(--ui);font-size:.78rem;letter-spacing:.06em;color:var(--mute);padding:.2rem 1rem 0}
.md-swatches em{font-style:normal;font-size:.86rem;color:var(--mute);padding:.5rem 1rem 1rem;line-height:1.4}
.md-divs{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,2.4vw,2rem)}
@media(min-width:820px){.md-divs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.md-div{margin:0;display:grid;gap:.8rem}
.md-div img{display:block;width:100%;border-radius:10px}
.md-div .t{aspect-ratio:4/5;object-fit:cover}
.md-div .m{aspect-ratio:1;object-fit:cover}
.md-div figcaption b{display:block;font-family:var(--display);font-weight:500;font-size:1.35rem}
.md-div figcaption span{font-size:.9rem;color:rgba(255,255,255,.62)}
.pj-strips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,1.2vw,1rem)}
.pj-strips figure{margin:0;position:relative}
.pj-strips img{display:block;width:100%;aspect-ratio:3/5;object-fit:cover;border-radius:10px}
.pj-strips figcaption{margin-top:.6rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}

.pj-tabs{border-radius:var(--radius);overflow:hidden;background:var(--tab-bg,#f3eeea);
  transition:background-color .7s cubic-bezier(.16,1,.3,1)}
.pj-tabs__list{display:flex;flex-wrap:wrap;gap:.5rem;padding:clamp(1rem,2vw,1.4rem)}
.pj-tabs__list button{font:inherit;font-family:var(--display);font-size:1.05rem;padding:.55rem 1.1rem;border-radius:999px;
  border:1px solid rgba(28,26,27,.2);background:rgba(255,255,255,.55);color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.pj-tabs__list button:hover{background:#fff}
.pj-tabs__list button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pj-tabs__list button:focus-visible{outline:2px solid var(--pj);outline-offset:2px}
.pj-tabs figure{margin:0}
.pj-tabs figure img{display:block;width:100%;height:auto}
.pj-tabs figcaption{padding:.9rem clamp(1rem,2vw,1.4rem) 1.2rem;font-size:.9rem;color:var(--ink-2)}
.pj-tabs.is-live figure:not(.on){display:none}
.pj-tabs.is-live figure.on{animation:pjfade .6s cubic-bezier(.16,1,.3,1)}
@keyframes pjfade{from{opacity:.2}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.pj-tabs.is-live figure.on{animation:none}.pj-tabs{transition:none}}

/* ---- ADWORKS Global: Startup App Creation band ---- */
.apps{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(90% 120% at 90% 10%,#3B2D5C 0%,#2A1F45 45%,#17131f 100%)}
.apps__in{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:960px){.apps__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.apps .eyebrow{color:#f59ad0}
.apps h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:400;letter-spacing:-.02em;max-width:17ch;margin-top:.8rem}
.apps h2 .ital{font-style:italic;color:#f59ad0}
.apps__lead{margin-top:1.3rem;color:rgba(255,255,255,.72);font-size:1.05rem;max-width:52ch}
.apps__list{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1rem 1.6rem}
@media(min-width:560px){.apps__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.apps__list li{border-top:1px solid rgba(255,255,255,.16);padding-top:.9rem}
.apps__list b{display:block;font-family:var(--display);font-weight:500;font-size:1.15rem}
.apps__list span{display:block;margin-top:.3rem;font-size:.9rem;color:rgba(255,255,255,.62);line-height:1.5}
.apps__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.apps__cta .btn{background:#E03599;border-color:#E03599;color:#fff}
.apps__cta .btn:hover{box-shadow:0 10px 24px -12px #E03599}
.apps__cta .btn.ghost{background:transparent;border-color:rgba(255,255,255,.5)}
.apps__palette{display:flex;gap:6px;margin-top:1.4rem;align-items:center}
.apps__palette i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.apps__palette small{margin-left:.5rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.apps .hero__app{margin-top:0}
/* wide cards whose picture tells the story on the right: copy sits on a
   left-to-right fade instead of the bottom fade (Mediteria, Dodoner) */
.case--split::before{background:linear-gradient(90deg,rgba(14,14,16,.95) 0%,rgba(14,14,16,.82) 34%,rgba(14,14,16,.25) 62%,transparent 80%)}
.case--split > h3,.case--split > p{max-width:36ch}
@media(max-width:819px){.case--split::before{background:linear-gradient(0deg,rgba(14,14,16,.95) 45%,rgba(14,14,16,.5) 70%,rgba(14,14,16,.15))}}

/* ---- Shabby Chic: one palette card per scent, and the foil chips ---- */
.sc-palettes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(.8rem,1.6vw,1.2rem);grid-template-columns:1fr}
@media(min-width:560px){.sc-palettes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.sc-palettes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sc-palettes li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:.25rem}
.sc-palettes b{font-family:var(--display);font-weight:500;font-size:1.35rem}
.sc-palettes small{font-size:.82rem;color:var(--mute);font-style:italic}
.sc-chips{display:flex;margin:1rem 0 .7rem}
.sc-chips i{flex:1;height:64px;background:var(--c)}
.sc-chips i:first-child{flex:1.6;border-radius:8px 0 0 8px}
.sc-chips i:last-child{border-radius:0 8px 8px 0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.sc-palettes em{font-style:normal;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.sc-foils{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 clamp(2rem,4vw,3rem)}
.sc-foils span{padding:.9rem 1.4rem;border-radius:999px;font-family:var(--display);font-size:1.05rem;color:#1c1a1b}
.sc-foils .gold{background:linear-gradient(120deg,#8a6a2c 0%,#e9d18a 30%,#b48a3c 52%,#f4e3a8 72%,#9b7a36 100%)}
.sc-foils .silver{background:linear-gradient(120deg,#7d8185 0%,#eef0f2 30%,#a9adb2 52%,#ffffff 72%,#8b8f94 100%)}
.sc-foils .matte{background:#e8d9da;color:#6b5a5e}

/* =========================================================================
   CANADA HERO STORIES (adworks.ca, 2026-09-30)
   Three stories share the hero and rotate: huddlie, Mediteria, Shabby Chic.
   Slides stack in one grid cell; .is-on shows one. adworks.js advances them
   every 7s, pauses on hover, focus, a hidden tab or when the hero is off
   screen, and never autoplays under reduced motion. The nav bar fills with
   the timer. The orb behind the type takes each story's colour.
   ========================================================================= */
.hero-stories{display:grid;padding-top:9rem}
.hs-slide{grid-area:1/1;display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;
  opacity:0;visibility:hidden;transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility 0s .9s}
@media(min-width:960px){.hs-slide{grid-template-columns:1.08fr .92fr}}
.hs-slide.is-on{opacity:1;visibility:visible;transition:opacity .9s cubic-bezier(.16,1,.3,1),visibility 0s}
.hs-slide .hero__lead-col > *{transform:translateY(18px);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1)}
.hs-slide.is-on .hero__lead-col > *{transform:none;opacity:1}
.hs-slide.is-on .hero__lead-col > :nth-child(2){transition-delay:.08s}
.hs-slide.is-on .hero__lead-col > :nth-child(3){transition-delay:.16s}
.hs-slide.is-on .hero__lead-col > :nth-child(4){transition-delay:.24s}
.hs-slide .hs-art{transform:translateY(24px) scale(.97);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.hs-slide.is-on .hs-art{transform:none}
.hero .hs-title{font-family:var(--display);font-size:clamp(2.7rem,7.4vw,6.6rem);font-weight:500;letter-spacing:-.03em;line-height:.92;margin:0}
.hero .hs-title .ital{font-style:italic;font-weight:400}
.hero .hs-title .tint--gold{background:linear-gradient(100deg,#e9d18a,#b48a3c 50%,#f4e3a8);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .hs-title .tint--rose{background:linear-gradient(100deg,#f1c6d3,#d9d9de 55%,#e9d18a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero[data-story="1"] .hero__orb.c{background:#b48a3c;opacity:.22}
.hero[data-story="2"] .hero__orb.c{background:#d98fae;opacity:.24}
.hero .hero__orb.c{transition:background-color 1.2s ease-in-out,opacity 1.2s ease-in-out}

/* story visuals: Mediteria's three labels fanned, Shabby Chic's boxes + label */
.hs-fan{position:relative;display:block;height:clamp(440px,62vh,620px);max-width:560px;width:100%;margin-inline:auto}
.hs-fan figure{position:absolute;top:50%;left:50%;margin:0;width:clamp(160px,17vw,225px);aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.8);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.hs-fan figure img{width:100%;height:100%;object-fit:cover;display:block}
.hs-fan .l{transform:translate(-112%,-44%) rotate(-7deg);z-index:2}
.hs-fan .c{transform:translate(-50%,-52%);z-index:3}
.hs-fan .r{transform:translate(12%,-44%) rotate(7deg);z-index:2}
.hs-fan:hover .l{transform:translate(-122%,-45%) rotate(-9deg)}
.hs-fan:hover .r{transform:translate(22%,-45%) rotate(9deg)}
.hs-fan .hero__sketch{left:0;bottom:4%;top:auto;width:clamp(120px,12vw,160px);aspect-ratio:auto;border-radius:4px;overflow:visible;z-index:4;transform:rotate(-6deg)}
.hs-fan .hero__sketch img{aspect-ratio:1;height:auto}
.hs-box{position:relative;display:block;height:clamp(440px,62vh,620px);max-width:600px;width:100%;margin-inline:auto}
.hs-box .main{position:absolute;inset:14% 0 18% 0;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -34px rgba(0,0,0,.8);
  transform:rotate(-1.5deg);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.hs-box .main img{width:100%;height:100%;object-fit:cover;display:block}
.hs-box:hover .main{transform:rotate(-.5deg) scale(1.02)}
.hs-box .hero__sketch{left:auto;right:-2%;bottom:2%;transform:rotate(6deg)}
@media(max-width:959px){.hs-fan,.hs-box{height:420px}}
@media(max-width:560px){
  .hs-fan{height:380px}.hs-fan figure{width:150px}
  .hs-fan .l{transform:translate(-100%,-44%) rotate(-7deg)}
  .hs-fan .r{transform:translate(0,-44%) rotate(7deg)}
  .hs-box{height:300px}.hs-box .main{inset:6% 0 20% 0}
}

/* story nav: three labelled bars under the slides */
.hs-nav{display:flex;gap:clamp(.6rem,2vw,1.6rem);margin-top:clamp(2rem,4vh,3rem)}
.hs-nav button{flex:1;max-width:220px;display:flex;flex-direction:column;gap:.55rem;text-align:left;padding:.4rem 0;background:none;border:0;
  color:rgba(255,255,255,.55);font:inherit;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer}
.hs-nav button[aria-selected="true"]{color:#fff}
.hs-nav button:hover{color:#fff}
.hs-nav button:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:4px}
.hs-nav i{display:block;height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.hs-nav i::after{content:"";display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.hs-nav button[aria-selected="true"] i::after{transform:scaleX(1)}
.hero-stories.is-auto .hs-nav button[aria-selected="true"] i::after{animation:hsbar 7s linear forwards}
.hero-stories.is-paused .hs-nav button[aria-selected="true"] i::after{animation-play-state:paused}
@keyframes hsbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .hs-slide,.hs-slide .hero__lead-col > *,.hs-slide .hs-art{transition:none}
}