/* ============================================================
   THEWEBLORIA — On-Demand Web Department
   Etched-atelier design system (light only)
   ============================================================ */

:root{
  --paper:#F4EFE3;        /* aged ivory ground */
  --paper-2:#FBF8EF;      /* lifted panel */
  --paper-3:#ECE5D3;      /* recessed panel */
  --ink:#2A241C;          /* warm sepia ink */
  --ink-soft:#5C5344;
  --line:#C7BBA0;         /* hairline rules */
  --line-soft:#DAD1BC;
  --gold:#8A6B2F;         /* gold ink (AA on paper) */
  --gold-bright:#B8892F;
  --teal:#176B78;         /* from the TW logo */
  --seal:#93321F;         /* wax-seal red */
  --olive:#57614B;        /* engraving green */
  --radius:.5vw;
  --margin:3vw;
  --serif:"Cormorant Garamond", Georgia, serif;
  --body:"EB Garamond", Georgia, serif;
  --mono:"IBM Plex Mono", "Courier New", monospace;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:initial}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold);color:var(--paper-2)}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- paper skin overlays ---------- */
.skin{position:fixed;inset:0;pointer-events:none}
.skin--grain{
  z-index:120;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .40 0 0 0 0 .32 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.skin--hatch{
  z-index:119;opacity:.16;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(90,77,55,.09) 3px,rgba(90,77,55,.09) 4px);
}
.skin--vignette{
  z-index:121;opacity:.55;
  background:radial-gradient(ellipse 118% 118% at 50% 42%,transparent 62%,rgba(94,77,48,.16) 88%,rgba(70,56,33,.30) 100%);
}
.skin--plateline{z-index:118;opacity:.35;
  background:
    linear-gradient(90deg,rgba(138,107,47,.35) 0,transparent 1px) left/1px 100% no-repeat,
    linear-gradient(270deg,rgba(138,107,47,.35) 0,transparent 1px) right/1px 100% no-repeat;
  margin:0 calc(var(--margin) - .6vw);
}

/* status stamp (pxpush REC-dot analogue) */
.stamp{
  position:fixed;top:1.1rem;right:var(--margin);z-index:130;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;
  color:var(--seal);display:flex;gap:.5em;align-items:center;
  text-transform:uppercase;pointer-events:none;
}
.stamp i{width:.55em;height:.55em;border-radius:50%;background:var(--seal);
  box-shadow:0 0 6px rgba(147,50,31,.8),0 0 14px rgba(147,50,31,.4);
  animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--margin);
  mix-blend-mode:multiply;
}
.hdr__brand{display:flex;align-items:center;gap:.7rem}
.hdr__logo{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 1px 8px rgba(42,36,28,.18)}
.hdr__logo img{width:100%;height:100%;object-fit:cover}
.hdr__word{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:.06em}
.hdr__word em{font-style:normal;color:var(--gold)}
.hdr__nav{display:flex;gap:2.2vw;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase}
.hdr__nav a{position:relative;padding:.2em 0}
.hdr__nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:100% 0;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:0 0}
.hdr__nav a.is-active{color:var(--gold)}
.hdr__burger{display:none}

