:root{--paper:#e8e6df;--ink:#101010;--body:#303030;--line:rgba(16,16,16,.24);--shell:1180px;--title-size:clamp(4rem,8vw,8.7rem);--section-title:clamp(2rem,3vw,3.6rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"IBM Plex Sans",Arial,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background:radial-gradient(circle at 20% 10%,rgba(0,0,0,.08) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 50%,rgba(0,0,0,.05) 0 1px,transparent 1.4px);background-size:7px 7px,11px 11px;mix-blend-mode:multiply;z-index:20}.grain{position:fixed;inset:0;z-index:19;pointer-events:none;opacity:.07;background-image:url("assets/texture-pack.png");background-size:1250px auto;background-position:center top;mix-blend-mode:multiply;filter:grayscale(1)}.shell{width:min(calc(100% - 48px),var(--shell));margin-inline:auto}
.hero{position:relative;min-height:100vh;background:linear-gradient(90deg,rgba(232,230,223,.98) 0%,rgba(232,230,223,.94) 44%,rgba(232,230,223,.15) 66%,rgba(232,230,223,.02) 100%),url("assets/hero-background.png") center/cover no-repeat;border-bottom:1px solid var(--line)}.hero-topline,.hero-footer{display:flex;justify-content:space-between;font:500 .78rem/1 "IBM Plex Mono",monospace;letter-spacing:.22em}.hero-topline{padding-top:34px}.hero-footer{position:absolute;left:50%;bottom:28px;transform:translateX(-50%)}.hero-inner{min-height:calc(100vh - 110px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);align-items:center;gap:54px;padding-block:70px 90px}.hero-copy{position:relative;z-index:2}.kicker{margin:0 0 32px;font:500 .78rem/1.5 "IBM Plex Mono",monospace;letter-spacing:.22em}h1,h2,summary,.card-title{font-family:"Bebas Neue","Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase}h1{max-width:760px;margin:0;font-size:var(--title-size);line-height:.88;letter-spacing:-.025em}.hero-description{max-width:620px;margin:34px 0 0;font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.55}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:48px;min-width:360px;margin-top:34px;padding:20px 24px;background:var(--ink);color:#fff;text-decoration:none;font:500 .82rem/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;transition:.18s}.button:hover{transform:translateY(-2px);background:#252525}.arrow{font-size:1.6rem;font-family:Arial,sans-serif}.hero-art{position:relative;min-height:550px}.case-label{position:absolute;left:4%;bottom:18%;font:500 1.05rem/1.55 "IBM Plex Mono",monospace;letter-spacing:.04em}.stamp{position:absolute;right:4%;bottom:8%;width:126px;height:126px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;text-align:center;font:500 1rem/1.15 "IBM Plex Mono",monospace;transform:rotate(-7deg)}.stamp strong{font-size:2.2rem}
.accordion-shell{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line)}.case-card{min-height:270px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.case-card:nth-child(-n+3){border-top:1px solid var(--line)}.case-card.wide{grid-column:1/-1}.case-card summary{min-height:270px;padding:28px;list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative}.case-card.wide summary{min-height:220px}.case-card summary::-webkit-details-marker{display:none}.card-index{font:500 .72rem/1 "IBM Plex Mono",monospace;letter-spacing:.1em}.card-title{max-width:90%;font-size:var(--section-title);line-height:.95}.card-preview{max-width:76%;margin:0;font-size:.93rem;line-height:1.45;color:var(--body);text-transform:none;font-family:"IBM Plex Sans",sans-serif}.card-plus{position:absolute;right:24px;bottom:22px;font:400 1.8rem/1 Arial,sans-serif}.case-card[open] .card-plus:before{content:"−"}.case-card:not([open]) .card-plus:before{content:"+"}.card-body{padding:0 28px 34px;border-top:1px solid rgba(16,16,16,.12);font-size:1rem;line-height:1.65}.card-body p{margin:20px 0 0}.card-body ul,.card-body ol{margin:18px 0 0;padding-left:22px}.card-body li{margin:8px 0}.card-body h3{margin:28px 0 0;font:400 2rem/1 "Bebas Neue",sans-serif;text-transform:uppercase}.card-body h4{margin:26px 0 0;font-size:1rem;text-transform:uppercase;letter-spacing:.08em}.sub{font-style:italic}.note{margin-top:26px;padding:20px;border:1px solid var(--ink);background:rgba(255,255,255,.18)}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px}.compare,.prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.compare>div,.prices>div{padding:22px;border:1px solid var(--line)}.compare span,.prices span{display:block;font:500 .75rem/1.3 "IBM Plex Mono",monospace;letter-spacing:.12em}.compare strong,.prices strong{display:block;margin-top:12px;font:400 2.2rem/1 "Bebas Neue",sans-serif}.steps{list-style:none;padding:0!important}.steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}.steps li span{font:500 .75rem/1.5 "IBM Plex Mono",monospace}.example-group{margin-top:28px}.example{border-top:1px solid var(--line)}.example:last-child{border-bottom:1px solid var(--line)}.example summary{min-height:0!important;padding:18px 0!important;display:block!important;font-size:1.8rem;list-style:none;position:relative}.example summary:after{content:"+";position:absolute;right:0}.example[open] summary:after{content:"−"}.example-body{padding:0 0 28px}.faq h3{font-size:1.6rem}.contact-strip{border-bottom:1px solid var(--line)}.contact-inner{min-height:255px;display:flex;align-items:center;justify-content:space-between;gap:40px}.section-index{margin:0 0 18px;font:500 .75rem/1 "IBM Plex Mono",monospace}.contact-inner h2{margin:0;font-size:clamp(3rem,5vw,6.5rem);line-height:.92}.contact-inner p{max-width:600px;margin:18px 0 0;font-size:1.05rem}.contact-arrow{color:var(--ink);text-decoration:none;font:300 clamp(4rem,8vw,8rem)/1 Arial,sans-serif;transition:.18s}.contact-arrow:hover{transform:translateX(10px)}.site-footer{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px;font:500 .72rem/1.4 "IBM Plex Mono",monospace;letter-spacing:.12em}
@media(max-width:900px){.hero{background:linear-gradient(180deg,rgba(232,230,223,.97) 0%,rgba(232,230,223,.91) 58%,rgba(232,230,223,.35) 100%),url("assets/hero-background.png") 70% center/cover no-repeat}.hero-inner{grid-template-columns:1fr;padding-top:80px}.hero-art{min-height:260px}.accordion-shell{grid-template-columns:1fr 1fr}.case-card:nth-child(3){border-top:0}.two-cols{grid-template-columns:1fr}}
@media(max-width:620px){.shell{width:min(calc(100% - 28px),var(--shell))}.hero-topline{padding-top:22px}.hero-inner{padding-block:64px 120px;gap:16px}.hero-footer{bottom:18px}h1{font-size:clamp(4rem,19vw,6.3rem)}.hero-description{font-size:1rem}.button{width:100%;min-width:0;gap:20px;padding:18px}.hero-art{min-height:210px}.stamp{width:86px;height:86px}.accordion-shell{display:block;border-left:1px solid var(--line)}.case-card,.case-card summary,.case-card.wide summary{min-height:auto}.case-card:nth-child(-n+3){border-top:0}.case-card:first-child{border-top:1px solid var(--line)}.case-card summary{padding:22px;gap:18px}.card-title{font-size:2.5rem}.card-preview{max-width:82%}.card-body{padding:0 22px 28px}.compare,.prices{grid-template-columns:1fr}.contact-inner{min-height:250px}.contact-arrow{font-size:4.3rem}.site-footer{align-items:flex-start;flex-direction:column;justify-content:center}}

