/* ══════════════════════════════════════════════════════════════════════════
   BHAVANI ENGINEERING — inner pages
   EXTENDS assets/css/style.css. Adds no new colours, radii, shadows, easing
   or type sizes; every value below resolves to a homepage token.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ shared SVG icon sizing ══════════ */
.ico { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.7; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }

/* ══════════ page hero + breadcrumb ══════════ */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--band-y) 0;
  background: radial-gradient(120% 130% at 15% 0%, var(--navy-600) 0%, var(--navy-800) 48%, var(--navy-900) 100%);
}
.phero-bg { position: absolute; inset: 0; z-index: -1; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.phero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,23,41,.94), rgba(7,23,41,.7));
}
.phero-mesh {
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 20%, transparent 100%);
          mask-image: radial-gradient(90% 70% at 50% 40%, #000 20%, transparent 100%);
}
/* .phero-inner shares an element with .shell — it must NOT touch max-width,
   or the hero escapes the 1200px container. Only the copy block is narrowed. */
.phero-copy { max-width: 720px; }
.phero h1 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: 12px;
}
.phero h1 em { font-style: italic; color: var(--gold-500); }
.phero .deck { color: rgba(255,255,255,.66); }

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 0 0 16px; margin-bottom: 4px;
}
.crumbs a, .crumbs span {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); transition: color .25s var(--ease);
}
.crumbs a:hover { color: var(--gold-500); }
.crumbs [aria-current] { color: var(--gold-500); }
.crumbs svg { width: 12px; height: 12px; color: rgba(255,255,255,.28); }

/* Slimmer variant used where the hero sits above a detail layout */
.phero-slim { padding-bottom: calc(var(--band-y) * .8); }

/* Announcement bar, mobile drawer and floating social buttons are truly
   global chrome (present via layouts/app.blade.php on every front page), so
   they live in style.css — loaded unconditionally — rather than here, which
   only a subset of pages opt into. See style.css's NAV section. */

/* ── footer additions ── */
.foot-intro {
  font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.58);
  margin-top: 12px; max-width: 40ch;
}
/* ── contact icon plates (SVG, replacing text glyphs) ── */
.cf-ico svg, .cx-ico svg { width: 20px; height: 20px; }

/* ── video / video-with-text ── */
.vid-wrap { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--e3); }
.vid-wrap .media { border-radius: 0; }
.vid-wrap .media img { transition: transform .7s var(--ease); }
.vid-wrap:hover .media img { transform: scale(1.035); }
.vid-wrap:hover .vid-play { transform: scale(1.07); background: var(--gold-400); }

/* opens the film on YouTube in a new tab — no embed, no libraries */
.vid-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(227,183,92,.94); color: var(--navy-900);
  border: 0; cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.vid-play:hover { transform: scale(1.07); background: var(--gold-400); }
.vid-play::before {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid rgba(227,183,92,.45); animation: pinPulse 2.6s var(--ease) infinite;
}
.vid-play svg { width: 28px; height: 28px; margin-left: 3px; }
.vid-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,23,41,.15), rgba(7,23,41,.65));
}
.vid-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 24px; color: #fff;
}
.vid-cap b { font-family: var(--serif); font-size: 1.1rem; }
.vid-cap small { display: block; font-family: var(--mono); font-size: .7rem; color: rgba(255,255,255,.6); }

/* ── alternating centre-line timeline ──
   Grid is [card | rail | year] on odd rows and [year | rail | card] on even.
   Rows are top-aligned so the dot sits at the same offset on BOTH sides
   regardless of how tall the card is.                                     */

/* plain circular dot, no icon */

/* year lives outside the card, hugging the rail */

/* small arrow pointing at the rail — same offset on both sides */

/* grow / scale-in as each row enters the viewport.
   Declared exactly like the other AOS types in style.css — animation-NAME only,
   so the shared duration/delay/fill-mode variables still drive the stagger.
   (Using the `animation` shorthand here would reset --aos-delay to 0.)      */
