/* ═══════════════════════════════════════════════════════════════════════════
   HOME — hero, about, equipment, services, use cases, works teaser, prices.
   Loaded only on the home page (see 'styles' in inc/routes.php).

   Background rhythm down the page is deliberate:
   paper → paper → DARK (services) → paper → paper → paper → sand (contact)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── HERO ────────────────────────────────────────────────────────────────
   The most fragile part of the design. Check it first after any hero change:
   the dark panel must keep white text legible over a photograph that changes
   aspect ratio drastically between desktop and phone. */
.hero{
  position:relative;
  min-height:min(660px,92vh);
  display:flex;
  overflow:hidden;
  background:var(--ink);
}
.hero-img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.hero-panel{
  position:relative;z-index:1;
  width:56%;
  background:linear-gradient(90deg,rgba(20,22,20,0.78) 0%,rgba(20,22,20,0.66) 70%,rgba(20,22,20,0) 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--header-h) clamp(28px,5vw,72px) 0;
}
.kicker{
  font-family:var(--mono);font-size:13px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--amber);
}
.hero-panel h1{
  font-weight:700;
  font-size:clamp(32px,5.6vw,56px);
  line-height:1.05;
  margin:20px 0 0;
  color:#fff;
  text-wrap:balance;
}
.hero-panel p{
  font-size:clamp(16px,1.6vw,18px);line-height:1.6;
  color:rgba(255,255,255,0.82);
  margin:24px 0 0;max-width:440px;text-wrap:pretty;
}
.hero-panel .cta{margin-top:34px}

/* ── ABOUT ───────────────────────────────────────────────────────────────── */
.about{
  padding:var(--pad-y) var(--pad-x);
  text-align:center;max-width:820px;margin:0 auto;
}
.about-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--amber-dark);
}
.about-lead{
  font-family:var(--sora);font-weight:500;
  font-size:clamp(19px,2.6vw,26px);line-height:1.5;
  color:#2a2a28;margin:20px 0 0;text-wrap:pretty;
}
/* Second paragraph: the service area and what we do in it, set smaller so the
   client's own statement above stays the thing you read first. It replaced the
   counters that used to close this section. */
.about-text{
  font-size:clamp(15px,1.7vw,17px);line-height:1.7;
  color:var(--muted);margin:26px 0 0;text-wrap:pretty;
}

/* ── EQUIPMENT ───────────────────────────────────────────────────────────── */
.equip{padding:0 var(--pad-x) var(--pad-y)}
.equip h2{margin-bottom:36px}
.equip-list{display:grid;gap:20px}
.equip-row{
  display:flex;gap:clamp(16px,3vw,28px);align-items:center;
  background:#fff;border-radius:14px;padding:20px;
  box-shadow:0 12px 30px -20px rgba(0,0,0,0.35);
}
.equip-thumb{
  width:180px;height:120px;flex:none;
  object-fit:cover;border-radius:10px;background:#eceae2;
}
.equip-name{font-family:var(--sora);font-weight:600;font-size:clamp(17px,2vw,20px)}
.equip-spec{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ── SERVICES ────────────────────────────────────────────────────────────── */
.serv{padding:var(--pad-y) var(--pad-x);background:var(--ink);color:#fff}
.serv h2{margin-bottom:36px}
.chips{display:flex;flex-wrap:wrap;gap:14px}
.chip{
  border:1px solid rgba(255,255,255,0.22);border-radius:999px;
  padding:13px 24px;font-size:16px;color:#f0f0ec;
}

/* ── USE CASES ───────────────────────────────────────────────────────────── */
.uses{padding:var(--pad-y) var(--pad-x)}
.uses h2{margin-bottom:8px}
.uses-intro{font-size:16px;color:var(--muted);margin:0 0 40px;max-width:560px}
.uses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,28px)}
.use-card{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 40px -24px rgba(0,0,0,0.4);
  display:flex;flex-direction:column;
}
/* 16:9, not 4:3 — these cards put a ~10-item list under the photo and a
   4:3 image at card width pushed the entire list off screen. */
