/* ==========================================================================
   CSC Innovations — FLAGSHIP home layer ("The Living Dara")
   Loads AFTER site.css on home.html only. Pushes the brand to its WOW ceiling:
   a cinematic Midnight-Emerald hero with a real-time 3D Dara knot, an editorial
   body, a woven-thread signature, a bespoke cursor, and craft texture throughout.
   Palette: Midnight Emerald — near-black base + crisp near-white type + a single
   emerald accent (the knot wears it). The old gold/brass is gone; the metallic
   edge-light is now mint. Static-first: every WOW moment has a beautiful no-JS,
   no-WebGL fallback.
   ========================================================================== */

:root{
  --pine:#0E1512; --pine-2:#0B100D; --forest-glow:#3DD68C;
  --fog:#F2F6F3; --bone-dim:rgba(242,246,243,.80); --bone-faint:rgba(242,246,243,.62);
  /* "brass" tokens kept by name but re-pointed at the emerald accent set so the
     whole flagship retones in one place (edge-light/hairlines are now mint). */
  --brass:#3DD68C; --brass-soft:#9DEFC2; --brass-deep:#1FA862;
  --sage:#9DEFC2; --sage-deep:#3DD68C;
  --fs-mega:clamp(42px,6.6vw,88px);      /* hero display — bold but always fits its column */
  --sh-float:0 30px 80px -28px rgba(0,0,0,.62), 0 10px 30px -18px rgba(0,0,0,.5);
  --sh-glow:0 1px 0 rgba(157,239,194,.4), 0 18px 50px -22px rgba(16,120,60,.5);
  --ease-out:cubic-bezier(.16,.84,.34,1);
}

/* ---- Page-level polish -------------------------------------------------- */
body.home-flagship{background:var(--bg);}
body.home-flagship.lenis,
html.lenis body.home-flagship{height:auto;}
/* touch a11y: brand + legal links clear the 44px tap target */
.home-flagship .brand{min-height:44px;}
.home-flagship .foot-legal a{padding-inline:7px;}

/* Larger, tighter section headers on the flagship for confident scale jumps */
.home-flagship .section h2,.home-flagship .split h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.035em;}
.home-flagship .eyebrow{font-size:13px;}
.home-flagship .eyebrow::before{width:30px;background:linear-gradient(90deg,var(--accent),var(--accent-glow));}

/* ========================================================================
   BESPOKE CURSOR — emerald ring + dot, magnetic on the primary CTA.
   pointer:fine only; app.js drives the position. Never causes overflow.
   ======================================================================== */
.cursor-ring,.cursor-dot{position:fixed;top:0;left:0;z-index:9000;pointer-events:none;
  border-radius:50%;mix-blend-mode:normal;opacity:0;will-change:transform;
  transition:opacity .4s var(--ease),width .25s var(--ease),height .25s var(--ease),
             background .25s var(--ease),border-color .25s var(--ease);}
.cursor-ring{width:34px;height:34px;border:1.5px solid rgba(61,214,140,.6);
  transform:translate(-50%,-50%);}
.cursor-dot{width:5px;height:5px;background:var(--accent);transform:translate(-50%,-50%);}
html.cursor-on .cursor-ring,html.cursor-on .cursor-dot{opacity:1;}
html.cursor-on.cursor-hot .cursor-ring{width:54px;height:54px;border-color:var(--accent-glow);
  background:rgba(61,214,140,.12);}
html.cursor-on.cursor-press .cursor-ring{width:26px;height:26px;}
html.cursor-on *{cursor:none!important;}
@media (pointer:coarse){.cursor-ring,.cursor-dot{display:none!important;}}

/* ========================================================================
   WOVEN THREAD — a single emerald strand that draws down the page as you
   scroll (the signature interaction). Fixed, behind content, decorative.
   app.js sets --thread (0..1) -> stroke-dashoffset. CSS-only fallback: a
   faint static strand. Hidden on touch + reduced-motion.
   ======================================================================== */