/* mobile menu */
@media(max-width:820px){
  .hdr__nav{display:none}
  .hdr__burger{display:block;background:none;border:1px solid var(--line);
    font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;padding:.55em .9em;
    color:var(--ink);text-transform:uppercase;border-radius:2px;cursor:pointer}
  .mnav{position:fixed;inset:0;z-index:140;background:var(--paper-2);
    display:flex;flex-direction:column;justify-content:center;gap:2.2rem;
    padding:0 8vw;transform:translateY(-102%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
  .mnav.is-open{transform:translateY(0)}
  .mnav a{font-family:var(--serif);font-size:2.2rem;border-bottom:1px solid var(--line-soft);padding-bottom:.4em}
  .mnav__close{position:absolute;top:1.2rem;right:5vw;background:none;border:none;
    font-family:var(--mono);letter-spacing:.2em;font-size:.7rem;cursor:pointer;color:var(--seal)}
}
@media(min-width:821px){.mnav{display:none}}

/* ---------- marquee heading ---------- */
.marquee{overflow:hidden;padding:1.2rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__item{
  font-family:var(--serif);font-weight:600;font-size:9vw;line-height:1;
  white-space:nowrap;padding-right:4vw;letter-spacing:.01em;color:var(--ink);
}
.marquee__item b{color:var(--seal);font-weight:600;padding-right:1.2vw}
.marquee--gold .marquee__item{color:var(--gold)}
.marquee--gold .marquee__item b{color:var(--ink)}

/* ---------- generic section scaffolding ---------- */
.sec{padding:9vh var(--margin);position:relative}
.sec--tight{padding:5vh var(--margin)}
.ledger{
  display:flex;gap:2rem;align-items:baseline;margin-bottom:3.5vh;
  border-bottom:1px solid var(--line);padding-bottom:1rem;
}
.ledger__no{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--seal);text-transform:uppercase}
.ledger__ti{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--ink-soft);text-transform:uppercase}
.cols{display:flex;gap:4vw;align-items:flex-start}
.cols__a{flex:0 0 30%}
.cols__b{flex:1}
@media(max-width:820px){.cols{flex-direction:column;gap:2rem}.cols__a{flex:auto}}

.lede{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.25;font-weight:500}
.lede em{font-style:italic;color:var(--gold)}
.prose p{margin-bottom:1.1em;max-width:62ch;color:var(--ink-soft)}
.prose p strong{color:var(--ink)}
.smallcaps{font-variant:small-caps;letter-spacing:.08em}

/* buttons — ledger style with difference-wipe */
.btn{
  display:inline-block;position:relative;isolation:isolate;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.95em 1.8em;color:var(--ink);
  border-radius:2px;overflow:hidden;transition:color .35s;cursor:pointer;background:transparent;
}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.btn:hover{color:var(--paper-2)}
.btn:hover::before{transform:scaleY(1);transform-origin:50% 0}
.btn--gold{border-color:var(--gold);color:var(--gold)}
.btn--gold::before{background:var(--gold)}
.btn--seal{border-color:var(--seal);color:var(--seal)}
.btn--seal::before{background:var(--seal)}
.btnrow{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}

/* ---------- hero ---------- */
.hero{height:400vh;position:relative}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__frame{position:absolute;inset:4.5vh 3vw;border:1px solid rgba(138,107,47,.55);pointer-events:none;
  box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(138,107,47,.35)}
.hero__title{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;width:92vw;pointer-events:none;
}
.hero__title h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(3rem,9.5vw,10rem);
  line-height:.95;letter-spacing:.04em;color:var(--ink);
  text-shadow:0 1px 0 rgba(251,248,239,.7),0 0 30px rgba(244,239,227,.8);
}
.hero__title h1 .char{display:inline-block}
.hero__title h1 em{font-style:normal;color:var(--gold)}
.hero__kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--seal);margin-bottom:1.4rem}
.hero__sub{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.7vw,1.5rem);color:var(--ink-soft);margin-top:1.6rem}
.hero__scrollcue{position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
.hero__scrollcue::after{content:"";display:block;width:1px;height:4.5vh;background:var(--gold);margin:.8em auto 0;
  animation:drop 2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* console strip under hero (pxpush v.02 welcome) */
.console{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);
  padding:2.2rem var(--margin);border-bottom:1px solid var(--line);white-space:pre-wrap}
.console b{color:var(--seal);font-weight:400}

/* ---------- etched plate (video/artwork inset) ---------- */
.plate{position:relative;background:var(--paper-2);padding:1.1vw;border:1px solid var(--line);
  box-shadow:0 14px 44px rgba(42,36,28,.14)}
.plate::after{content:"";position:absolute;inset:.55vw;border:1px solid rgba(138,107,47,.5);pointer-events:none}
.plate video,.plate img{width:100%;height:auto;filter:sepia(.14) contrast(1.02)}
.plate__caption{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  padding:.9em .2em .2em}
.plate__caption b{color:var(--gold);font-weight:400}

/* room / craft feature rows */
.feature{display:flex;gap:4vw;align-items:center}
.feature--flip{flex-direction:row-reverse}
.feature .plate{flex:0 0 55%}
.feature__txt{flex:1}
.feature__txt h3{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.8rem);font-weight:600;margin-bottom:1rem;line-height:1.1}
.feature__txt h3 em{color:var(--gold);font-style:italic}
@media(max-width:820px){.feature,.feature--flip{flex-direction:column}.feature .plate{flex:auto;width:100%}}

