/* ══════════════════════════════════════════════════════
   Rose Development Technology Studio LLC — Design System
   ══════════════════════════════════════════════════════ */

:root {
  --p:    #EDE0CC;
  --p2:   rgba(237,224,204,.82);
  --p3:   rgba(237,224,204,.58);
  --b:    #6E2C2C;           /* burgundy — backgrounds, borders, glows */
  --bt:   rgba(210,130,110,.95); /* burgundy TEXT — readable on dark bg */
  --bt2:  rgba(200,120,100,.8);  /* burgundy text, secondary */
  --dark: #080604;
  --sans: 'DM Sans',system-ui,sans-serif;
  --mono: 'DM Mono',monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:17px }
body {
  background:var(--dark);
  color:var(--p);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  cursor:none;
  font-weight:400;
  line-height:1.7;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
ul,ol { list-style:none }
button { font-family:var(--sans) }
::selection { background:var(--b); color:var(--p) }

/* ── Cursor ─────────────────────────────────────────── */
#cur {
  position:fixed; z-index:9999; pointer-events:none;
  width:8px; height:8px; border-radius:50%;
  background:var(--b);
  transform:translate(-50%,-50%);
  box-shadow:0 0 14px rgba(110,44,44,.8);
  transition:width .25s var(--ease),height .25s var(--ease);
  will-change:transform;
}
#cur-ring {
  position:fixed; z-index:9998; pointer-events:none;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(110,44,44,.38);
  transform:translate(-50%,-50%);
  transition:width .5s var(--ease),height .5s var(--ease),border-color .3s;
  will-change:transform;
}
body.hov #cur { width:14px; height:14px }
body.hov #cur-ring { width:48px; height:48px; border-color:rgba(110,44,44,.6) }
@media(hover:none) { #cur,#cur-ring { display:none } body { cursor:auto } }

/* ── Graph canvas ───────────────────────────────────── */
#graph {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.88;
}

/* ── Nav ────────────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:56px; padding:0 clamp(20px,4vw,52px);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(8,6,4,.84);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(237,224,204,.07);
}
.nbrand {
  font-size:13px; font-weight:600; color:rgba(237,224,204,.6);
  display:flex; align-items:center; gap:9px; letter-spacing:-.01em; flex-shrink:0;
}
.ndot {
  width:7px; height:7px; border-radius:50%; background:var(--b); flex-shrink:0;
  animation:ng 2.2s ease-in-out infinite;
}
@keyframes ng {
  0%,100% { box-shadow:0 0 4px rgba(110,44,44,.5); transform:scale(.88) }
  50%      { box-shadow:0 0 18px rgba(110,44,44,1); transform:scale(1.12) }
}
.nlinks { display:flex; align-items:center; gap:2px }
.nl {
  font-size:13px; font-weight:500; color:rgba(237,224,204,.52);
  padding:6px 13px; border-radius:6px;
  transition:color .2s,background .2s; white-space:nowrap;
}
.nl:hover { color:var(--p); background:rgba(237,224,204,.06) }
.nl--active { color:var(--p) !important }
.nlcta {
  color:var(--p)!important; font-weight:600!important;
  background:var(--b)!important; border:1px solid rgba(110,44,44,.5)!important;
  transition:box-shadow .35s,transform .2s!important;
}
.nlcta:hover { box-shadow:0 0 24px rgba(110,44,44,.55)!important; transform:translateY(-1px)!important }

.nhbg {
  display:none; background:none; border:none; color:var(--p2);
  font-size:20px; cursor:none; min-height:44px; min-width:44px;
  align-items:center; justify-content:center;
  border-radius:6px; transition:background .2s; flex-shrink:0;
}
.nhbg:hover { background:rgba(237,224,204,.06) }

@media(max-width:640px) {
  .nhbg { display:flex }
  .nlinks {
    display:none; position:fixed; top:56px; left:0; right:0;
    flex-direction:column;
    background:rgba(8,6,4,.96); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid rgba(237,224,204,.07);
    padding:12px clamp(20px,4vw,52px) 20px; gap:4px; z-index:199;
  }
  .nlinks.is-open { display:flex }
  .nlinks .nl { display:flex; align-items:center; font-size:15px; padding:13px 16px; border-radius:6px }
  .nlinks .nlcta { margin-top:8px }
}

/* ── Main ───────────────────────────────────────────── */
main { position:relative; z-index:10 }

