/* Kura-Tu — kura-tu.com
   Palette is the app's: orange #f15a29, near-black, white. Three colours per
   view, per the design system. Type is system-native so nothing is fetched. */

:root{
  --orange:#f15a29;
  --ink:#14161a;
  --ink-2:#3d434d;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --bg-2:#f7f7f8;
  --bg-dark:#0e0e11;
  --measure:68ch;
  --pad:clamp(1.25rem,5vw,2.5rem);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  line-height:1.6;font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}

.wrap{width:min(1120px,100% - 2*var(--pad));margin-inline:auto}
.prose{width:min(var(--measure),100% - 2*var(--pad));margin-inline:auto}

h1,h2,h3{line-height:1.15;letter-spacing:-0.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem)}
h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);margin-top:2.5em}
h3{font-size:clamp(1.125rem,1.05rem + .4vw,1.375rem);margin-top:2em}
p,ul,ol{margin:0 0 1.1em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
small{color:var(--muted)}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
/* Header uses the same measure as the page content, so the wordmark starts
   where the body text starts and the nav ends where it ends. */
.site-head .wrap{display:flex;align-items:center;gap:1rem;
  min-height:124px;flex-wrap:wrap}
/* Scales with the viewport so it stays large on desktop without swamping a
   phone screen. */
.brand img{height:clamp(52px,6vw,88px);width:auto}
.site-nav{margin-left:auto;display:flex;gap:1.5rem;flex-wrap:wrap}
@media(max-width:640px){
  .site-head .wrap{min-height:96px}
  .site-nav{margin-left:0;gap:1rem}
}
.site-nav a{color:var(--ink-2);font-weight:500;font-size:.9375rem}
.site-nav a[aria-current="page"]{color:var(--orange)}

/* hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,6vw,4rem)}
.hero .wrap{display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.eyebrow{color:var(--orange);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:.8125rem;margin:0 0 1rem}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);color:var(--ink-2);
  max-width:38ch}
.hero-shot{justify-self:center;max-width:min(340px,80vw)}

/* generic sections */
.section{padding:clamp(2.5rem,7vw,5rem) 0}
.section--tint{background:var(--bg-2);border-block:1px solid var(--line)}
.section--dark{background:var(--bg-dark);color:#fff}
.section--dark h2{color:#fff}
.section--dark p{color:#c9ccd2}

.grid{display:grid;gap:clamp(1.5rem,4vw,2.5rem);grid-template-columns:1fr}
@media(min-width:760px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:760px){.grid--2{grid-template-columns:repeat(2,1fr)}}

.feature img{max-width:260px;margin:0 auto 1.25rem}
.feature h3{margin-top:0}
.feature p{color:var(--ink-2)}

.step{border-top:3px solid var(--orange);padding-top:1rem}
.step .num{color:var(--orange);font-weight:700;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase}

.promise{text-align:center}
.promise .line{font-size:clamp(1.25rem,1rem + 1.4vw,2rem);font-weight:700;
  letter-spacing:-.02em}

.note{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--orange);
  border-radius:10px;padding:1rem 1.25rem;color:var(--ink-2)}
.note strong{color:var(--ink)}

.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:600;
  padding:.85rem 1.6rem;border-radius:999px;border:0}
.btn:hover,.btn:focus-visible{text-decoration:none;filter:brightness(.94)}
.btn--ghost{background:transparent;color:var(--orange);
  box-shadow:inset 0 0 0 2px currentColor}

/* legal documents */
.doc{padding:clamp(2rem,6vw,4rem) 0 clamp(3rem,8vw,5rem)}
.doc h1{margin-bottom:.25em}
.doc .updated{color:var(--muted);font-size:.9375rem;margin-bottom:2.5rem}
.toc{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:1.25rem 1.5rem;margin-bottom:2.5rem}
.toc h2{margin:0 0 .5rem;font-size:1rem;letter-spacing:0}
.toc ol{margin:0;padding-left:1.2em}
.toc a{color:var(--ink-2)}

table{border-collapse:collapse;width:100%;margin:0 0 1.5em;font-size:.9375rem}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-weight:600;background:var(--bg-2)}
.table-scroll{overflow-x:auto}

/* footer */
.site-foot{background:var(--bg-dark);color:#c9ccd2;padding:clamp(2.5rem,6vw,4rem) 0 2rem;
  margin-top:clamp(3rem,8vw,5rem)}
.site-foot .wrap{display:grid;gap:2rem}
@media(min-width:760px){.site-foot .wrap{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot img{height:28px;width:auto;margin-bottom:1rem}
.site-foot h4{color:#fff;font-size:.9375rem;margin:0 0 .75rem;letter-spacing:.02em}
.site-foot a{color:#c9ccd2;display:block;margin-bottom:.5rem;font-size:.9375rem}
.site-foot a:hover{color:#fff}
.foot-legal{border-top:1px solid #24262c;margin-top:2.5rem;padding-top:1.5rem;
  font-size:.875rem;color:#8b9099}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── showcase: alternating screen + description ───────────────────────────── */
.showcase{padding:clamp(2rem,6vw,4rem) 0}
.showcase + .showcase{padding-top:0}
.show{display:grid;gap:clamp(1.75rem,5vw,4.5rem);grid-template-columns:1fr;
  align-items:center}
@media(min-width:880px){
  .show{grid-template-columns:1fr 1fr}
  .show--flip .show__text{order:2}
}
.show__shot{justify-self:center;max-width:min(320px,78vw);
  filter:drop-shadow(0 30px 60px rgba(20,22,26,.18))}
.show__text{max-width:46ch}
.show__text .num{display:inline-block;color:var(--orange);font-weight:700;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.75rem}
.show__text h3{margin-top:0;font-size:clamp(1.375rem,1.15rem + 1vw,2rem)}
.show__text p{color:var(--ink-2)}
.show__text .detail{font-size:.9375rem;color:var(--muted);
  border-top:1px solid var(--line);padding-top:1rem;margin-top:1.25rem}

/* band used to separate showcase groups */
.band{background:var(--bg-2);border-block:1px solid var(--line)}
.band--dark{background:var(--bg-dark);border-block:0}
.band--dark .show__text h3{color:#fff}
.band--dark .show__text p{color:#c9ccd2}
.band--dark .show__text .detail{color:#8b9099;border-top-color:#24262c}

/* Wide enough that the intro line under each section heading stays on one
   line on desktop; it still wraps naturally on narrow screens. */
.section-head{text-align:center;max-width:70ch;margin:0 auto clamp(2rem,5vw,3.5rem)}
.section-head h2{max-width:24ch;margin-inline:auto}
.section-head p{text-wrap:balance}
.section-head h2{margin-top:0}
.section-head p{color:var(--ink-2);font-size:clamp(1rem,.96rem + .3vw,1.125rem)}
.band--dark .section-head h2{color:#fff}
.band--dark .section-head p{color:#c9ccd2}

/* gallery strip */
.strip{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.strip{grid-template-columns:repeat(5,1fr)}}
.strip figure{margin:0;text-align:center}
.strip img{border-radius:14px}
.strip figcaption{font-size:.8125rem;color:var(--muted);margin-top:.65rem}

/* closing promise band — brand orange, white type */
.section--orange{background:var(--orange);color:#fff}
.section--orange .line{color:#fff}
/* Only the promise line sits on orange. White on #f15a29 is 3.37:1 — clears
   AA for large text but not for body copy, so nothing small goes on this band.
   The Playbook asks for one phrase in larger type here regardless. */
.section--orange .line{font-size:clamp(1.5rem,1.1rem + 2vw,2.5rem)}
.section--orange{padding-block:clamp(3rem,7vw,4.5rem)}