/* ============================================================
   TORCAL — landing page layout
   (depends on bentley-theme.css tokens)
   ============================================================ */

/* ---------- HEADER ----------
   Follows Brand Book: Bentley logo CENTRED, retailer name + phone,
   minimal nav. Transparent over the hero, solidifies on scroll. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:1rem; padding:1.15rem clamp(1.25rem,4vw,3rem);
  transition:background .5s var(--ease),border-color .5s var(--ease),padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(4,4,4,.55),rgba(4,4,4,0));
  transition:opacity .5s var(--ease);
}
.site-header.is-solid{ background:var(--black); border-bottom-color:var(--ink-line); padding-top:.85rem; padding-bottom:.85rem; }
.site-header.is-solid::before{ opacity:0; }

.header-left,.header-right{ display:flex; align-items:center; gap:1.6rem; min-width:0; }
.header-right{ justify-content:flex-end; }

.header-logo{ justify-self:center; display:block; line-height:0; }
.header-logo img{ height:44px; width:auto; transition:height .5s var(--ease); }
.site-header.is-solid .header-logo img{ height:38px; }

.retailer-tag{ display:flex; flex-direction:column; line-height:1.25; color:#fff; }
.retailer-tag .name{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; }
.retailer-tag .phone{ font-size:.74rem; color:var(--muted-on-dark); text-decoration:none; letter-spacing:.04em; }
.retailer-tag .phone:hover{ color:#fff; }

.nav-b{ display:flex; align-items:center; gap:1.7rem; }
.nav-b a{
  color:#fff; text-decoration:none; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:.82; transition:opacity .3s var(--ease); white-space:nowrap;
}
.nav-b a:hover{ opacity:1; }

.header-burger{ display:none; background:none; border:0; padding:.4rem; cursor:pointer; }
.header-burger span{ display:block; width:26px; height:1.5px; background:#fff; margin:5px 0; transition:.35s var(--ease); }

/* Mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:1200; background:var(--black); color:#fff;
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:2rem clamp(1.5rem,7vw,4rem);
  transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden;
}
.mobile-nav.open{ transform:none; visibility:visible; }
.mobile-nav a{ color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:300; font-size:clamp(1.8rem,7vw,2.6rem); padding:.35rem 0; opacity:.9; }
.mobile-nav a:hover{ opacity:1; }
.mobile-nav .mn-meta{ margin-top:2.5rem; font-size:.8rem; letter-spacing:.1em; color:var(--muted-on-dark); }
.mobile-nav .mn-close{ position:absolute; top:1.4rem; right:clamp(1.25rem,4vw,3rem); background:none; border:0; color:#fff; font-size:1.6rem; cursor:pointer; line-height:1; }

/* ---------- HERO ----------
   Fills exactly the viewport left under the (static) Palmyra header,
   so the whole hero block — including the CTAs — sits above the fold.
   --header-h is measured and set by main.js. */
.hero{
  position:relative; min-height:calc(100svh - var(--header-h,210px));
  display:flex; align-items:center;
  overflow:hidden; background:var(--black); color:#fff;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(4,4,4,.15) 0%,rgba(4,4,4,0) 32%,rgba(4,4,4,.2) 58%,rgba(4,4,4,.9) 100%),
    radial-gradient(120% 90% at 70% 30%,rgba(4,4,4,0) 40%,rgba(4,4,4,.5) 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__content{ padding-block:clamp(1.5rem,4vh,3rem); }
.hero__title{ font-size:clamp(3.4rem,11vw,8.4rem); line-height:.9; letter-spacing:-.02em; margin-top:.4rem; }
.hero__sub{ font-size:clamp(1.05rem,1.8vw,1.5rem); font-weight:300; color:rgba(255,255,255,.92); margin-top:.9rem; }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; align-items:center;
  margin-top:1.4rem; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--heritage-white);
}
.hero__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--heritage-white); opacity:.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.7rem; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.1rem; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.6);
}
.scroll-cue .bar{ width:1px; height:40px; background:linear-gradient(180deg,rgba(255,255,255,.7),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* ---------- INTRO / STATEMENT ---------- */
.statement{ max-width:26ch; }
.two-col{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (min-width:900px){
  .two-col{ grid-template-columns:1fr 1fr; }
  .two-col--40-60{ grid-template-columns:minmax(0,.75fr) minmax(0,1fr); }
}
.figure-frame{ position:relative; overflow:hidden; background:var(--ink-2); }
.figure-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--ease); }
.figure-frame:hover img{ transform:scale(1.04); }
.figure-cap{ margin-top:1rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-on-light); }

