/* ============================================================
   JenCo theme layer.

   Three things live here:
     1. the light section system, which inverts the design tokens
     2. the sticky header and its light state
     3. the centred hero

   Loads after tokens / base / components / pages and overrides them.
   ============================================================ */

/* ------------------------------------------------------------
   LIGHT SECTIONS
   Redefining the tokens inside the section is what makes this work.
   Every component already reads --gold, --muted and --line, so an
   eyebrow, a rule and a link all invert correctly without being
   restyled one by one.

   The accent has to change, not just darken: champagne on chalk
   measures 1.45 to 1 and is unreadable. Dark bronze measures 6.4.
   ------------------------------------------------------------ */
.section--light{
  /* a pale rose vanishes on chalk, so the error red darkens here */
  --error:#A3342A;
  --text:var(--ink);
  background:var(--chalk);
  color:var(--ink);
  --gold:var(--bronze-dark);
  --muted:rgba(11,11,11,.66);
  --muted-dim:rgba(11,11,11,.45);
  --line:rgba(11,11,11,.14);
  --line-gold:rgba(96,77,55,.32);
}
.section--light h1,.section--light h2,.section--light h3{color:var(--ink)}
.section--light .lede,.section--light .muted,.section--light p{color:var(--muted)}

/* buttons cannot simply inherit the accent here, or they end up
   dark bronze on chalk with pale text */
