/* K1 Systems shared site styles. Visual values are governed by Marketing/Website/Brand Reference.md; code organization by Development/Website/Code Conventions.md. */
:root{
  --dark:#1D2B38; --dark-mid:#243547; --amber:#D4820A; --amber-hover:#B86E08;
  --ice:#5B9EC9; --mist:#B5C8D6; --body:#4A5A68; --bg:#F8F9FA; --white:#FFFFFF;
  --border:#EDF0F2; --caption:#7A8A98;
  --dark-border:rgba(91,158,201,.15);
  --shadow:0 2px 14px rgba(0,0,0,.08);
  --dots:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoOTEsMTU4LDIwMSwwLjA2KSIvPjwvc3ZnPg==");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--body);background:var(--dark);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'IBM Plex Sans',sans-serif;line-height:1.2;color:var(--dark)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* layout */
.wrap{max-width:960px;margin:0 auto;padding:0 48px}
.section{padding:96px 0}
.section.dark{background:var(--dark)}
.section.dark.dots{background-color:var(--dark);background-image:var(--dots)}
.section.mid{background:var(--dark-mid)}
.section.light{background:var(--bg)}
.section.white{background:var(--white)}

/* typography helpers */
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark.dots h1,.section.dark.dots h2,.section.dark.dots h3,.section.mid h1,.section.mid h2,.section.mid h3{color:var(--white)}
.section.dark p,.section.dark li,.section.dark.dots p,.section.dark.dots li,.section.mid p{color:var(--mist)}
.h1{font-size:52px;font-weight:700;letter-spacing:-.02em}
.h2{font-size:34px;font-weight:700;letter-spacing:-.01em;margin-bottom:14px}
.h3{font-size:19px;font-weight:600}
.lead{font-size:18px;max-width:640px;margin-top:18px}
.placeholder{color:var(--caption);font-style:italic;font-family:'IBM Plex Mono',monospace;font-size:.9em;background:rgba(122,138,152,.10);padding:1px 6px;border-radius:4px}
.mono{font-family:'IBM Plex Mono',monospace}
.caption{color:var(--caption);font-size:13px}

/* section label pill */
.pill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--amber);padding:4px 12px;border-radius:999px;margin-bottom:20px}
.light .pill,.white .pill{background:#FDF3E3;border:none}
.dark .pill,.mid .pill,.dots .pill{background:rgba(212,130,10,.10);border:1px solid rgba(212,130,10,.30)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:13px;padding:11px 22px;border-radius:8px;cursor:pointer;border:none;transition:background .15s,border-color .15s,color .15s}
.btn-amber{background:var(--amber);color:#fff}
.btn-amber:hover{background:var(--amber-hover)}
.btn-amber.lg{padding:20px 40px;border-radius:12px;font-size:15px}
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(91,158,201,.30)}
.btn-outline:hover{border-color:var(--ice);color:var(--ice)}
.ghost{color:var(--ice);text-decoration:underline;text-underline-offset:3px;font-weight:500;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.ghost:hover{color:#3A7EA8}
.dark .ghost:hover,.dots .ghost:hover,.mid .ghost:hover{color:var(--mist)}
.fineprint{margin-top:14px;color:var(--caption);font-size:12px;font-family:'IBM Plex Mono',monospace}

/* cards */
.card{border-radius:16px;padding:32px;transition:border-color .15s}
.card.lt{background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow)}
.card.lt:hover{border-color:var(--ice)}
.card.dk{background:var(--dark-mid);border:1px solid var(--dark-border)}
.card.dk:hover{border-color:var(--ice)}
.feature{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:32px}
.feature.centered{text-align:center}
.feature.centered .ico{margin-left:auto;margin-right:auto}
.feature p{color:var(--dark);font-weight:600;font-family:'IBM Plex Sans',sans-serif}

/* icon containers */
.ico{width:48px;height:48px;border-radius:12px;background:#EEF5FA;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ico svg{width:24px;height:24px;stroke:var(--ice);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ico-dk{width:32px;height:32px;border-radius:50%;background:rgba(91,158,201,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico-dk svg{width:18px;height:18px;stroke:var(--ice);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* grids */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(29,43,56,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--dark-border)}
.nav-inner{max-width:960px;margin:0 auto;padding:14px 48px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:20px;color:#fff;letter-spacing:-.01em}
.logo span{color:var(--ice)}
.nav .logo img{height:28px;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--mist);font-size:14px;font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{display:flex;align-items:center;gap:14px}
.mobile-cta{display:none}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-img-wrap{position:relative}
.hero-img{aspect-ratio:4/5;object-fit:cover;border-radius:16px;width:100%}
.annot{position:absolute;left:-18px;bottom:24px;background:var(--dark-mid);border:1px solid var(--dark-border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:13px;max-width:300px}
.annot .label{color:#fff;font-weight:600;font-size:13px;font-family:'IBM Plex Sans',sans-serif}
.annot .cap{color:var(--mist);font-size:11.5px;font-family:'IBM Plex Sans',sans-serif;line-height:1.35;margin-top:3px}
.scroll-cue{margin-top:30px;color:var(--caption);font-size:12px;font-family:'IBM Plex Mono',monospace;display:flex;align-items:center;gap:8px;opacity:.6}
.hero-sub{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:20px;color:var(--ice);margin-top:12px;letter-spacing:-.01em}

/* range-signal strip */
.range{margin:28px 0;display:flex;align-items:center;gap:14px;max-width:520px}
.range .lab{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--mist);white-space:nowrap}
.range .rail{flex:1;height:2px;background:rgba(91,158,201,.30);position:relative;border-radius:2px}
.range .node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center}
.range .node svg{width:16px;height:16px;stroke:var(--ice);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* checklist */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:18px 32px;margin:28px 0}
.check{display:flex;gap:14px;align-items:flex-start}
.check .ck{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:#EEF5FA;display:flex;align-items:center;justify-content:center;margin-top:2px}
.check .ck svg{width:15px;height:15px;stroke:var(--ice);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.check span{color:var(--dark);font-size:15px}
.soft-cta{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:28px 32px;margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.soft-cta p{margin:0;color:var(--body)}

/* teaser cards */
.teaser h3{color:var(--ice);font-size:18px;margin-bottom:0}
.teaser p{font-size:14px;color:var(--body);margin-bottom:16px}

/* process steps — circle centered over its label, connectors pull the eye 1→2→3→4 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.step{position:relative;text-align:center}
.step .num{width:64px;height:64px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:22px;margin:0 auto 16px}
.step.last .num{background:var(--amber)}
.step h3{font-size:16px;margin-bottom:6px}
.step p{font-size:14px}
/* connector line between circles (desktop 4-col only; the 2-col/1-col layouts drop it) */
@media(min-width:1025px){
  .step:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 40px);width:calc(100% - 56px);height:2px;background:rgba(91,158,201,.35)}
}
.support{margin-top:32px;color:var(--body);font-weight:500}
.dots .support,.dark .support{color:var(--mist)}

/* work cards */
/* Every card graphic shares one 16:9 box so heights line up across Home and Work.
   The schematics keep their own shape and center inside it; navy letterbox is invisible against the card. */
.work-thumb{position:relative;aspect-ratio:16/9;border-radius:12px;margin:-8px -8px 20px;overflow:hidden;background:var(--dark)}
.work-thumb svg,.work-thumb iframe{position:absolute;inset:0;width:100%;height:100%;display:block;border:0}
.result-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--dark-border)}
.result-lab{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ice);text-transform:uppercase}
.result-txt{color:#fff;font-weight:500;margin-top:4px}
.card.dk h3{margin-bottom:10px}
.card.dk p{font-size:14px}
/* result cards stack as a column so the Result line always sits at the bottom edge, aligned across a row */
.card.dk:has(.result-row){display:flex;flex-direction:column}
.card.dk:has(.result-row) .result-row{margin-top:auto}
/* homepage proof teaser (3 cards): reserve a 2-line title so the Result divider lines up across all
   three; the result sits right under the title instead of floating to the bottom. Grid keeps the
   three cards equal height, so the tallest result sets the height and the divider stays consistent. */
.g3 .card.dk h3{min-height:2.4em;line-height:1.15;margin-bottom:0}
.g3 .card.dk:has(.result-row) .result-row{margin-top:16px}

/* staged-empty proof panel */
.proof-panel{background:var(--dark-mid);border:1px solid var(--dark-border);border-radius:16px;padding:28px 32px;display:flex;align-items:center;gap:20px}
.proof-panel .ico-dk{width:44px;height:44px}
.proof-panel .ico-dk svg{width:24px;height:24px}
.proof-panel .pt{font-family:'IBM Plex Sans',sans-serif;font-weight:600;color:#fff;font-size:16px}
.proof-panel .pc{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--caption);margin-top:4px}

/* services ladder */
.svc-card{margin-bottom:24px}
/* card title colors: ice on the light cards, white on the dark Bespoke anchor (the dark rule wins by specificity) */
.svc-card .icon-head h3{color:var(--ice)}
.svc-card.dk .icon-head h3{color:#fff}
/* the "standard rate" line under each price */
.rate-note{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--caption);margin:0 0 18px}
/* icon + title share one row, vertically centered (What I do teasers + every Services card).
   On the Bespoke card the pill rides along, pushed to the far right of the row. */
.icon-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.icon-head .ico{margin-bottom:0;flex-shrink:0}
/* line box seats cap-height high, so a single-line title reads slightly above the icon's center;
   the small nudge optically centers it against the icon */
.icon-head h3{margin-bottom:0;line-height:1.1;position:relative;top:2px}
.icon-head .pill{margin-bottom:0;margin-left:auto}
/* the dark "Bespoke" anchor card bleeds into the section, so ice barely reads; amber gives it the same hover lift as the light cards */
.svc-card.dk:hover{border-color:var(--amber)}
.svc-card .price{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ice);margin:6px 0 18px}
.svc-card.dk .price{color:var(--mist)}
.svc-list{list-style:none;margin:16px 0}
.svc-list li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14px;color:var(--body)}
.svc-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:no-repeat center/contain;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B9EC9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.svc-excl{list-style:none;margin:10px 0}
.svc-excl li{position:relative;padding-left:26px;margin-bottom:8px;font-size:13px;color:var(--caption)}
.svc-excl li::before{content:"–";position:absolute;left:6px;color:var(--caption)}
.svc-example{background:var(--bg);border-radius:10px;padding:14px 16px;margin:16px 0}
.svc-example .el{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--caption);text-transform:uppercase}
.svc-example .eq{font-style:italic;color:var(--dark);font-size:14px;margin-top:4px}

