/* Pupezat landing page v3 — tokens mirror 04_brand/brand-system-v2.md §3 (screen, dark-first) */

@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}

:root{
  --bg-base:#0D0E0E;
  --bg-raised:#151616;
  --bg-card:#202121;
  --line:#2F2F2F;
  --text:#F4F2ED;
  --text-2:#AAA9A5;
  --accent:#FE6F27;        /* headline phrase and numbers only */
  --accent-quiet:#C85F2D;  /* icons, arrows, fine rules */
  --max:1240px;
  --gutter:48px;
}

*{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg-base);color:var(--text);font-family:"Schibsted Grotesk",Arial,sans-serif;font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-0.025em}
p{margin:0}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* Header */
.header{position:absolute;inset:0 0 auto;z-index:10;border-bottom:1px solid rgba(47,47,47,.7);background:rgba(13,14,14,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center}
.brand-logo{height:34px;width:auto}
.nav{display:flex;gap:36px;font-size:.85rem;color:var(--text-2)}
.nav a:hover{color:var(--text)}

/* Hero: text left, feather image bleeding to the right edge */
.hero{position:relative;min-height:min(640px,88vh);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-image{position:absolute;inset:0 0 0 42%}
.hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-image::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg-base) 0%,rgba(13,14,14,0) 38%);z-index:1}
.hero-inner{position:relative;z-index:2;padding-block:132px 72px}
.hero-copy{max-width:600px}
.hero h1{font-size:clamp(2.4rem,4vw,3.4rem);line-height:1.1;margin-bottom:28px}
.hero h1 .line{white-space:nowrap}
.hero h1 .accent{display:block}
.hero-copy p{max-width:520px}
.accent{color:var(--accent)}
.hero-copy p{color:var(--text-2);font-size:1.05rem;margin-bottom:16px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.btn{display:inline-block;padding:11px 22px;border:1px solid var(--accent-quiet);border-radius:2px;font-size:.85rem;letter-spacing:.04em;color:var(--text)}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* Section labels: 01 —— */
.label{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:.8rem;letter-spacing:.12em}
.num{color:var(--accent)}
.rule{display:inline-block;width:36px;height:1px;background:var(--accent-quiet)}

/* Bands */
.band{border-bottom:1px solid var(--line)}
.band-raised{background:var(--bg-raised)}
h2{font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.15;margin-bottom:22px}
.body{color:var(--text-2);font-size:1rem;max-width:460px;margin-bottom:16px}
.body.strong{color:var(--text);font-weight:500}

/* Split: copy left, cards right */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:56px;align-items:center;padding-block:96px}

/* Cards */
.cards{display:grid;gap:16px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:28px 24px}
.card h3{font-size:1.1rem;font-weight:500;letter-spacing:0;margin:18px 0 8px}
.card p{color:var(--text-2);font-size:.92rem;line-height:1.55}
.icon{width:30px;height:30px;fill:none;stroke:var(--accent-quiet);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* Where we help: 3 + 2 */
.cards-improve{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards-improve .card{grid-column:span 2}
.cards-improve .card:nth-child(4),.cards-improve .card:nth-child(5){grid-column:span 3}
.card-row{padding:22px 20px}
.card-row .icon{display:block;width:26px;height:26px}
.card-row h3{margin:14px 0 6px;font-size:.98rem}
.card-row p{font-size:.84rem}

/* Media bands: image left fading into the dark, copy right */
.media-band{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:420px}
.media{position:relative;overflow:hidden}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,14,14,0) 55%,var(--bg-base) 100%)}
.media-copy{padding:88px var(--gutter) 88px 56px;max-width:720px}
.media-band-short{min-height:320px}
.media-band-short .media img{object-position:left center}  /* keep the sun in frame */
.media-band-short .media-copy{align-self:center;padding-block:64px}
.sub{font-size:1.35rem;font-weight:400;color:var(--text-2);margin:-10px 0 40px}

/* Steps: 01 → 02 → 03 */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:20px;align-items:start}
.step-num{display:block;color:var(--accent);font-size:1.2rem;font-weight:400;margin-bottom:6px}
.steps h3{font-size:1.05rem;font-weight:500;letter-spacing:0;margin-bottom:6px}
.steps p{color:var(--text-2);font-size:.92rem;line-height:1.5}
.arrow{color:var(--accent-quiet);font-size:1.4rem;padding-top:30px}

/* Why Pupezat */
.split-why{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.points li{display:flex;flex-direction:column;gap:14px;font-size:.95rem;color:var(--text-2);line-height:1.5}

/* Closing band — rock texture, darkened so the text holds its contrast */
/* Contact: email card left, heading right (desktop only; phones keep the heading first) */
.split-contact .contact-card{order:-1}
.split-contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.contact-card{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:40px 36px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.contact-label{margin:0;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.contact-mail{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--text);border-bottom:1px solid var(--accent-quiet);padding-bottom:4px;margin-bottom:10px}
.contact-mail:hover{color:var(--accent)}

.closing{background:linear-gradient(rgba(13,14,14,.55),rgba(13,14,14,.55)),url("assets/img/closing-rock.jpg") center/cover var(--bg-base);padding-block:88px}
.closing-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.closing-line{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;line-height:1.3;letter-spacing:-0.01em;max-width:720px}
.closing-line span{color:var(--text-2)}
.closing-brand{display:flex;flex-direction:column;gap:6px;text-align:right;font-size:.8rem;color:var(--text-2);white-space:nowrap}
.closing-brand strong{color:var(--text);font-weight:400;letter-spacing:.3em;font-size:.9rem}

/* Tablet and phone */
@media (max-width:960px){
  :root{--gutter:20px}
  .nav{display:none}
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero-image{position:relative;inset:auto;height:300px;order:2}
  .hero-image::before{background:linear-gradient(180deg,var(--bg-base) 0%,rgba(13,14,14,0) 40%)}
  .hero-inner{padding-block:120px 32px}
  .hero h1 .line{white-space:normal}
  .split,.split-why,.split-contact{grid-template-columns:1fr;gap:36px;padding-block:72px}
  .split-contact .contact-card{order:0}
  .cards-3{grid-template-columns:1fr}
  .cards-improve{grid-template-columns:1fr}
  .cards-improve .card,.cards-improve .card:nth-child(4),.cards-improve .card:nth-child(5){grid-column:auto}
  .media-band{grid-template-columns:1fr;min-height:0}
  .media{height:220px}
  .media::after{background:linear-gradient(180deg,rgba(13,14,14,0) 50%,var(--bg-base) 100%)}
  .media-copy{padding:40px var(--gutter) 72px}
  .steps{grid-template-columns:1fr;gap:24px}
  .arrow{display:none}
  .points{grid-template-columns:1fr;gap:20px}
  .points li{flex-direction:row;align-items:center}
  .closing-inner{flex-direction:column;align-items:flex-start}
  .closing-brand{text-align:left}
}