.weave-thread{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;}
.weave-thread svg{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1280px,96vw);height:100%;overflow:visible;}
.weave-thread path{fill:none;stroke:url(#threadgrad);stroke-width:1.4;
  stroke-linecap:round;opacity:.5;
  stroke-dasharray:var(--thread-len,2400);
  stroke-dashoffset:calc(var(--thread-len,2400) * (1 - var(--thread,0)));}
html.thread-on .weave-thread{display:block;}
@media (pointer:coarse){.weave-thread{display:none!important;}}
@media (prefers-reduced-motion:reduce){.weave-thread{display:none!important;}}

/* ========================================================================
   HERO — cinematic Midnight-Emerald stage with the Living Dara knot.
   ======================================================================== */
.home-flagship .hero{
  position:relative;overflow:hidden;isolation:isolate;color:var(--text);
  background:
    radial-gradient(120% 90% at 50% -8%, #16402a 0%, transparent 52%),
    radial-gradient(90% 80% at 82% 18%, rgba(47,122,72,.42), transparent 60%),
    radial-gradient(70% 60% at 14% 96%, rgba(61,214,140,.12), transparent 60%),
    linear-gradient(178deg, var(--pine) 0%, #0f2a1b 56%, #123322 100%);
}
.home-flagship .hero-grid{
  grid-template-columns:1.06fr .94fr;gap:clamp(28px,5vw,76px);align-items:center;
  padding-block:clamp(76px,11vw,156px) clamp(64px,9vw,120px);position:relative;z-index:2;
}
.home-flagship .hero-copy{min-width:0;}
/* atmosphere layers */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-glow{position:absolute;border-radius:50%;filter:blur(40px);opacity:.6;}
.hero-glow.g1{width:60vw;height:60vw;top:-22%;right:-12%;
  background:radial-gradient(circle,rgba(61,214,140,.45),transparent 66%);}
.hero-glow.g2{width:44vw;height:44vw;bottom:-26%;left:-14%;
  background:radial-gradient(circle,rgba(8,28,16,.75),transparent 64%);}
.hero-glow.g3{width:30vw;height:30vw;top:30%;left:42%;mix-blend-mode:screen;opacity:.45;
  background:radial-gradient(circle,rgba(61,214,140,.30),transparent 60%);}
/* fine drifting motes (CSS particle bed; the 3D adds real ones when live) */
.hero-particles{position:absolute;inset:0;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 30%, rgba(242,246,243,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 72% 22%, rgba(157,239,194,.55), transparent 60%),
    radial-gradient(1px 1px at 40% 70%, rgba(242,246,243,.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 88% 64%, rgba(157,239,194,.5), transparent 60%),
    radial-gradient(1px 1px at 60% 90%, rgba(242,246,243,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 52%, rgba(61,214,140,.4), transparent 60%);}
@media (prefers-reduced-motion:no-preference){
  .hero-particles{animation:motes 26s linear infinite;}
}
@keyframes motes{from{transform:translateY(0);}to{transform:translateY(-44px);}}
.home-flagship .hero .grain::after,.home-flagship .hero::after{opacity:.06;}
.home-flagship .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* hero copy on dark */
.home-flagship .hero .eyebrow{color:var(--accent-glow);}
.home-flagship .hero .eyebrow::before{background:linear-gradient(90deg,var(--accent),transparent);width:34px;}
.home-flagship .hero h1{
  font-size:var(--fs-mega);line-height:1.0;letter-spacing:-.04em;color:var(--fog);
  margin:0 0 var(--s3);text-wrap:balance;overflow-wrap:break-word;hyphens:auto;
  text-shadow:0 1px 0 rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.4);}
.home-flagship .hero h1 em{font-style:italic;color:var(--accent-glow);}
.home-flagship .hero .lead{color:var(--bone-dim);max-width:52ch;margin-bottom:var(--s4);}
.home-flagship .hero .btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-forest);}
.home-flagship .hero .btn-primary:hover{background:var(--accent-glow);transform:translateY(-2px);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.6);}
.home-flagship .hero .btn-ghost{color:var(--text);border-color:rgba(242,246,243,.4);}
.home-flagship .hero .btn-ghost:hover{border-color:var(--accent-glow);color:#fff;background:rgba(242,246,243,.07);}
.home-flagship .hero .hero-meta{border-top-color:rgba(242,246,243,.18);}
.home-flagship .hero .hero-meta dt{color:var(--bone-faint);}
.home-flagship .hero .hero-meta dd{color:var(--fog);}

/* the stage that holds the static poster + the live canvas (same box) — bigger, more cinematic */
.hero-stage{position:relative;width:min(620px,98%);aspect-ratio:1;margin-inline:auto;justify-self:center;
  display:grid;place-items:center;}
.hero-stage .ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(242,246,243,.12);}
.hero-stage .ring.r2{inset:13%;border-color:rgba(61,214,140,.22);}
.hero-stage .ring.r3{inset:22%;border-style:dashed;border-color:rgba(157,239,194,.18);}
.hero-stage .stage-glow{position:absolute;inset:10%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(120,240,165,.62),rgba(61,214,140,.30) 46%,rgba(8,28,16,.06) 66%,transparent 76%);
  filter:blur(22px);}