[data-aos="tl-grow"] { transform: scale(.92); }
[data-aos="tl-grow"].aos-animate { animation-name: tlGrow; }
@keyframes tlGrow {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .tl2-item:nth-child(odd)  .tl2-card,
  .tl2-item:nth-child(odd)  .tl2-year,
  .tl2-item:nth-child(odd)  .tl2-card::after,
  .tl2-item:nth-child(odd)  .tl2-card:hover,
}

/* ── refined prev / next article ── */
.pn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn2-card {
  display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center;
  padding: 16px 20px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pn2-card:hover { box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.pn2-prev:hover { transform: translateX(-4px); }
.pn2-next:hover { transform: translateX(4px); }
.pn2-card .media { border-radius: var(--r-sm); }
.pn2-card:hover .media img { transform: scale(1.06); }
.pn2-dir {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 5px;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-800);
}
.pn2-card b { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--navy-800); line-height: 1.32; }
.pn2-next { grid-template-columns: 1fr 84px; text-align: right; }
.pn2-next .pn2-txt { order: 1; }
.pn2-next .media { order: 2; }
.pn2-next .pn2-dir { justify-content: flex-end; }
@media (max-width: 760px) {
  .pn2 { grid-template-columns: 1fr; }
  .pn2-next { grid-template-columns: 84px 1fr; text-align: left; }
  .pn2-next .pn2-txt { order: 2; }
  .pn2-next .media { order: 1; }
  .pn2-next .pn2-dir { justify-content: flex-start; }
}

/* ── compact product hero: keeps key info high on the page ── */
.pd-head { padding: var(--sp-5) 0 var(--sp-4); }
.pd-head .crumbs { border-bottom: 0; padding: 0 0 12px; margin-bottom: 8px; }
.pd-head h1 {
  font-family: var(--serif); font-weight: 600; color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em;
  margin-bottom: 10px;
}
.pd-head h1 em { font-style: italic; color: var(--gold-500); }
.pd-head .deck { color: rgba(255,255,255,.66); max-width: 62ch; }

/* ══════════ sidebar layout ══════════ */
.with-side { display: grid; grid-template-columns: 258px 1fr; gap: var(--sp-4); align-items: start; }

.panel {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  padding: 20px 22px;
}
.panel + .panel { margin-top: 12px; }
.panel h3, .panel-t {
  font-family: var(--mono); font-size: .69rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 14px;
}
.side-sticky { position: sticky; top: 96px; }

/* filters */
.fgroup { display: grid; gap: 9px; }
.fopt { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: .92rem; color: var(--ink-soft); transition: color .22s var(--ease); }
.fopt:hover { color: var(--navy-800); }
.fopt input { position: absolute; opacity: 0; pointer-events: none; }
.fbox {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid var(--line); background: var(--beige-50);
  display: grid; place-items: center; transition: all .22s var(--ease);
}
.fbox svg { width: 11px; height: 11px; color: var(--navy-900); opacity: 0; transform: scale(.6); transition: all .22s var(--ease); }
.fopt input:checked + .fbox { background: var(--gold-500); border-color: var(--gold-500); }
.fopt input:checked + .fbox svg { opacity: 1; transform: scale(1); }
.fopt input:focus-visible + .fbox { outline: 2px solid var(--gold-600); outline-offset: 2px; }

/* per-block clear control, top-right of the panel header.
   Hidden via [hidden] until that group actually has a selection. */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.panel-head .panel-t { margin-bottom: 0; }
.fclear {
  flex-shrink: 0; width: 24px; height: 24px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-faint); background: var(--beige-100);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.fclear[hidden] { display: none; }
/* the bin carries more detail than a cross, so it needs a touch more room */
.fclear svg { width: 15px; height: 15px; }
.fclear:hover { background: var(--navy-800); color: #fff; }
.fclear:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 2px; }

