/* Treble20 Design Studio — static site stylesheet
   Reuses the Treble20 design tokens (Ink + Amber + warm Stone) in a
   class-based system for server-readable, SEO-friendly HTML pages. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Work+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,18..72,400;0,18..72,500;1,18..72,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink-950:#0f0f0f; --ink-900:#141414; --ink-800:#1c1c1c; --ink-700:#292929;
  --ink-600:#383838; --ink-500:#525252; --ink-400:#737373;
  --amber-800:#725b32; --amber-700:#876c3b; --amber-600:#9c7d44; --amber-500:#b08d4d;
  --amber-400:#bea06a; --amber-300:#cdb78d; --amber-200:#e0d2b8; --amber-100:#efe8dc; --amber-50:#f7f4ed;
  --stone-50:#f3efe6; --stone-100:#f0ebe0; --stone-200:#e6decb; --stone-300:#d6c8a9;
  --stone-400:#bda775; --stone-500:#9f854c; --stone-600:#756238; --stone-700:#5a4b2b; --stone-800:#3e341e;
  --white:#fff;
  --red-800:#71251d; --red-700:#8e2e25; --red-600:#b23a2e; --red-500:#cd4a3c; --red-100:#f5d9d6;
  --success-600:#4a7a42; --success-100:#e6efe1;

  --surface-page:var(--stone-50); --surface-card:var(--white); --surface-sunken:var(--stone-100);
  --text-strong:var(--ink-800); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-subtle:var(--stone-500); --text-on-ink:var(--stone-50); --text-on-ink-muted:#b3aa9c;
  --text-accent:var(--amber-600);
  --accent:var(--amber-500); --accent-hover:var(--amber-600); --accent-press:var(--amber-700); --on-accent:var(--ink-900);
  --accent-2:var(--red-600); --accent-2-hover:var(--red-700); --accent-2-soft:var(--red-100);
  --border-soft:var(--stone-200); --border-default:var(--stone-300); --border-strong:var(--ink-800); --border-on-ink:rgba(255,255,255,0.14);

  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Work Sans',system-ui,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(19,32,38,.08); --shadow-md:0 6px 18px rgba(19,32,38,.10); --shadow-lg:0 18px 40px rgba(19,32,38,.14);
  --container-max:1200px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:200ms;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); font-size:1rem; line-height:1.65;
  color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-strong); line-height:1.2; letter-spacing:-.02em; font-weight:700; margin:0 0 .5em; text-wrap:balance;}
p{margin:0 0 1em; text-wrap:pretty;}
img{max-width:100%; display:block;}
a{color:var(--text-accent); text-decoration:none;}
a:hover{color:var(--accent-press);}
::selection{background:var(--amber-200); color:var(--ink-900);}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.wrap{max-width:var(--container-max); margin:0 auto; padding-inline:clamp(20px,5vw,56px);}
.wrap--narrow{max-width:880px;}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--ink-800); color:#fff; padding:10px 16px; z-index:200;}
.skip-link:focus{left:8px; top:8px;}

/* ---- Eyebrow + amber rule ---- */
.eyebrow{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-accent); display:flex; align-items:center; gap:12px; margin:0;}
.eyebrow--on-ink{color:var(--amber-400);}
.eyebrow .rule{display:inline-block; width:40px; height:3px; background:var(--accent); flex:none;}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:14px; border-radius:var(--radius-md); padding:11px 20px; cursor:pointer; border:2px solid transparent; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); text-decoration:none;}
.btn:hover{transform:translateY(-1px);}
.btn .ar{width:16px; height:16px;}
.btn--primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.btn--primary:hover{background:var(--accent-hover); color:var(--on-accent);}
.btn--secondary{background:transparent; color:var(--text-strong); border-color:var(--border-strong);}
.btn--secondary:hover{background:var(--ink-800); color:var(--stone-50);}
.btn--on-ink{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.btn--on-ink:hover{background:var(--amber-400); color:var(--on-accent);}
.btn--ghost{background:transparent; color:var(--stone-100); border-color:var(--border-on-ink);}
.btn--ghost:hover{background:rgba(255,255,255,.08); color:#fff;}
.btn--lg{font-size:15px; padding:14px 26px;}
.btn--full{width:100%; justify-content:center;}

/* ---- Header ---- */
.site-header{position:sticky; top:0; z-index:50; background:var(--ink-800); border-bottom:3px solid var(--amber-500);}
.site-header__inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px clamp(20px,5vw,56px); max-width:var(--container-max); margin:0 auto;}
.site-header .btn--primary{background:var(--red-600); color:#fff; border-color:var(--red-600);}
.site-header .btn--primary:hover{background:var(--red-700); color:#fff;}
.logo{display:inline-flex; align-items:baseline; gap:14px; text-decoration:none;}
.logo img{height:45px; width:auto;}
.logo-word{font-family:var(--font-display); font-weight:800; letter-spacing:.34em; font-size:18px; color:var(--stone-50); padding-left:.34em; line-height:1;}
.logo-div{align-self:center; width:1px; height:22px; background:rgba(255,255,255,.24);}
.logo-sub{font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:#a9bcc3; line-height:1;}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); flex-wrap:wrap; justify-content:flex-end;}
.nav a{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--stone-50); padding-bottom:4px; border-bottom:2px solid transparent;}
.nav a:hover{color:var(--amber-400);}
.nav a[aria-current="page"]{color:var(--amber-400); border-bottom-color:var(--accent);}

/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; background:var(--ink-800); color:var(--stone-50);}
.hero__bg{position:absolute; inset:0;}
.hero__bg img{width:100%; height:100%; object-fit:cover;}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(105deg,var(--ink-900) 32%,rgba(20,20,20,.74) 60%,rgba(20,20,20,.42));}
.hero__inner{position:relative; max-width:var(--container-max); margin:0 auto; padding:clamp(56px,9vw,120px) clamp(20px,5vw,56px) clamp(48px,7vw,96px);}
.hero h1{color:var(--white); font-weight:800; font-size:clamp(2.6rem,7vw,5.25rem); line-height:.98; letter-spacing:-.02em; margin:22px 0 0; max-width:15ch;}
.hero h1 .amber{color:var(--amber-400);}
.hero__lede{font-size:clamp(1.05rem,1.6vw,1.375rem); line-height:1.55; color:var(--text-on-ink-muted); max-width:52ch; margin:26px 0 0;}
.hero__cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}

