/* ==========================================================================
   Rock Royalty — material system

   The page is a beveled stone SLAB lying in a black void. The void around it
   is deliberate: it is what makes the slab read as an object with edges rather
   than as a background colour. Nothing is ever laid across the stone like tape
   — the nav and footer live in the void, off the slab.

   Three planes, one light source from above:
     .slab   the stone. everything sits on it.
     .well   photographs, cut DOWN into it  (dark top edge, lit bottom, no shadow)
     .glass  panels resting ON it           (lit top edge, dark bottom, shadow)

   Inset and raised are the same recipe inverted. Grain is layered on every
   material surface so they read as material, not as fill.
   ========================================================================== */

:root {
  --void:      #08080A;   /* the ground the slab lies in */
  --edge:      #0A0A0C;   /* bevel shadow / cut edge */
  --slab-deep: #1A1A1F;   /* recessed areas */
  --slab:      #24242A;   /* the stone */
  --slab-hi:   #32323A;   /* lit face of the stone */
  --lit:       #A9A9B4;   /* bevel highlight + secondary text */
  --white:     #F4F4F7;
  --red:       #FF5145;   /* hook words. 4.8:1 on --slab */
  --red-deep:  #D01F16;   /* large shapes only */

  --bevel: 26px;          /* thickness of the slab edge */
  --well-bevel: 15px;     /* thickness of a photograph's cut edge */
  --void-gap: 46px;       /* how much black shows around the slab */
  --gutter: 20px;
  --maxw: 1240px;

  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, sans-serif;

  /* Grain. Rasterised tiles — an SVG turbulence filter per bevel face meant
     thirty-odd separate rasterisations and stalled the renderer. */
  --grain: url("/grain.png");
  --grain-coarse: url("/grain-coarse.png");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- the slab
   An object in the void, with a real edge. Lit from the top-left. */
.slab {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto var(--void-gap);
  padding: var(--bevel);
  background: #0A0A0D;
  box-shadow:
    0 44px 96px -30px #000,
    0 12px 32px -12px rgba(0,0,0,.92);
}

/* ---- the chamfer: four mitred faces, each with a gradient running from its
   outer arris to its inner one, and a hard specular line on the arris itself.
   A flat colour per face reads as geometry; the gradient plus the hard line is
   what reads as cut stone. Light from the upper left. ---- */
.slab > i, .well > i {
  position: absolute; display: block; pointer-events: none;
  background-blend-mode: overlay, normal;
}

.slab > .bv-t {
  top: 0; left: 0; right: 0; height: var(--bevel);
  background-image: var(--grain-coarse), linear-gradient(to bottom,
    #7A7F92 0, #7A7F92 1px,        /* arris — the sharp lit edge */
    #4E5263 1px, #3C404E 45%, #2B2E39 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--bevel)) 100%, var(--bevel) 100%);
}
.slab > .bv-l {
  top: 0; bottom: 0; left: 0; width: var(--bevel);
  background-image: var(--grain-coarse), linear-gradient(to right,
    #63687A 0, #63687A 1px,
    #424656 1px, #333743 48%, #262933 100%);
  clip-path: polygon(0 0, var(--bevel) var(--bevel), var(--bevel) calc(100% - var(--bevel)), 0 100%);
}
.slab > .bv-r {
  top: 0; bottom: 0; right: 0; width: var(--bevel);
  background-image: var(--grain-coarse), linear-gradient(to left,
    #232630 0, #232630 1px,
    #1A1C24 1px, #15161C 52%, #101116 100%);
  clip-path: polygon(100% 0, 100% 100%, calc(100% - var(--bevel)) calc(100% - var(--bevel)), calc(100% - var(--bevel)) var(--bevel));
}
.slab > .bv-b {
  bottom: 0; left: 0; right: 0; height: var(--bevel);
  background-image: var(--grain-coarse), linear-gradient(to top,
    #08080B 0, #08080B 1px,
    #0E0F14 1px, #15161C 55%, #1C1D25 100%);
  clip-path: polygon(var(--bevel) 0, calc(100% - var(--bevel)) 0, 100% 100%, 0 100%);
}

/* the stone surface, sitting inside the chamfer */
.slab-face {
  position: relative;
  background:
    var(--grain-coarse),
    radial-gradient(140% 90% at 22% 0%, var(--slab-hi) 0%, var(--slab) 46%, #1C1C21 100%);
  background-blend-mode: overlay, normal;
  /* the inner arris, where the chamfer meets the face */
  box-shadow:
    inset 0 1px 0 rgba(0,0,0,.95),
    inset 1px 0 0 rgba(0,0,0,.7),
    inset -1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
.slab-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain);
  opacity: .32; mix-blend-mode: overlay;
}
.slab-face > * { position: relative; z-index: 1; }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(46px, 5.6vw, 78px) 0; }
.trough {
  background-image: var(--grain), linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.34));
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* -------------------------------------------------------------- typography */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: .96;
  margin: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(46px, 8.4vw, 92px); letter-spacing: -1px; }
h2 { font-size: clamp(32px, 5vw, 54px); }
h3 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.2px; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
.lede { font-size: clamp(17px, 1.9vw, 19.5px); color: var(--lit); max-width: 54ch; }
.muted { color: var(--lit); }
.hook { color: var(--red); }

.eyebrow {
  font-family: var(--font-display); font-weight: 600;
  font-size: 15px; letter-spacing: 3.6px; text-transform: uppercase;
  color: var(--lit); display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--red); flex: none; }
.rule { height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); border: 0; margin: 0 0 24px; }