/* ---------- works marquee of etched plates ---------- */
.works{overflow:hidden;padding:5vh 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.works__track{display:flex;gap:2vw;width:max-content;will-change:transform;padding:0 2vw}
.wplate{flex:0 0 auto;width:20vw;min-width:230px;background:var(--paper-2);
  border:1px solid var(--line);padding:.8vw;box-shadow:0 8px 24px rgba(42,36,28,.10)}
.wplate figure{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(138,107,47,.4);
  display:flex;align-items:center;justify-content:center;background:var(--paper-3)}
.wplate svg{width:100%;height:100%}
.wplate figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);padding:.8em .2em .2em;display:flex;justify-content:space-between}
.wplate figcaption b{color:var(--seal);font-weight:400}

/* ---------- benefits ledger ---------- */
.benefits{counter-reset:ben}
.ben{border-top:1px solid var(--line);display:flex;gap:3vw;padding:2.4rem 0;align-items:baseline;position:relative;isolation:isolate}
.ben:last-child{border-bottom:1px solid var(--line)}
.ben::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:-1;
  transform:scaleY(var(--anim,0));transform-origin:50% 0;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.ben:hover::before{--anim:1}
.ben__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--seal);flex:0 0 8ch}
.ben__ti{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:600;flex:0 0 30%}
.ben__tx{color:var(--ink-soft);max-width:56ch}
@media(max-width:820px){.ben{flex-direction:column;gap:.6rem}.ben__ti{flex:auto}}

/* ---------- packages ---------- */
.pkgs{display:flex;gap:2.5vw;align-items:stretch}
.pkg{flex:1;background:var(--paper-2);border:1px solid var(--line);padding:2.4rem 2rem;
  position:relative;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(42,36,28,.08)}
.pkg--pop{border-color:var(--gold);box-shadow:0 14px 44px rgba(138,107,47,.18)}
.pkg__tag{position:absolute;top:-0.7em;right:1.4rem;background:var(--seal);color:var(--paper-2);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;padding:.45em .9em}
.pkg__name{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.pkg__price{font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3.4rem);font-weight:600;margin:.5em 0 .2em}
.pkg__price s{color:var(--ink-soft);font-size:.55em;font-weight:400;margin-right:.3em}
.pkg__price span{font-size:.4em;color:var(--ink-soft);font-family:var(--mono);letter-spacing:.05em}
.pkg__blurb{font-style:italic;color:var(--ink-soft);margin-bottom:1.6rem}
.pkg ul{border-top:1px solid var(--line-soft);margin-bottom:2rem;flex:1}
.pkg li{border-bottom:1px solid var(--line-soft);padding:.7em .1em;display:flex;gap:.8em;font-size:.92em}
.pkg li::before{content:"—";color:var(--gold)}
@media(max-width:900px){.pkgs{flex-direction:column}}

/* ---------- accordion (FAQ) ---------- */
.faqgroup{margin-bottom:4vh}
.faqgroup__ti{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;color:var(--seal);
  text-transform:uppercase;margin-bottom:1.2rem}
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc__head{display:flex;gap:2.5vw;align-items:baseline;padding:1.35rem .2rem;cursor:pointer;
  position:relative;isolation:isolate}
.acc__head::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:-1;
  transform:scaleY(var(--anim,0));transform-origin:50% 0;transition:transform .4s cubic-bezier(.7,0,.2,1)}
.acc__head:hover::before{--anim:1}
.acc__no{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--seal);flex:0 0 6ch}
.acc__q{font-family:var(--serif);font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:600;flex:1}
.acc__x{font-family:var(--mono);color:var(--gold);transition:transform .4s}
.acc.is-open .acc__x{transform:rotate(45deg)}
.acc__body{height:0;overflow:hidden}
.acc__body p{padding:0 .2rem 1.5rem calc(6ch + 2.5vw);color:var(--ink-soft);max-width:70ch}
@media(max-width:820px){.acc__body p{padding-left:.2rem}}