/* static knot poster (the always-on, screenshot-worthy emblem — the "big hero image" on mobile) */
.knot-poster{position:relative;z-index:1;width:84%;aspect-ratio:1;display:grid;place-items:center;
  filter:drop-shadow(0 0 28px rgba(120,240,165,.42)) drop-shadow(0 2px 0 rgba(180,255,210,.4))
         drop-shadow(0 10px 16px rgba(0,0,0,.55)) drop-shadow(0 34px 52px rgba(0,0,0,.6));
  transition:opacity .9s var(--ease);}
.knot-poster .knot-art{width:100%;height:100%;}
.home-flagship .hero canvas#hero-canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;
  opacity:0;transition:opacity 1.1s var(--ease);}
html.wow-3d-on .knot-poster{opacity:0;}
html.wow-3d-on canvas#hero-canvas{opacity:1;}
@media (prefers-reduced-motion:no-preference) and (pointer:fine){
  .knot-poster{animation:knotbreathe 9s var(--ease) infinite;}
}
@keyframes knotbreathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.012);}}
.hero-stage .drag-hint{position:absolute;bottom:-2%;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bone-faint);opacity:0;transition:opacity .6s var(--ease);white-space:nowrap;}
html.wow-3d-on .hero-stage .drag-hint{opacity:1;}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  width:26px;height:42px;border-radius:14px;border:1.5px solid rgba(242,246,243,.4);
  display:grid;justify-items:center;align-content:start;padding-top:7px;}
.scroll-cue span{width:3px;height:8px;border-radius:2px;background:var(--accent-glow);
  animation:cue 1.8s var(--ease) infinite;}
@keyframes cue{0%{opacity:0;transform:translateY(-2px);}30%{opacity:1;}60%,100%{opacity:0;transform:translateY(12px);}}
.scroll-cue:hover{border-color:var(--accent-glow);}

@media (max-width:920px){
  .home-flagship .hero-grid{grid-template-columns:1fr;gap:clamp(20px,5vw,40px);
    padding-block:clamp(28px,7vw,80px) clamp(40px,8vw,72px);text-align:left;}
  /* Compact brand crest above the copy so the headline + primary CTA reach the
     first screen on a phone, instead of a full-width knot pushing them below the fold. */
  .hero-stage{order:-1;width:min(264px,58vw);}
  .scroll-cue{display:none;}
}

/* ========================================================================
   BODY — editorial sections, elevated cards, the Dara story, dark band.
   ======================================================================== */