.use-img{
  display:block;width:100%;aspect-ratio:16/9;
  object-fit:cover;background:#eceae2;
}
.use-body{padding:clamp(20px,2.4vw,28px)}
.use-h{
  font-weight:600;font-size:clamp(17px,1.9vw,20px);
  line-height:1.35;text-wrap:balance;
}
.use-list{list-style:none;margin:20px 0 0;padding:0}
.use-list li{
  position:relative;padding:0 0 0 24px;margin-bottom:14px;
  font-size:15.5px;line-height:1.5;color:var(--body);
}
.use-list li:last-child{margin-bottom:0}
.use-list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:2px;background:var(--amber);
}
.use-list b{font-weight:600;color:var(--ink)}
.use-d{display:block;margin-top:3px;font-size:14px;color:var(--muted);line-height:1.5}

/* ── WORKS TEASER ────────────────────────────────────────────────────────
   The before/after cases moved to the works page — their styles went with
   them, into works.css. What is left here is the link through: a strip of
   finished results wrapped in one big <a>.

   The strip is square rather than matching any source ratio. Its four photos
   are a mix of 3:4 halves and a 4:3 gallery frame, and a square centre-crop is
   the one shape that survives both without gutting either. */
.works-teaser{padding:0 var(--pad-x) var(--pad-y)}
.works-teaser h2{margin-bottom:8px}
.works-teaser-intro{font-size:16px;color:var(--muted);margin:0 0 32px;max-width:560px}
.works-teaser-card{
  display:block;text-decoration:none;color:inherit;
  background:#fff;border-radius:16px;padding:clamp(14px,1.8vw,20px);
  box-shadow:0 16px 40px -26px rgba(0,0,0,0.4);
  transition:box-shadow .2s ease,transform .2s ease;
}
.works-teaser-card:hover{
  box-shadow:0 22px 52px -26px rgba(0,0,0,0.5);
  transform:translateY(-2px);
}
.works-teaser-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px);
}
.works-teaser-strip img{
  display:block;width:100%;aspect-ratio:1/1;
  object-fit:cover;border-radius:8px;background:#eceae2;
}
.works-teaser-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:clamp(16px,2vw,22px);
  font-family:var(--sora);font-weight:600;font-size:16px;color:var(--ink);
}
.works-teaser-cta::after{content:"→";color:var(--amber-dark);transition:transform .2s ease}
.works-teaser-card:hover .works-teaser-cta::after{transform:translateX(4px)}

/* ── PRICES ──────────────────────────────────────────────────────────────── */
.prices{padding:0 var(--pad-x) var(--pad-y)}
.prices h2{margin-bottom:32px}
.prices-card{
  background:#fff;border-radius:16px;
  padding:16px clamp(22px,3vw,40px);
  box-shadow:0 16px 40px -26px rgba(0,0,0,0.4);
  max-width:820px;
}
.price-row{
  display:flex;align-items:baseline;gap:16px;
  padding:22px 0;border-bottom:1px solid #efeee8;
}
.price-row:last-child{border-bottom:none}
.price-label{font-size:17px}
.price-val{
  font-family:var(--sora);font-weight:700;font-size:19px;
  color:var(--amber-dark);white-space:nowrap;margin-left:auto;
}
.prices-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:18px}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .hero-panel{width:72%}
}
@media(max-width:900px){
  .uses-grid{grid-template-columns:1fr}
}
/* 700px is tied to the <picture> art-direction breakpoint in the markup
   (min-width:701px) and to 'breakpoint' in inc/media.php. Move one, move all
   three — below this width the panel goes full-bleed and the scrim has to
   turn vertical, because there is no longer a photo edge to fade into. */
@media(max-width:700px){
  .hero-panel{
    width:100%;
    padding:calc(var(--header-h) + 34px) 22px 56px;
    background:linear-gradient(180deg,rgba(20,22,20,0.55) 0%,rgba(20,22,20,0.82) 45%,rgba(20,22,20,0.90) 100%);
  }
  .hero-panel p{max-width:none}
}
@media(max-width:560px){
  .chip{padding:11px 18px;font-size:15px}
  /* Four squares across a phone are too small to show anything. */
  .works-teaser-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  /* Rows stay side by side with a shrunken thumbnail. The row shape is what
     distinguishes this design from the rejected variant — do not stack. */
  .equip-row{padding:14px;gap:14px}
  .equip-thumb{width:112px;height:84px}
  .equip-spec{font-size:12px;margin-top:6px}
  .price-row{gap:12px}
}