/* toolbar */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  flex-wrap: wrap; margin-bottom: var(--sp-3);
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.tb-count { font-size: .9rem; color: var(--ink-faint); }
.tb-count b { color: var(--navy-800); font-weight: 700; }
.tb-right { display: flex; align-items: center; gap: 10px; }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select {
  appearance: none; padding: 9px 38px 9px 14px; font-size: .88rem; font-weight: 600;
  color: var(--navy-800); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-full);
  transition: border-color .22s var(--ease);
}
.select-wrap select:hover { border-color: var(--gold-600); }
.select-wrap select:focus { outline: none; border-color: var(--gold-600); }
.select-wrap svg { position: absolute; right: 14px; width: 14px; height: 14px; color: var(--ink-faint); pointer-events: none; }

.filter-toggle { display: none; }

/* ══════════ product badges ══════════ */
.pbadge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-full);
}
.pbadge-new  { background: var(--navy-800); color: var(--gold-400); }
.pbadge-sale { background: #B4472E; color: #fff; }
.pbadge-best { background: var(--gold-500); color: var(--navy-900); }

/* quick actions on hover */
.prod { position: relative; }
.quick {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; gap: 7px;
  opacity: 0; transform: translateX(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.prod:hover .quick, .prod:focus-within .quick { opacity: 1; transform: none; }
.quick a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.94); border: 1px solid var(--line-soft);
  color: var(--navy-800); box-shadow: var(--e1);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.quick a:hover { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }
.prod-meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); margin-bottom: 6px; }

/* NOTE: product filtering is now server-side (Livewire, see
   ProductCatalog.php) — .prod.is-hidden/.is-filtering and their entrance
   animation were the old client-side filter's doing and nothing sets them
   any more. @keyframes filterIn stays; .empty/.modal-ok still use it. */
@keyframes filterIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* empty state */
.empty { text-align: center; padding: var(--sp-6) var(--sp-3); display: none; }
.empty.is-on { display: block; animation: filterIn .5s var(--ease-out) both; }
.empty-ico {
  width: 68px; height: 68px; margin: 0 auto var(--sp-2);
  border-radius: var(--r-md); background: var(--beige-200);
  display: grid; place-items: center; color: var(--gold-800);
}
.empty-ico svg { width: 30px; height: 30px; }
.empty h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin-bottom: 6px; }
.empty p { font-size: .93rem; margin-bottom: var(--sp-3); }

/* pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--sp-4); }
.pager a, .pager span {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line-soft); background: #fff;
  transition: all .22s var(--ease);
}
.pager a:hover { border-color: var(--gold-600); color: var(--navy-800); }
.pager .is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.pager .gap { border: 0; background: none; }
/* no dim/fade while a filter request is in flight — just block double-clicks */
.is-loading { pointer-events: none; }
.loadmore { display: flex; justify-content: center; margin-top: var(--sp-4); }

/* ══════════ product detail ══════════ */
.pd { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: start; }
.pd-gallery { position: sticky; top: 96px; }
.pd-main { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); background: #fff; }
.pd-main .media { border-radius: 0; }
.pd-main img { transition: transform .8s var(--ease-out); }
.pd-main:hover img { transform: scale(1.06); }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pd-thumb {
  border-radius: var(--r-sm); overflow: hidden; cursor: pointer;
  border: 1.5px solid var(--line-soft); background: #fff;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.pd-thumb:hover { transform: translateY(-2px); }
.pd-thumb.is-on { border-color: var(--gold-500); }
.pd-thumb .media { border-radius: 0; }

.pd-info h1 { font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; margin: 6px 0 10px; }
.pd-sub { font-size: 1.02rem; color: var(--ink-soft); margin-bottom: var(--sp-3); }
.pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); font-size: .88rem; color: var(--ink-faint); }
.pd-stars { display: inline-flex; gap: 2px; color: var(--gold-500); }
.pd-stars svg { width: 15px; height: 15px; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--sp-3) 0; }
.pd-assure { display: grid; gap: 10px; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.pd-assure li { display: flex; align-items: center; gap: 11px; font-size: .92rem; color: var(--ink-soft); }
.pd-assure svg { color: var(--gold-700); }

/* key features */
.feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.feat {
  display: flex; gap: 13px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.feat-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px;
  background: var(--beige-200); color: var(--gold-800);
  display: grid; place-items: center; transition: background .25s var(--ease);
}
.feat:hover .feat-ico { background: rgba(201,152,46,.16); }
.feat h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.feat p { font-size: .89rem; line-height: 1.55; }

/* spec table */
.specs { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: hidden; }
.specs th, .specs td { text-align: left; padding: 13px 20px; font-size: .92rem; border-bottom: 1px solid var(--line-soft); }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 0; }
.specs th { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); width: 40%; background: var(--beige-50); }
.specs td { color: var(--navy-800); font-weight: 600; }

