/* ============================================================   R DESIGN - MYSTIC LUXURY design system   Deep black / charcoal / silver / cold white. Editorial.   ============================================================ */
:root{
  /* Surfaces */
  --void:#060607;
  --obsidian:#0a0a0c;
  --charcoal:#101014;
  --graphite:#16161b;
  --graphite-2:#1c1c22;
  /* Hairlines */
  --line:rgba(198,200,206,.14);
  --line-soft:rgba(198,200,206,.08);
  --line-bright:rgba(230,232,236,.32);
  /* Metal & type */
  --silver:#a9abb2;
  --silver-bright:#d8dade;
  --frost:#eceef1;
  --white:#ffffff;
  /* Accent — restrained platinum glow */
  --glow:rgba(198,200,206,.12);
  --glow-bright:rgba(230,232,236,.26);
  /* Accent — restrained silver-blue for savings emphasis only */
  --ice:#9db4f5;
  --ice-soft:rgba(157,180,245,.14);
  /* Type */
  --ff:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;
  --fs-eyebrow:12px;
  --fs-nav:13px;
  --fs-body:16px;
  --fs-lead:clamp(16px,1.4vw,19px);
  --fs-h3:clamp(22px,2.2vw,30px);
  --fs-h2:clamp(38px,5.4vw,84px);
  --fs-h1:clamp(46px,5.6vw,92px);
  --fs-display:clamp(60px,12vw,200px);
  /* Space */
  --section:clamp(90px,11vw,170px);
  --gutter:clamp(20px,3vw,48px);
  --max:1440px;
  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-slow:.9s;
  --t:.5s;
  --t-fast:.28s;
  --focus:0 0 0 2px var(--obsidian),0 0 0 4px var(--silver-bright);
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
/* Anchor targets clear the fixed header on every breakpoint. */
section[id],.portfolio-hero,.policy-hero{
  scroll-margin-top:96px
}
body{
  margin:0;
  background:var(--obsidian);
  color:var(--frost);
  font-family:var(--ff);
  font-size:var(--fs-body);
  line-height:1.65;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{
  background:var(--frost);
  color:var(--obsidian)
}
a{
  color:inherit;
  text-decoration:none
}
img{
  max-width:100%
}
button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:4px
}
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter)
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
/* ---------- typography primitives ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--silver);
  margin:0 0 26px;
}
.eyebrow:before{
  content:"";
  width:34px;
  height:1px;
  background:var(--line-bright);
  flex:none
}
.display{
  font-size:var(--fs-h2);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:800;
  margin:0;
  color:var(--white);
}
.lede{
  font-size:var(--fs-lead);
  line-height:1.75;
  color:var(--silver);
  max-width:34em;
  margin:26px 0 0
}
.section-head{
  max-width:900px;
  margin-bottom:clamp(44px,6vw,84px)
}
.section-head .lede{
  margin-top:22px
}
.hairline{
  height:1px;
  background:var(--line);
  border:0;
  margin:0
}
/* ---------- sculptural buttons ---------- */
.btn{
  --btn-fg:var(--frost);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  padding:0 34px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--btn-fg);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line-bright);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 40px -22px rgba(0,0,0,.9);
  transition:transform var(--t) var(--ease),border-color var(--t),color var(--t),box-shadow var(--t);
}
/* light sweep */
.btn:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  border-color:var(--glow-bright);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 50px -24px rgba(0,0,0,.95)
}
.btn:hover:before{
  transform:translateX(120%)
}
.btn:active{
  transform:translateY(0)
}
.btn .arw{
  display:inline-flex;
  transition:transform var(--t) var(--ease)
}
.btn:hover .arw{
  transform:translate(4px,-4px)
}
.btn--primary{
  --btn-fg:var(--obsidian);
  background:linear-gradient(180deg,var(--white),#c9ccd2);
  border-color:transparent;
  color:var(--void);
}
.btn--primary:hover{
  box-shadow:0 26px 54px -22px rgba(230,232,236,.35)
}
.btn--ghost{
  background:none;
  border-color:var(--line);
  color:var(--silver-bright)
}
.btn--ghost:hover{
  color:var(--white);
  border-color:var(--line-bright)
}
.btn--block{
  width:100%;
  justify-content:center
}
/* text link with sliding hairline */
.tlink{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.06em;
  color:var(--silver-bright);
  padding-bottom:6px;
  position:relative;
}
.tlink:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--line-bright);
  transform-origin:left;
  transition:transform var(--t) var(--ease)
}
.tlink:hover:after{
  transform:scaleX(.55)
}
.tlink .arw{
  transition:transform var(--t) var(--ease)
}
.tlink:hover .arw{
  transform:translate(4px,-4px)
}
/* ---------- header ---------- */
.header{
  position:sticky;
  top:0;
  z-index:40;
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--gutter);
  background:rgba(10,10,12,.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line-soft);
  transition:background var(--t),border-color var(--t);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  transition:opacity var(--t)
}
/* Brand lockup as image (ZHVAZ/R DESIGN official assets) */
.brand--logo{
  gap:0
}
.brand--logo img{
  display:block;
  height:37px;
  width:auto
}
footer .brand--logo img,.foot-brand .brand--logo img{
  height:36px
}
.brand:hover{
  opacity:.85
}
.brand .mark{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:none;
  background:linear-gradient(160deg,var(--white),#b9bcc4);
  color:var(--void);
  font-weight:900;
  font-size:18px;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 24px -12px rgba(230,232,236,.4);
  transition:transform var(--t) var(--ease);
}
.brand:hover .mark{
  transform:rotate(-4deg)
}
.brand b,.brand small{
  display:block;
  line-height:1.25
}
.brand b{
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--white)
}
.brand small{
  font-size:10px;
  letter-spacing:.22em;
  color:var(--silver);
  margin-top:2px
}
.header nav{
  display:flex;
  align-items:center;
  gap:34px;
  font-size:var(--fs-nav)
}
.header nav a{
  position:relative;
  padding:6px 2px;
  color:var(--silver);
  transition:color var(--t)
}
.header nav a:not(.nav-cta):after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--silver-bright);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t) var(--ease)
}
.header nav a:not(.nav-cta):hover{
  color:var(--white)
}
.header nav a:not(.nav-cta):hover:after{
  transform:scaleX(1)
}
.nav-cta{
  min-height:44px;
  padding:0 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line-bright);
  color:var(--white);
  font-weight:700;
  font-size:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  transition:border-color var(--t),transform var(--t) var(--ease),box-shadow var(--t);
}
.nav-cta:hover{
  border-color:var(--glow-bright);
  transform:translateY(-1px);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.9)
}
.menu{
  display:none;
  font-size:22px;
  padding:8px 10px;
  color:var(--frost)
}
/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:min(94vh,940px);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(40px,6vw,90px);
  align-items:center;
  padding:clamp(70px,9vw,130px) var(--gutter);
  max-width:var(--max);
  margin:0 auto;
  overflow:hidden;
}
/* ambient cinematic light */
.hero:before{
  content:"";
  position:absolute;
  left:-12%;
  top:-30%;
  width:70%;
  height:90%;
  background:radial-gradient(closest-side,rgba(198,200,206,.10),transparent 72%);
  pointer-events:none;
  filter:blur(6px);
}
.hero:after{
  content:"";
  position:absolute;
  right:-10%;
  bottom:-25%;
  width:55%;
  height:70%;
  background:radial-gradient(closest-side,rgba(198,200,206,.06),transparent 70%);
  pointer-events:none;
}
.hero-copy{
  position:relative;
  z-index:1
}
.hero h1{
  font-size:var(--fs-h1);
  line-height:1.02;
  letter-spacing:-.05em;
  font-weight:800;
  margin:0;
  color:var(--white);
}
.hero h1 .ln{
  display:block
}
.hero h1 .thin{
  font-weight:300;
  color:var(--silver-bright)
}
.hero .lede{
  margin-top:36px;
  max-width:30em;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.8
}
.hero .actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:46px
}
.hero-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:30px;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:.32em;
  color:var(--silver-bright);
}
.hero-kicker:before{
  content:"";
  width:40px;
  height:1px;
  background:var(--line-bright)
}
.hero-meta{
  display:flex;
  gap:38px;
  margin-top:58px;
  padding-top:28px;
  border-top:1px solid var(--line);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--silver);
}
.hero-meta b{
  display:block;
  font-size:22px;
  font-weight:800;
  color:var(--white);
  letter-spacing:-.02em;
  margin-bottom:2px
}
/* entry animation */
.reveal{
  opacity:0;
  transform:translateY(26px);
  animation:rise .9s var(--ease) forwards
}
.reveal.d1{
  animation-delay:.12s
}
.reveal.d2{
  animation-delay:.24s
}
.reveal.d3{
  animation-delay:.36s
}
.reveal.d4{
  animation-delay:.48s
}
@keyframes rise{
  to{
    opacity:1;
    transform:none
  }
}
.hero-stage{
  position:relative;
  min-height:520px;
  border-radius:22px;
  z-index:1;
  background:    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 34%),    linear-gradient(160deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95);
  overflow:hidden;
}
.hero-stage:after{
  content:"";
  position:absolute;
  inset:16px;
  pointer-events:none;
  background:    linear-gradient(var(--line-bright),var(--line-bright)) left top/14px 1px no-repeat,    linear-gradient(var(--line-bright),var(--line-bright)) left top/1px 14px no-repeat,    linear-gradient(var(--line-bright),var(--line-bright)) right bottom/14px 1px no-repeat,    linear-gradient(var(--line-bright),var(--line-bright)) right bottom/1px 14px no-repeat;
}
.stage-main{
  position:absolute;
  inset:34px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:1px solid var(--line);
  border-radius:12px;
  padding:34px;
  overflow:hidden;
}
.stage-main:before{
  content:"R";
  position:absolute;
  right:-24px;
  top:-90px;
  font-size:380px;
  line-height:1;
  font-weight:900;
  color:rgba(230,232,236,.05);
}
.stage-main span,.stage-main small{
  font-size:12px;
  letter-spacing:.18em;
  color:var(--silver)
}
.stage-main>span{
  display:flex;
  align-items:center;
  gap:10px
}
.stage-main>span:before{
  content:"";
  width:22px;
  height:1px;
  background:var(--line-bright)
}
.stage-main strong{
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.25;
  margin:12px 0;
  letter-spacing:-.02em;
  color:var(--white)
}
.stage-main img{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  object-fit:contain;
  background:var(--graphite-2);
  margin:0 0 18px;
  border-radius:6px
}
.stage-tag{
  position:absolute;
  right:20px;
  top:20px;
  writing-mode:vertical-rl;
  font-size:10px;
  letter-spacing:.22em;
  color:var(--silver);
}
/* ---------- marquee brand strip ---------- */
.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--void)
}
.strip-inner{
  display:flex;
  gap:0;
  width:max-content;
  animation:slide 32s linear infinite
}
.strip span{
  display:flex;
  align-items:center;
  gap:26px;
  padding:20px 26px;
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.32em;
  color:var(--silver);
  font-weight:700;
}
.strip span i{
  font-style:normal;
  color:var(--line-bright)
}
@keyframes slide{
  to{
    transform:translateX(-50%)
  }
}
/* ---------- editorial sections ---------- */
.section{
  padding:var(--section) 0;
  border-top:1px solid var(--line-soft)
}
.section--void{
  background:var(--void)
}
/* ---------- brand intro (asymmetric) ---------- */
.intro{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(40px,6vw,100px);
  align-items:start
}
.intro-body .intro-text{
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.85;
  color:var(--silver);
  max-width:38em;
  margin:0
}
.intro-body .intro-text+.intro-text{
  margin-top:1.3em
}
.intro-body .intro-text strong{
  color:var(--white);
  font-weight:700
}
.principles{
  margin-top:46px;
  display:grid;
  gap:0;
  border-top:1px solid var(--line)
}
.principles > div{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:18px;
  align-items:baseline;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.principles i{
  font-style:normal;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--silver)
}
.principles b{
  font-size:17px;
  color:var(--white);
  display:block;
  letter-spacing:-.01em;
  line-height:1.4
}
.principles span{
  font-size:13px;
  color:var(--silver);
  line-height:1.7;
  display:block;
  margin-top:4px
}
.intro-aside{
  position:sticky;
  top:120px
}
.intro-aside .frame{
  position:relative;
  border-radius:18px;
  padding:38px;
  overflow:hidden;
  background:linear-gradient(165deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
}
.intro-aside .frame:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 20% 0%,rgba(198,200,206,.10),transparent 60%);
}
.intro-aside .frame p{
  margin:0;
  font-size:clamp(20px,2vw,28px);
  line-height:1.35;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--white);
  position:relative
}
.intro-aside .frame small{
  display:block;
  margin-top:16px;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--silver)
}
/* ---------- services (editorial rows) ---------- */
.service-list{
  border-top:1px solid var(--line)
}
.service-list a{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,.95fr) minmax(0,1.6fr) 52px;
  gap:clamp(16px,2.2vw,30px);
  align-items:baseline;
  padding:26px 12px;
  border-bottom:1px solid var(--line);
  transition:padding var(--t) var(--ease),background var(--t);
  overflow:hidden;
}
.service-list a:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(90deg,rgba(198,200,206,.07),transparent 60%);
  transition:opacity var(--t);
}
.service-list a:hover{
  padding-left:24px;
  background:rgba(198,200,206,.02)
}
.service-list a:hover:before{
  opacity:1
}
.service-list a:focus-visible{
  padding-left:24px
}
.service-list i{
  font-style:normal;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--silver);
  padding-top:.35em
}
.service-list b{
  font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.03em;
  line-height:1.3;
  color:var(--white);
  transition:color var(--t);
  position:relative;
  overflow-wrap:anywhere;
}
.service-list b small{
  display:inline-block;
  margin-left:10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--silver)
}
.service-list span{
  font-size:14px;
  line-height:1.75;
  color:var(--silver);
  max-width:40em;
  overflow-wrap:anywhere
}
.service-list em{
  align-self:center;
  justify-self:end;
  font-style:normal;
  font-size:24px;
  color:var(--silver);
  transition:transform var(--t) var(--ease),color var(--t);
}
.service-list a:hover em{
  transform:translateX(8px);
  color:var(--white)
}
.service-list .web-fields{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 14px;
  margin:10px 8px 0 0;
  font-size:12px;
  letter-spacing:.03em;
  color:var(--silver);
  background:rgba(255,255,255,.02);
  transition:border-color var(--t),color var(--t),background var(--t);
}
.service-list a:hover .web-fields{
  border-color:var(--line-bright);
  color:var(--frost);
  background:rgba(255,255,255,.05)
}
.service-more{
  margin:34px 0 0;
  font-size:14px;
  color:var(--silver)
}
.service-more .tlink{
  font-size:14px
}
/* ---------- process ---------- */
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line)
}
.steps article{
  position:relative;
  padding:34px 26px 38px;
  border-bottom:1px solid var(--line);
}
.steps article+article{
  border-left:1px solid var(--line)
}
.steps i{
  font-style:normal;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--line-bright);
  font-size:11px;
  color:var(--silver-bright);
  margin-bottom:22px;
}
.steps b{
  display:block;
  font-size:19px;
  letter-spacing:-.02em;
  color:var(--white);
  margin-bottom:10px
}
.steps span{
  font-size:13px;
  line-height:1.7;
  color:var(--silver)
}
/* ---------- faq ---------- */
.faq{
  border-top:1px solid var(--line);
  max-width:920px
}
.faq details{
  border-bottom:1px solid var(--line)
}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 6px;
  font-size:clamp(16px,1.5vw,19px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--frost);
  cursor:pointer;
  list-style:none;
  transition:color var(--t),padding var(--t) var(--ease);
}
.faq summary:hover{
  color:var(--white);
  padding-left:14px
}
.faq summary:after{
  content:"+";
  flex:none;
  font-size:22px;
  font-weight:300;
  color:var(--silver);
  transition:transform var(--t) var(--ease);
}
.faq details[open] summary:after{
  content:"−";
  transform:rotate(180deg)
}
.faq details p{
  margin:0;
  padding:0 6px 28px;
  max-width:44em;
  color:var(--silver);
  line-height:1.85;
  font-size:14px
}
/* ---------- cta ---------- */
.cta{
  position:relative;
  padding:clamp(90px,11vw,160px) 0;
  text-align:center;
  overflow:hidden;
  background:var(--void)
}
.cta:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(900px,90%);
  height:100%;
  background:radial-gradient(closest-side,rgba(198,200,206,.09),transparent 74%);
}
.cta .display{
  position:relative
}
.cta .lede{
  margin:24px auto 0;
  text-align:center
}
.cta .actions{
  justify-content:center;
  margin-top:48px;
  position:relative
}
.ctaR{
  position:absolute;
  right:6%;
  bottom:8%;
  font-size:clamp(120px,18vw,240px);
  font-weight:900;
  line-height:1;
  color:rgba(230,232,236,.04);
  pointer-events:none;
  user-select:none
}
/* ---------- footer ---------- */
footer{
  padding:64px 0 44px;
  border-top:1px solid var(--line);
  background:var(--void)
}
.foot-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:36px 48px;
  align-items:start
}
.foot-brand .brand{
  align-self:center;
  margin-bottom:14px
}
.foot-tagline{
  margin:0;
  font-size:13px;
  color:var(--silver-bright);
  line-height:1.7;
  max-width:22em
}
.foot-services{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:13px
}
.foot-services a{
  color:var(--silver);
  position:relative;
  padding:4px 0;
  transition:color var(--t)
}
.foot-services a:hover{
  color:var(--white)
}
.foot-services a:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--line-bright);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t) var(--ease)
}
.foot-services a:hover:after{
  transform:scaleX(1)
}
.foot-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:12.5px;
  line-height:1.8;
  color:var(--silver)
}
.foot-info b{
  font-size:13px;
  font-weight:700;
  color:var(--white);
  letter-spacing:-.01em;
  margin-bottom:4px
}
.foot-info a{
  color:var(--silver);
  text-decoration:underline;
  text-underline-offset:3px;
  margin-top:6px;
  transition:color var(--t)
}
.foot-info a:hover{
  color:var(--white)
}
.foot-ruvexa{
  grid-column:1/-1;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--silver);
  padding-top:22px;
  margin-top:6px;
  border-top:1px solid var(--line-soft)
}
/* ============================================================   PORTFOLIO PAGE   ============================================================ */
.portfolio-hero{
  padding:clamp(70px,9vw,140px) 0 clamp(40px,5vw,70px)
}
.portfolio-hero .display{
  font-size:clamp(52px,8vw,130px)
}
.portfolio-page{
  padding-bottom:var(--section)
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:26px 0 34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(30px,4vw,54px)
}
.filters button{
  padding:11px 20px;
  border-radius:999px;
  border:1px solid var(--line);
  font-size:13px;
  color:var(--silver);
  background:rgba(255,255,255,.02);
  transition:color var(--t),border-color var(--t),background var(--t),transform var(--t) var(--ease);
}
.filters button:hover{
  color:var(--white);
  border-color:var(--line-bright);
  transform:translateY(-1px)
}
.filters button[aria-pressed="true"]{
  background:linear-gradient(180deg,var(--white),#c9ccd2);
  color:var(--void);
  border-color:transparent;
  font-weight:700;
}
/* child classifications sit directly under the parent chips.
   Visual separation from the parent row: a clear top gap plus a subtle
   divider so the subcategory chips never look like continuation text.
   Hidden entirely when the parent has no children. */
.subfilter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 26px;
  padding-top:12px;
  border-top:1px solid var(--line-bright);
}
.subfilter[hidden]{display:none}
.subfilter button{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line-bright);
  font-size:11.5px;
  color:var(--silver);
  background:rgba(255,255,255,.02);
  transition:color var(--t),border-color var(--t),background var(--t),transform var(--t) var(--ease);
}
.subfilter button:hover{
  color:var(--white);
  border-color:var(--line-bright);
  transform:translateY(-1px)
}
.subfilter button[aria-pressed="true"],
.subfilter button.active{
  background:var(--ice-soft);
  color:var(--ice);
  border-color:var(--ice);
  font-weight:700;
  box-shadow:0 0 0 2px var(--ice-soft);
}
@media(max-width:860px){
  .filters{padding:20px 0 24px;margin-bottom:22px;gap:8px}
  .filters button{padding:9px 14px;font-size:12px}
  .subfilter{margin:12px 0 20px;padding-top:10px;gap:6px}
  .subfilter button{padding:7px 12px;font-size:11.5px}
}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.6vw,22px)
}
.portfolio-card{
  position:relative;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(165deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
}
.portfolio-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-bright);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.95)
}
.portfolio-card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform 1.2s var(--ease)
}
.portfolio-card:hover img{
  transform:scale(1.03)
}
.portfolio-meta{
  position:absolute;
  inset:auto 0 0 0;
  padding:24px 20px 16px;
  background:linear-gradient(180deg,transparent,rgba(6,6,7,.9) 60%)
}
.portfolio-meta b{
  display:block;
  font-size:15px;
  color:var(--white);
  letter-spacing:-.01em
}
.portfolio-meta span{
  font-size:11px;
  letter-spacing:.14em;
  color:var(--silver)
}
.pm-wrap{
  margin-top:48px;
  display:flex;
  justify-content:center
}
.pm-wrap[hidden]{
  display:none
}
.load-more{
  min-height:52px;
  padding:0 32px;
  border-radius:999px;
  border:1px solid var(--line-bright);
  color:var(--silver-bright);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:color var(--t),border-color var(--t),transform var(--t) var(--ease);
}
.load-more:hover{
  color:var(--white);
  border-color:var(--glow-bright);
  transform:translateY(-2px)
}
.load-more[hidden]{
  display:none
}
#portfolio-empty{
  padding:70px 20px;
  text-align:center;
  color:var(--silver);
  font-size:14px;
  border:1px dashed var(--line);
  border-radius:18px;
}
#portfolio-empty[hidden]{
  display:none
}
/* ---------- website card: mini browser chrome on dark ---------- */
.website-card .browser-thumb{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:#fff
}
.website-card .bt-chrome{
  display:flex;
  align-items:center;
  gap:6px;
  flex:none;
  height:30px;
  padding:0 12px;
  background:#e9e9ec;
  border-bottom:1px solid #d4d4d9
}
.website-card .bt-chrome i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c6c6cc;
  flex:none
}
.website-card .bt-address{
  flex:1;
  height:12px;
  margin-left:8px;
  border-radius:6px;
  background:#fbfbfc
}
.website-card .bt-viewport{
  flex:1;
  min-height:0;
  overflow:hidden;
  background:#fff
}
.website-card .bt-viewport img{
  position:static;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block
}
/* ---------- modal ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  padding:50px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:rgba(4,4,6,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.modal.open{
  display:flex
}
.modal-close{
  position:absolute;
  top:22px;
  right:26px;
  font-size:30px;
  line-height:1;
  color:var(--silver);
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  transition:color var(--t),border-color var(--t),transform var(--t) var(--ease);
}
.modal-close:hover{
  color:var(--white);
  border-color:var(--line-bright);
  transform:rotate(90deg)
}
.modal-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  max-width:100%
}
.modal img{
  max-width:min(1200px,90vw);
  max-height:76vh;
  object-fit:contain;
  border-radius:10px
}
.modal-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:46px;
  line-height:1;
  color:var(--silver);
  padding:12px 16px;
  transition:color var(--t),transform var(--t) var(--ease);
}
.modal-nav:hover{
  color:var(--white)
}
.modal-prev{
  left:2%
}
.modal-next{
  right:2%
}
.modal-prev:hover{
  transform:translate(-4px,-50%)
}
.modal-next:hover{
  transform:translate(4px,-50%)
}
.modal-nav[hidden]{
  display:none
}
.modal>div{
  margin-top:26px;
  text-align:center;
  max-width:640px
}
.modal>div b{
  display:block;
  font-size:20px;
  letter-spacing:-.01em;
  color:var(--white)
}
.modal-category{
  display:block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--silver)
}
.modal-counter{
  font-size:12px;
  color:var(--silver);
  margin-left:10px;
  font-variant-numeric:tabular-nums
}
.modal-desc{
  margin:12px auto 0;
  font-size:14px;
  color:var(--silver);
  line-height:1.8
}
.modal.web-modal{
  justify-content:flex-start;
  overflow-y:auto
}
.modal.web-modal .modal-stage{
  flex:none;
  min-height:0;
  width:100%
}
.web-frames{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  width:100%
}
.web-frames[hidden]{
  display:none
}
/* ---------- browser frame (modal, light chrome floating on dark) ---------- */
.browser-frame{
  width:min(1080px,92vw);
  flex:none;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.4);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(230,232,236,.06);
}
.bf-tabs{
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:9px 12px 0;
  background:#e4e4e8
}
.bf-tab{
  display:flex;
  align-items:center;
  gap:9px;
  max-width:280px;
  min-width:0;
  padding:9px 13px;
  background:#f7f7f9;
  border-radius:9px 9px 0 0;
  font-size:12px;
  color:#1a1a1f
}
.bf-favicon{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  flex:none;
  background:#111;
  color:#fff;
  border-radius:4px;
  font-size:9px;
  font-weight:900
}
.bf-tab-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.bf-tab-close{
  flex:none;
  opacity:.45;
  font-size:13px;
  line-height:1
}
.bf-newtab{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  margin-bottom:6px;
  border-radius:7px;
  color:#6d6d75;
  font-size:15px
}
.bf-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  background:#f7f7f9;
  border-bottom:1px solid #dcdce1
}
.bf-nav{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:50%;
  color:#55555e
}
.bf-nav svg{
  width:15px;
  height:15px
}
.bf-address{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  height:32px;
  padding:0 14px;
  background:#fff;
  border:1px solid #dcdce1;
  border-radius:999px;
  font-size:12px;
  color:#55555e
}
.bf-address svg{
  width:11px;
  height:11px;
  flex:none
}
.bf-address span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.bf-viewport{
  max-height:66vh;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;
  -webkit-overflow-scrolling:touch;
  position:relative
}
.modal .bf-viewport img{
  display:block;
  width:calc(100% * var(--z,1));
  max-width:none;
  height:auto;
  max-height:none;
  border-radius:0
}
.bf-viewport.zoomed{
  overflow-x:auto
}
/* zoom controls — same source image, CSS-only scaling */
.bf-zoom{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:999px;
  background:rgba(17,17,17,.78);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  opacity:.32;
  transition:opacity var(--t);
}
.browser-frame:hover .bf-zoom,.bf-zoom:focus-within{
  opacity:1
}
.bf-zoom-btn{
  min-width:30px;
  height:30px;
  padding:0 8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#e8e8ec;
  font-size:14px;
  line-height:1;
  font-weight:700;
  display:grid;
  place-items:center;
  transition:background var(--t),color var(--t);
}
.bf-zoom-btn:hover{
  background:rgba(255,255,255,.16);
  color:#fff
}
.bf-zoom-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:-2px
}
.bf-zoom-level{
  min-width:44px;
  text-align:center;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:#c9c9d1;
  letter-spacing:.02em
}
/* ---------- responsive ---------- */
@media(max-width:1080px){
  .hero{
    grid-template-columns:1fr;
    min-height:auto
  }
  .hero-stage{
    min-height:420px;
    order:2
  }
  .intro{
    grid-template-columns:1fr
  }
  .intro-aside{
    position:static
  }
  .principles > div{
    grid-template-columns:auto 1fr;
    gap:4px 12px;
    padding:18px 0
  }
  .principles > div > div{
    display:contents
  }
  .principles b{
    font-size:16px
  }
  .principles span{
    grid-column:1/-1;
    margin-top:2px
  }
  .steps{
    grid-template-columns:1fr 1fr
  }
  .steps article:nth-child(3){
    border-left:0
  }
  .portfolio-grid{
    grid-template-columns:repeat(3,1fr)
  }
  .preview-grid .preview-card,.preview-grid .preview-card:nth-child(6n+1),.preview-grid .preview-card:nth-child(6n+6){
    grid-column:span 6;
    aspect-ratio:4/5
  }
}
@media(max-width:860px){
  .header{
    height:68px
  }
  .header nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:68px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 20px 26px;
    background:rgba(10,10,12,.97);
    border-bottom:1px solid var(--line);
    box-shadow:0 30px 60px rgba(0,0,0,.6);
  }
  .header nav.open{
    display:flex
  }
  .header nav a:not(.nav-cta){
    padding:16px 2px;
    font-size:16px;
    border-bottom:1px solid var(--line-soft)
  }
  .header nav a:not(.nav-cta):after{
    display:none
  }
  .header nav .nav-cta{
    margin-top:18px;
    padding:15px;
    justify-content:center;
    font-size:15px
  }
  .menu{
    display:block
  }
  .hero h1 .br{
    display:block
  }
  .hero-meta{
    flex-wrap:wrap;
    gap:22px
  }
  .portfolio-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .preview-grid .preview-card,.preview-grid .preview-card:nth-child(6n+1),.preview-grid .preview-card:nth-child(6n+6){
    grid-column:span 12;
    aspect-ratio:4/5
  }
  .service-list a{
    grid-template-columns:46px 1fr 34px;
    gap:6px 14px;
    padding:22px 6px
  }
  .service-list a:hover,.service-list a:focus-visible{
    padding-left:12px
  }
  .service-list a span{
    display:block;
    grid-column:1/-1;
    grid-row:2;
    margin-top:10px;
    font-size:13.5px;
    line-height:1.7;
    max-width:none
  }
  .service-list .web-fields{
    margin:8px 6px 0 0
  }
  .service-list b{
    font-size:clamp(18px,5vw,21px);
    line-height:1.35;
    overflow-wrap:anywhere
  }
  .service-list b small{
    display:block;
    margin:6px 0 0
  }
  .service-list i{
    padding-top:.5em
  }
  .service-list em{
    grid-column:3;
    grid-row:1;
    align-self:start;
    margin-top:.15em;
    font-size:22px
  }
  .service-more{
    margin-top:26px
  }
  .steps{
    grid-template-columns:1fr
  }
  .steps article+article{
    border-left:0
  }
  .modal{
    padding:20px
  }
  .modal img{
    max-height:68vh
  }
  .modal-nav{
    font-size:40px
  }
  .foot-grid{
    grid-template-columns:1fr;
    gap:28px
  }
  .foot-services{
    gap:8px 16px
  }
  .foot-info{
    font-size:12.5px
  }
}
@media(max-width:560px){
  .foot-services{
    gap:6px 14px;
    font-size:12.5px
  }
  .foot-info{
    gap:2px
  }
  .browser-frame{
    width:94vw;
    border-radius:11px
  }
  .bf-tab{
    max-width:66%;
    padding:7px 10px;
    font-size:11px
  }
  .bf-toolbar{
    padding:7px 9px;
    gap:5px
  }
  .bf-nav{
    width:26px;
    height:26px
  }
  .bf-address{
    height:28px;
    font-size:11px;
    padding:0 10px
  }
  .bf-viewport{
    max-height:56vh
  }
  .web-frames{
    gap:16px
  }
  .hero-meta{
    gap:18px
  }
}
/* ---------- accessibility: reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important
  }
  html{
    scroll-behavior:auto
  }
  .reveal{
    opacity:1;
    transform:none
  }
  .strip-inner{
    animation:none
  }
  .btn:hover{
    transform:none
  }
  .portfolio-card:hover,.preview-grid .preview-card:hover{
    transform:none
  }
  .portfolio-card:hover img,.preview-grid .preview-card:hover img{
    transform:none
  }
}
/* ============================================================   PRIVACY POLICY PAGE   ============================================================ */
.policy-hero{
  padding-bottom:clamp(30px,4vw,50px)
}
.policy{
  max-width:860px;
  display:grid;
  gap:0
}
.policy-item{
  padding:30px 0;
  border-bottom:1px solid var(--line)
}
.policy-item:first-child{
  padding-top:0
}
.policy-item h2{
  font-size:clamp(17px,1.6vw,21px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
  margin:0 0 14px;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.policy-item h2:before{
  content:"";
  width:18px;
  height:1px;
  background:var(--line-bright);
  flex:none;
  transform:translateY(-6px)
}
.policy-item p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.85;
  color:var(--silver)
}
.policy-item p:last-child{
  margin-bottom:0
}
.policy-item ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px
}
.policy-item ul li{
  position:relative;
  padding-left:18px;
  font-size:14px;
  line-height:1.8;
  color:var(--silver);
  overflow-wrap:anywhere;
}
.policy-item ul li:before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--line-bright)
}
.policy-item ul li strong{
  color:var(--white);
  font-weight:700
}
.policy-item a{
  color:var(--silver-bright);
  text-decoration:underline;
  text-underline-offset:3px
}
.policy-item a:hover{
  color:var(--white)
}
.policy-contact li{
  font-size:14.5px
}
.policy-note{
  margin-top:16px;
  padding:14px 18px;
  border-left:2px solid var(--line-bright);
  background:rgba(198,200,206,.04);
  font-size:13px;
  color:var(--silver);
  line-height:1.75;
}
/* ============================================================   PRICING PAGE   ============================================================ */
.price-hero .lede{
  max-width:36em
}
.price-hero .lede strong{
  color:var(--white);
  font-weight:700
}
.price-hero-fast{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:30px 0 0;
  padding:12px 22px;
  border:1px solid var(--line-bright);
  border-radius:999px;
  font-size:14px;
  letter-spacing:-.01em;
  color:var(--silver-bright);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
}
.price-hero-fast b{
  color:var(--white);
  font-weight:700
}
.price-hero-fast:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  flex:none;
  background:var(--silver-bright);
  box-shadow:0 0 12px rgba(230,232,236,.7);
}
/* ---------- homepage: fast-work band ---------- */
.fast-band{
  position:relative;
  padding:clamp(56px,7vw,96px) 0;
  overflow:hidden;
  background:var(--void);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.fast-band:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(760px,92%);
  height:100%;
  background:radial-gradient(closest-side,rgba(198,200,206,.09),transparent 74%);
  pointer-events:none;
}
.fast-band .container{
  position:relative;
  max-width:960px;
  text-align:center
}
.fast-band .eyebrow{
  justify-content:center
}
.fast-band .eyebrow:before{
  display:none
}
.fast-title{
  font-size:clamp(26px,3.4vw,44px);
  line-height:1.2;
  letter-spacing:-.035em;
  font-weight:800;
  color:var(--white);
  margin:0;
}
.fast-sub{
  margin:14px 0 0;
  font-size:clamp(17px,1.7vw,22px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--silver-bright);
}
.fast-desc{
  margin:24px auto 0;
  max-width:44em;
  font-size:14.5px;
  line-height:1.85;
  color:var(--silver);
}
.fast-desc b{
  color:var(--silver-bright);
  font-weight:700
}
.fast-band .actions{
  justify-content:center;
  margin-top:36px
}
/* hero chip (first-screen signal) */
.hero-fast-chip{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0 0 4px;
  padding:10px 20px;
  border:1px solid var(--line-bright);
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--white);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  transition:border-color var(--t),transform var(--t) var(--ease);
}
.hero-fast-chip:hover{
  border-color:var(--glow-bright);
  transform:translateY(-1px)
}
.hero-fast-chip:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  flex:none;
  background:var(--silver-bright);
  box-shadow:0 0 10px rgba(230,232,236,.75);
}
.hero .actions{
  margin-top:34px
}
/* ---------- homepage: pricing preview ---------- */
.preview-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px)
}
.preview-card{
  position:relative;
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(24px,2.6vw,34px);
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(165deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
}
.preview-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-bright);
  box-shadow:0 40px 70px -40px rgba(0,0,0,.95)
}
.preview-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 80% at 100% 0%,rgba(198,200,206,.08),transparent 60%);
  pointer-events:none;
}
.preview-card b{
  position:relative;
  font-size:17px;
  letter-spacing:-.02em;
  color:var(--white)
}
.preview-card .preview-price{
  position:relative;
  font-size:clamp(21px,2vw,26px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.preview-card .preview-unit{
  font-size:13px;
  font-weight:500;
  color:var(--silver);
  margin-left:8px;
  letter-spacing:0
}
.preview-card small{
  position:relative;
  font-size:12.5px;
  color:var(--silver);
  line-height:1.7
}
.preview-card .preview-more{
  position:relative;
  margin-top:auto;
  padding-top:10px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--silver-bright);
}
.preview-card:hover .preview-more{
  color:var(--white)
}
.preview-note{
  margin:26px 0 0;
  font-size:13px;
  line-height:1.8;
  color:var(--silver);
  max-width:52em;
}
.preview-cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:34px
}
@media(max-width:1080px){
  .preview-card{
    grid-column:span 6
  }
}
@media(max-width:860px){
  .preview-card{
    grid-column:span 12;
    padding:22px
  }
  .fast-band .actions{
    flex-direction:column;
    align-items:stretch
  }
  .fast-band .actions .btn{
    justify-content:center
  }
}
/* ---------- accessibility: reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .preview-card:hover{
    transform:none
  }
}
/* ============================================================   DESIGN PACKAGES (pricing page) — special placement   ============================================================ */
.pkg-special{
  position:relative;
  padding:clamp(64px,8vw,120px) 0 clamp(60px,7vw,100px);
  background:    radial-gradient(90% 60% at 50% 0%,rgba(157,180,245,.07),transparent 70%),    var(--void);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.pkg-special:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(1100px,94%);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-bright),transparent);
}
.pkg-special .container{
  position:relative
}
.pkg-special-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
  padding:8px 18px;
  border:1px solid var(--line-bright);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--silver-bright);
  background:rgba(255,255,255,.03);
}
.pkg-special-badge:before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ice);
  box-shadow:0 0 10px rgba(157,180,245,.8);
}
.pkg-special .section-head{
  max-width:940px
}
.pkg-special .eyebrow{
  color:var(--ice)
}
.pkg-special .display{
  font-size:clamp(34px,4.4vw,64px)
}
.pkg-special .lede{
  max-width:40em
}
.pkg-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px)
}
.pkg-card{
  position:relative;
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  padding:clamp(26px,2.8vw,36px);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(168deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
}
.pkg-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-bright);
  box-shadow:0 44px 80px -44px rgba(0,0,0,.95)
}
.pkg-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(157,180,245,.07),transparent 60%);
}
/* two-per-row partners for the last row (ONLINE + BUSINESS) */
.pkg-card--half{
  grid-column:span 6
}
/* flagship package (contains website production) */
.pkg-card--wide{
  grid-column:span 6;
  border-color:rgba(157,180,245,.28)
}
.pkg-card--wide:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:20px;
  box-shadow:inset 0 0 0 1px rgba(157,180,245,.1);
}
.pkg-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px
}
.pkg-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:11px;
  border:1px solid var(--line);
  color:var(--silver-bright);
  background:rgba(255,255,255,.02);
}
.pkg-icon svg{
  width:19px;
  height:19px;
  display:block
}
.pkg-icon--web{
  color:var(--ice);
  border-color:rgba(157,180,245,.35)
}
.pkg-name{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--silver);
  text-transform:uppercase;
}
.pkg-target{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0 0 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--silver-bright);
}
.pkg-target:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  flex:none;
  margin-right:8px;
  background:var(--ice);
}
.pkg-card h3{
  position:relative;
  margin:0 0 18px;
  font-size:clamp(20px,2vw,25px);
  letter-spacing:-.02em;
  color:var(--white)
}
/* price hierarchy: package price first and largest, unit total struck through */
.pkg-price{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap
}
.pkg-price b{
  font-size:clamp(27px,2.7vw,34px);
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.pkg-price i{
  font-style:normal;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--silver);
}
.pkg-sum{
  position:relative;
  display:block;
  margin:8px 0 0;
  font-size:13px;
  color:var(--silver)
}
.pkg-save{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 20px;
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(157,180,245,.12),rgba(157,180,245,.05));
  border:1px solid rgba(157,180,245,.22);
}
.pkg-save-amt{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ice);
  font-variant-numeric:tabular-nums;
}
.pkg-save-pct{
  padding:3px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--obsidian);
  background:linear-gradient(180deg,var(--white),#c9ccd2);
}
.pkg-includes{
  position:relative;
  margin:0 0 22px;
  padding:0;
  list-style:none;
  display:grid;
  gap:9px
}
.pkg-includes li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  line-height:1.6;
  color:var(--silver);
}
.pkg-includes li:before{
  content:"";
  position:absolute;
  left:2px;
  top:.62em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--line-bright);
}
.pkg-includes li b{
  color:var(--silver-bright);
  font-weight:700
}
.pkg-includes li.web-flag b{
  color:var(--white)
}
.pkg-includes li.web-flag:before{
  background:var(--ice)
}
.pkg-actions{
  position:relative;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto
}
.pkg-actions .btn{
  flex:1 1 150px;
  min-height:48px;
  padding:0 18px;
  font-size:13px;
  justify-content:center
}
.pkg-actions .pkg-inquire{
  min-height:48px;
  padding:0 20px;
  border-radius:999px;
  flex:none;
  border:1px solid var(--line);
  color:var(--silver-bright);
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.02);
  transition:color var(--t),border-color var(--t),background var(--t),transform var(--t) var(--ease);
}
.pkg-actions .pkg-inquire:hover{
  color:var(--white);
  border-color:var(--line-bright);
  background:rgba(255,255,255,.06)
}
/* ---------- custom package consultation block ---------- */
.pkg-consult{
  position:relative;
  margin-top:clamp(26px,3vw,40px);
  padding:clamp(30px,3.6vw,48px);
  border-radius:22px;
  overflow:hidden;
  background:    radial-gradient(80% 120% at 0% 0%,rgba(157,180,245,.08),transparent 60%),    linear-gradient(165deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line-bright);
}
.pkg-consult-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:clamp(24px,3.4vw,56px);
  align-items:center
}
.pkg-consult h3{
  margin:0 0 14px;
  font-size:clamp(21px,2.2vw,28px);
  letter-spacing:-.025em;
  color:var(--white)
}
.pkg-consult p{
  margin:0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--silver);
  max-width:36em
}
.pkg-consult p b{
  color:var(--silver-bright);
  font-weight:700
}
.pkg-consult-actions{
  display:flex;
  flex-direction:column;
  gap:12px
}
.pkg-consult-actions .btn{
  justify-content:center
}
.pkg-notes{
  margin-top:clamp(24px,3vw,36px);
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
  max-width:900px;
}
.pkg-notes div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:18px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  line-height:1.75;
  color:var(--silver);
}
.pkg-notes b{
  color:var(--silver-bright);
  font-weight:700
}
.pkg-note-ref{
  margin:18px 0 0;
  font-size:12.5px;
  line-height:1.8;
  color:var(--silver);
}
.pkg-note-ref b{
  color:var(--silver-bright)
}
@media(max-width:1080px){
  .pkg-card,.pkg-card--half,.pkg-card--wide{
    grid-column:span 6
  }
  .pkg-consult-grid{
    grid-template-columns:1fr
  }
}
@media(max-width:860px){
  .pkg-card,.pkg-card--half,.pkg-card--wide{
    grid-column:span 12;
    padding:22px
  }
  .pkg-notes div{
    grid-template-columns:1fr;
    gap:4px
  }
  .pkg-consult-actions{
    flex-direction:column
  }
  .pkg-consult-actions .btn{
    width:100%
  }
}
/* ---------- homepage: package promotion section ---------- */
.promo{
  position:relative;
  padding:clamp(70px,9vw,130px) 0;
  overflow:hidden;
  background:    radial-gradient(90% 70% at 50% 0%,rgba(157,180,245,.08),transparent 72%),    var(--void);
  border-top:1px solid var(--line-soft);
}
.promo:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(1100px,94%);
  height:1px;
  background:linear-gradient(90deg,transparent,var(--line-bright),transparent);
}
.promo .container{
  position:relative
}
.promo-head{
  max-width:880px
}
.promo-title{
  font-size:clamp(30px,4vw,56px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
  color:var(--white);
  margin:0;
}
.promo-sub{
  margin:20px 0 0;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.8;
  color:var(--silver);
  max-width:38em
}
.promo-highlight{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:30px 0 0;
  padding:14px 26px;
  border:1px solid rgba(157,180,245,.3);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(157,180,245,.12),rgba(157,180,245,.04));
}
.promo-highlight b{
  font-size:clamp(17px,1.8vw,21px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.promo-highlight:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  flex:none;
  background:var(--ice);
  box-shadow:0 0 12px rgba(157,180,245,.8);
}
.promo-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:38px
}
.promo-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(40px,5vw,64px)
}
.promo-card{
  position:relative;
  grid-column:span 4;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,2.6vw,32px);
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(168deg,var(--graphite),var(--charcoal));
  border:1px solid var(--line);
  transition:transform var(--t) var(--ease),border-color var(--t),box-shadow var(--t);
}
.promo-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-bright);
  box-shadow:0 44px 80px -44px rgba(0,0,0,.95)
}
.promo-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(157,180,245,.07),transparent 60%);
}
.promo-card .pkg-head{
  margin-bottom:10px
}
.promo-card h3{
  position:relative;
  margin:0 0 14px;
  font-size:clamp(18px,1.9vw,22px);
  letter-spacing:-.02em;
  color:var(--white)
}
.promo-card .pkg-price b{
  font-size:clamp(24px,2.3vw,29px)
}
.promo-card .pkg-save{
  margin:12px 0 18px;
  padding:8px 12px
}
.promo-card .pkg-save-amt{
  font-size:14.5px
}
.promo-card .pkg-includes{
  margin:0 0 20px;
  gap:7px
}
.promo-card .pkg-includes li{
  font-size:13px
}
.promo-card .pkg-more{
  position:relative;
  margin-top:auto;
  padding-top:6px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--silver-bright);
}
.promo-card:hover .pkg-more{
  color:var(--white)
}
.promo-note{
  margin:30px 0 0;
  font-size:13px;
  line-height:1.8;
  color:var(--silver);
  max-width:54em;
}
@media(max-width:1080px){
  .promo-card{
    grid-column:span 6
  }
}
@media(max-width:860px){
  .promo-card{
    grid-column:span 12;
    padding:22px
  }
  .promo-actions{
    flex-direction:column;
    align-items:stretch
  }
  .promo-actions .btn{
    justify-content:center
  }
  .promo-highlight{
    width:100%;
    justify-content:center;
    text-align:center
  }
}

