/*
Theme Name: Kalen
Theme URI: https://kalenjewelryfactory.com/
Description: Kalen OEM/ODM site — Precision Industrial Luxury (DESIGN.md), with the layout
numbers of landing-page-mockup.html. Tokens live in assets/css/tokens.css.
Author: Kalen
Version: 1.0
*/

/* ── Base ─────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	margin:0;
	font-family:var(--font-body);
	font-size:var(--text-body);
	line-height:var(--leading-body);
	color:var(--color-carbon);
	background:var(--color-ivory);
	-webkit-font-smoothing:antialiased;
}
/* The mockup lays a 3.5% film grain over the ivory so it does not read as screen white. */
body:before{
	content:"";
	position:fixed;
	inset:0;
	z-index:30;
	pointer-events:none;
	opacity:.035;
	background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--color-champagne);outline-offset:3px}
.skip-link{
	position:absolute;left:-9999px;top:0;z-index:40;
	padding:12px 18px;background:var(--color-carbon);color:var(--color-white);
	font-family:var(--font-display);font-size:var(--text-small);
}
.skip-link:focus{left:12px;top:12px}

/* ── Layout — DESIGN.md 7.1 ───────────────────────────────────────────── */
.wrap{width:min(var(--content-max),calc(100% - (var(--gutter) * 2)));margin-inline:auto}
main{display:block}

/* ── Type — DESIGN.md 6 ───────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:inherit}
h1{
	margin:22px 0 30px;max-width:760px;
	font-size:var(--text-hero);line-height:1.02;letter-spacing:var(--tracking-display);
}
h2{
	margin:14px 0 0;max-width:680px;
	font-size:var(--text-section);line-height:1.06;letter-spacing:var(--tracking-display);
}
h3{margin:0 0 8px;font-size:var(--text-sub);letter-spacing:-.02em}
h4{margin:0 0 8px;font-size:var(--text-small);letter-spacing:.01em}
p{margin:0 0 var(--space-3)}
.lead,.intro{max-width:var(--text-max);font-size:18px;line-height:1.6;color:var(--color-muted)}
.mono{font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.meta,.entry-meta,.planing-back{
	font-family:var(--font-data);font-size:var(--text-micro);
	letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--color-muted);
}
/* Engineering marks stay few and low contrast — DESIGN.md 9.2 */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0;color:var(--color-champagne)}
.eyebrow:before{content:"";flex:0 0 auto;width:34px;height:1px;background:currentColor}

