/* KIWA 際 — case-study styles (/work/). Loads AFTER pages.css (reuses nav, footer, base).
   Each case-study page sets its brand palette in an inline :root block:
     --brand      primary brand colour
     --brand-2    secondary accent
     --brand-deep darkest brand tone (mockup / strong text)
   Everything else (washes, borders, contrast) derives from those via color-mix. */

:root{
  --brand:#D8401F; --brand-2:#15130F; --brand-deep:#15130F;
}
/* On the dark base a client's brand colour cannot be used as ink: navy at
   1.37:1 and crimson at 2.98:1 simply do not render. Each brand is lifted
   toward the page's own text colour in two tiers, so the client stays
   recognisably themselves while clearing WCAG:
     --brand-hi   50% brand + 50% text — anything under 18px      5.5-9.2:1
     --brand-mid  72% brand + 28% text — display text, icons, rules 3.0-7.0:1
     --brand-deep is now a SURFACE role only, never text.
   Surfaces mix toward the page plate rather than toward #000, which on a
   near-black canvas would fall below the page floor and disappear.
   These are declared on .cs-scope (and any element that re-declares --brand)
   rather than :root, because each case study scopes its own brand there —
   defining them at :root would resolve every tier against the fallback. */
.cs-scope,[style*="--brand"]{
  --brand-hi:color-mix(in srgb,var(--brand) 50%,var(--ink));
  --brand-mid:color-mix(in srgb,var(--brand) 72%,var(--ink));
  --brand-line:color-mix(in srgb,var(--brand) 38%,var(--hair-2));
  --brand-plate:color-mix(in srgb,var(--brand) 10%,var(--paper-3));
}
/* derived tones */
.cs-scope{
  --wash:color-mix(in srgb,var(--brand) 7%,var(--paper));
  --wash-2:color-mix(in srgb,var(--brand) 14%,var(--paper));
  --brand-hair:color-mix(in srgb,var(--brand) 26%,var(--hair));
  --on-brand:#fff;
}

.cs{max-width:1140px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.cs-sec{padding:clamp(3rem,2rem + 4vw,5.5rem) 0;border-top:1px solid var(--hair)}
.cs-sec:first-of-type{border-top:0}
.cs-h{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem}
.cs-h::before{content:attr(data-n);color:var(--brand-hi);font-weight:500}
.cs-sec h2{font-weight:600;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.7rem,1.2rem + 2.2vw,2.8rem);max-width:20ch}
.cs-sec h2 .it{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.cs-sec p.lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--body);max-width:56ch;margin-top:1.1rem}
.cs-sec p{color:var(--body);max-width:64ch}
.cs-sec p+p{margin-top:1rem}
.cs-sec a{color:var(--brand-hi);border-bottom:1px solid var(--brand-hair)}
.cs-sec a:hover{border-bottom-color:var(--brand)}

/* ============ HERO ============ */
.cs-hero{position:relative;overflow:hidden;background:var(--wash);border-bottom:1px solid var(--brand-hair)}
.cs-hero__wash{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% -10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 60%);}
.cs-hero__in{position:relative;max-width:1140px;margin-inline:auto;padding:clamp(2.4rem,1.5rem + 4vw,4.5rem) clamp(1.25rem,4vw,3rem) clamp(2.6rem,2rem + 3vw,4rem)}
.cs-kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-hi);display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.cs-kicker .dot{width:5px;height:5px;border-radius:50%;background:var(--brand)}
.cs-hero h1{font-weight:600;letter-spacing:-.04em;line-height:.98;font-size:clamp(2.8rem,1.6rem + 6vw,6.2rem);margin:1.1rem 0 0;color:var(--ink)}
.cs-hero h1 .it{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.015em;color:var(--brand-mid)}
.cs-hero__sub{font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem);line-height:1.45;color:var(--body);max-width:44ch;margin-top:1.4rem}
.cs-hero__mark{margin-top:2.2rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cs-hero__mark img{height:clamp(34px,5vw,48px);width:auto}
.cs-hero__live{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* ============ FACTS ============ */
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-top:2.6rem}
.cs-fact{background:var(--paper);padding:1.1rem 1.2rem}
.cs-fact dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:.4rem}
.cs-fact dd{font-weight:600;letter-spacing:-.01em;color:var(--ink);font-size:.98rem;line-height:1.3}