/* ── Moments ────────────────────────────────────────── */
.moment {
  padding:clamp(52px,7vh,90px) clamp(20px,4vw,52px);
  border-top:1px solid rgba(237,224,204,.05); position:relative;
}
.moment:first-of-type { border-top:none }
main:not(.inner) .moment:first-of-type {
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
}
main.inner .moment:first-of-type { padding-top:calc(56px + clamp(36px,5vh,64px)) }

/* ── M1: Question ───────────────────────────────────── */
.q-line {
  font-size:clamp(26px,5vw,60px); font-weight:800; letter-spacing:-.03em;
  color:var(--p); line-height:1.1; margin-bottom:clamp(18px,2.5vh,30px);
}
.q-cursor {
  display:inline-block; width:3px; height:.85em;
  background:var(--b); vertical-align:middle; margin-left:3px;
  animation:qb 1s step-end infinite;
}
@keyframes qb { 0%,100% { opacity:1 } 50% { opacity:0 } }
.q-sub {
  font-size:clamp(16px,1.8vw,20px); color:var(--p3); font-weight:400;
  line-height:1.7; max-width:46ch; opacity:0; transition:opacity .9s var(--ease);
}
.q-sub.show { opacity:1 }
.q-scroll {
  margin-top:clamp(28px,4vh,48px);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(237,224,204,.28); display:flex; align-items:center; gap:10px;
  opacity:0; transition:opacity .9s var(--ease) .6s;
}
.q-scroll.show { opacity:1 }
.q-scroll-line {
  width:26px; height:1px;
  background:linear-gradient(to right,rgba(110,44,44,.7),transparent);
  animation:qsp 2s ease-in-out infinite;
}
@keyframes qsp { 0%,100% { opacity:.3;transform:scaleX(.4) } 50% { opacity:1;transform:scaleX(1) } }

/* ── M2: Tension ────────────────────────────────────── */
.tension-label {
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bt2); margin-bottom:clamp(22px,3vh,36px);
  display:flex; align-items:center; gap:12px;
}
.tension-label::after { content:''; flex:1; height:1px; background:rgba(237,224,204,.05) }
.ti {
  padding:clamp(18px,2.5vh,28px) 0;
  border-top:1px solid rgba(237,224,204,.06);
  display:grid; grid-template-columns:20px 1fr; gap:0 clamp(14px,2vw,28px); align-items:start;
}
.ti:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.ti-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(110,44,44,.7); box-shadow:0 0 9px rgba(110,44,44,.4); margin-top:7px;
  animation:td 2.2s ease-in-out infinite; animation-delay:var(--d,0s);
}
@keyframes td { 0%,100% { box-shadow:0 0 5px rgba(110,44,44,.3);transform:scale(.85) } 50% { box-shadow:0 0 14px rgba(110,44,44,.8);transform:scale(1.1) } }
.ti-head { font-size:clamp(16px,2vw,23px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:8px; line-height:1.15 }
.ti-body { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.78; font-weight:400; max-width:60ch }

/* ── M3: Who ────────────────────────────────────────── */
.who-intro { font-size:clamp(15px,1.7vw,18px); color:var(--p2); line-height:1.75; font-weight:400; max-width:56ch; margin-bottom:clamp(20px,3vh,32px) }
.who-h { font-size:clamp(32px,5.5vw,70px); font-weight:900; letter-spacing:-.04em; line-height:.95; color:var(--p); margin-bottom:clamp(24px,3.5vh,40px) }
.who-h .b { color:var(--bt) }
.who-h .d { color:rgba(237,224,204,.22) }
.who-dual { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,72px); padding-top:clamp(20px,3vh,36px); border-top:1px solid rgba(237,224,204,.06) }
@media(max-width:620px) { .who-dual { grid-template-columns:1fr; gap:32px } }
.wd-eye { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bt2); margin-bottom:12px }
.wd-h { font-size:clamp(17px,2.1vw,24px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:12px; line-height:1.1 }
.wd-p { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.82; font-weight:400 }

/* ── M4: Proof ──────────────────────────────────────── */
.proof-intro { font-size:clamp(15px,1.7vw,18px); color:var(--p2); line-height:1.75; font-weight:400; max-width:48ch; margin-bottom:clamp(16px,2.5vh,28px) }
.proof-h { font-size:clamp(28px,4.5vw,58px); font-weight:900; letter-spacing:-.04em; line-height:.97; color:var(--p); margin-bottom:clamp(24px,3.5vh,44px) }
.proof-h .b { color:var(--bt) }
.revs { display:flex; flex-direction:column }
.rev {
  padding:clamp(20px,3vh,36px) 0;
  border-top:1px solid rgba(237,224,204,.06);
  display:grid; grid-template-columns:1fr auto; gap:clamp(14px,3vw,48px);
  align-items:start; transition:border-color .3s;
}
.rev:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.rev:hover { border-color:rgba(110,44,44,.35) }
@media(max-width:480px) { .rev { grid-template-columns:1fr } }
.rq { font-size:clamp(15px,1.8vw,18px); color:var(--p); line-height:1.75; font-weight:400; margin-bottom:14px }
.rw { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--bt2) }
.rscore { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0 }
.rstars { display:flex; gap:3px }
.rstars svg { width:12px; height:12px; fill:var(--b); opacity:.8 }
.rsc { font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:rgba(237,224,204,.35) }