/* about timeline (abstract ascending) — now an embedded animated schematic sized to its 900x240 ratio */
.timeline{margin:36px 0}
.timeline svg{width:100%;height:auto;display:block}
.timeline-embed{position:relative;width:100%;padding-top:26.67%}
.timeline-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.about-img{aspect-ratio:4/5;object-fit:cover;border-radius:16px;width:100%}
.principles{list-style:none;margin:8px 0}
.principles li{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.principles li .ico{margin-bottom:0;flex-shrink:0}
.principles li span{color:var(--body);font-size:15px}
.aside-line{background:var(--bg);border-left:3px solid var(--ice);padding:14px 18px;border-radius:0 8px 8px 0;margin:24px 0;font-size:15px}
.aside-line a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}

/* social row */
.social{display:flex;gap:14px;margin:18px 0}
.social a{width:38px;height:38px;border-radius:8px;border:1px solid var(--dark-border);display:flex;align-items:center;justify-content:center}
.social a svg{width:18px;height:18px;stroke:var(--ice);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.light .social a,.white .social a{border-color:var(--border)}
.social a:hover{border-color:var(--ice)}

/* FAQ */
.faq{max-width:640px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;color:var(--dark);font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex-shrink:0;width:22px;height:22px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--ice);border-radius:2px}
.faq summary .pm::before{left:0;top:10px;width:22px;height:2px}
.faq summary .pm::after{left:10px;top:0;width:2px;height:22px;transition:transform .2s}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 24px 22px;color:var(--body);font-size:15px}