/* Pull quote (etymology) */
.pull{
  font-family:var(--font-display); font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.22; max-width:20ch;
}
.pull em{ font-style:italic; color:var(--teal); }

/* ---------- SILHOUETTE BAND ----------
   Heading on top (h2 scale), artwork beneath. Compact — the artwork is
   a thin line with large transparent margins, so the band stays tight. */
.silband{ background:var(--black); padding-block:clamp(2.5rem,4.5vw,3.75rem) clamp(1rem,2vw,1.5rem); text-align:center; overflow:hidden; }
.silband__title{ margin:0 0 clamp(1.5rem,3vw,2.25rem); }
.silband img{ width:min(700px,82vw); height:auto; margin-inline:auto; display:block; opacity:.96; }
/* the next section is the same black — collapse the doubled gap */
.silband + .section{ padding-top:clamp(2.5rem,5vw,4rem); }

/* ---------- COUNTDOWN / REVEAL ---------- */
.reveal-band{ text-align:center; }
.countdown{ display:flex; justify-content:center; gap:clamp(1.2rem,4vw,3.5rem); margin:2.8rem 0 3rem; flex-wrap:wrap; }
.cd-unit{ min-width:4.5rem; }
.cd-num{ font-family:var(--font-display); font-weight:300; font-size:clamp(2.6rem,6vw,4.5rem); line-height:1; letter-spacing:-.01em; }
.cd-label{ margin-top:.8rem; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-on-dark); }
.cd-sep{ font-family:var(--font-display); font-weight:300; font-size:clamp(2rem,5vw,3.5rem); opacity:.25; align-self:flex-start; }
@media (max-width:520px){
  .countdown{ gap:1rem 1.6rem; }
  .cd-sep{ display:none; }              /* clean 2×2 grid instead of an awkward wrap */
  .cd-unit{ flex:0 0 38%; min-width:0; }
}

/* ---------- LINE-UP (typographic, no photos — per client) ---------- */
.lineup{ display:grid; grid-template-columns:1fr; }
.lineup__row{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 2rem;
  padding:1.6rem 0; border-top:1px solid var(--ink-line);
}
.lineup__row:last-child{ border-bottom:1px solid var(--ink-line); }
.lineup__name{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.5rem,3vw,2.2rem); }
.lineup__name.is-new{ color:var(--heritage-white); }
.lineup__tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-on-dark); }
.lineup__tag.is-new{ color:var(--teal); }

/* ---------- UPDATES / MODULAR TIMELINE ----------
   Reusable card. To add a weekly drop, copy one .update-card
   block in index.html and fill it in. Placeholder cards use
   the .is-upcoming modifier. */
.updates-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); }
@media (min-width:700px){ .updates-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1050px){ .updates-grid{ grid-template-columns:repeat(3,1fr); } }
.update-card{
  background:var(--ink); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; min-height:16rem;
  transition:background .5s var(--ease);
}
.update-card:hover{ background:var(--ink-2); }
.update-card .u-date{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.update-card .u-title{ font-family:var(--font-display); font-weight:300; font-size:clamp(1.4rem,2.2vw,1.8rem); margin:1.1rem 0 .8rem; }
.update-card .u-body{ font-size:.92rem; color:var(--muted-on-dark); }
.update-card .u-foot{ margin-top:auto; padding-top:1.6rem; }
.update-card.is-upcoming{ background:transparent; }
.update-card.is-upcoming .u-title{ color:var(--muted-on-dark); }
.update-card .u-badge{
  align-self:flex-start; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-on-dark); border:1px solid var(--ink-line); padding:.4rem .8rem;
}