/* ── M5: Services ───────────────────────────────────── */
.what-intro { font-size:clamp(15px,1.7vw,18px); color:var(--p2); line-height:1.75; font-weight:400; max-width:48ch; margin-bottom:clamp(16px,2.5vh,28px) }
.what-h { font-size:clamp(28px,4.5vw,58px); font-weight:900; letter-spacing:-.04em; line-height:.97; color:var(--p); margin-bottom:clamp(24px,3.5vh,44px) }
.what-h .b { color:var(--bt) }
.what-h .d { color:rgba(237,224,204,.18) }
.svcs { display:flex; flex-direction:column }
.svc {
  display:grid; grid-template-columns:clamp(28px,3vw,48px) 1fr clamp(72px,9vw,120px);
  gap:0 clamp(14px,2vw,38px); padding:clamp(18px,2.8vh,32px) 0;
  border-top:1px solid rgba(237,224,204,.06); align-items:start; position:relative;
}
.svc:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.svc::before {
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,rgba(110,44,44,.8),rgba(110,44,44,.1) 55%,transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.svc:hover::before { transform:scaleX(1) }
@media(max-width:520px) { .svc { grid-template-columns:24px 1fr } .sperm { display:none } }
.sn { font-family:var(--mono); font-size:10px; color:rgba(237,224,204,.3); padding-top:4px }
.sname { font-size:clamp(16px,2.1vw,22px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:7px; line-height:1.1 }
.sname .ext { color:var(--bt2); font-size:.74em; font-weight:400; letter-spacing:0 }
.sdesc { font-size:clamp(13.5px,1.4vw,15px); color:var(--p2); line-height:1.8; font-weight:400 }
.sperm { font-family:var(--mono); font-size:9px; color:rgba(237,224,204,.25); text-align:right; line-height:2; padding-top:3px }

/* ── M6: Process ────────────────────────────────────── */
.how-intro { font-size:clamp(15px,1.7vw,18px); color:var(--p2); line-height:1.75; font-weight:400; max-width:48ch; margin-bottom:clamp(16px,2.5vh,28px) }
.how-h { font-size:clamp(28px,4.5vw,58px); font-weight:900; letter-spacing:-.04em; line-height:.97; color:var(--p); margin-bottom:clamp(24px,3.5vh,44px) }
.how-h .b { color:var(--bt) }
.procs { display:flex; flex-direction:column }
.proc {
  display:grid; grid-template-columns:clamp(28px,3vw,48px) 1fr;
  gap:0 clamp(14px,2vw,38px); padding:clamp(18px,2.8vh,32px) 0;
  border-top:1px solid rgba(237,224,204,.06);
}
.proc:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
@media(max-width:480px) { .proc { grid-template-columns:24px 1fr; gap:0 12px } }
.pn { font-size:clamp(26px,4vw,48px); font-weight:900; letter-spacing:-.04em; line-height:1; color:rgba(110,44,44,.18); padding-top:2px; transition:color .4s }
.proc:hover .pn { color:rgba(110,44,44,.42) }
.ptitle { font-size:clamp(16px,2.1vw,23px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:9px; line-height:1.1 }
.pbody { font-size:clamp(13.5px,1.4vw,15.5px); color:var(--p2); line-height:1.8; font-weight:400; max-width:58ch }
.ptags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.ptag { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,224,204,.45); border:1px solid rgba(237,224,204,.15); padding:4px 10px; border-radius:3px }

/* ── M7: CTA ────────────────────────────────────────── */
.m-ask { min-height:70svh; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden }
.m-ask::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 65% 55% at 50% 50%,rgba(110,44,44,.08),transparent 68%); pointer-events:none }
.ask-pre { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bt2); margin-bottom:18px }
.ask-h { font-size:clamp(38px,7vw,92px); font-weight:900; letter-spacing:-.04em; line-height:.93; color:var(--p); margin-bottom:20px }
.ask-h .b { color:var(--bt) }
.ask-sub { font-size:clamp(15px,1.6vw,18px); color:var(--p2); line-height:1.75; max-width:42ch; margin-bottom:38px; font-weight:400 }
.ask-btns { display:flex; gap:12px; flex-wrap:wrap }
.ask-p { font-size:15px; font-weight:600; background:var(--b); color:var(--p); border:1px solid rgba(110,44,44,.5); padding:14px 28px; border-radius:8px; transition:box-shadow .4s,transform .22s; display:inline-flex; align-items:center; min-height:48px }
.ask-p:hover { box-shadow:0 0 32px rgba(110,44,44,.55); transform:translateY(-2px) }
.ask-s { font-size:15px; font-weight:500; color:var(--p2); border:1px solid rgba(237,224,204,.15); padding:14px 28px; border-radius:8px; transition:color .2s,border-color .2s; display:inline-flex; align-items:center; min-height:48px }
.ask-s:hover { color:var(--p); border-color:rgba(237,224,204,.32) }