/* downloads */
.dl-list { display: grid; gap: 10px; }
.dl {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.dl:hover { transform: translateX(4px); border-color: rgba(201,152,46,.35); box-shadow: var(--e1); }
.dl-ico { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; background: var(--beige-200); color: var(--gold-800); display: grid; place-items: center; }
.dl b { display: block; font-size: .94rem; color: var(--navy-800); }
.dl small { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
.dl-arrow { margin-left: auto; color: var(--ink-faint); transition: transform .25s var(--ease), color .25s var(--ease); }
.dl:hover .dl-arrow { transform: translateY(2px); color: var(--gold-700); }

/* sticky enquiry bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  transform: translateY(110%); transition: transform .4s var(--ease);
  background: rgba(7,23,41,.93); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-light);
  padding: 11px 0;
}
.sticky-cta.is-on { transform: none; }
.sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sticky-inner strong { color: #fff; font-size: .96rem; }
.sticky-inner small { display: block; font-family: var(--mono); font-size: .68rem; color: rgba(255,255,255,.5); }

/* Enquiry modal markup now lives in resources/views/partials/enquiry-modal.blade.php
   and is included once from layouts/app.blade.php (see style.css — it needs
   to work on every page, not just ones that opt into this stylesheet). */

/* ══════════ factory-tour video popup ══════════
   Built by pages.js on click, removed on close. Same veil, radius, shadow and
   easing as the enquiry modal so the two feel like one system.            */
.vpop {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: var(--sp-3) var(--sp-2);
  background: rgba(7,23,41,.72); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.vpop.is-on { opacity: 1; }
.vpop-stage {
  position: relative; width: 100%;
  /* capped by viewport height too, so the close button never rides off screen */
  max-width: min(1040px, calc(76vh * 16 / 9));
  aspect-ratio: 16 / 9; background: #000;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e3);
  transform: scale(.94) translateY(12px); transition: transform .38s var(--ease-out);
}
.vpop.is-on .vpop-stage { transform: none; }
.vpop-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vpop-x {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.13);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.vpop-x svg { width: 18px; height: 18px; }
.vpop-x:hover { background: var(--gold-500); color: var(--navy-900); }
@media (max-width: 760px) {
  .vpop-x { top: 12px; right: 12px; width: 32px; height: 32px; }
  .vpop-x svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .vpop, .vpop-stage { transition: none; }
}

/* form validation states now live in style.css alongside .field itself and
   the enquiry modal — see that file. */

/* ══════════ blog listing ══════════ */
.searchbar { position: relative; display: flex; align-items: center; }
.searchbar svg { position: absolute; left: 16px; width: 17px; height: 17px; color: var(--ink-faint); pointer-events: none; }
.searchbar input {
  width: 100%; padding: 13px 16px 13px 44px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: #fff; font-size: .94rem;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.searchbar input:focus { outline: none; border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(201,152,46,.13); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 8px 16px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: #fff;
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
  transition: all .22s var(--ease);
}
.chip:hover { border-color: var(--gold-600); color: var(--navy-800); }
.chip.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.feature-post {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--e1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature-post:hover { transform: translateY(-4px); box-shadow: var(--e3); }
.feature-post .media { border-radius: 0; height: 100%; }
.feature-post:hover .media img { transform: scale(1.05); }
.fp-body { padding: var(--sp-4); display: flex; flex-direction: column; justify-content: center; }
.fp-body h2 { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 600; line-height: 1.2; margin: 8px 0 10px; }
.fp-body p { font-size: .96rem; margin-bottom: var(--sp-3); }

.post.is-hidden { display: none; }

/* ══════════ article ══════════ */
.article-wrap { display: grid; grid-template-columns: 232px 1fr; gap: var(--sp-5); align-items: start; }
.toc { position: sticky; top: 96px; }
.toc h3, .toc-t { font-family: var(--mono); font-size: .69rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; }
.toc a {
  display: block; padding: 7px 0 7px 14px; font-size: .88rem; color: var(--ink-soft);
  border-left: 2px solid var(--line); transition: all .22s var(--ease);
}
.toc a:hover { color: var(--navy-800); border-left-color: var(--gold-600); }
.toc a.is-on { color: var(--navy-800); font-weight: 700; border-left-color: var(--gold-500); }

.article { max-width: none; }
.article > * + * { margin-top: var(--sp-3); }
.article h2 { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.02em; margin-top: var(--sp-5); scroll-margin-top: 100px; }
.article h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-top: var(--sp-4); }
.article p { font-size: 1.04rem; line-height: 1.75; }
.article strong { color: var(--navy-800); font-weight: 700; }
.article a:not(.btn) { color: var(--gold-800); text-decoration: underline; text-underline-offset: 3px; }
.article ul { display: grid; gap: 9px; }
.article ul li { position: relative; padding-left: 24px; font-size: 1rem; line-height: 1.7; }
.article ul li::before { content: ''; position: absolute; left: 4px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }
.pullquote {
  border-left: 3px solid var(--gold-500); padding: 4px 0 4px var(--sp-3);
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.5;
  color: var(--navy-800);
}
.figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.article figure figcaption { margin-top: 9px; font-size: .82rem; color: var(--ink-faint); text-align: center; }

.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: var(--sp-3); }
.art-meta span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .72rem; color: rgba(255,255,255,.6); }
.art-meta svg { width: 14px; height: 14px; }

.author {
  display: flex; align-items: center; gap: 15px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
}
.author-av {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, var(--gold-400), var(--gold-600));
  color: var(--navy-900); display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.author b { display: block; color: var(--navy-800); font-size: .98rem; }
.author small { color: var(--ink-faint); font-size: .85rem; }

.share { display: flex; align-items: center; gap: 9px; }
.share span { font-family: var(--mono); font-size: .69rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.share a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-soft); background: #fff; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.share a:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; transform: translateY(-2px); }

.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pn {
  display: flex; flex-direction: column; gap: 5px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.pn:hover { transform: translateY(-3px); border-color: rgba(201,152,46,.3); box-shadow: var(--e2); }
.pn small { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-800); }
.pn b { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--navy-800); line-height: 1.3; }
.pn-next { text-align: right; align-items: flex-end; }