/* ============================================================
   MOBILE-ONLY CAROUSEL + LAYOUT TUNING (<=767px)
   Everything here applies below 768px only: PC/tablet keep the
   original layout untouched. High-specificity selectors make the
   flex track win over the original grid classes regardless of
   source order.
   ============================================================ */
@media (max-width:767px){

  /* ---------- continuous marquee ---------- */
  .slider-viewport{
    overflow:hidden;touch-action:pan-y;cursor:grab;
    margin-inline:-2px;padding-inline:2px;
    transition:height .45s var(--ease);
  }
  .slider-viewport:active{cursor:grabbing}
  .slider-viewport:focus-visible{outline:none;box-shadow:var(--focus)}
  .slider-track{
    position:relative;display:flex;align-items:flex-start;
    gap:clamp(12px,3.4vw,18px);
    --per-view:1.2;
    will-change:transform;
  }
  /* the flex track must beat the original grid classes at any source order */
  .service-list.slider-track,
  .preview-grid.slider-track,
  .promo-grid.slider-track,
  .pkg-grid.slider-track{display:flex;align-items:flex-start}
  .slider-slide{
    flex:0 0 calc((100% - (var(--per-view) - 1) * clamp(12px,3.4vw,18px)) / var(--per-view));
    min-width:0;display:flex;
  }
  .slider-slide > *{width:100%;min-width:0}
  [data-rd-clone]{pointer-events:none}

  /* controls */
  .slider-ui{
    display:flex;align-items:center;justify-content:center;gap:18px;
    margin-top:clamp(18px,4.4vw,26px);flex-wrap:wrap;
  }
  .slider-arrow{
    display:grid;place-items:center;flex:none;
    width:48px;height:48px;border-radius:50%;
    border:1px solid var(--line-bright);color:var(--silver-bright);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
    font-size:22px;line-height:1;
    transition:color var(--t),border-color var(--t),transform var(--t) var(--ease);
  }
  .slider-arrow:hover{color:var(--white);border-color:var(--glow-bright)}
  .slider-arrow:active{transform:scale(.96)}
  .slider-progress{width:min(220px,46vw);height:2px;border-radius:2px;background:var(--line);overflow:hidden}
  .slider-progress[hidden]{display:none}
  .slider-progress i{display:block;height:100%;width:0;background:var(--silver-bright)}

  /* ---------- global mobile rhythm: tighter vertical spacing ---------- */
  .section{padding:clamp(52px,12vw,76px) 0}
  .section-head{margin-bottom:clamp(28px,7vw,44px)}
  .section-head .lede{margin-top:16px}
  .fast-band{padding:clamp(44px,11vw,64px) 0}
  .fast-band .actions{margin-top:26px}
  .fast-desc{margin-top:18px}
  .promo{padding:clamp(52px,12vw,76px) 0}
  .promo-head{max-width:none}
  .promo-actions{margin-top:26px}
  .promo-grid{margin-top:clamp(28px,7vw,40px);gap:clamp(12px,3.4vw,18px)}
  .promo-note{margin-top:22px}
  .price-hero{padding-top:clamp(48px,12vw,72px)}
  .price-hero .actions{margin-top:26px}
  .price-hero-fast{margin-top:22px}
  .pkg-special{padding:clamp(48px,12vw,72px) 0 clamp(44px,11vw,64px)}
  .pkg-special .section-head{margin-bottom:clamp(26px,7vw,38px)}
  .pkg-grid{gap:clamp(12px,3.4vw,18px)}
  .pkg-consult{margin-top:clamp(20px,5vw,28px);padding:24px 20px}
  .pkg-consult-grid{gap:20px}
  .pkg-notes{margin-top:clamp(20px,5vw,28px)}
  .pkg-note-ref{margin-top:14px}
  .price-policy{padding:clamp(46px,11vw,66px) 0}
  .policy-item{padding:22px 0}
  .cta{padding:clamp(56px,13vw,84px) 0}
  .cta .actions{margin-top:30px}
  .hero{padding:clamp(40px,10vw,64px) var(--gutter)}
  .hero .lede{margin-top:22px}
  .hero .actions{margin-top:24px}
  .hero-meta{margin-top:30px;padding-top:20px;gap:20px 26px}
  .hero-kicker{margin-bottom:20px}
  .intro-body .intro-text{line-height:1.8}
  .principles{margin-top:30px}
  .faq details p{padding-bottom:22px}
  .faq summary{padding:20px 4px}
  footer{padding:44px 0 36px}

  /* ---------- card internals: fit the mobile width ---------- */
  .preview-card{padding:20px;border-radius:16px;gap:10px}
  .preview-card .preview-price{font-size:clamp(20px,5.4vw,24px)}
  .pkg-card{padding:20px;border-radius:16px}
  .pkg-card h3{margin-bottom:14px}
  .pkg-price b{font-size:clamp(24px,6.4vw,30px)}
  .pkg-price i{font-size:11.5px}
  .pkg-save{margin:10px 0 16px;padding:8px 12px;gap:8px}
  .pkg-save-amt{font-size:15px}
  .pkg-save-pct{font-size:11px;padding:3px 9px}
  .pkg-includes{gap:7px;margin-bottom:18px}
  .pkg-includes li{font-size:13px;line-height:1.6;padding-left:17px}
  .pkg-includes li:before{width:5px;height:5px}
  .pkg-sum{margin-top:6px;font-size:12.5px}
  .pkg-target{margin-bottom:12px;font-size:11.5px}
  .pkg-icon{width:34px;height:34px;border-radius:10px}
  .pkg-icon svg{width:17px;height:17px}
  .pkg-actions .pkg-inquire{min-height:44px;font-size:12.5px}
  .promo-card{padding:20px;border-radius:16px}
  .promo-card h3{margin-bottom:12px}
  .promo-card .pkg-price b{font-size:clamp(22px,6vw,27px)}
  .promo-card .pkg-includes li{font-size:12.5px}
  .service-more{margin-top:20px}/* ---------- kill character-level wrapping everywhere on mobile ---------- */
  .service-list b, .service-list span, .preview-card b, .preview-card small, .pkg-card h3, .pkg-includes li, .pkg-sum, .pkg-save-amt, .pkg-save-pct, .promo-card h3, .fast-title, .fast-sub, .promo-title, .promo-sub, .lede, .display {
    word-break:keep-all;overflow-wrap:break-word;
  }.pkg-price b, .pkg-save-amt, .preview-price {white-space:nowrap}
}