/* ============ BRAND SHOWCASE ============ */
.cs-brand{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
@media (max-width:720px){.cs-brand{grid-template-columns:1fr}}
.cs-stage{background:var(--wash);border:1px solid var(--brand-hair);border-radius:18px;
  min-height:230px;display:grid;place-items:center;padding:2rem;position:relative;overflow:hidden}
.cs-stage::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%)}
.cs-stage img{position:relative;max-width:min(78%,420px);height:auto}
.cs-swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.cs-sw{flex:1 1 5.5rem;border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:var(--paper)}
.cs-sw__chip{height:56px}
.cs-sw__meta{padding:.5rem .6rem}
.cs-sw__meta b{display:block;font-size:.78rem;letter-spacing:-.01em}
.cs-sw__meta span{font-family:var(--mono);font-size:.64rem;color:var(--stone);text-transform:uppercase;letter-spacing:.06em}
.cs-type{margin-top:1.4rem;border-top:1px solid var(--hair);padding-top:1.1rem}
.cs-type__spec{font-size:clamp(2rem,1.2rem + 3vw,3.4rem);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--brand-mid)}
.cs-type__name{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:.5rem}

/* ============ BUILD / PRODUCT MOCK ============ */
.cs-build{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media (max-width:820px){.cs-build{grid-template-columns:1fr}}
.cs-build__copy ul{list-style:none;padding:0;margin-top:1.2rem}
.cs-build__copy li{position:relative;padding-left:1.3rem;margin:.6rem 0;color:var(--body)}
.cs-build__copy li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--brand)}
.cs-build__copy li b{color:var(--ink);font-weight:600}

/* device frame */
.mock{border-radius:14px;border:1px solid var(--hair-2);background:var(--paper);overflow:hidden;
  box-shadow:0 40px 70px -40px color-mix(in srgb,var(--brand-deep) 55%,transparent);
  transform:rotate(-.4deg)}
.mock--dark{background:var(--brand-plate);border-color:var(--brand-line)}
.mock__bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--paper) 90%,var(--brand))}
.mock--dark .mock__bar{border-bottom-color:var(--hair-2);background:color-mix(in srgb,var(--brand) 8%,var(--paper-2))}
.mock__dot{width:9px;height:9px;border-radius:50%;background:var(--hair-2)}
.mock__url{margin-left:.6rem;font-family:var(--mono);font-size:.62rem;color:var(--stone);letter-spacing:.04em}
.mock--dark .mock__url{color:rgba(255,255,255,.5)}
.mock__body{padding:1.1rem}
.mock--dark .mock__body{color:#F1EDE4}

/* mock primitives */
.mk-row{display:flex;gap:.6rem;align-items:center}
.mk-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-hi);font-weight:600}
.mk-h{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;margin:.2rem 0 .1rem}
.mock--dark .mk-h{color:#fff}
.mk-sub{font-size:.72rem;color:var(--stone)}
.mock--dark .mk-sub{color:rgba(255,255,255,.55)}
.mk-field{flex:1;border:1px solid var(--hair);border-radius:9px;padding:.5rem .6rem;font-size:.72rem;color:var(--body);background:var(--paper)}
.mk-field span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);margin-bottom:.15rem}
.mk-card{border:1px solid var(--hair);border-radius:11px;padding:.7rem .8rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;background:var(--paper)}
.mock--dark .mk-card{background:var(--paper-2);border-color:var(--hair-2)}
.mk-thumb{width:46px;height:32px;border-radius:6px;background:color-mix(in srgb,var(--brand) 18%,var(--paper));flex:none}
.mock--dark .mk-thumb{background:color-mix(in srgb,var(--brand) 40%,var(--paper-3))}
.mk-price{font-weight:700;color:var(--brand-hi)}
.mock--dark .mk-price{color:var(--brand-hi)}
.mk-btn{background:var(--brand);color:var(--on-brand);border-radius:8px;padding:.5rem .9rem;font-size:.72rem;font-weight:600;text-align:center}
.mk-btn--2{background:var(--brand-2);color:#fff}
.mk-chip{font-size:.6rem;font-weight:600;padding:.2rem .5rem;border-radius:999px;background:color-mix(in srgb,var(--brand) 15%,var(--paper));color:var(--brand-hi)}
.mock--dark .mk-chip{background:color-mix(in srgb,var(--brand) 24%,var(--paper-3));color:var(--brand-hi)}
.mk-stat{flex:1;border:1px solid var(--hair);border-radius:10px;padding:.6rem .7rem}
.mock--dark .mk-stat{border-color:rgba(255,255,255,.09)}
.mk-stat b{display:block;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;color:var(--brand-hi)}
.mock--dark .mk-stat b{color:#fff}
.mk-stat span{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.mk-line{height:8px;border-radius:5px;background:color-mix(in srgb,var(--brand) 12%,var(--paper))}
.mock--dark .mk-line{background:rgba(255,255,255,.08)}
.mk-bars{display:flex;align-items:flex-end;gap:.35rem;height:52px}
.mk-bars i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--brand) 55%,var(--paper))}
.mock--dark .mk-bars i{background:var(--brand)}
.mk-gap{height:.55rem}
.mk-gap--lg{height:.9rem}