/* ---------- REGISTER (form section) ---------- */
.register{ position:relative; }
.register__grid{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
@media (min-width:960px){ .register__grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1fr); } }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
.form-grid .col-full{ grid-column:1 / -1; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }

/* success panel */
.form-success{ display:none; border:1px solid rgba(4,4,4,.14); padding:clamp(2rem,4vw,3rem); }
.form-success:focus{ outline:none; } /* announced via aria-live; avoid stray focus ring on the premium surface */
.form-success.show{ display:block; animation:fade .8s var(--ease); }
.form-success .tick{ width:3rem; height:3rem; border:1px solid var(--success); border-radius:50%; display:grid; place-items:center; color:var(--success); margin-bottom:1.4rem; }
@keyframes fade{ from{opacity:0; transform:translateY(12px)} to{opacity:1;transform:none} }
form.is-submitted{ display:none; }

/* consent checkbox — readable on the light (linen) register surface */
.register .check label{ color:var(--muted-on-light); }
.register .check input{ border-color:rgba(4,4,4,.45); }
.register .check input:checked{ background:var(--btn-green); border-color:var(--btn-green); }
.register .check input:checked::after{ color:#fff; }

/* register form fields — the underline style is invisible on the cream
   linen surface, so use Bentley's white-fill bordered field (high contrast) */
.register .control{
  background:#fff;
  border:1px solid rgba(4,4,4,.24);
  border-radius:0;
  padding:.85rem 1rem;
  box-shadow:none;
}
.register .control::placeholder{ color:rgba(4,4,4,.42); }
.register .control:focus{ border-color:var(--btn-green); box-shadow:0 0 0 1px var(--btn-green); }
.register select.control{ background-color:#fff; background-position:right 1rem center; padding-right:2.6rem; }
.register .field.is-invalid .control{ border-color:var(--error); box-shadow:0 0 0 1px var(--error); }
.register .field.is-valid .control{ border-color:var(--success); box-shadow:none; }
.register .field label{ color:#4a4a4a; }

/* ---------- FOOTER (replicates Bentley Palmyra) ---------- */
.site-footer{ background:var(--black); color:var(--white); }

/* minimalist footer: centred logo → horizontal Explore → horizontal dealer info */
.footer-min{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(1.5rem,3vw,2.25rem);
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--ink-line);
}
.footer-min .footer-logo{ height:clamp(46px,5vw,58px); width:auto; }

.footer-explore{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.6rem 1.6rem; }
.footer-explore .fe-label{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--heritage-white); opacity:.7; }
.footer-explore a{ color:var(--muted-on-dark); text-decoration:none; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; transition:color .3s var(--ease); }
.footer-explore a:hover{ color:#fff; }

.footer-dealer{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem 1.15rem; font-size:.82rem; color:var(--muted-on-dark); }
.footer-dealer a{ color:var(--muted-on-dark); text-decoration:none; transition:color .3s var(--ease); }
.footer-dealer a:hover{ color:#fff; }
.footer-dealer .fd-name{ color:var(--heritage-white); letter-spacing:.06em; }
.footer-dealer .sep{ width:1px; height:12px; background:var(--ink-line); display:inline-block; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:2rem 0; font-size:.76rem; color:var(--muted-on-dark); }
.footer-bottom a{ color:var(--muted-on-dark); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ font-size:.72rem; color:rgba(255,255,255,.35); line-height:1.7; padding-bottom:2.5rem; max-width:none; }

/* ---------- RESPONSIVE HEADER ---------- */
@media (max-width:1080px){
  .nav-b{ display:none; }
  .header-burger{ display:block; }
  .header-right .btn-b{ display:none; }
}
@media (max-width:640px){
  .retailer-tag .phone{ display:none; }
  .header-logo img{ height:36px; }
}