/* Zetta Brands — "Atelier": ivory, gold, blush; Bodoni swash; centred; slow, hand-drawn motion. */
:root{--bg:#F8F2E8;--ink:#2B2219;--gold:#9A7440;--blush:#EAD3C4;--soft:#F1E4D6;
  --serif:"Bodoni Moda",Didot,"Bodoni 72",Georgia,serif;--sans:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;--mono:ui-monospace,Menlo,monospace}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans)}
.logo{font:500 22px var(--serif);text-decoration:none}.logo em{color:var(--gold)}
.btn{font:500 13px var(--sans);padding:10px 18px;border:1px solid var(--ink);border-radius:2px;letter-spacing:.04em}
.btn.fill{background:var(--ink);color:var(--bg)}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.big{padding:14px 26px;font-size:14px}
.eyebrow{font:500 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
h2{font:400 clamp(30px,3.6vw,46px)/1.08 var(--serif);letter-spacing:-.01em}
h2 em{color:var(--gold)}

.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding-block:28px 56px;position:relative}
.frameline{position:absolute;top:28px;left:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px));right:max(clamp(16px,4vw,48px),env(safe-area-inset-right,0px));width:auto;height:16px;overflow:visible;pointer-events:none}
@media (max-width:760px){.frameline{display:none}}
.frameline path{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400}
.go .frameline path{transition:stroke-dashoffset 2.4s cubic-bezier(.6,0,.2,1);stroke-dashoffset:0}
.title{font:400 clamp(42px,7.6vw,104px)/.95 var(--serif);letter-spacing:-.01em;text-transform:uppercase}
.title em{font-style:italic;text-transform:none;color:var(--gold)}
.title .ln{display:block}
.js .title .ln{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1)}
.js .go .title .ln{clip-path:inset(0 0 0 0)}
.js .go .title .ln+.ln{transition-delay:.45s}
.lede{max-width:52ch;opacity:.75;font-size:17px}
.arches{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);align-items:end;width:100%;max-width:920px}
.arch{display:flex;flex-direction:column;gap:8px;align-items:center}
.arch span{font:400 clamp(14px,1.4vw,18px)/1.15 var(--serif)}
.arch small{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.pic{width:100%;aspect-ratio:3/4;border-radius:999px 999px 6px 6px;position:relative;overflow:hidden;border:1px solid color-mix(in oklab,var(--ink) 28%,transparent)}
.js .pic{clip-path:inset(100% 0 0 0 round 999px 999px 6px 6px);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1)}
.js .go .pic{clip-path:inset(0 0 0 0 round 999px 999px 6px 6px)}
.pic i{position:absolute;inset:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.arch:hover .pic i{transform:scale(1.08)}
.pic i::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:44%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 5px,transparent 5px 12px),rgba(255,255,255,.25);clip-path:polygon(0 28%,50% 0,100% 28%,100% 100%,0 100%)}
.p1{background:linear-gradient(180deg,#F3D9BC,#E7B48E 55%,#C79B7E 56%,#A98068)}
.p2{background:linear-gradient(180deg,#DCE6E6,#BFD0D2 55%,#C9B9A6 56%,#AE9C88)}
.p3{background:linear-gradient(180deg,#F6E3C9,#EBC79E 50%,#D2B79A 51%,#B99D80)}
.p4{background:linear-gradient(180deg,#E9DCEB,#E2BFA9 55%,#BFA48C 56%,#A68B72)}
.arch.mid .pic{aspect-ratio:3/4.7;display:grid;place-items:center;background:var(--blush)}
.arch.mid .pic b{font:italic 400 clamp(30px,4vw,58px) var(--serif)}
@media (max-width:640px){.arches{grid-template-columns:repeat(3,minmax(0,1fr))}.arch:first-child,.arch:last-child{display:none}}

.svc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;padding-block:24px 64px}
@media (max-width:800px){.svc{grid-template-columns:1fr}}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:16px;padding:16px 0;border-top:1px solid color-mix(in oklab,var(--ink) 22%,transparent);align-items:baseline;position:relative}
.row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .6s}
.row:hover::after{width:100%}
.row h3{font:400 23px/1.2 var(--serif)}.row p{font-size:14.5px;opacity:.72}
@media (max-width:520px){.row{grid-template-columns:1fr;gap:4px}}

.journey{background:color-mix(in oklab,var(--blush) 45%,var(--bg));padding-block:56px}
.jgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
@media (max-width:800px){.jgrid{grid-template-columns:1fr}}
.jgrid h2{margin-top:10px}
.jtext{margin-top:14px;max-width:48ch;opacity:.75}
.route{width:100%;height:auto;overflow:visible}
.route .line{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:900;stroke-dashoffset:900}
.route.go .line{transition:stroke-dashoffset 3s ease-in-out;stroke-dashoffset:0}
.route .node{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.route .node.end{fill:var(--gold);stroke:var(--gold)}
.route text{font:400 15px var(--serif);fill:var(--ink)}
.route text.s{font:10px var(--mono);letter-spacing:.1em;fill:var(--gold);text-transform:uppercase}

.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-block:64px}
.cta p{opacity:.75;max-width:46ch}
@media (prefers-reduced-motion:reduce){.js .title .ln,.js .pic{clip-path:none}.frameline path,.route .line{stroke-dashoffset:0}}