/* ============ CRAFT ============ */
.cs-craft{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.4rem;margin-top:.5rem}
.cs-craft__item{border-top:2px solid var(--brand-mid);padding-top:.9rem}
.cs-craft__item h3{font-weight:600;letter-spacing:-.02em;font-size:1.05rem}
.cs-craft__item p{font-size:.92rem;margin-top:.4rem;max-width:34ch}

/* ============ PAGER / NEXT ============ */
.cs-next{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-top:1rem}
@media (max-width:600px){.cs-next{grid-template-columns:1fr}}
.cs-next a{background:var(--paper);padding:1.3rem 1.4rem;border-bottom:0;display:block;transition:background .18s var(--ease)}
.cs-next a:hover{background:var(--wash)}
.cs-next span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.cs-next b{display:block;font-weight:600;letter-spacing:-.02em;font-size:1.15rem;margin-top:.35rem;color:var(--ink)}
.cs-next a:hover b{color:var(--brand-hi)}
.cs-next .r{text-align:right}

/* reuse pages.css .cta-band but tint the button to brand */
.cs-scope .cta-band .btn-solid{background:var(--brand-deep)}
/* keep the primary CTA on-brand per case study — override the site-wide vermilion hover glow/arrow */
.cs-scope .cta-band .btn-solid:hover,.cs-scope .cta-band .btn-solid:focus-visible{background:var(--brand);box-shadow:0 10px 24px -8px color-mix(in srgb,var(--brand) 55%,transparent)}
.cs-scope .cta-band .btn-solid:hover .arr,.cs-scope .cta-band .btn-solid:focus-visible .arr{color:var(--on-brand)}
.cs-scope .cta-band .it{color:var(--brand-hi)}

/* ============ MOTION (progressive, CSP-safe) ============ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cs-rev{opacity:0;transform:translateY(22px);animation:csRise .9s var(--ease,cubic-bezier(.16,1,.3,1)) forwards;
      animation-timeline:view();animation-range:entry 0% cover 26%}
  }
  .cs-hero h1{animation:csRise 1s cubic-bezier(.16,1,.3,1) both}
  .cs-hero__sub{animation:csRise 1s cubic-bezier(.16,1,.3,1) .08s both}
  .cs-hero__mark{animation:csRise 1s cubic-bezier(.16,1,.3,1) .16s both}
}
@keyframes csRise{to{opacity:1;transform:none}}

/* ============ /work/ INDEX CARDS ============ */
.wk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.3rem;padding:2.4rem 0 1rem}
.wk-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;
  border:1px solid var(--hair);border-radius:18px;padding:1.5rem 1.5rem 1.4rem;overflow:hidden;
  min-height:16rem;background:var(--paper);transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.wk-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:radial-gradient(110% 80% at 100% 0%,color-mix(in srgb,var(--c) 18%,transparent),transparent 62%)}
.wk-card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -34px color-mix(in srgb,var(--c) 60%,transparent);border-color:color-mix(in srgb,var(--c) 40%,var(--hair))}
.wk-card__top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.wk-card__mark{height:30px;width:auto;max-width:62%}
.wk-card__tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--c);padding:.24rem .55rem;border-radius:999px;white-space:nowrap}
.wk-card__foot{position:relative}
.wk-card__foot h3{font-weight:600;letter-spacing:-.025em;font-size:1.4rem;line-height:1.1}
.wk-card__foot p{color:var(--body);font-size:.9rem;margin-top:.4rem;max-width:34ch}
.wk-card__go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;font-size:.82rem;font-weight:600;color:var(--c)}
.wk-card__go .arr{transition:transform .2s var(--ease)}
.wk-card:hover .wk-card__go .arr{transform:translateX(4px)}

/* ============ V2 — CHAPTERED, SCREEN-RICH CASE PAGES ============ */

/* phone frame — combine with .mock--dark to reuse the dark mk-* primitives */
.phone{background:color-mix(in srgb,var(--brand) 12%,var(--paper-3));border:1px solid var(--brand-line);box-shadow:0 40px 90px -50px color-mix(in srgb,var(--brand) 60%,transparent),inset 0 1px 0 rgba(242,238,231,.06);border-radius:24px;border:1px solid color-mix(in srgb,var(--brand-deep) 55%,#000);background:var(--brand-deep);overflow:hidden;
  box-shadow:0 30px 60px -30px color-mix(in srgb,var(--brand-deep) 65%,transparent)}
.phone__notch{height:20px;display:grid;place-items:center}
.phone__notch::after{content:"";width:34%;height:5px;border-radius:99px;background:rgba(255,255,255,.16)}
.phone__body{padding:.75rem .7rem 1rem}

/* outcome stat band */
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin-top:.5rem}
.cs-stat{background:var(--paper);padding:1.4rem 1.3rem;transition:background-color .8s var(--ease)}
.cs-stat b{display:block;font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);font-weight:700;letter-spacing:-.03em;
  color:var(--brand);font-variant-numeric:tabular-nums}
