/* ============================================================
   PROFITMASTER DISPLAYS — page components (v2)
   ============================================================ */

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ink);color:var(--t-on-dark);overflow:hidden;padding-top:var(--s6);padding-bottom:var(--s8)}
.hero-grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(120% 90% at 70% 10%,#000 30%,transparent 75%);opacity:.5;pointer-events:none}
.hero-glow{position:absolute;top:-200px;right:-160px;width:620px;height:620px;background:radial-gradient(circle,rgba(39,192,240,.18),transparent 65%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:center}
.hero-copy .eyebrow-row{margin-bottom:var(--s4)}
.hero h1{margin-bottom:var(--s4)}
.hero h1 .accent{color:var(--blue)}
.hero .lead{color:var(--t-on-dark-mut);margin-bottom:var(--s5)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:var(--s5);display:flex;gap:var(--s5);flex-wrap:wrap}
.hero-meta .mi{display:flex;flex-direction:column;gap:2px}
.hero-meta .mi b{font-family:var(--f-display);font-weight:800;font-size:26px;color:#fff}
.hero-meta .mi span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--t-on-dark-faint);text-transform:uppercase}
/* hero visual: faceted angular media frame */
.hero-visual{position:relative}
.facet{position:relative;clip-path:polygon(7% 0,100% 0,100% 86%,93% 100%,0 100%,0 14%);overflow:hidden;border:1px solid var(--line-dark);box-shadow:var(--shadow);background:var(--graphite)}
.facet img,.facet video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3.2}
/* engineering-drawing detailing on the hero */
.hero-visual .crosshair.c-tl{left:-7px;top:-7px}
.hero-visual .crosshair.c-tr{right:-7px;top:-7px}
.hero-visual .crosshair.c-bl{left:-7px;bottom:-7px}
.hero-visual .crosshair.c-br{right:-7px;bottom:-7px}
.hero-dim{position:absolute;left:0;right:0;bottom:-34px;display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--blue);text-transform:uppercase}
.hero-dim .line{flex:1;height:1px;background:linear-gradient(90deg,var(--blue),rgba(39,192,240,.15));position:relative}
.hero-dim .line::before,.hero-dim .line::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:var(--blue)}
.hero-dim .line::before{left:0}.hero-dim .line::after{right:0}
.hero-svg-dim{position:absolute;left:-30px;top:10%;height:80%;width:24px;pointer-events:none;overflow:visible}
.hero-svg-dim line,.hero-svg-dim path{stroke:var(--blue);stroke-width:1;fill:none}
.hero-svg-dim text{fill:var(--blue);font-family:var(--f-mono);font-size:9px;letter-spacing:.05em}
.hero-accent-bar{position:absolute;right:-20px;bottom:-22px;width:62%;height:58%;background:linear-gradient(135deg,var(--blue-deep),var(--blue-ink));clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);z-index:-1;opacity:.92}
.facet-badge{position:absolute;left:14px;top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--blue);background:rgba(13,16,20,.7);padding:6px 10px;border:1px solid var(--line-dark)}
.award-chip{position:absolute;right:-14px;top:24px;background:#fff;color:var(--ink);padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.award-chip img{height:42px}
.award-chip span{font-family:var(--f-mono);font-size:10.5px;line-height:1.25;max-width:120px;color:var(--t-on-light-mut)}
.award-chip b{display:block;font-family:var(--f-display);font-size:12px;color:var(--ink)}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--graphite);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);padding:var(--s4) var(--s4)}
.trust-item{display:flex;flex-direction:column;gap:4px}
.trust-item b{font-family:var(--f-display);font-weight:800;color:#fff;font-size:17px}
.trust-item span{font-size:13.5px;color:var(--t-on-dark-mut)}

/* ---------- SIGNATURE SEQUENCE ---------- */
.seq{background:var(--ink);color:var(--t-on-dark);position:relative}
.seq-head{text-align:center;max-width:760px;margin:0 auto;padding:var(--s7) var(--s4) var(--s5)}
.seq-head h2{color:#fff;margin:var(--s3) 0}
.seq-head p{color:var(--t-on-dark-mut)}
.seq-spine{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-family:var(--f-display);font-weight:800;font-size:clamp(15px,2vw,21px);margin-top:var(--s4)}
.seq-spine .word{color:var(--t-on-dark-mut);transition:color .4s}
.seq-spine .word.on{color:#fff}
.seq-spine .p{color:var(--blue-deep)}
/* pinned stage */
.seq-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;align-items:center;overflow:hidden}
.seq-scroller{position:relative}
.seq-canvas-wrap{position:relative;width:min(880px,90vw);margin:0 auto;aspect-ratio:16/10;clip-path:polygon(5% 0,100% 0,100% 90%,95% 100%,0 100%,0 10%);border:1px solid var(--line-dark);background:var(--graphite)}
.seq-canvas-wrap canvas,.seq-canvas-wrap .seq-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seq-beat{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s5);background:linear-gradient(to top,rgba(13,16,20,.92),transparent);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.seq-beat .b-num{font-family:var(--f-mono);font-size:13px;color:var(--blue)}
.seq-beat .b-title{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,3vw,32px);color:#fff}
.seq-beat .b-copy{font-size:14.5px;color:var(--t-on-dark-mut);max-width:34ch}
.seq-progress{position:absolute;left:var(--s5);right:var(--s5);top:var(--s4);height:2px;background:var(--line-dark)}
.seq-progress i{position:absolute;left:0;top:0;height:100%;background:var(--blue);width:0}
/* dimension callout */
.seq-dim{position:absolute;top:14px;right:16px;font-family:var(--f-mono);font-size:10.5px;color:var(--blue);letter-spacing:.06em}
/* reduced-motion / no-js static fallback */
.seq-static{display:none;gap:var(--s4)}
.seq-static .sf{position:relative;border:1px solid var(--line-dark);overflow:hidden;background:var(--graphite)}
.seq-static .sf img{width:100%;aspect-ratio:4/3;object-fit:cover}
.seq-static .sf .cap{padding:var(--s3)}
.seq-static .sf .cap .b-title{font-size:18px}
.no-js .seq-stage,.no-js .seq-scroller{display:none}
.no-js .seq-static{display:grid;grid-template-columns:repeat(4,1fr)}
@media(prefers-reduced-motion:reduce){
  .seq-scroller{display:none}
  .seq-static{display:grid;grid-template-columns:repeat(4,1fr)}
}
@media(max-width:720px){.no-js .seq-static,.seq-static{grid-template-columns:1fr!important}}

/* ---------- CAPABILITIES GRID ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cap-card{background:var(--paper);border:1px solid var(--line);padding:var(--s5) var(--s4) var(--s4);position:relative;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.cap-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:var(--blue-deep)}
.cap-card .num{font-family:var(--f-mono);font-size:12px;color:var(--blue-deep);font-weight:700}
.cap-card h3{margin:var(--s3) 0 10px;font-size:20px}
.cap-card p{font-size:14.5px;color:var(--t-on-light-mut)}
.cap-card .ic{position:absolute;top:var(--s4);right:var(--s4);color:var(--blue-deep)}

/* ---------- DIFFERENTIATORS ---------- */
.diff{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-dark)}
.diff-item{padding:var(--s5);position:relative}
.diff-item+.diff-item{border-left:1px solid var(--line-dark)}
.diff-item .idx{margin-bottom:var(--s3)}
.diff-item h3{color:#fff;font-size:22px;margin-bottom:12px}
.diff-item p{color:var(--t-on-dark-mut);font-size:15px}

/* ---------- EDITORIAL / WORK ---------- */
.editorial{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:var(--s3)}
.edi{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.edi img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.edi:hover img{transform:scale(1.04)}
.edi figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--s4);background:linear-gradient(to top,rgba(13,16,20,.9),transparent);color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.edi figcaption h4{font-family:var(--f-display);font-weight:800;font-size:17px}
.edi figcaption span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
/* catalogue-style frame (contain, steady ground) */
.cat{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.cat .ph{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:var(--s4);background:#fff}
.cat .ph img{max-width:100%;max-height:100%;object-fit:contain}
.cat .meta{padding:var(--s4);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;flex:1}
.cat .meta .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cat .meta h3{font-size:18px}
.cat .meta .dim{font-family:var(--f-mono);font-size:12px;color:var(--t-on-light-mut)}
.cat .meta ul{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--t-on-light-mut)}
.cat .meta ul li{padding-left:16px;position:relative}
.cat .meta ul li::before{content:"+";position:absolute;left:0;color:var(--blue-deep);font-weight:700}
.cat .ship{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-deep)}
.cat .meta .btn{margin-top:auto;align-self:flex-start;font-size:13px;padding:11px 18px}

/* project feature rows (Work) */
.proj{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center}
.proj.flip{grid-template-columns:.9fr 1.1fr}
.proj.flip .proj-media{order:-1}
.proj-media{border:1px solid var(--line);overflow:hidden;background:var(--paper-2);clip-path:polygon(4% 0,100% 0,100% 92%,96% 100%,0 100%,0 8%)}
.proj-media img,.proj-media video{width:100%;aspect-ratio:4/3;object-fit:cover}
.proj h3{font-size:clamp(24px,3vw,34px);margin:12px 0}
.proj p{color:var(--t-on-light-mut);font-size:16px;max-width:48ch}
.proj .award-row{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s3);padding:8px 12px;border:1px solid var(--line);background:var(--paper-2)}
.proj .award-row img{height:38px}
.proj .award-row span{font-family:var(--f-mono);font-size:11px;color:var(--t-on-light-mut);max-width:200px;line-height:1.3}

/* ---------- SUSTAINABILITY / STATEMENT ---------- */
.statement{background:var(--ink);color:#fff;text-align:center;position:relative;overflow:hidden}
.statement-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);background-size:48px 48px;opacity:.4;mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent)}
.statement .in{position:relative;padding:var(--s8) var(--s4)}
.statement h2{font-size:clamp(28px,4.5vw,52px);max-width:18ch;margin:0 auto var(--s3)}
.statement .ellipsis{color:var(--blue)}
.statement p{color:var(--t-on-dark-mut);max-width:54ch;margin:0 auto}

