/* JS Designer — original orange identity, October 2026. */
@font-face{font-family:Inter;src:url('assets/fonts/inter-variable.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Against;src:url('assets/fonts/against-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Tusker;src:url('assets/fonts/tusker-2800-super.otf') format('opentype');font-weight:900;font-display:swap}
:root{--bg:#030303;--bg-soft:#101010;--surface:#141414;--ink:#f5f1ea;--muted:#bdb7b0;--accent:#ff5a11;--accent-strong:#ff5a11;--accent-dark:#452010;--paper:#f5f1ea;--line:#f5f1ea24;--max:1344px}
html{overflow-x:clip}
body{background:var(--bg);font-family:Inter,sans-serif;color:var(--ink)}
body::before{display:none}
::selection{background:var(--accent);color:var(--bg)}
.section-shell{width:min(calc(100% - 96px),var(--max))}
.site-header{top:8px;width:min(calc(100% - 80px),1376px);padding:16px;min-height:74px;border-radius:10px}
.site-header.scrolled{background:#090909e6;backdrop-filter:blur(18px);border-color:#ffffff18;box-shadow:0 12px 36px #0005}
.brand{flex-shrink:0;line-height:1;display:flex;align-items:center}
.brand-logo{width:240px;height:auto;max-width:100%}
.main-nav{font-weight:450;font-size:16px;gap:clamp(18px,2.1vw,34px)}
.main-nav>a:not(.nav-cta){color:var(--ink)}
.main-nav>a:not(.nav-cta):hover{color:var(--accent)}
.nav-cta,.button{clip-path:none;border-radius:7px}
.nav-cta{padding:13px 20px;font-weight:700;color:#030303}
.hero{position:relative;isolation:isolate;grid-template-columns:1.03fr 1fr;gap:28px;min-height:min(960px,100svh);padding-block:112px 44px;align-items:center}
.hero::before{top:-90px;bottom:0;left:50%;width:100vw;height:auto;transform:translateX(-50%);z-index:-2;background:url('assets/brand/wire-grid.png') center/cover no-repeat;opacity:.18;mask-image:linear-gradient(#000 80%,transparent 100%);pointer-events:none}
.hero::after{top:18%;right:-6%;width:50%;z-index:-1;background:radial-gradient(ellipse,#ff5a110c,transparent 65%);filter:none;animation-duration:18s}
.hero-copy{position:relative;z-index:3;min-width:0}
.hero h1.brand-headline{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:clamp(150px,14.4vw,248px);line-height:1.045;letter-spacing:0;text-transform:uppercase;margin:0 0 18px}
.headline-row{display:flex;align-items:center;position:relative;white-space:nowrap}
.headline-word{display:block;position:relative}
.headline-initial{font-family:Against,Georgia,serif;position:absolute;z-index:2;left:-.025em;top:-.115em;font-weight:400;color:var(--accent);font-size:1.23em;line-height:1;pointer-events:none}
.headline-rest{display:block;padding-left:.235em}
.headline-row:nth-child(2) .headline-rest{padding-left:.25em}
.headline-row:nth-child(2) .headline-initial{left:-.02em;top:-.115em}
.headline-bridge{font:300 clamp(27px,2.8vw,44px)/1.09 Inter,sans-serif;letter-spacing:-.065em;text-transform:none;margin-left:30px;align-self:center;padding-top:40px}
.hero-lead{font-size:clamp(16px,1.45vw,21px);line-height:1.45;letter-spacing:-.04em;font-weight:300;margin:20px 0 0;max-width:590px;color:var(--ink)}
.hero-actions{margin-top:28px;gap:clamp(28px,4vw,64px)}
.button{min-height:50px;gap:10px;font-size:15px;letter-spacing:-.04em;padding:12px 18px;font-weight:700}
.button-primary{background:var(--accent);color:#030303;box-shadow:none}
.button-primary:hover{background:#ff793c;color:#030303;box-shadow:0 8px 30px #ff5a1126}
.button-primary span{font-size:27px;line-height:1}
.text-link{font-weight:450;color:var(--accent);border-color:#ff5a1155;font-size:19px;letter-spacing:-.04em;white-space:nowrap}
.text-link span{font-size:24px;display:inline-block;margin-left:5px}
.hero-visual{width:100%;max-width:none;align-self:stretch;display:flex;align-items:center;isolation:isolate;margin:0}
.hero-frame{width:100%;position:relative;translate:none;overflow:visible}
.hero-frame img{position:relative;z-index:1;max-height:none;width:100%;height:auto;aspect-ratio:806/1080;object-fit:contain;filter:none;mask-image:linear-gradient(#000 74%,#000e 83%,transparent 98%);-webkit-mask-image:linear-gradient(#000 74%,#000e 83%,transparent 98%);mask-composite:add;-webkit-mask-composite:source-over}
.hero-visual::before{inset:20% -14% -4%;background:radial-gradient(ellipse at 72% 36%,#ffcc808a, #ff5a1178 9%,#a6381545 27%,transparent 55%);filter:blur(28px);z-index:0}
.hero-visual::after{display:none}
.hero-frame-label{z-index:3;bottom:10%;left:3%;right:2%;padding:8px 0;background:none;text-transform:none;gap:18px;align-items:baseline}
.hero-frame-label span{font-size:clamp(14px,1.35vw,21px);color:var(--accent);font-weight:400;letter-spacing:-.045em}
.hero-frame-label strong{font-size:clamp(15px,1.4vw,22px);font-weight:750;letter-spacing:-.055em}
.hero-orbit,.vertical-type{display:none}
.signal-strip{background:#141414;border-color:#ff5a112b}
.signal-track{font-size:12px;letter-spacing:.14em;color:#f5f1ead0;min-height:58px;gap:40px;animation-duration:36s}
.signal-track i{width:5px;border:0;border-radius:50%;background:var(--accent)}
.section-kicker{font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:24px}
.section-title{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:clamp(48px,6vw,88px);line-height:1.13;text-transform:uppercase;letter-spacing:.008em}
.section-title span{font-family:inherit;font-style:normal;font-weight:inherit;color:var(--accent)}
.section-title .type-mask,.section-title .type-word{font-family:inherit;font-style:inherit;font-weight:inherit;color:inherit}
.intro,.services,.portfolio,.benefits,.process{padding-block:clamp(80px,8vw,128px)}
.intro-grid{grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.intro-copy p,.expertise-copy p{font-size:16px;line-height:1.8;font-weight:350}
.intro-copy p:first-child,.expertise-copy p:first-child{font-size:19px}
.section-head{gap:48px;margin-bottom:56px;align-items:end}
.section-head>p{font-size:15px;line-height:1.7;width:min(100%,340px)}
.service-row{min-height:138px;grid-template-columns:50px .95fr 1fr 44px;background:none;gap:24px}
.service-row:hover{background:#ff5a1108}
.service-row h3{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:36px;text-transform:uppercase;letter-spacing:.012em}
.service-row p{font-weight:350;max-width:430px}
.service-icon{border-radius:7px}
.formats{background:radial-gradient(ellipse at 0 100%,#ff5a1110,transparent 60%),#101010;border-color:#f5f1ea18}
.formats-inner{grid-template-columns:1fr 1fr;gap:100px;min-height:0;padding-block:100px}
.formats::before,.formats::after{display:none}
.format-card{clip-path:none;border-color:#f5f1ea1c;border-radius:8px;background:#f5f1ea04;padding:25px}
.format-card:hover{background:#ff5a1109;transform:translateX(-5px)}
.format-card h3,.benefit-card h3,.process-list h3{font-weight:600;letter-spacing:-.035em}
.button-dark{border-color:#ff5a1160;color:var(--ink);background:transparent}
.button-dark:hover{border-color:var(--accent);background:#ff5a110c}
.creative-vault{border-color:#f5f1ea1c;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#ff5a1115,transparent 65%),#101010;padding-top:30px}
.vault-stage{width:min(100%,870px);aspect-ratio:1.4}
.vault-aura{background:radial-gradient(ellipse,#ff5a1124,transparent 65%)}
.vault-label{color:#bdb7b0;font-size:10px;letter-spacing:.18em}
.folder-back{background:linear-gradient(135deg,#ff5a1133,#4e291722);border-color:#ffb38c60;box-shadow:inset 0 1px 1px #ffce9f66,0 30px 75px #0009}
.folder-back::before{background:#9b411e40;border-color:#ffb38c60}
.folder-glass{background:linear-gradient(115deg,#fff1db3b 0%,#ff8a4530 27%,#ff5a111a 62%,#d8662724 100%);border:1px solid #ffd5bb88;border-top-color:#ffe2caac;border-radius:0 20px 20px 20px;backdrop-filter:blur(15px) saturate(1.1);-webkit-backdrop-filter:blur(15px) saturate(1.1);box-shadow:inset 0 1px 4px #fff1d999,inset 1px -1px 1px #ffb28055,0 24px 70px #0008;overflow:visible}
.folder-glass::before{background:linear-gradient(110deg,#ffcfab48,#ff7c342e);border-color:#ffdbbf9c;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.folder-glass::after{inset:0;border:0;border-radius:inherit;background:linear-gradient(118deg,transparent 22%,#fff7df1c 26%,#fff7df05 42%,transparent 49%);pointer-events:none}
.folder-brand{color:var(--ink);bottom:20%;left:8%;right:8%}
.folder-brand img{width:clamp(140px,19vw,230px);height:auto;filter:brightness(0) invert(.94);opacity:.95}
.folder-brand small{font-size:9px;letter-spacing:.23em;margin-top:16px;color:#f5f1eab8}
.folder-count{color:var(--ink);background:#f5f1ea09;border:1px solid #f5f1ea4d;font-weight:500;padding:8px 14px}
.vault-title{font-weight:550;letter-spacing:-.04em}
.vault-category{font-size:10px;font-weight:550;letter-spacing:.15em}
.vault-controls button,.vault-thumb{background:#141414;border-color:#f5f1ea22}
.vault-controls button:hover{background:#ff5a111a}
.vault-progress{background:#f5f1ea16}
.folder-deck .project img{background:#141414;border-radius:8px}
.art-dialog,.art-viewer{background:#101010f5;border-color:#f5f1ea32}
.art-dialog::backdrop{background:#030303e8}
.art-dialog button,.art-viewer button{background:#222;border-color:#f5f1ea44}
.art-card,.shirt-gallery img{background:#141414}
.art-card{border-color:#f5f1ea1a;border-radius:10px}
.art-card:hover{border-color:#ff5a1180}
.case-cover{border-radius:14px}
.case-summary,.collection-note,.case-motion p,.collection-status{color:var(--muted)}
.case-summary>span:first-child{color:var(--ink)}
.case-motion h3{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:clamp(60px,6vw,88px);text-transform:uppercase;line-height:1.12;letter-spacing:0}
.collection-heading{font-weight:550;letter-spacing:-.045em}
.collection-tabs button{color:var(--ink);border-color:#f5f1ea2a;background:#141414;border-radius:6px;min-height:46px}
.collection-tabs button[aria-pressed=true]{color:#030303;background:var(--accent);border-color:var(--accent)}
.collection-tabs button:hover{border-color:var(--accent)}
.garment-comparison article{background:linear-gradient(140deg,#21170f,#141414);border-radius:12px}
.expertise{background:#101010}
.expertise-bg{font-family:Tusker,Impact,sans-serif;font-weight:900;-webkit-text-stroke:1px #ff5a1118;letter-spacing:0}
.gospel-preview{background:radial-gradient(ellipse at 25% 5%,#ff5a110d,transparent 70%);border-color:#f5f1ea20;border-radius:12px}
.gospel-preview a{color:var(--muted)}
.benefit-card{background:#141414;border-radius:10px;clip-path:none;border-color:#f5f1ea1c;min-height:240px}
.benefit-card>span{border-radius:6px;font-family:Against,Georgia,serif;font-weight:400;font-size:24px;border:0}
.benefit-card h3{margin-top:35px}
.direction-panel{border-color:#f5f1ea20;border-radius:12px;background:radial-gradient(ellipse at 80% 30%,#ff5a1115,transparent 65%),linear-gradient(#ff5a1109 1px,transparent 1px),linear-gradient(90deg,#ff5a1109 1px,transparent 1px);background-size:auto,28px 28px,28px 28px}
.direction-panel p,.direction-label{color:var(--muted)}
.direction-panel strong{color:var(--ink)}
.direction-core{font-family:Against,Georgia,serif;font-weight:400}
.process-list li::before{box-shadow:0 0 15px #ff5a1155;width:5px;border-radius:0}
.final-cta{background:radial-gradient(ellipse at 15% 55%,#ff5a1117,transparent 50%),#101010;border:1px solid #f5f1ea1c;border-radius:18px;clip-path:none;grid-template-columns:.8fr 1.2fr;padding:64px;gap:70px;min-height:0}
.final-cta h2{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:clamp(54px,5.6vw,84px);letter-spacing:0;line-height:1.14}
.final-cta h2 em{font-family:Tusker,Impact,sans-serif;font-weight:900;font-size:1em;line-height:inherit;color:var(--accent);font-style:normal;letter-spacing:0;text-transform:uppercase}
.final-cta .cta-content{text-align:left;align-items:flex-start}
.closing-portrait{align-self:stretch;display:flex;align-items:center}
.closing-portrait::before{background:radial-gradient(ellipse at 68% 50%,#ffae5870,#ff5a1133 25%,transparent 66%);inset:5% -15%}
.closing-portrait::after{background-image:url('assets/brand/wire-grid.png');background-size:cover;opacity:.2}
.closing-portrait img{mask-image:linear-gradient(#000 72%,transparent 99%);-webkit-mask-image:linear-gradient(#000 72%,transparent 99%);mask-composite:add;-webkit-mask-composite:source-over;translate:none}
.closing-portrait figcaption{font-weight:600;letter-spacing:-.04em;padding:1rem 0 0}
.cta-orb{display:none}
.cta-content>p{color:var(--muted);font-weight:350;font-size:15px;line-height:1.75}
.cta-content small{color:var(--muted)}
.instagram-link{font-size:13px;letter-spacing:-.02em}
.site-footer{padding-block:60px 35px;border-color:#f5f1ea20}
.footer-brand .brand-logo{width:190px}
.whatsapp-float{color:#030303;background:var(--accent);border:1px solid #ff9c6755;border-radius:8px;font-size:12px;min-height:46px;bottom:18px;right:18px}
.cursor-halo{border-color:#ff5a1190;width:26px;height:26px;margin:-13px;transition:opacity .3s,width .3s,height .3s,background .3s,transform .10s ease-out}
.cursor-halo.is-link{background:#ff5a1110;border-color:#ff9d68a0}
.cursor-halo::after{background:radial-gradient(circle,#ff5a110c,transparent 65%);inset:-65px}
.reveal.is-visible{animation-duration:1.05s}
.type-ready .type-word{animation-duration:1.15s}
@media(min-width:841px){.hero-visual{width:100%;min-width:0;justify-self:end}.hero-frame img{height:clamp(520px,calc(100svh - 160px),920px);aspect-ratio:auto;object-fit:cover;object-position:center top}.hero-copy.is-visible .headline-row{animation:brand-title-in 1.15s var(--ease) both}.hero-copy.is-visible .headline-row:nth-child(2){animation-delay:.1s}}
@keyframes brand-title-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports not (backdrop-filter:blur(10px)){.folder-glass{background:linear-gradient(120deg,#d6a183c0,#673217da)}.folder-glass::before{background:#935732e8}}
@media(min-width:1680px){.hero{min-height:980px;gap:64px}.hero h1.brand-headline{font-size:244px}.hero-visual{width:650px;margin-left:0}.hero-lead{max-width:600px}}
@media(max-width:1180px) and (min-width:841px){.brand-logo{width:190px}.main-nav{font-size:13px;gap:18px}.nav-cta{padding:12px}.hero{gap:20px;padding-top:135px}.hero h1.brand-headline{font-size:16vw}.hero-lead{font-size:16px}.hero-actions{gap:22px}.hero-actions .text-link{font-size:16px}.hero-visual{max-width:none}.hero-frame-label{left:0;right:0;gap:8px}.hero-frame-label strong{font-size:15px}.hero-frame-label span{font-size:13px}.formats-inner{gap:48px}.intro-grid{gap:48px}.service-row{grid-template-columns:36px .95fr 1fr 36px}.final-cta{padding:40px;gap:40px}}
@media(max-width:840px){
  .section-shell{width:calc(100% - 40px)}
  .site-header{width:calc(100% - 24px);top:6px;padding:12px;min-height:62px}
  .brand-logo{width:185px}
  .main-nav{background:#101010f5;border:1px solid #f5f1ea26;backdrop-filter:blur(18px);border-radius:10px;font-size:16px;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s}
  .main-nav.open{visibility:visible}
  .main-nav>a{padding:13px 16px;min-height:46px}
  .menu-toggle{border-color:#f5f1ea25;background:#141414;min-width:44px;min-height:44px;border-radius:6px}
  .menu-toggle span{background:var(--ink)}
  .hero{padding-block:112px 54px;min-height:0;grid-template-columns:1fr;gap:12px;max-width:680px;text-align:left}
  .hero::before{display:block;inset:-80px auto 0 50%;width:100vw;transform:translateX(-50%);background-size:auto 100%;opacity:.15}
  .hero h1.brand-headline{font-size:clamp(136px,28vw,216px);max-width:100%;line-height:1.04;margin-bottom:20px}
  .headline-bridge{font-size:clamp(26px,5vw,40px);margin-left:25px;padding-top:25px}
  .hero-copy{max-width:100%}
  .hero-lead{font-size:18px;line-height:1.5;max-width:540px;margin-top:20px}
  .hero-actions{flex-direction:row;align-items:center;gap:25px;justify-content:flex-start;margin-top:24px}
  .hero-actions .button{width:auto}
  .hero-visual{width:min(100%,500px);margin:5px auto 0;max-width:none;aspect-ratio:auto}
  .hero-frame-label{bottom:9%;left:5%;right:5%}
  .hero-frame-label span{font-size:16px}.hero-frame-label strong{font-size:18px}
  .intro-grid,.formats-inner,.expertise-grid,.benefits-grid{grid-template-columns:1fr;gap:40px}
  .section-title{font-size:clamp(49px,9.5vw,74px)}
  .section-head{display:grid;gap:22px;margin-bottom:36px}
  .section-head>p{max-width:480px;width:auto}
  .formats-inner{padding-block:70px}
  .final-cta{grid-template-columns:1fr;padding:35px 24px;gap:36px}
  .closing-portrait{width:min(100%,380px);margin:auto;order:2}
  .final-cta h2{font-size:64px}
  .cta-content{max-width:100%}
  .signal-track{animation:none;min-height:50px;font-size:10px;gap:26px}
  .service-row h3{font-size:30px}
  .benefit-card{min-height:210px}
}
@media(max-width:540px){
  .hero{padding-top:110px;gap:8px}
  .hero h1.brand-headline{font-size:34.5vw;line-height:1.08}
  .headline-bridge{font-size:7vw;margin-left:20px;padding-top:20px}
  .hero-lead{font-size:16px;line-height:1.5;font-weight:350;margin-top:20px;letter-spacing:-.035em}
  .hero-actions{gap:20px;align-items:center;justify-content:space-between;margin-top:23px}
  .hero-actions .button{font-size:13px;padding:12px 14px;gap:5px;min-height:48px}
  .hero-actions .button span{font-size:22px}
  .hero-actions .text-link{font-size:15px;letter-spacing:-.05em}.hero-actions .text-link span{font-size:20px;margin:0}
  .hero-visual{width:100%;margin:18px auto 0}
  .hero-frame-label{left:3%;right:3%;bottom:9%;gap:10px}
  .hero-frame-label span{font-size:14px}.hero-frame-label strong{font-size:17px}
  .intro,.services,.portfolio,.benefits,.process{padding-block:66px}
  .section-kicker{font-size:10px;letter-spacing:.13em;margin-bottom:20px}
  .section-title{font-size:49px;line-height:1.16}
  .intro-copy p:first-child,.expertise-copy p:first-child{font-size:18px}
  .intro-grid{gap:28px}
  .service-row{grid-template-columns:24px 1fr 36px;gap:14px;min-height:0;padding-block:26px}
  .service-row p{grid-column:2/4;font-size:14px}
  .service-row h3{font-size:30px}
  .format-card{padding:22px 18px;gap:12px;grid-template-columns:28px 1fr}
  .formats-copy p{font-size:16px}
  .creative-vault{padding-top:18px;border-radius:12px}
  .vault-stage{aspect-ratio:1.03}
  .vault-label{top:1%;left:6%;font-size:8px}
  .folder-brand img{width:130px}
  .folder-brand small{font-size:7px;letter-spacing:.13em;margin-top:8px}
  .folder-count{padding:4px 8px;font-size:11px}
  .folder-glass{backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-radius:0 14px 14px 14px}
  .vault-title{font-size:22px}.vault-category{font-size:9px}.vault-type{font-size:12px}
  .vault-controls{gap:5px}.vault-controls button{font-size:12px}.vault-position{font-size:12px;width:48px}
  .case-summary{font-size:13px;gap:10px}.case-motion{margin-top:50px}
  .collection-heading{font-size:25px;line-height:1.3;margin-top:44px}
  .collection-tabs{gap:8px}.collection-tabs button{padding:10px 12px;font-size:11px}
  .countdown-gallery{grid-auto-columns:73%}
  .final-cta h2{font-size:54px}.final-cta{padding:35px 22px}
  .instagram-link{font-size:11px;gap:7px}
  .cta-content small{font-size:10px}
  .site-footer{padding-bottom:95px;gap:22px}.footer-links{flex-wrap:wrap;row-gap:14px}
  .whatsapp-float{min-height:46px;width:46px;bottom:14px;right:14px}
}
@media(max-width:359px){.section-shell{width:calc(100% - 32px)}.brand-logo{width:165px}.hero-actions{gap:10px}.hero-actions .button{font-size:12px;padding:11px 10px}.hero-actions .text-link{font-size:13px}.section-title{font-size:44px}.hero-frame-label strong{font-size:15px}.hero-frame-label span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hero-copy.is-visible .headline-row{animation:none}.hero::after{animation:none}.cursor-halo{display:none}.hero-frame,.closing-portrait img,.folder-deck{translate:none!important}.type-ready .type-word{animation:none}.signal-track{animation:none}}