.cs-stat span{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* icon feature grid */
.cs-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:.5rem}
.cs-feat__item{border:1px solid var(--hair);border-radius:14px;padding:1.15rem 1.2rem;background:var(--paper);
  transition:background-color .8s var(--ease),border-color .8s var(--ease)}
.cs-feat__item svg{width:26px;height:26px;stroke:var(--brand);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:.7rem}
.cs-feat__item h3{font-weight:600;letter-spacing:-.02em;font-size:1rem;color:var(--ink)}
.cs-feat__item p{font-size:.88rem;margin-top:.3rem;color:var(--body)}

/* mobile-duo moment */
.cs-duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
@media (max-width:820px){.cs-duo{grid-template-columns:1fr}}
.cs-duo__phones{display:flex;justify-content:center;gap:clamp(.8rem,2vw,1.6rem);padding:1.2rem 0}
.cs-duo__phones .phone{flex:0 1 225px;transform:rotate(-2.4deg)}
.cs-duo__phones .phone+.phone{transform:rotate(2.4deg) translateY(1.3rem)}

/* process strip */
.cs-proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.2rem;margin-top:.5rem}
.cs-proc__step{border-top:1px solid var(--hair);padding-top:.8rem}
.cs-proc__step::before{content:attr(data-n);font-family:var(--mono);font-size:.66rem;color:var(--brand);letter-spacing:.14em}
.cs-proc__step b{display:block;font-weight:600;font-size:.95rem;margin-top:.35rem;letter-spacing:-.015em;color:var(--ink)}
.cs-proc__step p{font-size:.82rem;color:var(--stone);margin-top:.25rem}

/* on ink chapters, lift the brand accent toward white so dark brand colours stay vivid */
.cs-sec--ink .cs-stat b,
.cs-sec--ink .cs-h::before,
.cs-sec--ink .cs-proc__step::before{color:var(--brand-hi)}
.cs-sec--ink .cs-feat__item svg{stroke:var(--brand-mid)}
.cs-sec--ink .cs-sec a{color:var(--ink)}

/* Ink bands: on the light site these were the dark chapters — the moment the
   page changed tone. On the dark base that contrast would vanish, so the band
   inverts its role and becomes the WASHI scene: the same rhythm, the same
   "this chapter is different" beat, carried by the studio's one light surface
   rather than by darkness. Content inside inherits the light tokens. */
.cs-sec--ink{
  --paper:#F6F3EC;--paper-2:#EDE8DE;--paper-3:#E4DED0;
  --ink:#1A1714;--ink-hi:#0E0C0A;--ink-soft:#332E27;
  --body:#4C463B;--stone:#6A6358;
  --hair:#DED8CB;--hair-2:#CFC8B8;--hair-3:#A8A092;
  --vermilion-text:var(--vermilion-on-light);
  background:#F6F3EC;color:var(--ink);
  box-shadow:0 0 0 100vmax #F6F3EC;clip-path:inset(0 -100vmax);
}
/* inside the light band a client's brand must darken, not lighten */
.cs-sec--ink{
  --brand-hi:color-mix(in srgb,var(--brand) 62%,var(--ink));
  --brand-mid:color-mix(in srgb,var(--brand) 80%,var(--ink));
  --brand-line:color-mix(in srgb,var(--brand) 34%,var(--hair-2));
  --brand-plate:color-mix(in srgb,var(--brand) 8%,var(--paper-2));
}
.cs-sec--ink+.cs-sec{border-top:0}

/* finale band: CTA elements re-tinted for the dark surface */
.cs-sec--ink .cta-band .it{color:color-mix(in srgb,var(--brand) 55%,#fff)}
.cs-sec--ink .cta-band .btn-solid,.cs-scope .cs-sec--ink .cta-band .btn-solid{background:var(--ink);color:var(--paper)}
.cs-scope .cs-sec--ink .cta-band .btn-solid:hover,.cs-scope .cs-sec--ink .cta-band .btn-solid:focus-visible{background:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.cs-scope .cs-sec--ink .cta-band .btn-solid:hover .arr{color:var(--brand)}
.cs-sec--ink .cs-next a:hover{background:#1D1A15}


/* ---- dark re-skin: the conversion control must never be dark-on-dark ---- */
.cs-scope .cta-band .btn-solid{background:var(--ink);color:var(--paper)}
.cs-scope .cta-band .btn-solid:hover{background:var(--ink-hi);
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--brand) 70%,transparent)}
.cs-scope .cta-band .it{color:var(--brand-mid)}