/* ---------- CTA band ---------- */
.cta-band{background:var(--blue);color:var(--ink);position:relative;overflow:hidden}
.cta-band .in{padding:var(--s7) var(--s4);text-align:center;position:relative}
.cta-band h2{color:var(--ink);font-size:clamp(28px,4vw,48px);margin-bottom:var(--s4)}
.cta-band .btn-dark{background:var(--ink);color:#fff}
.cta-stripes{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 2px,transparent 2px 56px);pointer-events:none}

/* ---------- page header (interior pages) ---------- */
.page-head{background:var(--ink);color:#fff;padding:calc(var(--s7) + var(--nav-h)) 0 var(--s7);position:relative;overflow:hidden;margin-top:calc(var(--nav-h) * -1)}
.page-head .hero-grid-bg{opacity:.4}
.page-head .in{position:relative;z-index:2}
.page-head.has-video{position:relative}
.page-head .ph-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30;z-index:0}
.page-head .ph-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(13,16,20,.94) 30%,rgba(13,16,20,.55) 100%)}
.page-head h1{font-size:clamp(34px,5vw,60px);margin:var(--s3) 0}
.page-head p{color:var(--t-on-dark-mut);max-width:60ch}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6)}
.form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:var(--s4)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form-field label{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-on-light-mut)}
.form-field label .req{color:var(--blue-deep)}
.form-field input,.form-field select,.form-field textarea{font-family:var(--f-body);font-size:16px;padding:13px 15px;border:1.5px solid var(--line);background:#fff;color:var(--t-on-light);transition:border-color .15s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--blue-deep);outline:none}
.form-field textarea{resize:vertical;min-height:120px}
.form-field .err{font-size:13px;color:#c8321f;display:none}
.form-field.invalid .err{display:block}
.form-field.invalid input,.form-field.invalid select,.form-field.invalid textarea{border-color:#c8321f}
.form-note{font-size:13px;color:var(--t-on-light-mut);margin-top:8px}
.form-success{display:none;padding:var(--s4);border:1.5px solid var(--blue-deep);background:rgba(39,192,240,.08);color:var(--t-on-light)}
.form-success.show{display:block}
.contact-aside{background:var(--ink);color:var(--t-on-dark);padding:var(--s5);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.contact-aside h3{color:#fff;font-size:20px;margin-bottom:var(--s4)}
.contact-aside .row{margin-bottom:var(--s4)}
.contact-aside .row .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-on-dark-faint);margin-bottom:5px}
.contact-aside .row a,.contact-aside .row p{color:#fff;font-size:16px}

/* more-grid (uniform work thumbnails) */
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.more-cell{border:1px solid var(--line-dark);overflow:hidden;background:var(--graphite);aspect-ratio:1/1}
.more-cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.more-cell:hover img{transform:scale(1.05)}
@media(max-width:720px){.more-grid{grid-template-columns:repeat(2,1fr)}}

/* dev-strip (development frames) */
.dev-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.dev-frame{border:1px solid var(--line-dark);overflow:hidden;background:var(--graphite)}
.dev-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dev-frame figcaption{padding:13px 16px;font-family:var(--f-display);font-weight:700;font-size:14px;color:#fff;display:flex;gap:10px;align-items:center;background:var(--graphite)}
.dev-frame figcaption .mono{color:var(--blue)}
@media(max-width:720px){.dev-strip{grid-template-columns:1fr}}

/* client logo wall (real strips on light ground) */
.client-wall .logo-wall img{width:100%;mix-blend-mode:multiply;opacity:.96}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:var(--s5)}
  .hero{padding-bottom:var(--s7)}
  .hero-visual{max-width:520px}
  .trust-in{grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5)}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .diff{grid-template-columns:1fr}
  .diff-item+.diff-item{border-left:0;border-top:1px solid var(--line-dark)}
  .editorial{grid-template-columns:repeat(6,1fr)}
  .proj,.proj.flip,.contact-grid{grid-template-columns:1fr;gap:var(--s5)}
  .proj.flip .proj-media{order:0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links,.nav-phone{display:none}
  .hamb{display:flex}
}
@media(max-width:600px){
  .cap-grid,.editorial{grid-template-columns:1fr}
  .editorial{grid-auto-rows:240px}
  .editorial .edi{grid-column:1/-1!important;grid-row:auto!important}
  .form-row{grid-template-columns:1fr}
  .trust-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .award-chip{display:none}
}
/* editorial spans (desktop) */
.edi-a{grid-column:span 7;grid-row:span 2}
.edi-b{grid-column:span 5;grid-row:span 2}
.edi-c{grid-column:span 4;grid-row:span 2}
.edi-d{grid-column:span 4;grid-row:span 2}
.edi-e{grid-column:span 4;grid-row:span 2}
@media(max-width:960px){
  .edi-a,.edi-b,.edi-c,.edi-d,.edi-e{grid-column:span 3;grid-row:span 1}
}