/* newsletter */
.news {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-4); border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(227,183,92,.28);
}
.news h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: #fff; margin-bottom: 5px; }
.news p { color: rgba(255,255,255,.6); font-size: .94rem; }
.news-form { display: flex; gap: 9px; }
.news-form input {
  min-width: 236px; padding: 12px 18px; border-radius: var(--r-full);
  border: 1px solid var(--line-light); background: rgba(255,255,255,.07); color: #fff; font-size: .9rem;
}
.news-form input::placeholder { color: rgba(255,255,255,.42); }
.news-form input:focus { outline: none; border-color: var(--gold-500); }

/* ══════════ about ══════════ */
.tl { position: relative; display: grid; gap: 14px; }
.tl::before { content: ''; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-left: 50px; }
.tl-dot {
  position: absolute; left: 0; top: 20px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--beige-50); border: 2px solid var(--gold-600);
  display: grid; place-items: center; color: var(--gold-700);
}
.tl-dot svg { width: 11px; height: 11px; }
.tl-card {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--sp-3); align-items: center;
  padding: 18px 24px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tl-card:hover { transform: translateX(4px); box-shadow: var(--e2); border-color: rgba(201,152,46,.28); }
.tl-year { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; color: var(--gold-800); }
.tl-card h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin-bottom: 3px; }
.tl-card p { font-size: .9rem; line-height: 1.55; }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pstep {
  position: relative; padding: 24px 22px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.pstep:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.pstep-n { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--gold-800); }
