/* ============================================================
   OpenNeux — hand-written stylesheet for the studio site.
   Layout and values follow the studio's own design tokens:
   monochrome palette, Inter throughout, rectangular actions,
   centred section heads, 180px section rhythm.
   ============================================================ */

/* ---------------- Fonts ---------------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Tokens ---------------- */
:root {
  --ink: #252525;
  --grey: #545454;
  --smoke: #7d7d7d;
  --line: #cfcfcf;
  --cloud: #f2f2f2;
  --form: #f5f5f5;
  --paper: #ffffff;
  --wa10: rgba(255, 255, 255, 0.1);
  --wa60: rgba(255, 255, 255, 0.6);
  --wa80: rgba(255, 255, 255, 0.8);
  --font: "Inter", -apple-system, "Segoe UI", sans-serif;
  --h1: 100px; --h2: 72px; --h3: 48px; --h4: 40px; --h5: 36px; --h6: 24px;
  --t-lg: 20px; --t-md: 18px; --t-sm: 14px;
  --sp180: 180px; --sp150: 150px; --sp120: 120px;
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-sineio: cubic-bezier(0.37, 0, 0.63, 1); /* GSAP sine.inOut equivalent */
}

/* ---------------- Reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.locked, html.locked body { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
.hidden { display: none !important; }
[hidden] { display: none !important; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* ---------------- Type scale ---------------- */
h1, .h1 { font-size: var(--h1); line-height: 1.2; font-weight: 600; letter-spacing: -0.06em; }
h2, .h2 { font-size: var(--h2); line-height: 1.1; font-weight: 600; letter-spacing: -0.06em; }
h3, .h3 { font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--h4); line-height: 1.2; font-weight: 600; }
h5, .h5 { font-size: var(--h5); line-height: 1.4; font-weight: 600; }
h6, .h6 { font-size: var(--h6); line-height: 1.5; font-weight: 600; }
.t-h1 { font-size: var(--h1); line-height: 1.2; font-weight: 600; letter-spacing: -0.06em; }
.t-h2 { font-size: var(--h2); line-height: 1.1; font-weight: 600; letter-spacing: -0.06em; }
.t-h3 { font-size: var(--h3); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.t-h4 { font-size: var(--h4); line-height: 1.2; font-weight: 600; }
.t-h5 { font-size: var(--h5); line-height: 1.4; font-weight: 600; }
.t-lg { font-size: var(--t-lg); line-height: 30px; }
.t-md { font-size: var(--t-md); line-height: 27px; }
.t-sm { font-size: var(--t-sm); line-height: 21px; }
.on-dark { color: var(--paper); }

/* ---------------- Buttons (rectangular) ---------------- */
.btn, .btn-solid, .btn-wht {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 39.6px; padding: 10px 20px; border-radius: 0;
  font-size: 14px; font-weight: 500; line-height: 19.6px; white-space: nowrap;
}
.btn { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-wht { background: var(--paper); color: var(--ink); }
.roll { display: inline-flex; overflow: hidden; vertical-align: bottom; }
.roll .ch { display: inline-block; overflow: hidden; height: 1em; line-height: 1; }
.roll .ch-in { display: flex; flex-direction: column; transition: transform .3s var(--ease-sineio); }
.roll .ch-in > span { display: block; height: 2em; line-height: 1; }
a:hover .roll .ch-in, button:hover .roll .ch-in { transform: translateY(-2em); }

/* ---------------- Header ---------------- */
.hd { position: absolute; top: 0; left: 0; right: 0; z-index: 60; }
.hd-in { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.brand img { width: 85px; height: 32.2px; }
.hd-right { display: flex; align-items: center; }
.hd-nav { display: flex; justify-content: space-between; width: 455px; margin-right: 34px; }
.hd-nav a { font-size: 14px; font-weight: 400; line-height: 19.6px; }
.cart-open { display: inline-flex; align-items: center; margin-right: 10px; font-size: 14px; line-height: 24px; }
.cart-open svg { width: 17px; height: 17px; margin-right: 10px; }
.cart-open .cart-count { font-weight: 500; }
.menu-open { display: none; align-items: center; gap: 10px; margin-left: 16px; }
.burger { display: inline-flex; flex-direction: column; gap: 5px; }
.burger i { display: block; width: 22px; height: 2px; background: currentColor; }
.hd-dark { color: var(--paper); }
.btn-call { border: 0; }
.hd-dark .btn-call { background: var(--paper); color: var(--ink); }
.hd-light { color: var(--ink); }
.hd-light .btn-call { background: var(--ink); color: var(--paper); }

/* ---------------- Menu + cart overlays ---------------- */
.scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 20, 20, 0.5);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
html.menu-on .scrim, html.cart-on .scrim { opacity: 1; pointer-events: auto; }
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(440px, 92vw);
  background: var(--ink); color: var(--paper); padding: 110px 40px 40px;
  transform: translateX(105%); transition: transform .5s cubic-bezier(.65,0,.35,1);
  display: flex; flex-direction: column; gap: 48px; overflow-y: auto;
}
html.menu-on .menu { transform: translateX(0); }
.menu-links { display: flex; flex-direction: column; gap: 8px; }
.menu-links a { font-size: var(--h4); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }
.menu-util { display: flex; flex-direction: column; gap: 12px; }
.menu-util a { font-size: var(--t-md); color: var(--wa80); }
.cartbox { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.cart-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 94vw);
  background: var(--paper); color: var(--ink); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform .5s cubic-bezier(.65,0,.35,1);
  pointer-events: auto;
}
html.cart-on .cart-panel { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--line);
}
.cart-head h4 { font-size: 20px; line-height: 30px; }
.cart-close svg { width: 22px; height: 22px; }
.cart-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-empty { padding: 36px 0; color: var(--grey); }
.ci { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cloud); }
.ci img { width: 64px; height: 64px; object-fit: cover; background: var(--cloud); }
.ci-main { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ci-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.ci-row { display: flex; align-items: center; justify-content: space-between; }
.ci-qty input { width: 52px; height: 34px; border: 1px solid var(--line); border-radius: 3px; padding: 4px 8px; background: var(--form); }
.ci-remove { color: var(--grey); text-decoration: underline; font-size: var(--t-sm); }
.cart-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.subtotal-row { display: flex; justify-content: space-between; font-weight: 600; }
.btn-checkout {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); border-radius: 0;
  padding: 14px 20px; font-weight: 500;
}
.express-btn {
  border: 1px solid var(--ink); border-radius: 0; padding: 12px 20px;
  font-weight: 500; background: var(--paper); color: var(--ink);
}
.cart-err { display: none; color: #b3261e; font-size: var(--t-sm); line-height: 21px; }
.cart-err.show { display: block; }

/* ---------------- Hero ---------------- */
.hero { background: var(--grey); color: var(--paper); min-height: 100vh; padding: 110px 0 32px; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 50px; }
.hero-left { display: flex; justify-content: space-between; align-items: center; width: 605px; flex: none; }
.hero-list { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; width: 121.8px; flex: none; }
.hero-list li { position: relative; font-size: 14px; font-weight: 400; line-height: 19.6px; }
.hero-list li::before {
  content: ""; position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; background: var(--paper);
}
.hero-photo img { width: 375px; max-width: 100%; height: auto; object-fit: cover; }
.hero-right { display: flex; justify-content: space-between; align-items: center; width: 582px; flex: none; }
.hero-intro { width: 334px; flex: none; font-size: 16px; line-height: 24px; }

/* ---------------- Marquee ---------------- */
.mq { overflow: hidden; margin-top: -62px; }
.mq-track { display: inline-flex; width: max-content; will-change: transform; animation: mqmove 520.3s linear infinite; }
.mq-item {
  font-size: 300px; line-height: 300px; font-weight: 800; letter-spacing: -0.0606em;
  text-transform: uppercase; white-space: nowrap; color: var(--paper);
}
@keyframes mqmove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------- Section heads (centred) ---------------- */
.sec-head {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center; margin-left: auto; margin-right: auto;
}
.sec-head h2 { font-size: var(--h1); line-height: 1.2; }
.sec-head h2.sh-72 { font-size: var(--h2); line-height: 1.1; }
.svc-sec .sec-head p { color: var(--wa80); }

/* ---------------- Work cards / rows ---------------- */
.after-mq { margin-top: var(--sp180); }
.work-rows { margin-top: 40px; }
.wrow { margin-bottom: 40px; }
.wrow:last-child { margin-bottom: 0; }
.wrow-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wrow-1 { display: flex; justify-content: center; }
.pcard { display: flex; flex-direction: column; gap: 12px; }
.pcard-img { display: block; overflow: hidden; }
.pcard-img img { width: 100%; height: auto; aspect-ratio: 690 / 490; object-fit: cover; transition: transform .36s var(--ease-sineio); }
.pcard-z:hover .pcard-img img { transform: scale(1.09); }
.pcard.wide { width: 970px; }
.pcard.wide .pcard-img img { width: 100%; height: auto; aspect-ratio: 970 / 542; }
.pcard-body { display: flex; align-items: center; gap: 36px; }
.pcard-title { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.pcard-meta { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); line-height: 21px; color: var(--grey); }
.pcard-meta i { width: 1px; height: 11px; background: var(--grey); flex: none; }

/* ---------------- Services ---------------- */
.svc-sec { background: var(--grey); color: var(--paper); margin-top: var(--sp180); padding: var(--sp120) 0; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 915px; margin: 40px auto 0; }
.svc { background: var(--wa10); padding: 28px; height: 295px; display: flex; flex-direction: column; justify-content: space-between; gap: 50px; }
.svc-ic img { width: 44px; height: 44px; }
.svc-tx { width: 304px; }
.svc-tx h3 { font-size: var(--h6); line-height: 36px; font-weight: 600; color: var(--paper); letter-spacing: 0; }
.svc-tx p { margin-top: 20px; font-size: var(--t-sm); line-height: 21px; color: var(--wa80); }
.cta-strip {
  width: 745px; margin: 60px auto 0; background: var(--wa10); padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.cta-strip p { font-size: var(--h6); font-weight: 600; line-height: 36px; color: var(--paper); }

/* ---------------- Client stories (logo cluster) ---------------- */
.logos-sec { margin-top: var(--sp180); }
.lcluster { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 40px; }
.lrow2 { display: flex; gap: 8px; }
.tile { width: 258px; height: 124px; background: var(--cloud); padding: 0 44px; display: flex; align-items: center; }
.tile img { max-height: 36px; max-width: 100%; width: auto; object-fit: contain; }

/* ---------------- Numbers ---------------- */
.nums-sec { margin-top: var(--sp180); }
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.num { background: var(--cloud); padding: 32px; height: 366px; display: flex; flex-direction: column; justify-content: space-between; }
.count-num { font-variant-numeric: tabular-nums; }

/* ---------------- Feedback slider ---------------- */
.fb-sec { margin-top: var(--sp180); }
.slider { margin-top: 40px; }
.sl-view { overflow: hidden; }
.sl-track { display: flex; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.slide {
  flex: 0 0 508px; margin-right: 20px; height: 296px; background: var(--cloud);
  padding: 32px; display: flex; flex-direction: column; gap: 30px;
}
.slide .quote { font-size: var(--t-lg); font-weight: 500; line-height: 30px; width: 444px; }
.slide-who { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.slide-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.who-name { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.who-role { font-size: var(--t-sm); font-weight: 500; line-height: 21px; }
.sl-ctrl { position: relative; height: 60px; margin-top: 32px; }
.progress { position: absolute; left: 0; top: 26px; width: 1204px; height: 8px; background: var(--cloud); }
.progress-fill { height: 100%; background: var(--grey); width: 11.111%; transition: width .45s ease; }
.sl-btns { position: absolute; right: 0; top: 0; display: flex; gap: 24px; }
.sl-btn { width: 60px; height: 60px; background: var(--cloud); display: flex; align-items: center; justify-content: center; transition: all .45s; }
.sl-btn:hover { background: var(--grey); }
.sl-btn img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0); transition: all .45s; }
.sl-btn:hover img { filter: brightness(2); }

/* ---------------- FAQ ---------------- */
.mt180 { margin-top: var(--sp180); }
.qa-list { width: 760px; margin: 60px auto 0; }
.qa-item { border-bottom: 1px solid var(--line); padding: 32px 0; }
.qa-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; text-align: left; }
.qa-q > span:first-child { font-size: var(--h6); font-weight: 600; line-height: 1.2; }
.qa-ic { position: relative; width: 28px; height: 28px; flex: none; }
.qa-ic img { position: absolute; inset: 0; width: 28px; height: 28px; object-fit: contain; }
.qa-ic .ic-minus { opacity: 1; } /* minus (horizontal bar) always overlays the plus (vertical bar) -> closed state reads as "+"; open state hides .ic-plus, leaving "-" */
.qa-item.open .ic-plus { opacity: 0; }
.qa-item.open .ic-minus { opacity: 1; }
.qa-a { height: 0; overflow: hidden; transition: height .4s var(--ease-sineio); max-width: 600px; }
.qa-a p { padding: 20px 0 0; font-size: 14px; line-height: 24px; color: var(--ink); }

/* ---------------- Blog cards ---------------- */
.blog-sec { margin-top: var(--sp180); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.grid-blog4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px; margin-top: 40px; }
.bcard { display: flex; flex-direction: column; gap: 16px; }
.bcard-img { display: block; overflow: hidden; }
.bcard-img img { width: 100%; aspect-ratio: 335 / 260; object-fit: cover; transition: transform .36s var(--ease-sineio); }
.bcard:hover .bcard-img img { transform: scale(1.09); }
.bcard-text { display: flex; flex-direction: column; gap: 8px; }
.bcard-title { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.bcard-meta { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); line-height: 21px; color: var(--grey); }
.bcard-meta i { width: 2px; height: 2px; background: var(--grey); flex: none; }

/* ---------------- Tabs / panes ---------------- */
.page-top { padding-top: var(--sp150); }
.page-top.shop-top { padding-top: var(--sp180); }
.single-title { text-align: center; }
.tabs { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }
.tab-link {
  font-size: 16px; line-height: 24px; padding: 10px 20px; height: 46px;
  border: 1px solid var(--line); color: var(--ink); background: transparent;
  display: inline-flex; align-items: center;
}
.tab-link.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pane { display: none; }
.pane.on { display: block; }

/* ---------------- Shop cards ---------------- */
.grid-shop { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; margin-top: 20px; }
.scard { display: flex; flex-direction: column; gap: 8px; }
.scard-img { display: block; overflow: hidden; }
.scard-img img { width: 100%; height: auto; aspect-ratio: 690 / 490; object-fit: cover; transition: transform .36s var(--ease-sineio); }
.scard:hover .scard-img img { transform: scale(1.09); }
.scard-title { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.scard-price { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; }
.scard-price .was { color: var(--smoke); text-decoration: line-through; }
.scard-price .now { color: var(--grey); }
.scard-price i { width: 2px; height: 2px; background: var(--smoke); flex: none; }

/* ---------------- Project single ---------------- */
.info-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: var(--sp180); }
.info-story { width: 669px; flex: none; display: flex; flex-direction: column; gap: 24px; }
.meta-grid { width: 387px; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.meta-cell { display: flex; flex-direction: column; gap: 4px; }
.mk { font-size: 16px; font-weight: 500; line-height: 24px; }
.mv { font-size: 16px; line-height: 24px; color: var(--smoke); }
.full-img { margin-top: 60px; }
.full-img img { width: 100%; height: auto; aspect-ratio: 1400 / 800; object-fit: cover; }
.story-block { margin-top: 60px; display: flex; flex-direction: column; gap: 24px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 60px; }
.gallery img { width: 100%; aspect-ratio: 690 / 490; object-fit: cover; }
.related { margin-top: var(--sp180); }

/* ---------------- Product single ---------------- */
.buy-grid { display: flex; gap: 80px; align-items: center; }
.buy-img { width: 100%; max-width: 690px; flex: 0 1 auto; }
.buy-img img { width: 100%; height: auto; object-fit: cover; }
.buy-box { width: 410px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.buy-box .desc { font-size: var(--t-sm); line-height: 24px; color: var(--grey); }
.buy-price { display: flex; align-items: center; gap: 12px; font-size: var(--h6); font-weight: 600; line-height: 36px; }
.buy-price .was { text-decoration: line-through; }
.buy-price .dot { font-weight: 600; }
.qty-row { display: flex; gap: 20px; margin-left: 20px; }
.qty-input {
  width: 66px; height: 54px; background: var(--form); border: 1px solid var(--line);
  border-radius: 3px; padding: 16px 6px 16px 12px; font-size: 16px;
}
.btn-add {
  height: 54px; padding: 16px 60px; background: var(--ink); color: var(--paper);
  border-radius: 0; font-size: 14px; font-weight: 500; white-space: nowrap;
}
.soldout { display: none; color: var(--grey); }

/* ---------------- Article ---------------- */
.art-head { width: 834px; }
.art-intro { margin-top: 28px; font-size: 16px; line-height: 24px; color: var(--grey); }
.art-meta { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; }
.author { display: flex; align-items: center; gap: 14px; }
.author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.author .an { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.author .ar { font-size: var(--t-sm); line-height: 21px; color: var(--grey); }
.art-facts { display: flex; align-items: center; gap: 28px; font-size: 16px; }
.art-fact { display: inline-flex; align-items: center; gap: 8px; }
.art-fact img { width: 20px; height: 20px; }
.art-hero { margin-top: 40px; }
.art-hero img { width: 100%; aspect-ratio: 1440 / 698; object-fit: cover; }
.art-body { display: flex; justify-content: space-between; align-items: flex-start; }
.rich { width: 920px; flex: none; display: flex; flex-direction: column; }
.rich h5 { margin-top: 60px; }
.rich p { margin-top: 16px; }
.rich blockquote {
  margin-top: 60px; font-size: var(--t-lg); font-weight: 500; line-height: 30px;
  border-left: 3px solid var(--ink); padding: 40px 0 40px 40px;
}
.rich > img { margin-top: 60px; width: 100%; aspect-ratio: 920 / 440; object-fit: cover; }
.share-rail { width: 284px; flex: none; margin-top: 60px; }
.share-rail .sh { font-size: var(--t-lg); font-weight: 600; line-height: 30px; }
.share-links { display: flex; gap: 28px; margin-top: 20px; }
.share-links a { width: 24px; height: 24px; display: inline-flex; }
.share-links img { width: 24px; height: 24px; object-fit: contain; }

/* ---------------- Forms (contact) ---------------- */
.contact-col { width: 500px; margin: 80px auto 0; }
.contact-top { padding-bottom: 40px; }
.form-title { font-size: var(--h6); font-weight: 700; line-height: 36px; text-align: center; letter-spacing: 0; text-transform: capitalize; }
.form-contact { margin-top: 36px; display: flex; flex-direction: column; gap: 40px; }
.field { display: flex; flex-direction: column; }
.field label { font-size: 16px; font-weight: 700; line-height: 24px; margin-bottom: 16px; }
.inp {
  width: 100%; height: 53px; background: var(--paper);
  border: 0 solid var(--line); border-bottom-width: 1px;
  border-radius: 0; padding: 16px 0; font-size: 14px; line-height: 20px;
}
.inp:focus { outline: none; border-color: var(--grey); }
textarea.inp { height: 100px; padding: 0 0 16px; resize: vertical; }
.form-contact .btn-solid { width: 100%; height: 56px; padding: 16px; font-size: 16px; transition: all .36s; }
.form-contact .btn-solid:hover { background: var(--grey); }
.msg-ok, .msg-err { display: none; margin-top: 28px; text-align: center; }
.msg-ok.show, .msg-err.show { display: block; }
.form-err { display: none; margin-top: 18px; color: #b3261e; font-size: var(--t-sm); line-height: 21px; }
.form-err.show { display: block; }

/* ---------------- Style guide ---------------- */
.sg-top { padding-top: 140px; }
.sg-label-40 { font-size: var(--h4); font-weight: 500; line-height: 60px; margin-bottom: 18px; }
.sg-label-36 { font-size: var(--h5); font-weight: 600; line-height: 50.4px; }
.sg-shades { margin-top: 60px; }
.sw-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sw-box { height: 130px; }
.sw-cap { display: flex; justify-content: space-between; margin-top: 12px; font-size: 16px; font-weight: 500; line-height: 24px; }
.sg-samples { margin-top: 60px; }
.spec-list { display: flex; flex-direction: column; }
.sg-type { margin-top: 30px; }
.spec-lines { display: flex; flex-direction: column; }
.sg-actions { margin-top: 60px; }
.actions-row {
  margin-top: 30px; background: var(--grey); border-radius: 12px; padding: 30px;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}

/* ---------------- Licenses ---------------- */
.lic { text-align: center; }
.lic-intro { width: 600px; margin: 40px auto 0; }
.lic-h { font-size: var(--h4); font-weight: 600; line-height: 48px; margin-top: 84px; }
.lic-note { font-size: 16px; font-weight: 500; color: var(--grey); margin-top: 16px; }
.lic-note a, .lic-line a { text-decoration: underline; }
.lic-imgs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 24px; }
.lic-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lic-line { color: var(--grey); margin-top: 16px; }

/* ---------------- Changelog ---------------- */
.rel-list { margin-top: 120px; }
.rel-item { display: flex; flex-direction: column; gap: 10px; }
.rel-item .ver { font-size: var(--h4); font-weight: 600; line-height: 48px; text-align: center; }
.rel-item .note { font-size: var(--t-sm); line-height: 24px; color: var(--smoke); }

/* ---------------- Utility pages (401 / 404) ---------------- */
.util-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
.util-col { width: 596px; }
.pw-card {
  margin-top: 100px; background: var(--form); border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column; gap: 34px; min-height: 303px;
}
.pw-card label { display: block; font-size: var(--h5); font-weight: 700; line-height: 54px; margin-bottom: 5px; }
.pw-inp {
  width: 100%; height: 54px; background: var(--paper); border: 1px solid var(--grey);
  border-radius: 6px; padding: 16px 14px; font-size: 16px;
}
.pw-card .btn-solid { width: 100%; height: 56px; padding: 16px; font-size: 16px; border-radius: 6px; }
.util-col .form-err { text-align: center; }
.nf-img { width: 596px; height: auto; }
.nf-title { margin-top: 40px; font-size: var(--h5); font-weight: 600; line-height: 50.4px; text-align: center; letter-spacing: 0; }
.nf-text { margin-top: 18px; font-size: var(--t-md); line-height: 27px; color: var(--smoke); text-align: center; }
.nf-ret { margin-top: 50px; text-align: center; }
.social-row { height: 96px; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 36px 0; }
.social-row a { font-size: 16px; font-weight: 500; line-height: 24px; }

/* ---------------- Checkout ---------------- */
.co-wrap { padding-top: 170px; padding-bottom: 20px; }
.co-flex { display: flex; justify-content: center; align-items: flex-start; }
.co-main { width: 800px; flex: none; margin-right: 20px; }
.co-block { background: var(--form); border-radius: 16px; padding: 28px; margin-bottom: 20px; }
.co-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--h5); font-weight: 600; line-height: 50.4px; }
.co-head h1 { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; }
.co-head .req { font-size: 16px; font-weight: 400; line-height: 24px; }
.co-fs { background: var(--paper); padding: 20px; }
.bfield { display: flex; flex-direction: column; margin-bottom: 15px; }
.bfield:last-child { margin-bottom: 0; }
.bfield label { font-size: 14px; font-weight: 700; line-height: 21px; margin-bottom: 12px; }
.binp, .bsel {
  width: 100%; height: 38px; background: var(--form); border: 1px solid var(--line);
  border-radius: 3px; padding: 8px 12px; font-size: 16px; line-height: 24px;
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.co-note { background: var(--paper); padding: 64px 16px; text-align: center; margin-top: 1px; }
.check-line { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-top: 6px; }
.check-line input { width: 18px; height: 18px; accent-color: var(--ink); }
.bill-addr { margin-top: 20px; }
.bill-head { font-size: var(--h6); font-weight: 600; line-height: 36px; margin-bottom: 12px; }
.co-empty { height: 41px; }
.co-side { width: 320px; flex: none; background: var(--form); border-radius: 16px; padding: 28px; }
.co-side-h { font-size: var(--h5); font-weight: 600; line-height: 50.4px; letter-spacing: -0.01em; }
.co-sumbox { background: var(--paper); padding: 20px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; line-height: 24px; padding: 4px 0; }
.co-submit { width: 100%; height: 42px; padding: 9px 15px; margin-top: 21px; color: var(--cloud); font-size: 16px; }
.co-err { display: none; color: #b3261e; font-size: var(--t-sm); line-height: 21px; margin-top: 14px; }
.co-err.show { display: block; }
.co-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.co-item { display: flex; justify-content: space-between; font-size: 16px; }

/* ---------------- Footer ---------------- */
.ft { background: var(--grey); color: var(--paper); margin-top: var(--sp180); padding: 120px 0 108px; }
.ft-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ft-cta { position: relative; width: 556px; flex: none; }
.ft-cta h2 { font-size: 120px; line-height: 1.2; font-weight: 600; letter-spacing: -0.06em; color: var(--paper); }
.ft-badge {
  position: absolute; left: 426.7px; top: 216.9px; width: 146px; height: 146px;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; font-weight: 600; line-height: 21px; text-transform: uppercase; padding: 20px 34px;
  transition: all .36s ease-in-out;
}
.ft-badge:hover { background: var(--paper); color: var(--ink); }
.ft-cols { display: flex; gap: 81px; }
.ft-col { display: flex; flex-direction: column; gap: 14px; }
.ft-col .ct { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--wa60); margin-bottom: 10px; }
.ft-col a { font-size: 14px; font-weight: 400; line-height: 21px; color: var(--paper); }
.ft-bottom {
  margin-top: 132px; border-top: 1px solid var(--wa10); padding-top: 28px;
  display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; line-height: 21px;
}
.ft-bottom a { font-size: 16px; color: var(--paper); text-decoration: underline; }

/* ---------------- Reveal on scroll (JS-gated pre-hide) ---------------- */
.js .rv { opacity: 0; transform: translateY(150px); }
.js .rv.rv-in {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.8s var(--ease-out) 0.2s, transform 0.8s var(--ease-out) 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
  .mq-track { animation: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  .progress { width: calc(100% - 196px); }
  .wrow-2 { grid-template-columns: 1fr 1fr; }
  .pcard-img img { width: 100%; height: auto; aspect-ratio: 690 / 490; }
  .pcard.wide { width: 82%; }
  .pcard.wide .pcard-img img { width: 100%; height: auto; aspect-ratio: 970 / 542; }
  .grid-shop { grid-template-columns: 1fr 1fr; }
  .scard-img img { width: 100%; height: auto; aspect-ratio: 690 / 490; }
  .svc-grid, .cta-strip { width: 100%; }
  .buy-grid { gap: 48px; }
  .buy-img { width: 55%; }
  .buy-box { width: 45%; }
  .rich { width: 64%; }
  .share-rail { width: 28%; }
  .info-story { width: 47.8%; }
  .meta-grid { width: 27.6%; }
  .co-main { width: 66%; }
  .co-side { width: 30%; }
}
@media (max-width: 991px) {
  :root { --h1: 54px; --h2: 44px; --h3: 36px; --h4: 32px; --h5: 28px; --h6: 22px; --sp180: 100px; --sp150: 110px; --sp120: 80px; }
  .hd-nav { display: none; }
  .menu-open { display: inline-flex; }
  .hero { min-height: 0; padding-top: 96px; }
  .hero-top { flex-direction: column; align-items: flex-start; margin-top: 30px; }
  .hero-left, .hero-right { width: 100%; }
  .hero-photo img { width: 300px; height: auto; }
  .mq { margin-top: 10px; }
  .mq-item { font-size: 120px; line-height: 120px; }
  .wrow-2 { grid-template-columns: 1fr; }
  .pcard.wide { width: 100%; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc { height: auto; }
  .lrow2 { flex-wrap: wrap; justify-content: center; }
  .num-grid { grid-template-columns: 1fr 1fr; }
  .num { height: 300px; }
  .slide { flex-basis: 86vw; }
  .slide .quote { width: 100%; }
  .qa-list { width: 100%; }
  .grid-4, .grid-blog4 { grid-template-columns: 1fr 1fr; }
  .grid-shop { grid-template-columns: 1fr; }
  .tabs { flex-wrap: wrap; }
  .info-grid { flex-direction: column; }
  .info-story, .meta-grid { width: 100%; }
  .full-img img { height: auto; aspect-ratio: 1400 / 800; }
  .buy-grid { flex-direction: column; align-items: flex-start; }
  .buy-img, .buy-box { width: 100%; }
  .qty-row { margin-left: 0; }
  .art-head { width: 100%; }
  .art-body { flex-direction: column; gap: 10px; }
  .rich, .share-rail { width: 100%; }
  .contact-col { width: 100%; }
  .co-flex { flex-direction: column; }
  .co-main { width: 100%; margin-right: 0; }
  .co-side { width: 100%; margin-top: 20px; }
  .co-grid { grid-template-columns: 1fr; }
  .ft { padding: 80px 0 60px; }
  .ft-top { flex-direction: column; gap: 48px; }
  .ft-cta { width: 100%; }
  .ft-cta h2 { font-size: 54px; }
  .ft-badge { position: static; margin-top: 24px; }
  .ft-cols { flex-wrap: wrap; gap: 40px; }
  .ft-bottom { flex-direction: column; gap: 12px; margin-top: 60px; }
  .lic-intro { width: 100%; }
  .lic-imgs { grid-template-columns: repeat(3, 1fr); }
  .util-col { width: 100%; }
  .nf-img { width: 100%; }
}
@media (max-width: 560px) {
  .grid-4, .grid-blog4, .num-grid, .sw-row { grid-template-columns: 1fr; }
  .slide { flex-basis: 92vw; height: auto; min-height: 296px; }
  .sl-btns { position: static; margin-top: 16px; }
  .sl-ctrl { height: auto; }
  .progress { position: static; width: 100%; margin-top: 8px; }
  .gallery { grid-template-columns: 1fr; }
  .f-row, .f-row3 { grid-template-columns: 1fr; }
}