/* Premium polish */
:root{--ease:cubic-bezier(.22,1,.36,1)}
body{background-color:var(--paper)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:18;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 28%,rgba(0,0,0,.025) 72%,transparent);mix-blend-mode:multiply}
.hero{overflow:hidden;isolation:isolate}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);opacity:.42}
.hero-copy{animation:heroIn 1.1s var(--ease) both}
.hero-art{animation:heroArtIn 1.35s .12s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes heroArtIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
h1{display:flex;flex-direction:column;gap:.02em;max-width:900px;font-size:clamp(3.55rem,6.65vw,7.7rem);line-height:.88}
h1 span:nth-child(2){font-size:.79em;letter-spacing:-.015em}
h1 span:nth-child(3){font-size:.86em}
.hero-number{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font:400 clamp(17rem,31vw,34rem)/.7 "Bebas Neue",sans-serif;letter-spacing:-.08em;color:rgba(16,16,16,.055);user-select:none}
.button{position:relative;overflow:hidden;transition:transform .35s var(--ease),background .35s ease,color .35s ease}
.button:before{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-102%);transition:transform .45s var(--ease)}
.button span{position:relative;z-index:1}
.button:hover{transform:translateY(-3px);background:var(--ink);color:var(--ink)}
.button:hover:before{transform:none}
.case-card,.contact-strip,.site-footer{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.case-card.is-visible,.contact-strip.is-visible,.site-footer.is-visible{opacity:1;transform:none}
.case-card{scroll-margin-top:18px;transition-property:opacity,transform,background-color;transition-duration:.75s,.75s,.3s}
.case-card:hover{background:rgba(255,255,255,.12)}
.case-card summary{transition:padding .35s var(--ease),background-color .25s ease}
.case-card summary:before{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--ink);transition:width .42s var(--ease)}
.case-card:hover summary:before,.case-card[open] summary:before{width:100%}
.card-plus{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;transition:transform .4s var(--ease),background .25s ease,color .25s ease}
.case-card[open] .card-plus{transform:rotate(180deg);background:var(--ink);color:var(--paper)}
.card-body{overflow:hidden;animation:bodyReveal .52s var(--ease) both}
@keyframes bodyReveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.example summary{transition:padding-left .28s var(--ease)}
.example summary:hover{padding-left:12px!important}
.note{position:relative;box-shadow:8px 8px 0 rgba(16,16,16,.06)}
.note:before{content:"NOTE";position:absolute;right:12px;top:10px;font:500 .62rem/1 "IBM Plex Mono",monospace;letter-spacing:.16em;opacity:.42}
.contact-arrow{width:118px;height:118px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;line-height:1;transition:transform .4s var(--ease),background .3s ease,color .3s ease}
.contact-arrow:hover{transform:translateX(8px) rotate(-8deg);background:var(--ink);color:var(--paper)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.case-card,.contact-strip,.site-footer{opacity:1;transform:none}}
@media(max-width:900px){h1{font-size:clamp(3.4rem,10vw,6.8rem)}.hero-number{font-size:clamp(16rem,55vw,30rem);left:68%;top:57%}.hero-art{min-height:230px}.case-label{left:0}.stamp{right:0}}
@media(max-width:620px){body:before{opacity:.1}.hero{min-height:auto;background-position:67% center}.hero-topline{font-size:.66rem}.hero-inner{min-height:auto;display:block;padding-top:72px;padding-bottom:118px}.hero-copy{max-width:none}.kicker{margin-bottom:22px;font-size:.67rem}.hero h1{font-size:clamp(3.2rem,15.7vw,5.5rem);line-height:.91;letter-spacing:-.02em}.hero h1 span:nth-child(2),.hero h1 span:nth-child(3){font-size:1em}.hero-description{margin-top:26px;max-width:34rem;line-height:1.52}.hero-art{min-height:160px;margin-top:18px}.hero-number{left:72%;top:48%;font-size:14rem}.case-label{bottom:8%;font-size:.77rem}.stamp{bottom:0}.hero-footer{font-size:.58rem;letter-spacing:.14em}.accordion-shell{width:100%;border-left:0}.case-card{border-left:0;border-right:0}.case-card summary{padding:22px 18px 24px}.card-index{font-size:.65rem}.card-title{max-width:88%;font-size:clamp(2.25rem,10.5vw,3.05rem)}.card-preview{max-width:88%;font-size:.88rem}.card-plus{right:16px;bottom:18px;width:30px;height:30px}.card-body{padding:0 18px 30px;font-size:.97rem}.two-cols{gap:24px}.compare strong,.prices strong{font-size:2rem}.example summary{font-size:1.55rem!important;padding-right:32px!important}.contact-inner{padding-block:38px;align-items:flex-end}.contact-inner h2{font-size:clamp(3rem,14vw,4.6rem)}.contact-arrow{width:70px;height:70px;font-size:3.5rem;flex:0 0 auto}.site-footer{padding-block:28px}.button{font-size:.72rem;letter-spacing:.12em}}