/* footer */
.footer{background:var(--dark);border-top:1px solid var(--dark-border);padding:56px 0 40px}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer a,.footer p{color:var(--mist);font-size:14px}
.footer .mono{font-family:'IBM Plex Mono',monospace;font-size:13px}
.footer .logo{margin-bottom:14px}
.footer .logo img{height:24px;display:block}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--dark-border);color:var(--caption);font-size:12px}


/* article body */
.art-body{max-width:720px}
.art-lead{font-size:18px;line-height:1.7;margin-top:16px;color:var(--body)}
.art-body>p{font-size:16px;line-height:1.8;color:var(--body);margin-top:14px}
.dark .art-body>p,.dots .art-body>p{color:var(--mist)}
.art-steps{list-style:none;counter-reset:art-step;margin:24px 0}
.art-steps li{counter-increment:art-step;position:relative;padding-left:36px;margin-bottom:16px;font-size:15px;line-height:1.7;color:var(--body)}
.art-steps li::before{content:counter(art-step);position:absolute;left:0;top:1px;width:24px;height:24px;background:var(--dark);color:#fff;border-radius:50%;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:12px;text-align:center;line-height:24px}
.art-img-ph{background:var(--bg);border:1.5px dashed var(--border);border-radius:12px;padding:36px 32px;margin:28px 0;text-align:center}
.art-img-ph-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--caption);margin-bottom:10px}
.art-img-ph-desc{font-size:14px;color:var(--caption);font-style:italic;max-width:480px;margin:0 auto}