/* ---------- mobile service cards (short copy + CTA, uniform height) ---------- */
@media (max-width:767px){
  /* the service row anchor IS the slide - style it directly */
  .service-list .slider-slide{
    display:flex;flex-direction:column;gap:8px;align-items:stretch;
    padding:20px 18px;border:1px solid var(--line);border-radius:16px;
    background:linear-gradient(165deg,var(--graphite),var(--charcoal));
    border-bottom:1px solid var(--line);
    min-height:172px;
    transition:transform var(--t) var(--ease),border-color var(--t);
  }
  .service-list .slider-slide:before{display:none}
  .service-list .slider-slide:hover{transform:translateY(-2px);border-color:var(--line-bright);padding-left:18px}
  .service-list .slider-slide:focus-visible{padding-left:18px;box-shadow:var(--focus)}
  .service-list .slider-slide i{padding-top:0;font-size:11.5px;letter-spacing:.14em;color:var(--silver)}
  .service-list .slider-slide b{font-size:18px;line-height:1.4;letter-spacing:-.02em;word-break:keep-all;overflow-wrap:break-word;
    min-height:calc(18px * 1.4 * 2)}                    /* title area: up to 2 lines */
  .service-list .slider-slide b small{display:inline-block;margin:6px 0 0;font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--silver)}
  .service-list .slider-slide .svc-long{display:none}          /* long copy stays for PC + SEO */
  .service-list .slider-slide .svc-short{
    display:block;font-size:13.5px;line-height:1.7;color:var(--silver);
    word-break:keep-all;overflow-wrap:break-word;
    min-height:calc(13.5px * 1.7 * 2)}                  /* desc area: up to 2 lines */
  .service-list .slider-slide .svc-cta{
    display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;
    font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--silver-bright);
  }
  .service-list .slider-slide .svc-cta em{font-style:normal;font-size:16px;line-height:1}
  .service-list .slider-slide .web-fields{display:none}        /* detail lives on the portfolio page */
  .service-list .slider-slide > em{display:none}               /* PC row arrow; mobile uses the CTA */
}