/* ---------- journal ---------- */
.jlist{counter-reset:j}
.jcard{display:block;border-top:1px solid var(--line);padding:2.6rem 0;position:relative;isolation:isolate}
.jcard:last-child{border-bottom:1px solid var(--line)}
.jcard::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:-1;
  transform:scaleY(var(--anim,0));transform-origin:50% 0;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.jcard:hover::before{--anim:1}
.jcard__no{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--seal)}
.jcard__ti{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);font-weight:600;line-height:1.12;margin:.5em 0 .4em;max-width:26ch}
.jcard__tx{color:var(--ink-soft);max-width:58ch}
.jcard__go{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--gold);
  text-transform:uppercase;margin-top:1.2em;display:inline-block}

/* article page */
.article{max-width:72ch;margin:0 auto}
.article h1{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4rem);font-weight:600;line-height:1.08;margin-bottom:.6em}
.article .meta{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--seal);margin-bottom:3rem;display:flex;gap:2em;border-bottom:1px solid var(--line);padding-bottom:1.2rem}
.article h2{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:600;margin:1.8em 0 .6em}
.article p{margin-bottom:1.15em;color:var(--ink-soft)}
.article p:first-of-type::first-letter{
  font-family:var(--serif);font-size:3.4em;float:left;line-height:.82;padding:.06em .12em 0 0;color:var(--gold)}
.article blockquote{border-left:2px solid var(--gold);padding:.4em 0 .4em 1.4em;margin:1.6em 0;
  font-family:var(--serif);font-style:italic;font-size:1.2em;color:var(--ink)}

/* ---------- industries ---------- */
.indgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.indcell{background:var(--paper);padding:3rem 2.4rem;position:relative;isolation:isolate;display:block}
.indcell::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:-1;
  transform:scaleY(var(--anim,0));transform-origin:50% 0;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.indcell:hover::before{--anim:1}
.indcell__no{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--seal)}
.indcell__ti{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;margin:.4em 0}
.indcell__tx{color:var(--ink-soft);max-width:44ch}
@media(max-width:820px){.indgrid{grid-template-columns:1fr}}

/* ---------- start form ---------- */
.startform{max-width:60ch}
.field{margin-bottom:2.2rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.field label{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--seal);margin-bottom:.8em}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:none;outline:none;color:var(--ink);
  font-family:var(--serif);font-size:1.4rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--line)}
.planpick{display:flex;gap:1rem;flex-wrap:wrap}
.planpick label{display:flex;gap:.7em;align-items:center;border:1px solid var(--line);
  padding:.9em 1.3em;cursor:pointer;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:none;color:var(--ink);margin:0}
.planpick input{width:auto;accent-color:var(--gold)}
.planpick label:has(input:checked){border-color:var(--gold);background:var(--paper-2);color:var(--gold)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:6vh var(--margin) 4vh;display:flex;gap:4vw;flex-wrap:wrap;justify-content:space-between;background:var(--paper-3)}
.ftr__block{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;line-height:2;color:var(--ink-soft);text-transform:uppercase}
.ftr__block b{color:var(--ink);font-weight:400}
.ftr__links{display:flex;flex-direction:column;gap:.2em}
.ftr__links a:hover{color:var(--gold)}
.ftr__emblem{width:4.4rem;height:4.4rem;border-radius:50%;overflow:hidden;border:1px solid var(--line);opacity:.9}
.ftr__emblem img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(.8)}
.ftr__colophon{width:100%;margin-top:4vh;padding-top:2vh;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--ink-soft);text-transform:uppercase;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em}

/* ---------- effect engine primitives ---------- */
.line{overflow:hidden}
.line__inner{display:block;transform:translateY(110%)}
[effect__textFade],[effect__clipIn],[effect__parallax] {will-change:transform}
.sep{height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%}

/* interior page hero */
.pagehead{padding:22vh var(--margin) 6vh}
.pagehead .ledger{margin-bottom:0}