.pstep-ico { width: 42px; height: 42px; margin: 12px 0 13px; border-radius: 11px; background: var(--beige-200); color: var(--gold-800); display: grid; place-items: center; transition: background .25s var(--ease); }
.pstep:hover .pstep-ico { background: rgba(201,152,46,.16); }
.pstep h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; margin-bottom: 6px; }
.pstep p { font-size: .89rem; line-height: 1.55; }

.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cert {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px;
  padding: 26px 20px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cert:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.cert-ring {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px dashed rgba(201,152,46,.5); color: var(--gold-700);
  display: grid; place-items: center;
}
.cert b { font-family: var(--serif); font-size: 1.05rem; color: var(--navy-800); }
.cert small { font-size: .82rem; color: var(--ink-faint); }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.member {
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.member .media { border-radius: 0; }
.member:hover .media img { transform: scale(1.05); }
.member-b { padding: 16px 18px 18px; }
.member b { display: block; font-family: var(--serif); font-size: 1.05rem; color: var(--navy-800); }
.member small { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-800); }
.member-av {
  aspect-ratio: 1/1; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  color: var(--gold-500); font-family: var(--serif); font-size: 2.1rem; font-weight: 600;
}

/* ══════════ contact ══════════ */
.cx-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cx {
  display: flex; flex-direction: column; gap: 12px; padding: 26px 24px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cx:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.cx-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--beige-200); color: var(--gold-800); display: grid; place-items: center; transition: background .25s var(--ease); }
.cx:hover .cx-ico { background: rgba(201,152,46,.16); }
.cx h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 600; }
.cx a, .cx p { font-size: .94rem; color: var(--ink-soft); }
.cx a:hover { color: var(--gold-800); }

.map {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--beige-200);
  aspect-ratio: 16/10;
}
.map-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(11,31,58,.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(11,31,58,.07) 1px, transparent 1px);
  background-size: 42px 42px;
}
.map-note {
  position: absolute; inset: auto 0 0 0; padding: 14px 18px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 11px;
}
.map-note b { color: var(--navy-800); font-size: .92rem; }
.map-note small { display: block; font-size: .8rem; color: var(--ink-faint); }
.map-pin {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold-500); color: var(--navy-900);
  display: grid; place-items: center; box-shadow: var(--e2);
}
.map-pin::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(201,152,46,.5); animation: pinPulse 2.4s var(--ease) infinite;
}
@keyframes pinPulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }


.socials { display: flex; gap: 9px; }
.socials a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-soft); background: #fff; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.socials a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--navy-900); transform: translateY(-2px); }

/* ══════════ responsive ══════════ */
@media (max-width: 1080px) {
  .with-side { grid-template-columns: 1fr; }
  .side { display: none; }
  .side.is-open { display: block; }
  .filter-toggle { display: inline-flex; }
  .pd { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pd-gallery { position: static; }
  .article-wrap { grid-template-columns: 1fr; }
  .toc { position: static; margin-bottom: var(--sp-3); }
  .toc-panel { display: flex; flex-wrap: wrap; gap: 8px; }
  .toc a { border-left: 0; padding: 7px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-full); font-size: .82rem; }
  .steps-grid, .certs, .team { grid-template-columns: repeat(2, 1fr); }
  .feature-post { grid-template-columns: 1fr; }
  .feature-post .media { aspect-ratio: 16/9; }
  .news { grid-template-columns: 1fr; }
  .cx-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .phero { padding: calc(var(--band-y) + 56px) 0 var(--band-y); }
  .feats, .steps-grid, .certs, .team, .prevnext, .figrow { grid-template-columns: 1fr; }
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .toolbar { flex-direction: column; align-items: stretch; }
  .tb-right { justify-content: space-between; }
  .news-form { flex-direction: column; }
  .news-form input { min-width: 0; width: 100%; }
  .sticky-inner .sticky-txt { display: none; }
  .sticky-inner { justify-content: center; }
  .sticky-inner .btn { width: 100%; }
  .tl-card { grid-template-columns: 1fr; gap: 6px; }
  .article p { font-size: 1rem; }
}