/* Mobile hero correction: isolated from the accordion and all later sections */
@media (max-width: 620px) {
  header.hero {
    min-height: auto;
    background-image:
      linear-gradient(180deg, rgba(232,230,223,.98) 0%, rgba(232,230,223,.96) 52%, rgba(232,230,223,.48) 76%, rgba(232,230,223,.16) 100%),
      url("assets/hero-background.png");
    background-size: 100% 100%, auto 44%;
    background-position: center, center bottom;
    background-repeat: no-repeat;
  }
  header.hero .hero-inner {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: 54px;
    padding-bottom: 112px;
    gap: 10px;
  }
  header.hero .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  header.hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(2.45rem, 11vw, 3.45rem);
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
  }
  header.hero h1 span,
  header.hero h1 span:nth-child(2),
  header.hero h1 span:nth-child(3) {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 1em;
  }
  header.hero .hero-description {
    width: 100%;
    max-width: 100%;
    margin-top: 22px;
  }
  header.hero .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  header.hero .hero-art {
    width: 100%;
    min-height: 245px;
    margin-top: 4px;
  }
  header.hero .hero-number {
    left: 62%;
    top: 50%;
    font-size: 11rem;
  }
  header.hero .case-label {
    left: 0;
    bottom: 10%;
  }
  header.hero .stamp {
    right: 2%;
    bottom: 2%;
  }
}