/* ── Footer ─────────────────────────────────────────── */
footer { border-top:1px solid rgba(237,224,204,.06); padding:clamp(36px,5vw,60px) clamp(20px,4vw,52px) clamp(20px,3vw,32px); position:relative; z-index:10 }
.ft { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px; margin-bottom:28px }
@media(max-width:560px) { .ft { grid-template-columns:1fr; gap:22px } }
.ftbrand { font-size:13px; font-weight:600; color:var(--p2); margin-bottom:10px }
.ftdesc { font-size:13px; color:var(--p2); line-height:1.72; font-weight:400; max-width:36ch }
.fth { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(237,224,204,.35); margin-bottom:12px }
.ftlinks { display:flex; flex-direction:column; gap:8px }
.ftlinks a { font-size:13px; color:var(--p2); transition:color .2s; font-weight:400 }
.ftlinks a:hover { color:var(--p) }
.ftbot { padding-top:18px; border-top:1px solid rgba(237,224,204,.05); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px }
.ftfine { font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:rgba(237,224,204,.28) }

/* ── Reveal ─────────────────────────────────────────── */
.r { opacity:0; transform:translateY(14px); filter:blur(2px); transition:opacity .85s cubic-bezier(.2,.9,.2,1),transform .9s var(--ease),filter .85s }
.r.on { opacity:1; transform:none; filter:none }
.r.d1 { transition-delay:.07s }
.r.d2 { transition-delay:.14s }
.r.d3 { transition-delay:.21s }
.r.d4 { transition-delay:.28s }
@media(prefers-reduced-motion:reduce) { .r,.q-cursor { opacity:1!important; transform:none!important; filter:none!important; animation:none!important; transition:none!important } }

