/* Fixetics homepage-only styles. Shared tokens, nav, footer, toggle and cue live in site.css. */
.hero{height:100vh;min-height:600px;position:relative;overflow:hidden}
.hero .media{position:absolute;inset:60px 0 0;clip-path:inset(12% var(--pad-x) 12% 52% round 18px)}
.hero .media img{width:100%;height:100%;object-fit:cover;transform:scale(1.2)}
.hero .shade{position:absolute;inset:60px 0 0;background:linear-gradient(90deg,rgba(18,18,18,.78),rgba(18,18,18,.2));opacity:0}
.hero .copy{position:absolute;left:var(--pad-x);top:calc(50% + 30px);transform:translateY(-50%);width:min(46vw,820px);z-index:2}
.hero h1{font-size:clamp(40px,5.2vw,104px);line-height:.98;letter-spacing:-.035em;margin:0;color:var(--ink-2);font-weight:800}
.hero p{margin:22px 0 0;font-size:18px;line-height:1.5;max-width:36ch;color:var(--muted)}
.hero .btns{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

.hero h1,.hero p,.hero .btn.ghost{transition:color .35s ease,box-shadow .35s ease}
.hero.lit h1,.hero.lit p{color:#fff}.hero.lit .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px #fff}

/* DOORS */
.doors{padding:9vh var(--pad-x) 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.door{border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;min-height:clamp(280px,34vh,380px)}
.door .txt{padding:clamp(20px,3vh,32px) clamp(20px,2.4vw,36px) 16px}
.door h2{font-size:clamp(26px,2.4vw,40px);line-height:1;letter-spacing:-.03em;margin:0 0 12px;font-weight:800}
.door ul{margin:0;padding:0;list-style:none;font-size:16px;line-height:1.85}
.door li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mint);margin-right:12px;vertical-align:1px}
.door .img{overflow:hidden;position:relative}.door .img img{position:absolute;inset:0}.door .img img{width:100%;height:125%;object-fit:cover;top:-12%}
.d1{background:var(--surface)}.d1 h2{color:var(--ink-2)}.d1{color:var(--ink)}
.d2{background:var(--panel);color:#e6e6e6}.d2 h2{color:#fff}
.d2 .img{display:flex;align-items:center;justify-content:center;padding:16px 20px 16px 0}
.flow{width:100%;max-width:520px;height:100%}
.flow .box{fill:#323a37;stroke:#5b6a64;stroke-width:1.5}
.flow text{fill:#eef3f1;font:600 15px Inter,sans-serif}
.flow .sub{fill:#9fb3ab;font:500 11px Inter,sans-serif}
.flow .path{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round}

/* WORK: pinned horizontal gallery, titles overlap the photos */
.work{overflow:hidden;position:relative;padding-bottom:9vh}
.work.h-scroll{height:100vh;min-height:520px;padding-bottom:0}
.work .head{position:absolute;top:calc(60px + 2vh);left:calc(var(--pad-x) + clamp(24px,4vw,64px));font-size:clamp(30px,3.4vw,52px);font-weight:800;letter-spacing:-.03em;color:var(--ink-2);margin:0;z-index:3}
.track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw;align-items:start;padding:calc(60px + 2vh + clamp(30px,3.4vw,52px) + 4vh) calc(var(--pad-x) + clamp(24px,4vw,64px)) 0}
/* pinned horizontal gallery: opt-in, added by home.js only with full motion on desktop */
.work.h-scroll .track{display:flex;gap:7vw;padding:calc(60px + 2vh + clamp(30px,3.4vw,52px) + 4vh) 22vw 0 30vw;width:max-content}
.gcase{position:relative;padding-bottom:64px}
/* card width is capped by screen height so captions and progress bar fit on short laptops */
.work.h-scroll .gcase{width:min(40vw, calc((88vh - 200px) * 4 / 3));max-width:760px}
.gcase .pic{aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.gcase .pic img{width:120%;height:100%;object-fit:cover;max-width:none}
.gcase h3{position:absolute;left:-1vw;bottom:calc(64px + 22px);margin:0;font-size:clamp(22px,2.1vw,34px);line-height:1.12;letter-spacing:-.035em;color:var(--ink-2);font-weight:800;max-width:12ch}
.gcase .pic{position:relative}
.gcase .pic:not(.ui-pic)::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to bottom,rgb(var(--bg-rgb) / 0),rgb(var(--bg-rgb) / .45) 55%,rgb(var(--bg-rgb) / .8));pointer-events:none}
.gcase h3{z-index:2}
.gcase p{position:absolute;left:0;bottom:0;margin:0;font-size:16px;line-height:1.45;color:var(--muted);max-width:44ch}
.gcase .pic.ui-pic{background:var(--tint);display:flex;align-items:center;justify-content:center}
.progress{display:none;position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:3vh;height:3px;background:var(--line);border-radius:2px;z-index:3}
.work.h-scroll .progress{display:block}
.work.h-scroll .ui{width:90%;zoom:1.3}
.work.h-scroll .gcase .pic.ui-pic{align-items:flex-start;padding-top:7%}
/* short screens get a smaller gallery tile, so the diagram stays at its natural size there */
@media (max-height:760px){.work.h-scroll .ui{width:88%;zoom:1}}
.work.h-scroll .gcase h3{left:-2.5vw;font-size:clamp(34px,3.6vw,60px)}
/* grid layout: diagram keeps its proportions and scales to the narrower column */
.work:not(.h-scroll) .ui{width:125%;zoom:.7}
.progress i{display:block;height:100%;width:100%;background:var(--mint);transform-origin:left;transform:scaleX(0);border-radius:2px}
.ui{width:88%;display:grid;grid-template-columns:1fr 34px 1fr 34px 1fr;align-items:center}
.win{background:#fff;color:#3d3d3d;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.12);overflow:hidden;font-size:12px;line-height:1.3}
.win .bar{height:26px;display:flex;align-items:center;padding:0 10px;font-weight:700;color:#fff;font-size:12px}
.win .in{padding:10px}.fld{height:11px;background:#eceeed;border-radius:3px;margin:4px 0 9px}.lbl{color:#5c5c5c;font-size:11px}
.line{height:5px;background:#d6d6d6;border-radius:3px;margin:7px 0}
.fold{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px}.fold i{width:14px;height:10px;background:#d9ae45;border-radius:2px;display:inline-block}
.conn{height:3px;background:var(--mint);transform-origin:left}

/* WHY US: three typographic rows, not cards */
.why{padding:5vh var(--pad-x) 4vh;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.why .col{padding:22px 0 0;border-top:2px solid var(--ink-2)}

.why h2{margin:0 0 12px;font-size:clamp(22px,1.9vw,32px);line-height:.95;letter-spacing:-.035em;color:var(--ink-2);font-weight:800}
.why h2 em{font-style:normal;color:var(--mint-text)}
.why p{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:38ch}
.cta{margin:6vh var(--pad-x) 4vh;padding:clamp(32px,6vh,64px) clamp(24px,4vw,64px);background:var(--panel);border-radius:22px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.cta h2{margin:0;color:#fff;font-size:clamp(30px,3.6vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:800;max-width:18ch}
.cta h2 em{font-style:normal;color:var(--mint)}
.cta p{margin:16px 0 0;color:#cfd8d4;font-size:17px;line-height:1.55;max-width:46ch}
.cta .btn{background:var(--mint);color:#0c2b1f}.cta .btn:hover{background:#8fd1b4}
.door.d1{color:var(--ink)}.door.d2{color:#e6e6e6}
.door{text-decoration:none;transition:translate .35s ease,box-shadow .35s ease}
.door:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.door .img img{transition:scale .6s ease}.door:hover .img img{scale:1.04}
.door .more{display:inline-block;margin-top:18px;font-weight:600;font-size:15px;padding-bottom:2px;border-bottom:2px solid var(--mint)}
.d2 .more{color:#fff}
.work .see-all{position:absolute;top:calc(60px + 2vh + 4px);right:calc(var(--pad-x) + clamp(24px,4vw,64px));z-index:3}

@media (max-width:760px){
  .hero{height:auto;min-height:0;padding:calc(60px + 6vh) var(--pad-x) 4vh;overflow:visible;display:flex;flex-direction:column}
  .hero .media{order:2}
  .hero .copy{position:static;transform:none;width:100%}
  .hero .media{position:relative;inset:auto;clip-path:none;margin-top:5vh;aspect-ratio:4/3;border-radius:16px;overflow:hidden}
  .hero .media img{transform:none}
  .hero .shade{display:none}
  .doors{grid-template-columns:1fr;padding-top:5vh}.door{grid-template-columns:1fr;min-height:0}.door .img{height:30vh}.d2 .img{padding:0 16px 16px;height:auto}
  .work{padding:6vh 0}.work .head{position:static;padding:0 var(--pad-x) 4vh}
  .track{display:flex;flex-direction:column;padding:0 var(--pad-x);width:auto;gap:7vh}.gcase{width:100%;padding-bottom:0}.gcase h3{position:relative;left:12px;bottom:auto;margin-top:-1.35em}.gcase p{position:static;margin-top:14px}
  .progress{display:none}
  .work .see-all{position:static;margin:5vh var(--pad-x) 0}
  .cta{grid-template-columns:1fr}
  .ui{width:140%;zoom:.6}
  .why{grid-template-columns:1fr}
}