@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .slider-track{transition:none}
  .slider-viewport{transition:none}
}

/* ---------- mobile-only service card extras (PC keeps the row layout) ---------- */
.svc-short,.svc-cta{display:none}
/* ============================================================   PRICING PAGE - text price list   ============================================================ */
.price-list .section-head .lede{max-width:46em}
.price-list-body .policy-item{padding:26px 0}
.price-list-body .policy-item h3{
  font-size:clamp(16px,1.5vw,19px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
  margin:0 0 12px;
  display:flex;
  align-items:baseline;
  gap:12px;
}
.price-list-body .policy-item h3:before{
  content:"";
  width:18px;
  height:1px;
  background:var(--line-bright);
  flex:none;
  transform:translateY(-5px)
}
.price-list-body .policy-item ul li{font-size:14.5px}
.price-list .policy-note{max-width:70em}
@media (max-width:767px){
  .price-list-body .policy-item{padding:20px 0}
  .price-list-body .policy-item h3{font-size:16.5px}
}
/* ============================================================   PORTFOLIO - card description line + work detail   ============================================================ */
.portfolio-meta .portfolio-desc{
  margin:5px 0 0;
  font-size:11px;
  color:var(--silver);
  line-height:1.5;
  letter-spacing:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
@media (max-width:767px){
  .portfolio-meta .portfolio-desc{-webkit-line-clamp:1}
}

/* server-rendered ?work= detail block (below the grid, on work URLs only) */
.work-detail{
  max-width:720px;
  margin:clamp(34px,5vw,54px) auto 0;
  padding-top:clamp(26px,4vw,36px);
  border-top:1px solid var(--line);
  text-align:center;
}
.work-detail-cat{
  margin:0 0 10px;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--silver);
}
.work-detail-title{
  margin:0 0 14px;
  font-size:clamp(19px,2.2vw,25px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--white);
}
.work-detail-desc{
  margin:0 auto;
  max-width:34em;
  font-size:14.5px;
  line-height:1.85;
  color:var(--silver);
}
.work-detail-back{
  display:inline-block;
  margin-top:22px;
  font-size:13px;
  color:var(--silver-bright);
  text-decoration:underline;
  text-underline-offset:3px;
}
.work-detail-back:hover{color:var(--white)}
.work-404{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:80px 20px;
}

/* ============ HOME — banner slide (admin-managed promo slides) ============
 * Horizontal promo strip directly under the header, above the hero.
 * Fixed-height viewport (CLS-safe): slides are absolutely stacked and
 * cross-fade, so nothing shifts while an image loads or swaps.
 */
.banner-slide{
  background:var(--obsidian);
  border-bottom:1px solid var(--line-soft);
  position:relative;
}
.banner-slide-frame{
  position:relative;
  max-width:var(--max);
  margin:0 auto;
  height:clamp(92px,13vw,180px);
  overflow:hidden;
}
.banner-slide-track{
  position:relative;
  width:100%;
  height:100%;
}
.banner-slide-item{
  position:absolute;
  inset:0;
  display:block;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t) var(--ease-io);
}
.banner-slide-item.is-active{
  opacity:1;
  visibility:visible;
}
.banner-slide-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.banner-slide-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-bright);
  border-radius:50%;
  background:rgba(6,6,7,.55);
  color:var(--frost);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.banner-slide-arrow:hover{
  background:var(--white);
  color:var(--obsidian);
}
.banner-slide-arrow svg{width:18px;height:18px}
.banner-slide-arrow--prev{left:14px}
.banner-slide-arrow--next{right:14px}
/* The arrow/dots rules set display:flex, which outranks the UA [hidden]
 * rule — re-hide the element explicitly when the attribute is set. */