.home-flagship .section,.home-flagship .section-sm{position:relative;z-index:1;}

/* lift on the dark surfaces: cards get an emerald hairline + deeper float on hover */
.home-flagship .card{border-radius:18px;box-shadow:var(--sh-1);}
.home-flagship .card::before{height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-glow));}
.home-flagship .card:hover{box-shadow:var(--sh-float);transform:translateY(-6px);}
.home-flagship .card h3{font-size:clamp(20px,2vw,25px);}

/* index numbers on the "why" cards for editorial rhythm */
.home-flagship .why-grid .card{padding-top:var(--s5);}
.home-flagship .why-grid .card{counter-increment:why;}
.home-flagship .why-grid{counter-reset:why;}
.home-flagship .why-grid .card::after{content:"0" counter(why);position:absolute;top:16px;right:20px;
  font-family:var(--serif);font-size:32px;color:var(--accent);opacity:.5;letter-spacing:-.02em;
  font-feature-settings:"tnum" 1;}

/* DARK STORY BAND — the second cinematic beat; ties back to the hero */
.story-band{position:relative;overflow:hidden;color:var(--text);isolation:isolate;
  padding-block:clamp(72px,10vw,132px);
  background:
    radial-gradient(80% 70% at 14% 8%, rgba(47,122,72,.36), transparent 60%),
    radial-gradient(70% 80% at 92% 96%, rgba(61,214,140,.12), transparent 60%),
    linear-gradient(168deg, var(--pine-2) 0%, #123322 100%);}
.story-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.story-band .container{position:relative;z-index:1;}
.story-band .eyebrow{color:var(--accent-glow);}
.story-band .eyebrow::before{background:linear-gradient(90deg,var(--accent),transparent);}
.story-band h2{color:var(--fog);font-size:clamp(30px,4vw,52px);letter-spacing:-.035em;}
.story-band h2 em{color:var(--accent-glow);font-style:italic;}
.story-band .lead{color:var(--bone-dim);}
.story-band .muted{color:var(--bone-faint);}
.story-band .btn-quiet{color:var(--accent-glow);}
.story-band .btn-quiet:hover{color:var(--fog);}
.story-emblem{position:relative;width:min(440px,82vw);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;}
.story-emblem .ring{position:absolute;inset:2%;border-radius:50%;border:1px solid rgba(242,246,243,.12);}
.story-emblem .ring.r2{inset:12%;border-color:rgba(61,214,140,.22);}
.story-emblem .stage-glow{position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle,rgba(61,214,140,.45),transparent 70%);filter:blur(20px);}
.story-emblem .knot-art{position:relative;z-index:1;width:86%;height:86%;transform:rotate(-7deg);
  filter:drop-shadow(0 2px 0 rgba(157,239,194,.26)) drop-shadow(0 26px 44px rgba(0,0,0,.66));}
@media (prefers-reduced-motion:no-preference) and (pointer:fine){
  .story-emblem .knot-art{animation:knotbreathe 10s var(--ease) infinite;}
  .story-emblem .ring.r2{animation:spin 80s linear infinite;}
}

/* the knot vector art (used in hero poster + story) — emerald glass + mint edge */
.knot-art{display:block;color:var(--accent);}
.knot-art .k-fill{fill:url(#emerald);}
.knot-art .k-edge{fill:none;stroke:url(#brassedge);stroke-width:1.1;
  vector-effect:non-scaling-stroke;opacity:.9;}

/* WORK posters — elevate the doorways */
.home-flagship .poster{min-height:340px;border-radius:18px;}
.home-flagship .poster:hover{transform:translateY(-6px);box-shadow:var(--sh-float);}
.home-flagship .poster h3{font-size:clamp(22px,2.4vw,30px);}

/* STATS band — a deep emerald panel (not a bright green wall), sharpened numerals + mint underline */
.home-flagship .bg-forest{background:
  radial-gradient(80% 120% at 86% 6%, rgba(61,214,140,.26), transparent 58%),
  linear-gradient(160deg, #0E2A1B 0%, #07160e 100%);}
.home-flagship .stat .num{position:relative;display:inline-block;padding-bottom:8px;}
.home-flagship .stat .num::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26px;height:2px;background:var(--accent-glow);opacity:.9;border-radius:2px;}

/* CTA callout — emerald hairline frame + crisper knot watermark */
.home-flagship .callout{border:1px solid rgba(61,214,140,.3);box-shadow:var(--sh-forest);}
.home-flagship .callout::after{opacity:.16;}

/* reveals: a touch more travel + a soft lift for the flagship */
.js .home-flagship [data-rv]{transform:translateY(22px);}
.js .home-flagship [data-rv].in{transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .home-flagship [data-rv]{opacity:1!important;transform:none!important;}
  .hero-particles,.knot-poster,.story-emblem .knot-art{animation:none!important;}
}

/* the off-screen SVG sprite holder must never affect layout */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ---- Lenis momentum base (only active once app.js adds .lenis) ---------- */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-scrolling iframe{pointer-events:none;}

/* ---- Ambient sound toggle (injected by app.js; off by default) --------- */
.sound-toggle{position:fixed;right:18px;bottom:18px;z-index:70;display:inline-flex;align-items:center;gap:9px;
  height:42px;padding:0 16px 0 13px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(9,28,18,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(61,214,140,.45);color:var(--fog);
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease),transform var(--t) var(--ease);}
.sound-toggle:hover{color:var(--fog);border-color:var(--accent-glow);transform:translateY(-2px);}
.sound-toggle .st-bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px;}
.sound-toggle .st-bars i{width:2.5px;height:5px;background:var(--accent-glow);border-radius:2px;transition:height .2s var(--ease);}
.sound-toggle.on .st-bars i{animation:eq 1s var(--ease) infinite;}
.sound-toggle.on .st-bars i:nth-child(2){animation-delay:.18s;}
.sound-toggle.on .st-bars i:nth-child(3){animation-delay:.36s;}
@keyframes eq{0%,100%{height:4px;}50%{height:14px;}}
@media (max-width:560px){.sound-toggle{display:none;}}

/* ===================================================================
   Contrast / a11y on the Midnight-Emerald surfaces.
   =================================================================== */

/* Focus ring must clear 3:1 on dark surfaces — mint accent-glow ~9:1 on the dark bands */
.home-flagship .hero :focus-visible,
.home-flagship .story-band :focus-visible,
.home-flagship .make-feature :focus-visible,
.home-flagship .bg-forest :focus-visible,
.home-flagship .callout :focus-visible,
.home-flagship .site-foot :focus-visible{outline-color:var(--accent-glow);}

/* AA contrast for muted body + footer headings/legal on the dark base */
.home-flagship .muted{color:var(--text-muted);}
.home-flagship .foot-col h5{color:var(--accent-glow);}
.home-flagship .foot-legal,
.home-flagship .foot-legal a{color:var(--text-faint);}
.home-flagship .foot-legal a:hover{color:var(--text);}

/* Crisp vector brand-mark (replace the raster-PNG mask with the traced path) */
.home-flagship .brand-mark{-webkit-mask-image:url('dara-knot-path.svg');mask-image:url('dara-knot-path.svg');}

/* Quiet secondary CTAs on dark contexts (one-ask-per-section: demote, don't stack) */
.home-flagship .hero .hero-quiet,
.home-flagship .callout .callout-quiet{color:var(--accent-glow);min-height:48px;}
.home-flagship .hero .hero-quiet:hover,
.home-flagship .callout .callout-quiet:hover{color:var(--fog);}

/* Magnetic CTA — compose pull (--magx/--magy from app.js) WITH the hover lift,
   so the lift survives and the button always settles back on reset. */
.home-flagship [data-magnetic]{
  transform:translate(var(--magx,0px),var(--magy,0px));
  transition:transform .22s var(--ease);}
.home-flagship .hero .btn-primary[data-magnetic]:hover,
.home-flagship .callout .btn-primary[data-magnetic]:hover{
  transform:translate(var(--magx,0px),calc(var(--magy,0px) - 2px));}

/* Section rhythm — "What we make" is an asymmetric editorial layout with a
   tonal beat: one deep-emerald FEATURE card + two surface cards. */
.make-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s3);align-items:stretch;}
.make-grid .make-feature{grid-row:1 / span 2;}
.make-feature{position:relative;overflow:hidden;color:var(--text);justify-content:flex-end;min-height:340px;
  border:1px solid rgba(61,214,140,.24);
  background:
    radial-gradient(80% 80% at 88% 8%, rgba(47,122,72,.44), transparent 60%),
    radial-gradient(60% 70% at 8% 96%, rgba(61,214,140,.10), transparent 60%),
    linear-gradient(162deg, var(--pine-2) 0%, #123322 100%);}
.make-feature::before{display:none;}            /* dark card: no top hairline */
.make-feature > *{position:relative;z-index:1;}
.make-feature h3{color:var(--fog);font-size:clamp(24px,2.6vw,33px);margin-bottom:.4em;}
.make-feature .muted{color:var(--bone-dim);}
.make-feature .btn-quiet{color:var(--accent-glow);}
.make-feature .btn-quiet:hover{color:var(--fog);}
.make-feature:hover{transform:translateY(-6px);box-shadow:var(--sh-float);}
.make-tag{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-accent);background:var(--accent-glow);padding:5px 11px;border-radius:var(--r-pill);margin-bottom:var(--s2);}
.make-knot{position:absolute;top:-16%;right:-14%;width:64%;aspect-ratio:1;z-index:0;opacity:.1;pointer-events:none;
  background:var(--accent-glow);-webkit-mask:url('dara-knot-path.svg') center/contain no-repeat;
  mask:url('dara-knot-path.svg') center/contain no-repeat;transform:rotate(6deg);}
@media (max-width:780px){
  .make-grid{grid-template-columns:1fr;}
  .make-grid .make-feature{grid-row:auto;min-height:260px;}
}

/* Selected work — three GENUINELY distinct doorways (the headline says
   "we don't recolor templates", so the tiles must not look identical). */
/* Real GPU screenshots of the actual demo sites — you see exactly what you open. */
.home-flagship .poster.gp1 .poster-art{background:#0f1f18 url('img/work/apex.jpg') center top/cover;}   /* Apex Roofing */
.home-flagship .poster.gp2 .poster-art{background:#0a1c1d url('img/work/atlas.jpg') center top/cover;}  /* Atlas + Reed */
.home-flagship .poster.gp3 .poster-art{background:#120608 url('img/work/ferro.jpg') center top/cover;}  /* Ferro House */
/* each demo doorway = its own industry signal color (matches the Work page) so the
   three read as genuinely distinct sites, not one green wall. (B) */
.home-flagship .poster.gp1 .kind{color:#F5A742;}   /* Apex · roofing → safety amber */
.home-flagship .poster.gp2 .kind{color:#A6B6FF;}   /* Atlas · architecture → blueprint periwinkle */
.home-flagship .poster.gp3 .kind{color:#F2A488;}   /* Ferro · fine dining → warm copper-rose */

/* Develop the motif (not a stamp): vary the watermark per doorway */
.home-flagship .gp1 .knot-wm{top:auto;bottom:-18%;left:-14%;right:auto;width:62%;opacity:.12;transform:rotate(9deg);}
.home-flagship .gp2 .knot-wm{top:-15%;right:-13%;width:48%;opacity:.16;transform:rotate(-11deg);}
.home-flagship .gp3 .knot-wm{top:28%;right:-20%;width:68%;opacity:.1;transform:rotate(5deg);}