/* ── Buttons — DESIGN.md 10.1 (2—4px radius, never a capsule) ─────────── */
.button,.nav-cta{
	display:inline-flex;align-items:center;justify-content:center;gap:20px;
	min-height:50px;padding:0 23px;
	border:1px solid var(--color-carbon);border-radius:var(--radius-xs);
	background:var(--color-carbon);color:var(--color-white);
	font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.02em;
	cursor:pointer;
	transition:transform var(--motion-normal) var(--ease),background var(--motion-normal) var(--ease),border-color var(--motion-normal),color var(--motion-normal);
}
.button:hover,.nav-cta:hover{
	transform:translateY(-2px);
	background:var(--color-champagne);border-color:var(--color-champagne);color:var(--color-carbon);
	text-decoration:none;
}
.button.ghost{background:transparent;color:var(--color-carbon)}
.button.ghost:hover{background:var(--color-carbon);border-color:var(--color-carbon);color:var(--color-white)}
.button.dark{background:var(--color-white);border-color:var(--color-white);color:var(--color-carbon)}
.button.dark:hover{background:var(--color-champagne);border-color:var(--color-champagne)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ── Header — mockup .nav ─────────────────────────────────────────────── */
.nav{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	min-height:84px;
	border-bottom:1px solid rgba(17,19,21,.14);
}
.logo{display:flex;align-items:baseline;gap:12px;font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:-.08em}
.logo span{color:var(--color-champagne);font:11px var(--font-data);letter-spacing:.1em}
.logo:hover{text-decoration:none}
.navlinks{display:flex;align-items:center;gap:34px;font-size:13px;color:#4F575B}
.navlinks a{transition:color var(--motion-fast) var(--ease)}
.navlinks a:hover,.navlinks a[aria-current=page]{color:var(--color-carbon)}
.navlinks a[aria-current=page]{text-decoration:underline;text-underline-offset:.3em}

/* ── Hero — mockup .hero ──────────────────────────────────────────────── */
.hero{
	display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;gap:64px;
	min-height:680px;padding:76px 0 92px;
}
.hero-copy>p{max-width:500px;margin:0 0 34px;font-size:18px;line-height:1.65;color:#596166}
.hero h1 em{font-family:var(--font-accent);font-weight:400;font-style:italic;letter-spacing:-.03em}
.hero-note{display:flex;align-items:flex-start;gap:25px;margin-top:54px;color:var(--color-muted)}
.hero-note b{display:block;margin-bottom:3px;font-family:var(--font-display);font-size:14px;color:var(--color-carbon)}
.hero-note p{max-width:240px;margin:0;font-size:12px;line-height:1.5}
.hero-visual{position:relative;min-height:540px;overflow:hidden;background:var(--color-carbon)}
/* The only place an engineering grid is allowed as decoration — DESIGN.md 9.1 */
.hero-visual .grid,.hero-visual>.grid{
	position:absolute;inset:0;opacity:.2;
	background-image:linear-gradient(rgba(216,220,222,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(216,220,222,.2) 1px,transparent 1px);
	background-size:44px 44px;
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
	mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
}
.hero-visual:after{
	content:"";position:absolute;inset:0;opacity:.25;
	background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.22) 43%,transparent 50%);
	transform:translateX(-90%);
	animation:sweep 8s infinite var(--ease);
}
@keyframes sweep{35%,100%{transform:translateX(100%)}}
.hero-visual .tag,.proof-visual .tag{position:absolute;z-index:2;padding-left:10px;border-left:1px solid var(--color-champagne);color:#C7CED0}
.hero-visual .tag.one,.proof-visual .tag.one{top:37px;left:38px}
.hero-visual .tag.two{right:34px;bottom:42px;padding:0 10px 0 0;border-left:0;border-right:1px solid var(--color-champagne);text-align:right}
.vertical-label{
	position:absolute;top:50%;right:20px;transform:translateY(-50%);
	writing-mode:vertical-rl;color:#788185;
}
.jewelry{position:absolute;left:20%;top:16%;width:67%;height:74%;filter:drop-shadow(0 25px 30px rgba(0,0,0,.55));transform:rotate(-9deg)}
.jewelry .chain{fill:none;stroke:url(#metal);stroke-width:18;stroke-linecap:round;stroke-linejoin:round}
.jewelry .inner{fill:none;stroke:#646C70;stroke-width:3;opacity:.7}
.jewelry .pendant{fill:url(#metal);stroke:#E1E6E5;stroke-width:2}
.jewelry .cut{fill:var(--color-carbon);opacity:.95}

/* ── Marquee ──────────────────────────────────────────────────────────── */
.marquee{
	overflow:hidden;padding:13px 0;white-space:nowrap;
	border-top:1px solid var(--color-carbon);border-bottom:1px solid var(--color-carbon);
	background:var(--color-champagne);color:var(--color-carbon);
}
.marquee-track{display:inline-block;animation:ticker 26s linear infinite}
.marquee span{margin:0 24px;font:11px var(--font-data);letter-spacing:.14em;text-transform:uppercase}
.marquee i{font-style:normal;opacity:.5}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ── Sections — mockup rhythm; between dark areas a light one (DESIGN.md 5.3) ── */
.section{padding:var(--section-y) 0}
.section.dark{background:var(--color-carbon);color:var(--color-white)}
.section.process{background:var(--color-process)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:58px}
.section-head>p{max-width:340px;margin:0;font-size:var(--text-small);color:var(--color-muted)}
.dark .section-head>p{color:#A5ADAF}
.dark .eyebrow{color:var(--color-champagne)}

/* ── Collection grid — mockup .product-grid ───────────────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.product{
	position:relative;display:flex;flex-direction:column;justify-content:flex-end;
	min-height:340px;padding:20px;overflow:hidden;background:#E4E2DC;
	transition:transform .35s var(--ease);
}
.product:hover{transform:translateY(-6px)}
.product:before{
	content:"";position:absolute;inset:0;opacity:.78;
	background:radial-gradient(circle at 65% 30%,#fff,transparent 45%),linear-gradient(145deg,#D8D9D8,#868E91);
}
.product:nth-child(2):before{background:radial-gradient(circle at 60% 22%,#FFF9DD,transparent 42%),linear-gradient(145deg,#CFB982,#57483A)}
.product:nth-child(3):before{background:radial-gradient(circle at 60% 30%,#8C969B,transparent 30%),linear-gradient(145deg,#343B3E,#070809)}
.product:nth-child(4):before{background:radial-gradient(circle at 55% 27%,#fff,transparent 40%),linear-gradient(145deg,#C3C3BD,#555B5D)}
.product>.chain-mark{position:absolute;left:9%;right:9%;top:12%;bottom:20%;z-index:1;opacity:.9}
.product-meta{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:var(--color-white)}
.product h3{margin:0;font-size:18px;letter-spacing:-.04em;color:var(--color-white)}
.product small{display:block;margin-top:4px;font:10px var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.product .product-index{font:11px var(--font-data);letter-spacing:.1em;color:rgba(255,255,255,.85)}

/* ── Why Kalen — mockup .manifesto (dark) ─────────────────────────────── */
.manifesto{display:grid;grid-template-columns:1fr 1.25fr;align-items:start;gap:100px}
.manifesto h2{max-width:450px}
.manifesto-copy{display:grid;grid-template-columns:repeat(2,1fr);gap:42px 52px;padding-top:12px}
.manifesto-item{padding-top:16px;border-top:1px solid #474C4E}
.manifesto-item .num{color:var(--color-champagne)}
.manifesto-item h3{margin:26px 0 8px;font-size:18px;color:var(--color-white)}
.manifesto-item p{margin:0;font-size:13px;line-height:1.6;color:#AEB6B8}

/* ── Working sequence — mockup .process ───────────────────────────────── */
.process-grid{
	display:grid;grid-template-columns:repeat(4,1fr);
	border-top:1px solid #AEB3B4;border-bottom:1px solid #AEB3B4;
}
.step{
	min-height:250px;margin-right:25px;padding:22px 25px 30px 0;
	border-right:1px solid #AEB3B4;
}
.step:last-child{margin-right:0;border-right:0}
.step .num{color:var(--color-champagne)}
.step h3{margin:48px 0 8px;font-size:20px;letter-spacing:-.04em}
.step p{max-width:220px;margin:0;font-size:13px;color:#5E676A}
/* the six stages are content, not decoration: keep the count readable */
.process-grid.steps-5,.process-grid.steps-6{grid-template-columns:repeat(3,1fr);row-gap:38px}
.process-grid.steps-5 .step,.process-grid.steps-6 .step{min-height:210px}

/* ── Proof — mockup .proof ────────────────────────────────────────────── */
.proof{display:grid;grid-template-columns:1.1fr .9fr;min-height:480px;background:var(--color-graphite);color:var(--color-white)}
.proof-visual{position:relative;min-height:480px;overflow:hidden;background:linear-gradient(145deg,#2E3537,#101214)}
.proof-visual:before{content:"";position:absolute;inset:12%;border:1px solid rgba(216,220,222,.35);transform:rotate(-8deg)}
.proof-visual:after{
	content:"";position:absolute;left:18%;top:20%;width:65%;height:65%;
	border:22px solid #A9AFB0;border-radius:50%;
	box-shadow:inset 0 0 0 5px #41484A,0 0 40px rgba(255,255,255,.16);
	transform:rotate(25deg);
}
.proof-visual .tag{color:#C7CED0}
.proof-copy{padding:76px clamp(30px,7vw,105px)}
.proof-copy h2{margin-bottom:24px;color:var(--color-white)}
.proof-copy p{max-width:430px;font-size:15px;color:#B5BDBE}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:45px;background:#4B5153;border:1px solid #4B5153}
.specs.specs-2{grid-template-columns:repeat(2,1fr)}
.spec{padding:18px;background:var(--color-graphite)}
.spec strong{display:block;font:21px var(--font-data);color:var(--color-white)}
.spec span{font:10px var(--font-data);letter-spacing:.1em;text-transform:uppercase;color:#9DA5A7}

/* ── Closing call to action — mockup .cta ─────────────────────────────── */
.cta{padding:120px 0 140px;text-align:center;background:var(--color-ivory)}
.cta h2{max-width:800px;margin:20px auto 24px}
.cta p{max-width:460px;margin:0 auto 32px;color:var(--color-muted)}
.cta .eyebrow{justify-content:center}

/* ── Footer — mockup footer ───────────────────────────────────────────── */
.site-footer{padding:var(--space-7) 0 var(--space-4);background:var(--color-carbon);color:var(--color-white)}
.site-footer .wrap{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:var(--space-5)}
.site-footer .logo{font-size:22px}
.site-footer .muted{max-width:320px;margin:14px 0 0;font-size:12px;color:#8B9496}
.site-footer h2,.site-footer h3{font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:#8B9496;margin:0 0 14px;font-weight:400}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px;font-size:13px}
.site-footer a{color:#C2C9CA}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:24px;font-size:12px}
.site-footer .footer-links li{margin:0}
.site-footer .footer-base{grid-column:1 / -1;display:flex;justify-content:space-between;gap:20px;margin-top:var(--space-6);padding-top:var(--space-3);border-top:1px solid rgba(216,220,222,.18);font-size:12px;color:#8B9496}

/* ── Inner pages: one quiet column (DESIGN.md 7.3, 5.3) ───────────────── */
main.page,main.page-skeleton{padding:0 0 var(--space-8)}
main.page>*:not(.section),main.page-skeleton>*:not(.section){width:min(var(--content-max),calc(100% - (var(--gutter) * 2)));margin-inline:auto}

.page-intro{padding:var(--space-6) 0 var(--space-4)}
.page-intro h1{margin:20px 0 18px;font-size:clamp(32px,4.6vw,56px)}
.page-intro .meta{margin:0}
.page-intro .intro{margin-bottom:0}

/* ── Blocks ───────────────────────────────────────────────────────────── */
.field-block{margin:0 0 var(--space-6)}
.field-block h2{margin:0 0 16px;font-size:var(--text-sub);letter-spacing:-.02em}
.field-text{max-width:var(--text-max)}
.field-text p:last-child{margin-bottom:0}
.field-list{max-width:var(--text-max);margin:0;padding:0;list-style:none}
.field-list li{position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--color-line);font-size:15px}
.field-list li:last-child{border-bottom:1px solid var(--color-line)}
.field-list li:before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--color-champagne)}
.field-rows{max-width:var(--text-max);margin:0}
.field-rows dt{padding-top:14px;border-top:1px solid var(--color-line);font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--color-steel)}
.field-rows dd{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid var(--color-line);font-size:15px}
.dark .field-block h2,.dark .field-rows dt,.dark .field-rows dd{color:var(--color-white)}
.dark .field-rows dt,.dark .field-rows dd{border-color:rgba(216,220,222,.22)}

/* ── Entry cards — DESIGN.md 10.2 ─────────────────────────────────────── */
.entry-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.entry-list>li{margin:0}
.entry-card{
	display:flex;flex-direction:column;height:100%;overflow:hidden;
	background:var(--color-white);border:1px solid var(--color-line);border-radius:var(--radius-xs);
	transition:transform var(--motion-normal) var(--ease),border-color var(--motion-normal) var(--ease);
}
.entry-card:hover{transform:translateY(-3px);border-color:var(--color-steel)}
.entry-media{aspect-ratio:1/1;background:var(--color-ivory)}
.entry-media img{width:100%;height:100%;object-fit:cover}
.entry-body{display:flex;flex-direction:column;gap:8px;padding:var(--space-3)}
.entry-eyebrow{margin:0;font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-champagne)}
.entry-title{margin:0;font-size:18px;letter-spacing:-.02em}
.entry-title a:hover{text-decoration:underline;text-underline-offset:.22em}
.entry-summary{margin:0;font-size:14px;color:var(--color-muted)}
.entry-meta{margin:0}

/* ── Imagery, chips, trail ────────────────────────────────────────────── */
.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.image-grid figure{margin:0;background:var(--color-white);border:1px solid var(--color-line)}
.image-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--space-4);padding:0;list-style:none}
.tag-row .tag{
	position:static;padding:6px 12px;border:1px solid var(--color-line);border-radius:var(--radius-xs);
	background:var(--color-white);color:var(--color-carbon);
	font-family:var(--font-data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.tag-row .tag:hover{border-color:var(--color-steel)}
.breadcrumb{margin:var(--space-5) 0 0;font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--color-muted)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.breadcrumb li+li:before{content:"/";margin-right:10px;color:var(--color-line)}
.record-nav{margin:var(--space-6) 0 0}
.record-nav a{display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--color-line);font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.empty-state{
	margin:0;padding:var(--space-4) 0;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);
	font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--color-steel);
}

/* ── Skeleton notes: quiet, engineering-lettered (DESIGN.md 9.2) ──────── */
.planing{margin:0 0 var(--space-2);font-family:var(--font-data);font-size:var(--text-micro);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--color-champagne)}
.planing-note{max-width:var(--text-max);font-size:15px;color:#4F575B}
.planing-notes{max-width:var(--text-max);margin:var(--space-3) 0 0;padding:0;list-style:none}
.planing-notes li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--color-line);font-size:14px;color:var(--color-muted)}
.planing-notes li:last-child{border-bottom:1px solid var(--color-line)}
.planing-notes li:before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--color-champagne)}
.planing-locked{max-width:52ch}

/* ── Forms — DESIGN.md 10.4 ───────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=search],select,textarea{
	width:100%;min-height:48px;padding:12px 14px;
	border:1px solid var(--color-line);border-radius:var(--radius-xs);
	background:var(--color-white);color:var(--color-carbon);
	font-family:var(--font-body);font-size:15px;
	transition:border-color var(--motion-fast) var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--color-graphite)}
label{display:block;margin-bottom:6px;font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.02em}
textarea{min-height:140px}
.post-password-form p{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.post-password-form label{flex:1 1 220px;margin:0}
.post-password-form input[type=password]{margin-top:6px}
input[type=submit]{
	min-height:48px;padding:0 22px;border:1px solid var(--color-carbon);border-radius:var(--radius-xs);
	background:var(--color-carbon);color:var(--color-white);
	font-family:var(--font-display);font-size:12px;font-weight:700;cursor:pointer;
	transition:background var(--motion-normal) var(--ease),border-color var(--motion-normal),color var(--motion-normal);
}
input[type=submit]:hover{background:var(--color-champagne);border-color:var(--color-champagne);color:var(--color-carbon)}

/* ── Specification tables — DESIGN.md 10.3 (rules, no zebra stripes) ──── */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:12px 14px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}
th{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--color-muted)}
td:not(:first-child){font-family:var(--font-data);font-size:13px}

/* ── Responsive — DESIGN.md 14 (mobile is not a shrunken desktop) ─────── */
@media (max-width:1100px){
	.hero{grid-template-columns:.95fr 1.05fr;gap:44px}
	.manifesto{gap:60px}
	.product-grid{grid-template-columns:repeat(2,1fr)}
	.process-grid,.process-grid.steps-5,.process-grid.steps-6{grid-template-columns:repeat(2,1fr);row-gap:38px}
	.step,.process-grid.steps-5 .step,.process-grid.steps-6 .step{margin-right:0;border-right:0;border-bottom:0}
	.step:nth-child(odd){margin-right:25px;border-right:1px solid #AEB3B4}
	.site-footer .wrap{grid-template-columns:1fr 1fr;gap:var(--space-4)}
}
@media (max-width:900px){
	:root{--gutter:22px}
	.nav{min-height:0;flex-wrap:wrap;row-gap:14px;padding:16px 0}
	.navlinks{order:3;width:100%;gap:22px;overflow-x:auto;padding-bottom:2px}
	.hero{grid-template-columns:1fr;min-height:0;padding:56px 0 64px}
	.hero-visual{min-height:440px}
	.section-head{display:block;margin-bottom:36px}
	.section-head>p{margin-top:22px}
	.manifesto{grid-template-columns:1fr;gap:45px}
	.proof{grid-template-columns:1fr}
	.proof-visual{min-height:320px}
	.proof-copy{padding:56px var(--gutter)}
	.specs,.specs.specs-2{grid-template-columns:1fr}
	.cta{padding:80px 0 92px}
}
@media (max-width:560px){
	:root{--gutter:20px;--section-y:64px}
	.nav .nav-cta{min-height:44px;padding:0 14px;font-size:11px}
	h1{font-size:clamp(34px,10vw,44px)}
	.hero-copy>p{font-size:16px}
	.hero-note{margin-top:34px;gap:16px}
	.hero-visual{min-height:360px}
	.hero-visual .tag.two{right:16px;bottom:16px}
	.hero-visual .tag.one{top:16px;left:16px}
	.vertical-label{display:none}
	.product-grid{grid-template-columns:1fr 1fr;gap:8px}
	.product{min-height:220px;padding:12px}
	.product h3{font-size:14px}
	.product small{font-size:8px}
	.manifesto-copy{grid-template-columns:1fr;gap:27px}
	.process-grid,.process-grid.steps-5,.process-grid.steps-6{grid-template-columns:1fr}
	.step{margin:0;min-height:170px;padding:18px 0 24px;border-right:0;border-bottom:1px solid #AEB3B4}
	.step:last-child{border-bottom:0}
	.step h3{margin-top:28px}
	.site-footer .wrap{grid-template-columns:1fr}
	.site-footer .footer-base{display:block}
	.entry-list{grid-template-columns:1fr}
	.section-head>p{max-width:none}
}

/* ── Motion — DESIGN.md 12 ────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
	*,*:before,*:after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		scroll-behavior:auto !important;
		transition-duration:.01ms !important;
	}
}