/* ══════════ side drawer (mobile filters) ══════════ */
@media (max-width: 1080px) {
  .side.is-open {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 88vw); z-index: 150;
    background: var(--beige-50); border-left: 1px solid var(--line-soft);
    padding: var(--sp-3); overflow-y: auto; box-shadow: var(--e3);
    animation: drawerIn .34s var(--ease-out) both;
  }
  @keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
  .drawer-veil { position: fixed; inset: 0; z-index: 140; background: rgba(7,23,41,.5); backdrop-filter: blur(4px); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
  .drawer-head h3 { font-family: var(--serif); font-size: 1.2rem; color: var(--navy-800); }
}
.drawer-veil { display: none; }
.drawer-head { display: none; }

/* ══════════ utility ══════════ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══════════ social icon set — one size, one stroke, one hover ══════════ */
.foot-social a, .socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.foot-social a svg, .socials a svg {
  width: 17px; height: 17px;
  stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.foot-social { gap: 10px; }
.foot-social a:hover, .socials a:hover { transform: translateY(-2px); }

/* ══════════ breadcrumb: locked to the site container ══════════ */
.crumbs { padding-inline: 0; }
.pd-head .shell, .phero .shell { padding-inline: var(--sp-3); }

/* ══════════ hero fits the viewport ══════════
   The header and announcement bar are in normal document flow above the
   hero now (not floating over it), so the hero itself no longer needs to
   reserve space to clear them — plain viewport-height sizing is enough. */
.hero {
  min-height: 100svh;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  overflow: hidden;
}
@supports not (height: 100svh) {
  .hero { min-height: 100vh; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; padding-top: var(--sp-4); padding-bottom: var(--sp-5); }
}

/* ══════════ social icons — one consistent set ══════════ */
.foot-social a, .socials a, .share a {
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .25s var(--ease);
}
.foot-social svg, .socials svg, .share svg {
  width: 17px; height: 17px; stroke-width: 1.7;
  fill: none; stroke: currentColor;
}
.socials svg { width: 19px; height: 19px; }

/* Instagram/Twitter/WhatsApp/Copy-Link are solid brand marks (single-colour
   glyphs), not line icons — same badge, size and hover as the rest of the
   set, but filled instead of outlined. The extra class beats the outline
   rules above on specificity, so no !important is needed. */
.foot-social .brand-ico, .socials .brand-ico, .share .brand-ico, .float-btn .brand-ico {
  fill: currentColor; stroke: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   TIMELINE  —  single authoritative block
   Pure grid, no absolute positioning, so both sides are mirror-symmetric by
   construction: [ card | rail | year ] flipped to [ year | rail | card ].
   ══════════════════════════════════════════════════════════════════════════ */
.tl2 { position: relative; display: grid; gap: var(--sp-3); padding: 6px 0; }

/* the centre rail */
.tl2::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line) 5%, var(--line) 95%, transparent);
}

.tl2-item {
  display: grid;
  grid-template-columns: 1fr var(--tl-rail, 72px) 1fr;
  align-items: center;
  column-gap: 0;
}

/* odd: card left, year right — even: mirrored. Identical offsets both sides. */
.tl2-item:nth-child(odd)  .tl2-card { grid-column: 1; margin-right: 16px; text-align: right; }
.tl2-item:nth-child(odd)  .tl2-year { grid-column: 3; justify-self: start; padding-left: 16px; }
.tl2-item:nth-child(even) .tl2-year { grid-column: 1; justify-self: end;   padding-right: 16px; }
.tl2-item:nth-child(even) .tl2-card { grid-column: 3; margin-left: 16px;  text-align: left; }