/* ══════════════════════════════════════════════════════
   INNER PAGES
   ══════════════════════════════════════════════════════ */

.ftag { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bt2); margin-bottom:clamp(20px,3vh,32px); display:flex; align-items:center; gap:12px }
.ftag::after { content:''; flex:1; height:1px; background:rgba(237,224,204,.05) }

.page-h { font-size:clamp(34px,6vw,76px); font-weight:900; letter-spacing:-.04em; line-height:.95; color:var(--p); margin-bottom:clamp(20px,3vh,36px) }
.page-h .b { color:var(--bt) }
.page-h .d { color:rgba(237,224,204,.18) }

.page-lead { font-size:clamp(15px,1.7vw,18px); color:var(--p2); line-height:1.78; font-weight:400; max-width:54ch; margin-bottom:clamp(24px,3.5vh,44px) }

.section-h { font-size:clamp(28px,4.5vw,58px); font-weight:900; letter-spacing:-.04em; line-height:.97; color:var(--p); margin-bottom:clamp(20px,3vh,36px) }
.section-h .b { color:var(--bt) }

/* ── Services deep ──────────────────────────────────── */
.svc-deep { padding:clamp(26px,3.8vh,48px) 0; border-top:1px solid rgba(237,224,204,.06); position:relative }
.svc-deep:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.svc-deep::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg,rgba(110,44,44,.8),rgba(110,44,44,.1) 55%,transparent); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease) }
.svc-deep:hover::before { transform:scaleX(1) }
.svc-deep-grid { display:grid; grid-template-columns:clamp(28px,3vw,48px) 1fr; gap:0 clamp(14px,2vw,36px); align-items:start }
@media(max-width:480px) { .svc-deep-grid { grid-template-columns:24px 1fr; gap:0 12px } }
.svc-n { font-family:var(--mono); font-size:10px; color:rgba(237,224,204,.3); padding-top:6px }
.svc-title { font-size:clamp(18px,2.3vw,26px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:12px; line-height:1.1 }
.svc-title .ext { color:var(--bt2); font-size:.74em; font-weight:400 }
.svc-body { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.82; font-weight:400; max-width:62ch; margin-bottom:18px }
.svc-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-top:10px }
@media(max-width:480px) { .svc-meta { grid-template-columns:1fr } }
.svc-meta-label { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--bt2); margin-bottom:6px }
.svc-meta-val { font-size:clamp(13px,1.35vw,15px); color:var(--p2); line-height:1.72; font-weight:400 }

/* ── Certifications ─────────────────────────────────── */
.cert-person { margin-bottom:clamp(44px,6vh,68px) }
.cert-name { font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-.03em; color:var(--p); margin-bottom:7px; line-height:1.1 }
.cert-role { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bt2); margin-bottom:clamp(20px,3vh,32px) }
.cert-list { display:flex; flex-direction:column }
.cert-item { display:grid; grid-template-columns:14px 1fr auto; gap:0 18px; align-items:start; padding:clamp(16px,2.2vh,26px) 0; border-top:1px solid rgba(237,224,204,.06) }
.cert-item:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.cert-dot { width:7px; height:7px; border-radius:50%; background:var(--b); box-shadow:0 0 9px rgba(110,44,44,.5); margin-top:7px; flex-shrink:0; animation:td 2.2s ease-in-out infinite }
.cert-item--pending .cert-dot { background:rgba(237,224,204,.2); box-shadow:none; animation:none }
.cert-title { font-size:clamp(15px,1.9vw,19px); font-weight:600; letter-spacing:-.01em; color:var(--p); margin-bottom:4px; line-height:1.2 }
.cert-item--pending .cert-title { color:var(--p2) }
.cert-sub { font-size:13.5px; color:var(--p3); font-weight:400; line-height:1.6 }
.cert-badge { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--bt); border:1px solid rgba(200,120,100,.3); padding:4px 10px; border-radius:3px; flex-shrink:0; margin-top:4px; white-space:nowrap }
.cert-item--pending .cert-badge { color:rgba(237,224,204,.38); border-color:rgba(237,224,204,.14) }
.cert-img-wrap { margin:clamp(22px,3vh,36px) 0 }
.cert-img-link { display:inline-block }
.cert-img { max-height:360px; width:auto; border:1px solid rgba(237,224,204,.1); border-radius:6px; transition:box-shadow .3s }
.cert-img-link:hover .cert-img { box-shadow:0 0 32px rgba(110,44,44,.28) }
.cert-img-cap { font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--p3); margin-top:10px }