/* testimonial / client-review pull-quote (reusable) — built for calm confidence, not a testimonial card:
   a section-label pill, one oversized Ice-Blue opening quote mark, the quote as the hero with room to
   breathe, then a tight attribution + verifiable-link cluster (the reveal). Works on light or dark
   sections. Markup + usage: Brand System → Component Library "Testimonial pull-quote". */
.tstm{position:relative;max-width:640px}
.tstm .pill{margin-bottom:26px}
/* one confident, oversized Ice-Blue opening mark on its own line above the quote (ice = structure accent).
   No closing mark — the attribution below closes it, cleaner than bracketing a multi-line quote. */
.tstm-q::before{content:'\201C';display:block;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:70px;line-height:.55;color:var(--ice);opacity:.5;margin-bottom:8px}
.tstm-q{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:28px;line-height:1.42;letter-spacing:-.01em;color:var(--dark)}
.section.dark .tstm-q,.section.mid .tstm-q{color:#fff}
/* the reveal: who said it + the verifiable proof, grouped tight so the link is never an orphan block */
.tstm-by{display:flex;flex-direction:column;gap:3px;margin-top:30px}
.tstm-name{font-family:'IBM Plex Sans',sans-serif;font-weight:600;font-size:15px;color:var(--dark)}
.section.dark .tstm-name,.section.mid .tstm-name{color:#fff}
.tstm-role{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--caption)}
.section.dark .tstm-role,.section.mid .tstm-role{color:var(--mist)}
.tstm-link{align-self:flex-start;margin-top:10px}
.tstm-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
  .tstm-q::before{font-size:58px}
  .tstm-q{font-size:23px}
}

/* "hover to replay" hint — lives on the page, inline directly below a hover-replay graphic
   (never inside the schematic iframe). Hover-capable devices only; fades while the graphic above
   it is hovered (the replay is happening). Placed as the embed's next sibling. */
.replay-hint{display:none}
@media (hover:hover){
  .replay-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 28px;
    font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--caption);opacity:.45;pointer-events:none;transition:opacity .3s ease}
  .replay-hint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  :hover + .replay-hint{opacity:0}
  /* Sit the hint one line below its graphic. The embed carries a larger bottom margin meant to space
     the graphic from following copy; override it so the graphic-to-hint gap reads like line spacing,
     and carry the block rhythm to the next element on the hint's own margin-bottom instead. */
  :has(+ .replay-hint){margin-bottom:6px!important}
}