.section--light .btn--primary{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.section--light .btn--primary:hover,.section--light .btn--primary:focus-visible{
  background:var(--bronze-dark);border-color:var(--bronze-dark);color:var(--chalk)}
.section--light .btn--ghost{border-color:rgba(11,11,11,.28);color:var(--ink)}
.section--light .btn--ghost:hover,.section--light .btn--ghost:focus-visible{
  border-color:var(--ink);color:var(--ink);background:rgba(11,11,11,.04)}

/* cards, if a light section ever carries them */
.section--light .card{background:#F1F0EC;border-color:rgba(11,11,11,.12)}
.section--light .card__title{color:var(--ink)}
.section--light .card__text{color:var(--muted)}
.section--light .card__tag{color:var(--bronze-dark)}
.section--light .card:hover{border-color:rgba(96,77,55,.34)}

/* the founder portrait sits on chalk in v3 */
.section--light .founder__name{color:var(--ink)}
.section--light .founder__role{color:var(--bronze-dark)}
.section--light .founder__quote{color:var(--ink)}
.section--light .why__item strong{color:var(--ink)}
.section--light .step{border-top-color:var(--line-gold)}
.section--light .values div{border-top-color:var(--line-gold)}
.section--light .pull{border-left-color:var(--bronze-dark);color:var(--ink)}
.section--light .field input,.section--light .field select,.section--light .field textarea{
  background:#F1F0EC;border-color:rgba(11,11,11,.16);color:var(--ink)}
.section--light .field input::placeholder,.section--light .field textarea::placeholder{color:rgba(11,11,11,.4)}
.section--light .field input:focus,.section--light .field textarea:focus,.section--light .field select:focus{
  border-color:var(--ink)}
.section--light .alert{background:#F1F0EC;border-color:var(--line-gold);color:var(--muted)}
.section--light details.more{border-top-color:var(--line)}

/* ------------------------------------------------------------
   STICKY HEADER, LIGHT ONCE SCROLLED
   Transparent over the hero, then chalk with ink type. The wordmark
   swaps between the champagne and ink masters rather than being
   recoloured, so the artwork is always the approved one.
   ------------------------------------------------------------ */
.site-head .brand{position:relative}
.site-head .brand .mark-ink{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.site-head .brand .mark-gold{opacity:1;transition:opacity .45s var(--ease)}

.site-head.is-stuck{
  background:rgba(233,233,231,.94);
  border-bottom-color:rgba(11,11,11,.12);
  backdrop-filter:blur(10px);
}
.site-head.is-stuck .brand .mark-ink{opacity:1}
.site-head.is-stuck .brand .mark-gold{opacity:0}
.site-head.is-stuck .nav a{color:rgba(11,11,11,.66)}
.site-head.is-stuck .nav a:hover,
.site-head.is-stuck .nav a:focus-visible,
.site-head.is-stuck .nav a[aria-current="page"]{color:var(--ink)}
.site-head.is-stuck .nav a[aria-current="page"]::after{background:var(--bronze-dark)}
.site-head.is-stuck .nav a.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.site-head.is-stuck .nav a.btn--primary:hover,
.site-head.is-stuck .nav a.btn--primary:focus-visible{
  background:var(--bronze-dark);border-color:var(--bronze-dark);color:var(--chalk)}
.site-head.is-stuck .nav-toggle span{background:var(--ink)}

@media (max-width:860px){
  .site-head.is-stuck .nav{background:var(--chalk);border-bottom-color:rgba(11,11,11,.12)}
  .site-head.is-stuck .nav a{border-bottom-color:rgba(11,11,11,.10)}
}

/* pages that open on a light band need the header legible from the top */
.head-light .site-head:not(.is-stuck) .brand .mark-ink{opacity:1}
.head-light .site-head:not(.is-stuck) .brand .mark-gold{opacity:0}
.head-light .site-head:not(.is-stuck) .nav a{color:rgba(11,11,11,.66)}
.head-light .site-head:not(.is-stuck) .nav a:hover,
.head-light .site-head:not(.is-stuck) .nav a[aria-current="page"]{color:var(--ink)}
.head-light .site-head:not(.is-stuck) .nav a.btn--primary{
  background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.head-light .site-head:not(.is-stuck) .nav-toggle span{background:var(--ink)}

/* Inner pages open on a chalk header, so the nav is coloured ink. Below 860px
   the nav stops being a row on that chalk bar and becomes a black drawer
   underneath it, and ink on near-black is invisible. Scrolling appeared to
   "fix" it only because .is-stuck drops these overrides. Restore the dark
   surface colours for the drawer, and the gold button with them: an ink
   button on an ink panel is a rectangle nobody can see.
   The toggle itself is untouched, it stays on the chalk bar either way. */
@media (max-width:860px){
  .head-light .site-head:not(.is-stuck) .nav a{color:var(--muted)}
  .head-light .site-head:not(.is-stuck) .nav a:hover,
  .head-light .site-head:not(.is-stuck) .nav a:focus-visible,
  .head-light .site-head:not(.is-stuck) .nav a[aria-current="page"]{color:var(--chalk)}
  .head-light .site-head:not(.is-stuck) .nav a.btn--primary{
    background:var(--gold);border-color:var(--gold);color:var(--ink)}
}

/* ------------------------------------------------------------
   CENTRED HERO
   ------------------------------------------------------------ */
.hero--centre{text-align:center}
.hero--centre .hero__inner{display:flex;flex-direction:column;align-items:center}
.hero--centre h1{max-width:16ch;margin-inline:auto}
.hero--centre .hero__rotator{max-width:44ch;margin-inline:auto;justify-items:center}
.hero--centre .hero__cta{justify-content:center}
/* a centred vignette, so type reads over the middle rather than the left */
.hero--centre .hero__scrim{
  background:
    radial-gradient(ellipse 78% 62% at 50% 46%, rgba(11,11,11,.9) 0%, rgba(11,11,11,.72) 55%, rgba(11,11,11,.5) 100%),
    linear-gradient(0deg, rgba(11,11,11,.95) 0%, rgba(11,11,11,.3) 42%, rgba(11,11,11,.6) 100%);
}
@media (max-width:700px){
  .hero--centre .hero__scrim{
    background:linear-gradient(0deg,rgba(11,11,11,.96) 12%,rgba(11,11,11,.66) 100%)}
}

/* light page heads, used on the inner pages */
.page-head--light{background:var(--chalk);color:var(--ink);
  --gold:var(--bronze-dark);--muted:rgba(11,11,11,.66);--line:rgba(11,11,11,.14)}
.page-head--light h1{color:var(--ink)}
.page-head--light .lede{color:var(--muted)}

/* ------------------------------------------------------------
   FORM ERRORS ON LIGHT SECTIONS
   This file loads after components.css. The light-section input rules above
   share the same specificity as the base error rules, so the error state has
   to be restated here or it is silently overridden and nothing highlights.
   ------------------------------------------------------------ */
.section--light .field--error input,
.section--light .field--error select,
.section--light .field--error textarea{
  border-color:var(--error);
  background:#F7EEEC;
}
/* a focused field that is still in error must keep reading as an error.
   without this the focus ring replaces the red border on the very field the
   user was just sent to, which is the one that most needs to look wrong. */
.section--light .field--error input:focus,
.section--light .field--error select:focus,
.section--light .field--error textarea:focus{
  border-color:var(--error);
  box-shadow:0 0 0 2px rgba(163,52,42,.18);
}
.section--light .consent--error input{
  outline:2px solid var(--error);
  outline-offset:2px;
  accent-color:var(--error);
}

/* ------------------------------------------------------------
   STAGE HERO (home)
   Left aligned over the showroom table, after the client mock. The
   media box is taller than the hero so the parallax in motion.js
   never shows an edge. Nothing here is hidden by CSS: if the motion
   script never runs, the page simply reads as a still.
   ------------------------------------------------------------ */
.hero--stage{align-items:flex-end}
.hero--stage .hero__inner{transform:none;padding-bottom:clamp(5.5rem,13vh,8.5rem)}
.hero--stage .hero__media{inset:-10% 0;will-change:transform}
.hero--stage .hero__media img{object-position:center 58%}
@media (min-width:1101px){
  .hero--stage .hero__media img{filter:brightness(.78) saturate(.9) contrast(1.06)}
}
.hero--stage .hero__scrim{
  background:
    linear-gradient(90deg,rgba(11,11,11,.95) 0%,rgba(11,11,11,.78) 36%,rgba(11,11,11,.22) 72%,rgba(11,11,11,.42) 100%),
    linear-gradient(0deg,rgba(11,11,11,1) 0%,rgba(11,11,11,0) 42%),
    linear-gradient(180deg,rgba(11,11,11,.72) 0%,rgba(11,11,11,0) 26%);
}
@media (max-width:700px){
  .hero--stage .hero__scrim{
    background:linear-gradient(0deg,rgba(11,11,11,.97) 18%,rgba(11,11,11,.55) 70%,rgba(11,11,11,.75) 100%)}
}
.hero__tags{display:block;font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem}
.hero__tags i,.stage__tags i{font-style:normal;color:var(--gold);opacity:.5;margin-inline:.65em}
.hero--stage h1{max-width:15ch;font-size:clamp(2.4rem,5.6vw,4.7rem);line-height:1.06;margin-bottom:1.5rem}
.hero__sub{font-size:var(--t-eyebrow);letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted);max-width:none;line-height:1.9;margin:0 0 clamp(2rem,4.5vw,2.8rem)}

/* three hairlines of light, drifting slowly behind the copy */
.hero__beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__beams span{position:absolute;top:-25%;height:150%;width:1px;opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(224,185,138,.75) 45%,transparent);
  box-shadow:0 0 18px 1px rgba(224,185,138,.3);
  transform:rotate(16deg);animation:beam 11s var(--ease) infinite alternate}
.hero__beams span:nth-child(1){left:60%}
.hero__beams span:nth-child(2){left:73%;opacity:.3;animation-duration:14s;animation-delay:-4s}
.hero__beams span:nth-child(3){left:88%;opacity:.4;animation-duration:9s;animation-delay:-7s}
@keyframes beam{from{translate:-3vw 0}to{translate:3vw 0}}

.hero__cue{position:absolute;z-index:3;right:var(--gutter);bottom:2.2rem;width:1px;height:64px;
  background:var(--line);overflow:hidden}
.hero__cue span{position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--gold);
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ------------------------------------------------------------
   STAGE (home, after the hero)
   ------------------------------------------------------------ */
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;
  display:grid;place-items:center;padding:var(--section-y) var(--gutter);
  background:radial-gradient(ellipse 62% 52% at 50% 56%,#19140f 0%,var(--ink) 72%)}
.stage__arcs{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stage__arc{fill:none;stroke:url(#arcGold);stroke-width:2.4;stroke-linecap:round}
.stage__arc--thin{stroke-width:1;opacity:.55}
.stage__glow path{fill:none;stroke:var(--gold);stroke-width:16;opacity:.22}

.stage__pieces{position:absolute;inset:0;z-index:1;pointer-events:none}
.piece{position:absolute;margin:0;width:clamp(150px,15vw,240px);aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius);outline:1px solid var(--line-gold);outline-offset:6px;
  box-shadow:0 40px 70px -24px rgba(0,0,0,.9);opacity:.6;will-change:transform}
.piece img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82)}
.piece--p1{left:5%;top:13%;rotate:-3deg}
.piece--p2{right:6%;top:9%;width:clamp(130px,12vw,190px);rotate:2deg}
.piece--p3{left:9%;bottom:9%;width:clamp(130px,12vw,200px);rotate:2deg}
.piece--p4{right:4%;bottom:15%;rotate:-2deg}
/* below desktop: drop everything that repaints every frame. the filter on the
   hero photo, the blurred glow and the glowing beams are cheap on a laptop and
   are what made scrolling stutter on phones. the scrim darkens instead. */
@media (max-width:1100px){
  .stage__pieces,.stage__glow,.hero__beams{display:none}
  .hero--stage .hero__media{inset:0}
  .hero--stage .hero__scrim{box-shadow:inset 0 0 0 100vmax rgba(11,11,11,.2)}
}

.stage__inner{position:relative;z-index:2;text-align:center;width:100%;max-width:64rem}
.stage__mark{margin:0 0 1.5rem}
.stage__logo svg{width:clamp(170px,22vw,320px);margin-inline:auto}
.stage__tags{font-size:var(--t-eyebrow);letter-spacing:.42em;text-transform:uppercase;
  color:var(--muted);max-width:none;margin:0 0 clamp(2rem,5vh,3rem)}
.stage__line{max-width:none;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.1vw,2.35rem);
  line-height:1.32;color:var(--chalk);margin:0 0 clamp(3rem,8vh,5.5rem)}
.stage__line span{display:block}

.stage__services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.stage__services li+li{border-left:1px solid var(--line-gold)}
.stage__services a{display:flex;flex-direction:column;align-items:center;gap:.95rem;
  padding:.4rem .9rem;text-decoration:none;color:var(--muted);font-size:var(--t-eyebrow);
  letter-spacing:.24em;text-transform:uppercase;line-height:1.7;transition:color .45s var(--ease)}
.stage__services svg{width:30px;height:30px;fill:none;stroke:var(--gold);stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.stage__services a:hover,.stage__services a:focus-visible{color:var(--chalk)}
.stage__services a:hover svg,.stage__services a:focus-visible svg{transform:translateY(-3px)}
@media (max-width:760px){
  .stage__services{display:flex;flex-wrap:wrap;justify-content:center;row-gap:2rem}
  .stage__services li{flex:0 0 33.333%}
  .stage__services li+li{border-left:0}
  .stage__tags{letter-spacing:.28em}
  .stage__tags i{margin-inline:.35em}
}
@media (max-width:420px){.stage__services li{flex-basis:50%}}

@media (prefers-reduced-motion:reduce){
  .hero__beams span,.hero__cue span{animation:none}
}