/* ── Portfolio ──────────────────────────────────────── */
.port-list { display:flex; flex-direction:column }
.port-item { display:grid; grid-template-columns:clamp(28px,3vw,48px) 1fr; gap:0 clamp(14px,2vw,38px); padding:clamp(18px,2.8vh,34px) 0; border-top:1px solid rgba(237,224,204,.06); position:relative }
.port-item:last-child { border-bottom:1px solid rgba(237,224,204,.06) }
.port-item::before { content:''; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg,rgba(110,44,44,.8),rgba(110,44,44,.1) 55%,transparent); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease) }
.port-item:hover::before { transform:scaleX(1) }
@media(max-width:480px) { .port-item { grid-template-columns:24px 1fr; gap:0 12px } }
.port-num { font-family:var(--mono); font-size:10px; color:rgba(237,224,204,.3); padding-top:5px }
.port-title { font-size:clamp(16px,2.1vw,23px); font-weight:700; letter-spacing:-.02em; color:var(--p); margin-bottom:8px; line-height:1.1 }
.port-desc { font-size:clamp(13.5px,1.4vw,15.5px); color:var(--p2); line-height:1.78; font-weight:400; max-width:60ch }
.port-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.port-tag { font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(237,224,204,.42); border:1px solid rgba(237,224,204,.14); padding:4px 10px; border-radius:3px }

/* ── Reviews page ───────────────────────────────────── */
.mod-notice { padding:18px 22px; border-radius:6px; border:1px solid; margin-bottom:32px }
.mod-notice--ok { background:rgba(110,44,44,.08); border-color:rgba(110,44,44,.35) }
.mod-notice--err { background:rgba(200,50,50,.06); border-color:rgba(200,50,50,.22) }
.mod-notice__title { font-weight:700; color:var(--p); margin-bottom:5px; font-size:15px }
.mod-notice__body { font-size:14px; color:var(--p2); line-height:1.65 }

/* ── Star rating ────────────────────────────────────── */
.star-row { display:flex; gap:6px; margin-top:8px }
.star-btn { background:none; border:none; cursor:none; padding:4px 6px; border-radius:4px; line-height:1; transition:background .15s }
.star-btn:hover { background:rgba(110,44,44,.1) }
.star-btn svg { width:24px; height:24px; fill:none; stroke:rgba(200,120,100,.35); stroke-width:1.5; transition:fill .15s,stroke .15s; pointer-events:none }
.star-btn.active svg,.star-btn.hover svg { fill:var(--b); stroke:var(--b) }