/* sub-intro spacing */
.sub-head{margin-bottom:50px}
.sub-head .lead{margin-top:14px}

/* responsive */
@media(max-width:1024px){
  .h1{font-size:44px}
  .g3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .wrap{padding:0 24px}
  .section{padding:64px 0}
  .nav-inner{padding:14px 24px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--dark);border-bottom:1px solid var(--dark-border);padding:20px 24px;gap:18px}
  .nav-links.open a{color:var(--mist);font-size:16px}
  .nav-links.open .btn{justify-content:center}
  .nav-links.open .mobile-cta{display:flex}
  .desktop-cta{display:none}
  .h1{font-size:40px}
  .h2{font-size:28px}
  .hero-grid,.g2,.g3,.about-grid,.checklist,.steps,.hero-grid{grid-template-columns:1fr}
  .hero-img-wrap{margin-top:16px}
  .annot{left:12px}
  .range{flex-wrap:wrap}
  .footer-grid{flex-direction:column}
  .btn{width:100%;justify-content:center}
  .nav-cta .btn{width:auto}
  .soft-cta .btn{width:auto}
}


/* ===== work.html only ===== */
.vid-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:10px}
.vid-slate{background:var(--dark-mid);border:1px solid var(--dark-border);border-radius:12px;overflow:hidden}
.vid-thumb{position:relative;width:100%;padding-top:56.25%;background:#16212B}
.vid-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vid-thumb .play svg{width:34px;height:34px;stroke:var(--ice);fill:none;stroke-width:1.4}
.vid-meta{padding:11px 13px}
.vid-meta .vt{color:#fff;font-weight:600;font-size:13px;font-family:'IBM Plex Sans',sans-serif}
.vid-meta .vc{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--caption);margin-top:3px;text-transform:uppercase;letter-spacing:.06em}
.rev-strip{background:var(--dark-mid);border:1px dashed var(--dark-border);border-radius:14px;padding:20px 24px;margin-top:12px;display:flex;align-items:center;gap:16px}
.rev-strip .ico-dk{width:42px;height:42px;flex-shrink:0}
.rev-strip .rt{color:#fff;font-weight:600;font-size:15px;font-family:'IBM Plex Sans',sans-serif}
.rev-strip .rc{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--caption);margin-top:4px}
.band-sub{color:var(--mist);font-size:14px;margin:6px 0 0;opacity:.85}
.cap-tag{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--caption);margin-top:10px}
@media(max-width:640px){.vid-grid{grid-template-columns:1fr 1fr}}
/* above-the-fold: tighten the Work hero and the gap to Reviews so video + reviews land before the
   scroll. Deliberate page-specific exception to the 96px rhythm; the rest of the page keeps it. */
#building-in-the-open{padding-top:52px;padding-bottom:48px}
#reviews{padding-top:48px}
/* Earlier work now uses the same carousel as Delivered work; the stage supplies the 68px inset. */
/* Reserve title (2 lines) + result (3 lines) so the Result separator lines up card to card */
#earlier-work .card.dk h3{min-height:2.4em}
#earlier-work .result-txt{min-height:4.8em}

/* ===== horizontal card carousel (work.html: Delivered work + Earlier work) ===== */
.carousel{margin-top:24px}
/* side gutters hold the arrows fully off the cards (they read as a scroll control, not an overlay) */
.carousel-stage{position:relative;padding:0 68px}
/* vertical padding leaves room for the card's hover lift + shadow (overflow-x:auto forces
   overflow-y to clip, which would otherwise crop the top of a lifted card) */
.carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;padding:10px 0}
.carousel-viewport::-webkit-scrollbar{display:none}
.carousel-track{display:flex;gap:24px;align-items:stretch}
.carousel-track>*{flex:0 0 calc(50% - 12px);scroll-snap-align:start}
/* arrows are the section's real action, so they carry the amber; bigger and parked in the gutters */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:60px;height:60px;border-radius:50%;background:var(--dark-mid);border:1px solid rgba(212,130,10,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,background .15s,opacity .15s}
.carousel-arrow svg{width:26px;height:26px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carousel-arrow:hover{border-color:var(--amber);background:rgba(212,130,10,.12)}
.carousel-arrow.prev{left:2px}
.carousel-arrow.next{right:2px}
.carousel-arrow[disabled]{opacity:.3;cursor:default;border-color:var(--dark-border)}
/* position indicator: slim track, Ice-Blue thumb (a structural position cue, not an action); draggable to scrub */
.carousel-bar{position:relative;height:6px;max-width:160px;margin:22px auto 0;background:var(--dark-border);border-radius:999px;overflow:hidden;cursor:pointer;touch-action:none}
.carousel-bar.grabbing{cursor:grabbing}
/* no transition on left: the thumb follows scroll position each frame so it moves in lockstep with
   the cards (a transition here makes it lag behind the smooth scroll). */
.carousel-thumb{position:absolute;top:0;left:0;height:100%;width:40%;background:var(--ice);border-radius:999px;transition:width .2s ease}
@media(max-width:640px){
  .carousel-stage{padding:0 44px}
  .carousel-track>*{flex:0 0 100%}
  .carousel-arrow{width:40px;height:40px}
  .carousel-arrow svg{width:18px;height:18px}
}

/* ===== interaction: hover feedback ===== */
/* Rule: LIFT is reserved for whole-card link targets (the affordance for "this card is clickable").
   Cards with their own CTA button, or presentation-only cards, get the border HIGHLIGHT but no lift. */
.card,.feature,.vid-slate,.rev-strip,.faq details,.soft-cta{transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.feature:hover,.vid-slate:hover,.rev-strip:hover,.faq details:hover,.faq details[open],.soft-cta:hover{border-color:var(--ice)}
.card:has(.card-link):hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.10)}
/* whole-card click target */
.card-link{position:absolute;inset:0;z-index:3}
.card:has(.card-link){position:relative;cursor:pointer}

/* work tier alternation: on Dark Secondary (mid) sections, dark cards invert to navy so they stay legible */
.section.mid .card.dk,.section.mid .vid-slate,.section.mid .rev-strip{background:var(--dark)}

/* ===== scroll-into-view motion (Brand Reference §13); class added by site.js only when motion is allowed ===== */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* anchored sections clear the sticky nav when jumped to */
.section[id]{scroll-margin-top:72px}

/* ===== story pages only: sticky breadcrumb bar =====
   At rest it floats transparent over the hero (no line, breathing room). As the page scrolls it
   pins just under the nav and only then gains its own background + separating line (.stuck, set by
   site.js). The whole bar is one back-link, so hovering anywhere in it highlights and navigates.
   top:71px == nav height, so when pinned the bar sits flush under the nav with its full padding
   visible and the text vertically centered. margin-top (== the story hero's reduced top padding
   below) centers the text between the nav separator and the pill while at rest. */
.storybar{position:sticky;top:71px;margin-top:20px;z-index:90;background:transparent;border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease}
.storybar.stuck{background:rgba(29,43,56,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--dark-border)}
.storybar .bar{max-width:960px;margin:0 auto;padding:6px 48px;display:flex;align-items:center;gap:14px}
.storybar .back{color:var(--ice);font-family:'IBM Plex Mono',monospace;font-size:13px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:color .15s}
.storybar .back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.storybar .crumb-title{color:var(--caption);font-family:'IBM Plex Mono',monospace;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.storybar .bar:hover .back,.storybar .bar:hover .crumb-title{color:#fff}
/* story hero leads with reduced top padding so the at-rest breadcrumb centers between nav and pill
   (storybar margin-top above the bar == this padding below it) */
.storybar + main .page > section:first-child{padding-top:20px}
@media(max-width:640px){.storybar .bar{padding:6px 24px}}