/* ---- Sections ---- */
.section{padding:clamp(39px,5.6vw,73px) 0;}
.section--tight{padding:clamp(28px,4.2vw,50px) 0;}
.section--ink{background:var(--ink-800); color:var(--stone-50);}
.section--deep{background:var(--ink-900); color:var(--stone-50);}
.section--card{background:var(--surface-card); border-top:1px solid var(--border-soft);}
.section--sunken{background:var(--stone-100);}

.section-head{max-width:760px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.75rem); margin:0;}
.section--ink .section-head h2,.section--deep .section-head h2{color:var(--white);}
.section-head__lede{font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--text-muted); margin:16px 0 0; line-height:1.6;}
.section--ink .section-head__lede{color:var(--text-on-ink-muted);}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px;}

/* ---- Grids & cards ---- */
.grid{display:grid; gap:22px;}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid--feature{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}

.card{background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm);}
.card__icon{width:46px; height:46px; border-radius:var(--radius-md); background:var(--amber-100); color:var(--amber-700); display:flex; align-items:center; justify-content:center;}
.card h3{margin:18px 0 8px; font-size:19px;}
.card p{margin:0; font-size:14px; color:var(--text-muted); line-height:1.6;}
.card--link{cursor:pointer; transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.card--link:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}

/* Card with a faded photo behind the text */
.card--photo{position:relative; background-size:cover; background-position:center; overflow:hidden; min-height:212px;}
.card--photo::before{content:""; position:absolute; inset:0; background:linear-gradient(165deg, rgba(255,255,255,.90) 38%, rgba(255,255,255,.74)); transition:background var(--dur) var(--ease);}
.card--photo:hover::before{background:linear-gradient(165deg, rgba(255,255,255,.86) 30%, rgba(255,255,255,.62));}
.card--photo > *{position:relative; z-index:1;}

/* Project card */
.project-card{display:flex; flex-direction:column; background:var(--surface-card); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);}
.project-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.project-card__media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-700);}
.project-card__media img{width:100%; height:100%; object-fit:cover; transition:transform 360ms var(--ease);}
.project-card:hover .project-card__media img{transform:scale(1.04);}
.project-card__cat{position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:rgba(20,20,20,.5); padding:4px 9px; border-radius:var(--radius-sm);}
.project-card__placeholder{position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px;}
.project-card__placeholder span{font-family:var(--font-display); font-weight:800; font-size:34px; color:rgba(255,255,255,.16); line-height:.95;}
.project-card__body{padding:20px; display:flex; flex-direction:column; flex:1;}
.project-card__client{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-accent);}
.project-card__body h3{margin:6px 0 8px; font-size:22px;}
.project-card__body p{margin:0 0 16px; font-size:14px; color:var(--text-muted); line-height:1.55;}
.project-card__tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:auto;}