.banner-slide-arrow[hidden],.banner-slide-dots[hidden]{display:none!important}
/* Page dots live OUTSIDE the image (a sibling of the frame), centred right
 * under it: they never overlap or cover the banner art, and the section
 * reserves their row so nothing below shifts. The pause control shares the
 * row so the visitor can stop the carousel themselves. */
.banner-slide-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:10px auto 12px;
}
.banner-slide-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.banner-slide-autotoggle{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:none;
  color:rgba(236,238,241,.5);
  cursor:pointer;
  border-radius:50%;
  transition:color var(--t-fast) var(--ease);
}
.banner-slide-autotoggle:hover{color:var(--frost)}
.banner-slide-autotoggle:focus-visible{outline:1px solid var(--line-bright);outline-offset:2px}
.banner-slide-autotoggle svg{width:11px;height:11px}
.banner-slide-autotoggle[hidden]{display:none!important}
.banner-slide-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(236,238,241,.30);
  cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.banner-slide-dot.is-active{background:var(--white)}
.banner-slide-page{
  font-size:12px;
  color:rgba(236,238,241,.6);
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em;
}
.banner-slide-page[hidden]{display:none!important}
/* Respect a reduced-motion system setting: no cross-fade, no arrow tint. The
 * slide still swaps instantly so the carousel keeps rotating. */