/* ------------------------------------------------------- raised glass panel */
.glass {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  background-image:
    var(--grain),
    linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.025) 42%, rgba(0,0,0,.22) 100%);
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.6),
    inset 1px 0 0 rgba(255,255,255,.07),
    inset -1px 0 0 rgba(0,0,0,.35),
    0 26px 50px -18px rgba(0,0,0,.95),
    0 6px 14px -6px rgba(0,0,0,.7);
}

/* ----------------------------------------------- inset well (photographs)
   A cut down into the stone. Nothing is printed inside the cut — captions
   live outside it, or there is no caption. */
.well {
  display: block; position: relative;
  padding: var(--well-bevel);
  background: #050507;
  box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 -1px 0 rgba(0,0,0,.7);
}
/* Inverted chamfer. In a recess the top and left walls face away from the
   light and the bottom and right catch it — the slab's recipe, upside down. */
.well > .bv-t {
  top: 0; left: 0; right: 0; height: var(--well-bevel);
  background-image: var(--grain-coarse), linear-gradient(to bottom,
    #07070A 0, #07070A 1px,
    #0C0D11 1px, #131419 55%, #1B1C23 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--well-bevel)) 100%, var(--well-bevel) 100%);
}
.well > .bv-l {
  top: 0; bottom: 0; left: 0; width: var(--well-bevel);
  background-image: var(--grain-coarse), linear-gradient(to right,
    #0A0B0E 0, #0A0B0E 1px,
    #111217 1px, #181A21 60%, #212430 100%);
  clip-path: polygon(0 0, var(--well-bevel) var(--well-bevel), var(--well-bevel) calc(100% - var(--well-bevel)), 0 100%);
}
.well > .bv-r {
  top: 0; bottom: 0; right: 0; width: var(--well-bevel);
  background-image: var(--grain-coarse), linear-gradient(to left,
    #5B6072 0, #5B6072 1px,
    #3E4251 1px, #31343F 52%, #272932 100%);
  clip-path: polygon(100% 0, 100% 100%, calc(100% - var(--well-bevel)) calc(100% - var(--well-bevel)), calc(100% - var(--well-bevel)) var(--well-bevel));
}
.well > .bv-b {
  bottom: 0; left: 0; right: 0; height: var(--well-bevel);
  background-image: var(--grain-coarse), linear-gradient(to top,
    #70758A 0, #70758A 1px,
    #4A4E5F 1px, #383B48 48%, #2A2C36 100%);
  clip-path: polygon(var(--well-bevel) 0, calc(100% - var(--well-bevel)) 0, 100% 100%, 0 100%);
}

.well .face {
  position: relative; display: block; overflow: hidden;
  background: #2A2A31; line-height: 0;
}
.well .face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.well .face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.05),
    inset -1px 0 0 rgba(0,0,0,.85),
    inset 0 -1px 0 rgba(0,0,0,.92),
    inset 0 18px 28px -12px rgba(0,0,0,.9);
}
/* aspect on the FACE, and the well never stretches to fill a grid row —
   that mismatch is what left dead space under the photos. */
.well { align-self: start; }
.ratio-4x3  .face { aspect-ratio: 4 / 3; }
.ratio-3x4  .face { aspect-ratio: 3 / 4; }
.ratio-16x9 .face { aspect-ratio: 16 / 9; }
.ratio-1x1  .face { aspect-ratio: 1 / 1; }

/* caption belongs OUTSIDE the cut */
.shot { margin: 0; }
.shot figcaption {
  margin-top: 12px; font-size: 13.5px; letter-spacing: .3px; color: var(--lit);
  display: flex; gap: 10px; align-items: baseline;
}
.shot figcaption::before { content: ""; width: 14px; height: 2px; background: var(--red); flex: none; transform: translateY(-4px); }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 32px; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer;
  background-image: var(--grain), linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  background-blend-mode: overlay, normal;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.35),
    0 16px 30px -12px rgba(208,31,22,.7), 0 4px 10px -4px rgba(0,0,0,.8);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background-image: var(--grain), linear-gradient(158deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.6), 0 14px 26px -14px rgba(0,0,0,.9);
}
.btn-tel {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 30px); letter-spacing: .4px;
  color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 56px;
}
.btn-tel:hover { color: var(--red); }