/* ── Forms ──────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:22px }
.field label { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--p3); font-weight:500 }
.field .field-help { font-size:13px; color:var(--p3); line-height:1.55; font-weight:400 }
.field input,.field textarea,.field select {
  background:rgba(237,224,204,.04); border:1px solid rgba(237,224,204,.14);
  color:var(--p); font-family:var(--sans); font-size:15px;
  padding:13px 16px; border-radius:6px; outline:none;
  transition:border-color .2s,box-shadow .2s; width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--b); box-shadow:0 0 0 2px rgba(110,44,44,.2) }
.field textarea { min-height:150px; resize:vertical; line-height:1.65 }
.field select { -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(237,224,204,.4)'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:10px; padding-right:38px; cursor:none }
.field input::placeholder,.field textarea::placeholder { color:rgba(237,224,204,.25) }
.field input[type="checkbox"] { width:17px; height:17px; accent-color:var(--b); flex-shrink:0 }

.hp-field { position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; pointer-events:none }

.check-group { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px }
.check-label { display:flex; align-items:center; gap:11px; background:rgba(237,224,204,.04); border:1px solid rgba(237,224,204,.12); border-radius:6px; padding:12px 16px; cursor:pointer; transition:border-color .2s; min-height:46px; font-size:14px; color:var(--p2); font-weight:500 }
.check-label:hover { border-color:rgba(110,44,44,.45) }
.check-label input[type="checkbox"] { width:15px; height:15px; accent-color:var(--b); flex-shrink:0 }
.check-label:has(input:checked) { border-color:rgba(110,44,44,.55); color:var(--p) }

.form-msg { padding:15px 20px; border-radius:6px; font-size:15px; line-height:1.65; margin-bottom:22px; border:1px solid; font-weight:500 }
.form-msg--success { background:rgba(110,44,44,.08); border-color:rgba(110,44,44,.35); color:var(--p) }
.form-msg--error { background:rgba(200,50,50,.06); border-color:rgba(200,50,50,.22); color:rgba(237,224,204,.9) }

/* ── Long-form (privacy / terms) ────────────────────── */
.lf-wrap { max-width:70ch }
.lf-section { padding:clamp(28px,4.5vh,52px) 0; border-top:1px solid rgba(237,224,204,.06) }
.lf-section:first-child { border-top:none; padding-top:0 }
.lf-h { font-size:clamp(17px,2.1vw,22px); font-weight:700; letter-spacing:-.02em; color:var(--bt); margin-bottom:clamp(14px,2vh,20px) }
.lf-body p { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.85; font-weight:400; margin-bottom:16px }
.lf-body p:last-child { margin-bottom:0 }
.lf-body ul,.lf-body ol { margin:12px 0 16px 20px; display:flex; flex-direction:column; gap:8px }
.lf-body li { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.75; font-weight:400 }
.lf-body strong { color:var(--p); font-weight:600 }

/* ── Cookie consent ─────────────────────────────────── */
#cookiePrompt { position:fixed; bottom:-160px; left:50%; transform:translateX(-50%); z-index:800; max-width:560px; width:calc(100% - 40px); transition:bottom .45s var(--ease); pointer-events:none }
#cookiePrompt.visible { bottom:20px; pointer-events:auto }
.cookieCard { background:rgba(8,6,4,.93); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(237,224,204,.1); border-radius:10px; padding:18px 22px; box-shadow:0 8px 40px rgba(0,0,0,.5) }
.cookieRow { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.cookieCopy { flex:1; min-width:200px }
.cookieKicker { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--bt2); margin-bottom:5px }
.cookieText { font-size:13px; color:var(--p2); line-height:1.6 }
.cookieText a { color:var(--p); text-decoration:underline; text-underline-offset:2px }
.cookieActions { display:flex; gap:6px; align-items:center }
.cookieBtn { font-size:13px; padding:9px 15px; border-radius:6px; cursor:none; border:1px solid; min-height:38px; font-family:var(--sans); transition:all .2s; font-weight:500 }
.cookieBtn--accept { background:var(--b); border-color:rgba(110,44,44,.5); color:var(--p) }
.cookieBtn--accept:hover { box-shadow:0 0 16px rgba(110,44,44,.4) }
.cookieBtn--decline { background:transparent; border-color:rgba(237,224,204,.12); color:var(--p2) }
.cookieBtn--decline:hover { border-color:rgba(237,224,204,.28); color:var(--p) }
.cookieBtn--dismiss { background:transparent; border-color:rgba(237,224,204,.1); color:var(--p3); padding:9px 11px }
.cookieBtn--dismiss:hover { color:var(--p) }

/* ── Utility ────────────────────────────────────────── */
.visually-hidden { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap }

/* ── Compat stubs ───────────────────────────────────── */
.wrap { padding:clamp(56px,8vh,100px) clamp(20px,4vw,52px); position:relative; z-index:10 }
.section { border-top:1px solid rgba(237,224,204,.05) }
.rail__title { font-size:clamp(26px,4.5vw,52px); font-weight:900; letter-spacing:-.04em; color:var(--p); margin-bottom:clamp(18px,2.5vh,30px) }
.copy p { font-size:clamp(14px,1.45vw,16px); color:var(--p2); line-height:1.82; font-weight:400 }