@media (prefers-reduced-motion:reduce){
  .banner-slide-item{transition:none}
  .banner-slide-arrow{transition:none}
  .banner-slide-dot{transition:none}
  .banner-slide-autotoggle{transition:none}
}
@media (max-width:767px){
  /* Mobile: the frame follows the banner image ratio (860x280 = 1720x560),
   * so nothing is cropped. contain keeps an off-spec upload whole — the
   * dark section background means no odd letterboxing appears. */
  .banner-slide-frame{
    height:auto;
    aspect-ratio:860 / 280;
    min-height:88px;
  }
  .banner-slide-item img{object-fit:contain}
  .banner-slide-arrow{width:32px;height:32px}
  .banner-slide-arrow svg{width:15px;height:15px}
  .banner-slide-arrow--prev{left:8px}
  .banner-slide-arrow--next{right:8px}
  .banner-slide-controls{margin:8px auto 10px;gap:8px}
  .banner-slide-autotoggle{width:20px;height:20px}
  .banner-slide-autotoggle svg{width:10px;height:10px}
  .banner-slide-dot{width:8px;height:8px}
}

/* ============ PRICE PAGE — notice box + flipbook layout ============
 * On desktop the notice sits left of the book; on mobile it stacks above
 * the book (DOM order already puts it first), so no reorder is needed.
 */
.pg-layout{
  display:grid;
  grid-template-columns:minmax(0,296px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,40px);
  align-items:start;
  margin-top:clamp(20px,2.4vw,32px);
}
.price-notice{
  background:linear-gradient(180deg,var(--charcoal),var(--graphite));
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 20px 14px;
  margin:0 0 24px;
}
.price-notice-title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--frost);
}
.price-notice p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.75;
  color:var(--silver);
}
.price-notice p strong{color:var(--frost)}
.price-notice .price-notice-lead{
  font-size:15px;
  line-height:1.7;
  color:var(--frost);
  padding-bottom:12px;
  border-bottom:1px solid var(--line-soft);
  margin-bottom:14px;
}
.price-notice .price-notice-last{margin-bottom:0}
@media (max-width:1023px){
  .pg-layout{grid-template-columns:1fr}
  .price-notice{position:static;top:auto}
}