a { color: var(--red); }
a:hover { color: #FF8D84; }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ------------------------------------------------------ nav — in the void
   Never laid across the stone. It sits on the black above the slab. */
.nav { background: var(--void); position: relative; z-index: 60; }
.nav .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex; align-items: center; gap: 26px;
}
.nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); margin-right: auto; }
.nav .brand img { height: 42px; width: auto; display: block; }
.nav .brand b { font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: .4px; text-transform: uppercase; }
.nav .links { display: flex; align-items: center; gap: 28px; }
.nav .links a {
  color: var(--lit); text-decoration: none; font-weight: 600; font-size: 15px;
  letter-spacing: .5px; padding: 8px 0;
}
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--white); }
.nav .links a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--red); }
.nav .tel { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: .4px; color: var(--white); text-decoration: none; white-space: nowrap; }
.nav .tel:hover { color: var(--red); }
.nav-toggle { display: none; }

/* ------------------------------------------------- footer — also in the void
   Same treatment as the nav, for the same reason. */
.footer { background: var(--void); padding: 52px 0 34px; }
.footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 42px; }
.footer h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--red); margin: 0 0 14px; }
.footer a { color: var(--lit); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer .legal { margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.10); font-size: 13px; color: #6E7280; }

/* --------------------------------------------------------- hero (the story)
   Marco stands in the void and breaks down onto the slab. */
.hero { position: relative; overflow: visible; padding-top: 0; }
.hero .grid { display: grid; grid-template-columns: 1fr 1.18fr; gap: 30px; align-items: end; }
/* The figure column carries the weight: the photograph is a whole upper body,
   so it needs the room to show the shoulders tapering rather than be cropped
   into a rectangle. The headline still holds two lines down to 960px. */
.hero .copy { padding: clamp(40px, 5vw, 76px) 0 clamp(52px, 6vw, 92px); }
.hero .figure { position: relative; align-self: end; min-height: 380px; }
.hero .figure img {
  display: block; width: 100%; height: auto;
  margin-top: calc(var(--bevel) * -1);   /* break the slab edge, never past it:
     the figure's top lands exactly on the slab's outer edge, which is the nav's
     bottom line, so no photograph can tuck its head under the nav. */
  filter:
    drop-shadow(-2px -2px 9px rgba(190,202,226,.13))
    drop-shadow(0 22px 40px rgba(0,0,0,.85))
    contrast(1.08) saturate(.9) brightness(.98);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.45) 97%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, rgba(0,0,0,.45) 97%, rgba(0,0,0,0) 100%);
}
.hero .panel {
  position: absolute; right: -10%; bottom: 0; width: 118%; height: 62%;
  background-image: var(--grain-coarse),
    linear-gradient(203deg, rgba(208,31,22,.34) 0%, rgba(208,31,22,.21) 44%, rgba(160,26,20,.10) 76%, rgba(120,22,18,.03) 100%);
  background-blend-mode: overlay, normal;
  clip-path: polygon(16% 0%, 100% 7%, 100% 100%, 0% 100%);
}

/* ------------------------------------------------------------ story beats */
.beat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.4vw, 64px); align-items: center; }
.beat.flip .beat-copy { order: 2; }
.beat + .beat { margin-top: clamp(40px, 4.4vw, 62px); }
.beat .bullets { margin-top: 16px; }

.bullets { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.bullets li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--lit); }
.bullets li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; flex: none; background: var(--red); }

.steps { counter-reset: step; }
.steps .step { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.steps .step:last-child { border-bottom: 0; }
.steps .step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--red);
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background-image: var(--grain), linear-gradient(158deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.6);
}

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 28px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px, 2.4vw, 28px); }

/* ------------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lit); font-weight: 600; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 15px;
  font-family: var(--font-body); font-size: 16px; color: var(--white);
  background: rgba(0,0,0,.45); border: 0;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.10);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E7280; }
.hint { font-size: 13.5px; color: var(--lit); }
.notice { padding: 16px 18px; background: rgba(208,31,22,.14); box-shadow: inset 0 0 0 1px rgba(255,81,69,.4); margin-bottom: 22px; }
.notice.ok { background: rgba(60,160,90,.14); box-shadow: inset 0 0 0 1px rgba(90,200,120,.4); }

/* -------------------------------------------------------------------- misc */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--red); color: #fff; padding: 12px 18px; font-family: var(--font-display); }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  :root { --void-gap: 24px; --bevel: 18px; --well-bevel: 11px; }
  .hero .grid { grid-template-columns: 1fr; }
  .hero .figure { max-width: 420px; margin: 0 auto; }
  .hero .figure img { margin-top: -40px; }
  .beat, .grid3 { grid-template-columns: 1fr; }
  .beat.flip .beat-copy { order: 0; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --void-gap: 12px; --bevel: 14px; --well-bevel: 9px; }
  body { font-size: 16px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; }
  .nav .links { display: none; }
  .nav .links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    padding: 6px var(--gutter) 14px; background: var(--void);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .nav { position: relative; }
  .nav .links.open a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-toggle {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none;
    background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(0,0,0,.22));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.6);
    border: 0; color: var(--white); cursor: pointer;
  }
}

@media print {
  .nav, .btn { display: none; }
  body { background: #fff; color: #000; }
  .slab { box-shadow: none; border: 0; }
}