/* dot: always column 2, centred on the rail and on the card's mid-line */
.tl2-node {
  grid-column: 2; grid-row: 1;
  justify-self: center; align-self: center;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 5px var(--beige-100), 0 0 0 6.5px rgba(201,152,46,.42);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.tl2-item:hover .tl2-node { transform: scale(1.24); background: var(--gold-600); }

.tl2-year {
  align-self: center;
  font-family: var(--mono); font-size: .86rem; font-weight: 600;
  letter-spacing: .04em; color: var(--gold-800); white-space: nowrap;
}

.tl2-card {
  position: relative;
  padding: 22px 26px;                       /* identical padding both sides */
  background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.tl2-card:hover { box-shadow: var(--e2); border-color: rgba(201,152,46,.3); }
.tl2-item:nth-child(odd)  .tl2-card:hover { transform: translateX(-4px); }
.tl2-item:nth-child(even) .tl2-card:hover { transform: translateX(4px); }
.tl2-card h3 { font-family: var(--serif); font-size: 1.16rem; font-weight: 600; margin-bottom: 5px; }
.tl2-card p  { font-size: .9rem; line-height: 1.58; margin: 0; }

/* connector pointer — mirrored so it meets the rail at the same angle */
.tl2-card::after {
  content: ''; position: absolute; top: 50%; width: 12px; height: 12px;
  background: #fff; border: 1px solid var(--line-soft);
  transform: translateY(-50%) rotate(45deg);
}
.tl2-item:nth-child(odd)  .tl2-card::after { right: -7px; border-left: 0;  border-bottom: 0; }
.tl2-item:nth-child(even) .tl2-card::after { left:  -7px; border-right: 0; border-top: 0; }

/* scroll-triggered fade + grow */
[data-aos="tl-grow"].aos-animate { animation-name: aosTlGrow; }
@keyframes aosTlGrow {
  from { opacity: 0; transform: scale(.94) translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ── tablet & mobile: clean single column, rail on the left ── */
@media (max-width: 900px) {
  .tl2::before { left: 6px; }
  .tl2 { gap: var(--sp-2); }
  .tl2-item {
    grid-template-columns: 14px 1fr;
    grid-template-rows: auto auto;
    column-gap: 18px; row-gap: 4px;
    align-items: start;
  }
  .tl2-item:nth-child(odd)  .tl2-card,
  .tl2-item:nth-child(even) .tl2-card {
    grid-column: 2; grid-row: 2; margin: 0; text-align: left;
  }
  .tl2-item:nth-child(odd)  .tl2-year,
  .tl2-item:nth-child(even) .tl2-year {
    grid-column: 2; grid-row: 1;
    justify-self: start; padding: 0; margin-bottom: 2px;
  }
  .tl2-node { grid-column: 1; grid-row: 1; align-self: center; margin-top: 4px; }
  .tl2-card::after { display: none; }
  .tl2-item:nth-child(odd)  .tl2-card:hover,
  .tl2-item:nth-child(even) .tl2-card:hover { transform: translateX(4px); }
}

/* ══════════ minimal breadcrumb on light sections ══════════ */
.crumbs--light {
  padding: 0; margin: 0;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
.crumbs--light a, .crumbs--light span {
  font-size: .68rem; color: var(--ink-faint);
}
.crumbs--light a:hover { color: var(--gold-800); }
.crumbs--light [aria-current] { color: var(--ink-soft); }
.crumbs--light svg { color: var(--line); }

/* ══════════ BRAND MARKS ══════════
   logo-light is a dark-navy wordmark (measured 1.98:1 on the navy bar), so in
   the header it keeps its light plate to stay legible. The icon mark is
   multicolour and reads at 4.91:1 on navy, so the footer needs no plate.   */
.logo-foot { display: inline-flex; align-items: center; gap: 12px; }
img.logo-icon {
  height: 44px; width: auto; max-width: none;
  background: none; padding: 0; border-radius: 0; box-shadow: none;
}
@media (max-width: 760px) { img.logo-icon { height: 38px; } }