/* ---------- services shape grid ---------- */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{background:var(--paper);padding:2.6rem 1.6rem;text-align:center;position:relative;isolation:isolate}
.svc::before{content:"";position:absolute;inset:0;background:var(--paper-2);z-index:-1;
  transform:scaleY(var(--anim,0));transform-origin:50% 100%;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.svc:hover::before{--anim:1}
.svc svg{width:4.6rem;height:4.6rem;margin:0 auto 1.1rem;display:block}
.svc svg *{vector-effect:non-scaling-stroke}
.svc__ti{font-family:var(--serif);font-weight:600;font-size:1.25rem}
.svc__tx{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5em}
@media(max-width:820px){.svcgrid{grid-template-columns:repeat(2,1fr)}.svc{padding:1.8rem 1rem}.svc svg{width:3.4rem;height:3.4rem}}

/* ---------- pinned horizontal works gallery (scroll effect A) ---------- */
.hworks{position:relative}
.hworks__pin{overflow:hidden;display:flex;align-items:center}
.hworks__track{display:flex;gap:3vw;padding:0 var(--margin);width:max-content;align-items:center}
.hplate{flex:0 0 auto;width:34vw;max-width:560px;background:var(--paper-2);border:1px solid var(--line);
  padding:1vw;box-shadow:0 12px 36px rgba(42,36,28,.12)}
.hplate figure{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(138,107,47,.45);background:var(--paper-3)}
.hplate img{width:100%;height:100%;object-fit:cover;filter:sepia(.1)}
.hplate figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:.9em .2em .2em;display:flex;justify-content:space-between}
.hplate figcaption b{color:var(--seal);font-weight:400}
@media(max-width:820px){
  .hworks__pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .hplate{width:78vw;scroll-snap-align:center}
}

/* ---------- zoom-pin plate (scroll effect B) ---------- */
.zoompin{position:relative}
.zoompin .plate{will-change:transform}

/* ---------- membership diptych (one drawing across two plates) ---------- */
.diptych{display:flex;background:var(--paper-2);border:1px solid var(--line);
  padding:1vw;box-shadow:0 14px 44px rgba(42,36,28,.14);margin-bottom:5vh}
.diptych figure{flex:1;position:relative;overflow:hidden;margin:0}
.diptych figure:first-child{border-right:1px dashed rgba(138,107,47,.5)}
.diptych img{width:100%;height:100%;object-fit:cover;display:block}
.diptych figcaption{position:absolute;left:0;right:0;bottom:0;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);background:linear-gradient(0deg,rgba(251,248,239,.92),rgba(251,248,239,0));
  padding:2.2em .9em .7em;text-align:center}
@media(max-width:820px){.diptych{padding:2vw}.diptych figcaption{font-size:.5rem;letter-spacing:.12em}}

/* ---------- responsive / device tuning ---------- */
@media(max-width:1440px){:root{--margin:3.4vw}}
@media(max-width:820px){
  :root{--margin:5vw}
  body{font-size:16px}
  .sec{padding:7vh var(--margin)}
  .hero{height:260vh}
  .hero__title h1{font-size:11.5vw;letter-spacing:.02em;white-space:nowrap}
  .hero__kicker{font-size:.58rem;letter-spacing:.22em}
  .hero__frame{inset:2.5vh 3.5vw}
  .marquee__item{font-size:15vw;padding-right:8vw}
  .console{font-size:.62rem;padding:1.6rem var(--margin)}
  .lede{font-size:1.45rem}
  .pkg{padding:1.8rem 1.3rem}
  .pkg ul[style]{columns:1!important}
  .plate{padding:2.4vw}
  .plate::after{inset:1.2vw}
  .ftr{gap:2rem}
  .stamp{top:.95rem;right:auto;left:50%;transform:translateX(-50%)}
  .hdr{padding:.8rem var(--margin)}
  .hdr__logo{width:2.9rem;height:2.9rem}
  .btn{padding:1.05em 1.6em}
  .acc__q{font-size:1.05rem}
}
@media(min-width:1800px){body{font-size:20px}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .line__inner{transform:none}
}