/* ---- Tags / pills ---- */
.tag{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap; color:var(--text-body); border:1px solid var(--border-default);}
.tag .ic{width:12px; height:12px; opacity:.85;}
.badge{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill); background:var(--amber-100); color:var(--amber-800); border:1px solid var(--amber-200);}
.material-tag{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-body); border:1px solid var(--border-default); border-radius:var(--radius-pill); padding:5px 11px;}
.material-tag--on-ink{color:var(--stone-100); border-color:var(--border-on-ink);}
.taglist{display:flex; gap:8px; flex-wrap:wrap;}

/* Filter chips (work index) */
.chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border-radius:var(--radius-pill); border:1px solid var(--border-default); color:var(--text-muted); background:transparent;}
.chip:hover{border-color:var(--ink-800); color:var(--text-strong);}
.chip[aria-current="true"]{background:var(--ink-800); color:var(--stone-50); border-color:var(--ink-800);}

/* ---- Stats ---- */
.stats{display:flex; gap:clamp(28px,6vw,72px); flex-wrap:wrap;}
.stat__value{font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.75rem); color:var(--white); line-height:1;}
.section:not(.section--ink) .stat__value{color:var(--text-strong);}
.stat__label{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-on-ink-muted); margin-top:8px;}
.section:not(.section--ink) .stat__label{color:var(--text-muted);}

/* ---- Quote ---- */
.quote{font-family:var(--font-serif); font-style:italic; font-size:clamp(1.5rem,3.2vw,2.25rem); line-height:1.32; color:var(--text-strong); margin:0;}
.section--ink .quote,.section--deep .quote{color:var(--white);}
.quote__cite{display:block; font-family:var(--font-mono); font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-accent); margin-top:18px;}

/* ---- Logo / client wall ---- */
.logo-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--radius-lg); overflow:hidden;}
.logo-wall__cell{display:flex; align-items:center; justify-content:center; text-align:center; min-height:112px; padding:22px 24px; background:var(--surface-card); color:var(--ink-600); font-family:var(--font-display); font-weight:600; font-size:13px; line-height:1.25; transition:background var(--dur) var(--ease);}
.logo-wall__cell img{max-height:50px; max-width:80%; width:auto; height:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .2s,opacity .2s;}
.logo-wall__cell--lg img{max-height:78px; max-width:88%;}
.logo-wall__cell:hover img{filter:grayscale(0); opacity:1;}
.logo-wall__cell:hover{background:var(--stone-50);}
.logo-wall__cell--dark{background:var(--ink-800);}
.logo-wall__cell--dark:hover{background:var(--ink-700);}
.logo-wall__sub{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-muted); margin:14px 0 0;}

/* ---- Lightbox ---- */
.lb{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; background:rgba(20,20,20,.95); padding:clamp(16px,4vw,56px);}
.lb.is-open{display:flex;}
.lb__stage{margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:100%; max-height:100%;}
.lb__img{max-width:min(1100px,92vw); max-height:80vh; width:auto; height:auto; object-fit:contain; border-radius:var(--radius-md); box-shadow:0 30px 80px rgba(0,0,0,.55);}
.lb__cap{font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--stone-200); text-align:center; max-width:62ch; line-height:1.5;}
.lb__close{position:absolute; top:18px; right:22px; width:44px; height:44px; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:24px; line-height:1; border-radius:50%; cursor:pointer; transition:background var(--dur) var(--ease);}
.lb__close:hover{background:rgba(255,255,255,.18);}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border:none; background:rgba(255,255,255,.08); color:#fff; font-size:30px; line-height:1; border-radius:50%; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease);}
.lb__nav:hover{background:var(--accent); color:var(--on-accent);}
.lb__prev{left:clamp(12px,3vw,40px);}
.lb__next{right:clamp(12px,3vw,40px);}
.lb__count{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--stone-300);}
@media (max-width:600px){.lb__nav{width:42px; height:42px; font-size:24px;} .lb__img{max-height:70vh;}}

/* ---- Gallery / figures ---- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px;}
.gallery figure{margin:0;}
.gallery .ph{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-soft); aspect-ratio:4/3;}
.gallery img{width:100%; height:100%; object-fit:cover;}
.gallery figcaption{font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--text-muted); margin-top:8px; line-height:1.45;}

/* ---- Detail layout ---- */
.detail{display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:clamp(32px,5vw,72px);}
.detail__lede{font-family:var(--font-serif); font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.4; color:var(--text-strong); margin:0 0 28px;}
.detail__body{font-size:17px; line-height:1.7; color:var(--text-body); max-width:62ch;}
.detail h2.sub{font-size:22px; margin:40px 0 16px;}
.aside-card{position:sticky; top:96px;}
.spec-dl{margin:14px 0 28px;}
.spec-dl .row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft);}
.spec-dl dt{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin:0;}
.spec-dl dd{margin:0; font-size:14px; font-weight:600; color:var(--text-strong); text-align:right;}

/* Capability mini-cards */
.cap-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.cap{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid var(--border-soft); border-radius:var(--radius-md); background:var(--surface-card);}
.cap__ic{width:34px; height:34px; flex:none; border-radius:var(--radius-sm); background:var(--amber-100); color:var(--amber-700); display:flex; align-items:center; justify-content:center;}
.cap__label{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text-strong);}

/* Rentals spec list */
.spec-list{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:14px;}
.spec-list li{display:flex; gap:13px; align-items:flex-start;}
.spec-list .ic{width:34px; height:34px; flex:none; border-radius:var(--radius-sm); background:var(--amber-100); color:var(--amber-700); display:flex; align-items:center; justify-content:center;}
.spec-list .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle);}
.spec-list .v{font-size:14px; font-weight:600; color:var(--text-strong); line-height:1.4; margin-top:2px;}

/* Process steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0;}
.step{padding:clamp(24px,3vw,36px); border-top:3px solid var(--accent); background:var(--surface-card); border-right:1px solid var(--border-soft);}
.step__top{display:flex; align-items:center; justify-content:space-between;}
.step__n{font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--stone-300); line-height:1;}
.step__ic{width:44px; height:44px; border-radius:var(--radius-md); background:var(--ink-800); color:var(--amber-400); display:flex; align-items:center; justify-content:center;}
.step h3{margin:20px 0 8px; font-size:21px;}
.step p{margin:0; font-size:14.5px; color:var(--text-muted); line-height:1.6;}

/* Breadcrumb */
.crumbs{font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.crumbs a{color:var(--text-muted);}
.crumbs a:hover{color:var(--text-accent);}
.crumbs .sep{opacity:.5;}

/* Back link */
.back{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--stone-200);}
.back:hover{color:#fff;}

/* Detail hero */
.detail-hero{position:relative; height:clamp(320px,50vw,540px); background:var(--ink-700); overflow:hidden;}
.detail-hero img{width:100%; height:100%; object-fit:cover;}
.detail-hero__overlay{position:absolute; inset:0; background:linear-gradient(to top,rgba(20,20,20,.8),rgba(20,20,20,.12) 55%,transparent);}
.detail-hero__inner{position:absolute; left:0; right:0; bottom:0; padding:clamp(24px,5vw,56px);}
.detail-hero h1{font-weight:800; font-size:clamp(2.2rem,5vw,4rem); line-height:1; color:var(--white); margin:12px 0 0;}

/* Form */
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--text-strong);}
.field input,.field textarea{font-family:var(--font-body); font-size:15px; color:var(--text-strong); background:var(--surface-page); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:11px 13px; width:100%;}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}

/* Contact details list */
.contact-line{display:flex; align-items:center; gap:12px;}
.contact-line .ic{width:38px; height:38px; border-radius:var(--radius-md); border:1px solid var(--border-default); display:flex; align-items:center; justify-content:center; color:var(--text-accent); flex:none;}

/* Next project band */
.next-band{display:block; background:var(--ink-800); color:#fff; padding:clamp(40px,6vw,72px) 0;}
.next-band:hover{color:#fff;}
.next-band .inner{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;}
.next-band h2{font-weight:800; font-size:clamp(1.8rem,4vw,3rem); color:var(--white); margin:10px 0 0;}

/* ---- Footer ---- */
.site-footer{background:var(--ink-900); color:var(--stone-100); padding:clamp(48px,7vw,88px) 0 40px;}
.site-footer__top{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; align-items:flex-start;}
.site-footer__brand{max-width:360px;}
.site-footer__brand img{height:60px; width:auto; margin-bottom:18px;}
.site-footer__tag{font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.35; color:var(--stone-200); margin:0;}
.foot-cols{display:flex; gap:clamp(32px,6vw,72px); flex-wrap:wrap;}
.foot-col h4{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber-400); margin:0 0 14px; font-weight:400;}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.foot-col a,.foot-col li{color:var(--text-on-ink-muted); font-size:14px;}
.foot-col a:hover{color:#fff;}
.site-footer__bottom{margin-top:48px; padding-top:22px; border-top:1px solid var(--border-on-ink); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.site-footer__bottom span{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-on-ink-muted);}

.mt-0{margin-top:0;} .mt-2{margin-top:14px;} .mt-3{margin-top:22px;} .mt-4{margin-top:32px;} .mt-5{margin-top:44px;}
.center{text-align:center;}

@media (max-width:760px){
  .detail{grid-template-columns:1fr;}
  .aside-card{position:static;}
  .step{border-right:none;}
  .site-header__inner{flex-direction:column; align-items:flex-start; gap:12px;}
  .nav{justify-content:flex-start;}
}

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