/* ============================================================================
   NAUTIYAL’S EMPIRE - COMPONENTS
   Reusable, page-agnostic building blocks. Every component inherits the
   semantic colour roles, so placing one inside .section--invert / .on-dark
   re-skins it automatically - no dark variants needed.
   Depends on: tokens.css, base.css
   ============================================================================ */

/* ---------- 1. Button ---------------------------------------------------- */

.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--sp-2xs);
  min-height:54px; padding:1.08rem 2.2rem;
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  text-align:center;
  border:var(--bw) solid currentColor;
  color:var(--text);
  transition:color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
.btn > *{ position:relative; z-index:2; }
/* Wipe fill - rises from the bottom edge */
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--c-ink);
  transform:translateY(101%);
  transition:transform .56s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{ transform:translateY(0); }
.btn:hover,.btn:focus-visible{ color:var(--c-white); }

/* -- variants -- */
.btn--solid{
  background:var(--c-ink); color:var(--c-white); border-color:var(--c-ink);
}
.btn--solid::before{ background:var(--c-mocha-dp); }
.btn--solid:hover,.btn--solid:focus-visible{ color:var(--c-white); border-color:var(--c-mocha-dp); }

.btn--accent{
  background:var(--c-brown-dk); color:var(--c-white); border-color:var(--c-brown-dk);
}
.btn--accent::before{ background:var(--c-ink); }
.btn--accent:hover,.btn--accent:focus-visible{ color:var(--c-white); border-color:var(--c-ink); }

/* Ghost for dark grounds - border uses the dark-surface line role */
.btn--ghost{ border-color:var(--line); color:var(--text); }
.btn--ghost::before{ background:var(--c-white); }
.btn--ghost:hover,.btn--ghost:focus-visible{ color:var(--c-ink); border-color:var(--c-white); }

/* -- sizes & modifiers -- */
.btn--sm{ min-height:var(--tap); padding:.82rem 1.5rem; }
.btn--lg{ min-height:62px; padding:1.25rem 2.8rem; }
.btn--block{ width:100%; }

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.4; pointer-events:none; cursor:not-allowed;
}
.btn .arw{ transition:transform var(--dur-mid) var(--ease); flex:none; }
.btn:hover .arw{ transform:translateX(5px); }

/* ---------- 2. Text link ------------------------------------------------- */

.link{
  position:relative; display:inline-flex; align-items:center; gap:var(--sp-2xs);
  padding-top:.5rem; padding-bottom:.42rem;
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
}
/* Rule retracts to the right on hover */
.link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:var(--bw);
  background:currentColor; transform:scaleX(1); transform-origin:right;
  transition:transform var(--dur-mid) var(--ease);
}
.link:hover::after,.link:focus-visible::after{ transform:scaleX(0); }
.link .arw{ transition:transform var(--dur-mid) var(--ease); }
.link:hover .arw{ transform:translateX(6px); }
.link--accent{ color:var(--text-accent); }

/* Inline prose link */
.link-inline{
  color:var(--text-accent);
  border-bottom:var(--bw) solid currentColor;
  transition:opacity var(--dur-fast) var(--ease);
}
.link-inline:hover{ opacity:.65; }

/* ---------- 3. Icon button (square) -------------------------------------- */

.ibtn{
  display:grid; place-items:center;
  width:54px; height:54px; flex:none;
  border:var(--bw) solid var(--line); color:var(--text);
  transition:background-color var(--dur-mid) var(--ease),
             color var(--dur-mid) var(--ease),
             border-color var(--dur-mid) var(--ease);
}
.ibtn:hover:not(:disabled){
  background:var(--c-ink); color:var(--c-white); border-color:var(--c-ink);
}
.ibtn:disabled{ opacity:.3; cursor:not-allowed; }
.ibtn--sm{ width:var(--tap); height:var(--tap); }
.ibtn svg{ width:16px; height:16px; }

/* ---------- 4. Tag / badge ----------------------------------------------- */

.tag{
  display:inline-flex; align-items:center; gap:var(--sp-3xs);
  padding:.5rem .85rem;
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  border:var(--bw) solid var(--line); color:var(--text-muted);
}
.tag--solid{ background:var(--c-ink); color:var(--c-white); border-color:var(--c-ink); }
.tag--accent{ background:var(--c-mocha-dp); color:var(--c-white); border-color:var(--c-mocha-dp); }
.tag--light{ background:var(--c-white); color:var(--c-ink); border-color:var(--c-white); }

/* Filter chip (gallery / projects) */
.chip{
  padding:.7rem 1.25rem; min-height:var(--tap);
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  border:var(--bw) solid var(--line); color:var(--text-muted);
  transition:background-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease);
}
.chip:hover{ color:var(--text); border-color:var(--line-strong); }
.chip[aria-pressed="true"],.chip.is-on{
  background:var(--c-ink); color:var(--c-white); border-color:var(--c-ink);
}

/* ---------- 5. Image frame ----------------------------------------------- */

.frame{ position:relative; overflow:hidden; background:var(--surface-sunken); }
.frame img{ width:100%; height:100%; object-fit:cover; }
/* Unified warm grade - binds mixed photography into one world */
.frame img,.graded{ filter:saturate(.84) contrast(1.03) sepia(.08) brightness(1.01); }

.frame--portrait { aspect-ratio:var(--ar-portrait); }
.frame--tall     { aspect-ratio:var(--ar-tall); }
.frame--card     { aspect-ratio:var(--ar-card); }
.frame--square   { aspect-ratio:var(--ar-square); }
.frame--landscape{ aspect-ratio:var(--ar-landscape); }
.frame--wide     { aspect-ratio:var(--ar-wide); }

.frame--bordered{ border:var(--bw) solid var(--line); }
.zoom img{ transition:transform 1.25s var(--ease); }
.zoom:hover img{ transform:scale(1.055); }

/* Fixed-background image box. The photograph is locked to the viewport, so
   the box reads as a window onto a still image rather than a pasted picture. */
.fiximg{
  position:relative; overflow:hidden;
  aspect-ratio:var(--ar-square); background:var(--surface-sunken);
}
.fiximg--portrait{ aspect-ratio:var(--ar-portrait); }
.fiximg--landscape{ aspect-ratio:var(--ar-landscape); }
.fiximg__bg{
  position:absolute; inset:0;
  background-repeat:no-repeat; background-size:cover; background-position:center;
  background-attachment:fixed;
  filter:saturate(.84) contrast(1.03) sepia(.08) brightness(1.01);
}
/* Touch devices and iOS handle fixed attachment badly; fall back cleanly. */
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .fiximg__bg{ background-attachment:scroll; }
}

/* Caption under media */
.caption{
  margin-top:var(--sp-xs); display:flex; justify-content:space-between; gap:var(--sp-sm);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted);
}

/* ---------- 6. Section head ---------------------------------------------- */

.shead{ display:grid; gap:var(--sp-md); margin-bottom:clamp(2.6rem,5vw,4.5rem); }
.shead__t{ margin-top:var(--sp-sm); }
@media(min-width:900px){
  .shead{ grid-template-columns:1fr auto; align-items:end; gap:var(--sp-lg); }
  .shead__r{ justify-self:end; text-align:right; max-width:42ch; }
}

/* ---------- 7. Media card (project / gallery) ---------------------------- */

.mcard{ position:relative; display:block; overflow:hidden; background:var(--surface-sunken); }
.mcard .frame{ aspect-ratio:var(--ar-card); }
.mcard__ov{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(1.1rem,1.8vw,1.7rem);
  background:linear-gradient(180deg,rgba(26,20,15,0) 36%,rgba(26,20,15,.78) 100%);
}
.mcard__cat{
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--c-sand-lt);
}
.mcard__t{
  margin-top:.42rem;
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.2;
  color:var(--c-white);
}
.mcard__m{ margin-top:.3rem; font-size:var(--fs-small); color:rgba(255,253,249,.76); }
/* Square tab drops in from the top edge on hover */
.mcard__tab{
  position:absolute; top:0; right:0; z-index:3;
  padding:.72rem 1.05rem;
  background:var(--c-white); color:var(--c-ink);
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  transform:translateY(-100%);
  transition:transform var(--dur-mid) var(--ease);
}
.mcard:hover .mcard__tab,.mcard:focus-visible .mcard__tab{ transform:translateY(0); }

/* ---------- 8. Service row (editorial list) ------------------------------ */

.srow-list{ border-top:var(--bw) solid var(--line); }
.srow{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(1rem,3vw,2.6rem);
  padding-block:clamp(1.5rem,2.9vw,2.3rem);
  border-bottom:var(--bw) solid var(--line);
  transition:padding-left .62s var(--ease);
}
.srow::before{
  content:""; position:absolute; inset:0; z-index:0; background:var(--c-ink);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .62s var(--ease);
}
.srow > *{ position:relative; z-index:1; }
.srow__n{
  min-width:2.4em;
  font-family:var(--font-display); font-size:clamp(.95rem,1.1vw,1.1rem);
  letter-spacing:.06em; color:var(--text-accent);
  transition:color var(--dur-mid) var(--ease);
}
.srow__t{
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(1.5rem,3.1vw,2.6rem); line-height:1.18;
  transition:color var(--dur-mid) var(--ease);
}
.srow__d{
  display:block; margin-top:.5rem; max-width:46ch;
  font-size:var(--fs-small); color:var(--text-muted);
  transition:color var(--dur-mid) var(--ease);
}
.srow__go{
  display:none; place-items:center; width:52px; height:52px;
  border:var(--bw) solid var(--line); color:var(--text);
  transition:color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease);
}
@media(min-width:900px){ .srow__go{ display:grid; } }
.srow__go .arw{ transition:transform var(--dur-mid) var(--ease); }
/* Inline thumbnail replaces the cursor preview on touch / narrow screens */
.srow__thumb{ grid-column:1 / -1; margin-top:var(--sp-sm); }
@media(min-width:900px){ .srow__thumb{ display:none; } }

@media (hover:hover) and (min-width:900px){
  .srow:hover{ padding-left:clamp(1rem,2.2vw,2rem); }
  .srow:hover::before{ transform:scaleY(1); }
  .srow:hover .srow__n{ color:var(--c-sand-lt); }
  .srow:hover .srow__t{ color:var(--c-white); }
  .srow:hover .srow__d{ color:rgba(255,253,249,.7); }
  .srow:hover .srow__go{ color:var(--c-white); border-color:var(--line-on-dark); }
  .srow:hover .srow__go .arw{ transform:translateX(5px); }
}

/* Cursor-following preview (desktop, fine pointer only) */
.srow-preview{
  position:fixed; top:0; left:0; z-index:var(--z-float);
  width:clamp(230px,19vw,330px); aspect-ratio:var(--ar-card);
  overflow:hidden; pointer-events:none; background:var(--surface-sunken);
  opacity:0; transform:translate(-50%,-50%) scale(.9);
  transition:opacity var(--dur-mid) var(--ease), transform .55s var(--ease);
}
.srow-preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.srow-preview img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity var(--dur-fast) var(--ease);
  filter:saturate(.84) contrast(1.03) sepia(.08);
}
.srow-preview img.is-active{ opacity:1; }
@media (max-width:899px),(hover:none){ .srow-preview{ display:none; } }

/* ---------- 9. Feature item (numbered) ----------------------------------- */

.feat{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-md);
  padding-block:var(--sp-md);
  border-top:var(--bw) solid var(--line);
}
.feat:last-child{ border-bottom:var(--bw) solid var(--line); }
.feat__n{ font-family:var(--font-display); font-size:1rem; letter-spacing:.06em; color:var(--text-accent); }
.feat__t{ font-family:var(--font-display); font-weight:var(--fw-reg); font-size:var(--fs-h4); line-height:1.3; }
.feat__d{ margin-top:.45rem; font-size:var(--fs-small); line-height:1.72; color:var(--text-muted); }

/* ---------- 10. Stat ------------------------------------------------------ */

.stats{ display:grid; grid-template-columns:repeat(2,1fr); border-top:var(--bw) solid var(--line); }
@media(min-width:780px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ padding-block:clamp(1.6rem,3vw,2.4rem); border-bottom:var(--bw) solid var(--line); }
@media(max-width:779px){
  .stat:nth-child(even){ padding-left:var(--sp-md); border-left:var(--bw) solid var(--line); }
}
@media(min-width:780px){
  .stat{ border-bottom:0; }
  .stat + .stat{ padding-left:clamp(1rem,2.5vw,2rem); border-left:var(--bw) solid var(--line); }
}
.stat__n{
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1;
}
.stat__n sup{ font-size:.42em; vertical-align:super; margin-left:.1em; color:var(--text-accent); }
.stat__l{
  margin-top:.6rem; font-size:var(--fs-micro);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted);
}

/* ---------- 11. Testimonial ---------------------------------------------- */

.quote-card{
  display:flex; flex-direction:column; height:100%;
  padding:clamp(1.8rem,3.4vw,3rem);
  background:var(--surface-raised); border:var(--bw) solid var(--line-soft);
}
.stars{ display:flex; gap:.3rem; margin-bottom:var(--sp-md); color:var(--c-mocha-tx); }
.stars svg{ width:14px; height:14px; }
.quote-card__q{
  flex:1;
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(1.18rem,1.9vw,1.6rem); line-height:1.48;
}
.quote-card__who{
  margin-top:var(--sp-lg); padding-top:var(--sp-md);
  border-top:var(--bw) solid var(--line-soft);
  display:flex; align-items:center; gap:var(--sp-sm);
}
.avatar-sq{
  display:grid; place-items:center; width:48px; height:48px; flex:none;
  background:var(--c-mocha-dp); color:var(--c-white);
  font-size:var(--fs-small); font-weight:var(--fw-med); letter-spacing:.1em;
}
.quote-card__nm{ font-weight:var(--fw-med); font-size:.9375rem; }
.quote-card__loc{
  margin-top:.18rem; font-size:var(--fs-micro);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted);
}

/* Slider shell */
.slider__view{ overflow:hidden; }
.slider__track{ display:flex; transition:transform .82s var(--ease); }
.slider__slide{ flex:0 0 100%; }
@media(min-width:900px){ .slider__slide{ flex-basis:50%; padding-right:var(--gap-col); } }
.slider__ctl{ display:flex; gap:var(--sp-2xs); margin-top:clamp(1.8rem,3vw,2.6rem); }

/* ---------- 12. Form ------------------------------------------------------ */

.form{ background:var(--surface-raised); color:var(--c-ink); padding:clamp(1.6rem,3.2vw,2.8rem); }
.form-row{ display:grid; grid-template-columns:1fr; gap:var(--sp-sm); }
@media(min-width:560px){ .form-row--2{ grid-template-columns:1fr 1fr; } }

.field{ margin-bottom:var(--sp-sm); }
.field > label{
  display:block; margin-bottom:var(--sp-2xs);
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:.18em; text-transform:uppercase; color:var(--c-ink-3);
}
.field .req{ color:var(--c-error); }
.input,.select,.textarea{
  width:100%; padding:.95rem 1rem; min-height:var(--tap);
  background:var(--c-white); color:var(--c-ink);
  border:var(--bw) solid var(--line); font-size:.9375rem;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.textarea{ resize:vertical; min-height:110px; }
.input::placeholder,.textarea::placeholder{ color:var(--c-ink-3); opacity:.7; }
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--c-mocha-dp); box-shadow:0 0 0 var(--bw) var(--c-mocha-dp);
}
.select{
  appearance:none; padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--c-ink-3) 50%),
                   linear-gradient(135deg,var(--c-ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field__err{ display:block; margin-top:var(--sp-3xs); min-height:1em;
  font-size:var(--fs-micro); color:var(--c-error); }
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{ border-color:var(--c-error); }

/* Square checkbox / radio - no rounding, per brand law */
.check{ display:flex; align-items:flex-start; gap:var(--sp-2xs); cursor:pointer;
  font-size:var(--fs-small); color:var(--c-ink-2); }
.check input{
  appearance:none; width:24px; height:24px; flex:none; margin-top:.05rem;
  border:var(--bw) solid var(--line-strong); background:var(--c-white);
  display:grid; place-items:center; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check input:checked{ background:var(--c-ink); border-color:var(--c-ink); }
/* A tick, not a filled square. The square read as an empty box to everyone who
   met it cold, which on a consent control is the one thing it must not do.
   Drawn from two borders rather than a glyph so it stays crisp at any zoom and
   needs no font. The brand rule is about corners, and this has none. */
.check input:checked::after{
  content:""; width:6px; height:11px; margin-top:-2px;
  border:solid var(--c-white); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.check input:focus-visible{ outline:var(--bw-2) solid var(--focus-ring); outline-offset:2px; }

.form__note{ margin-top:var(--sp-sm); font-size:var(--fs-micro); line-height:1.6; color:var(--c-ink-3); }
.form__alert{
  display:none; margin-bottom:var(--sp-sm); padding:var(--sp-sm);
  background:var(--c-stone); border-left:3px solid var(--c-mocha-dp);
  font-size:var(--fs-small); color:var(--c-ink-2);
}
.form__alert.is-on{ display:block; }

/* ---------- 13. Header / navigation -------------------------------------- */

.hdr{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-header);
  height:var(--nav-h); display:flex; align-items:center;
  border-bottom:var(--bw) solid transparent;
  transition:transform .55s var(--ease), background-color var(--dur-mid) var(--ease),
             border-color var(--dur-mid) var(--ease), height var(--dur-mid) var(--ease),
             color var(--dur-mid) var(--ease);
}
.hdr__in{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-md);
}
.hdr.is-stuck{ background:var(--surface); border-bottom-color:var(--line-soft); height:var(--nav-h-stuck); }
.hdr.is-hidden{ transform:translateY(-100%); }

.hdr .wordmark{ grid-column:2; justify-self:center; }
.nav{ display:flex; align-items:center; gap:2.2rem; }
.nav__links{ display:contents; }
.nav--end{ grid-column:3; justify-self:end; }
/* --pad grows the hit area; the underline offsets by the same amount so it
   stays tight under the text instead of drifting to the padding edge. */
.nav a{
  --pad:.8rem;
  position:relative; display:inline-block; padding-block:var(--pad);
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:.17em; text-transform:uppercase;
}
@media (pointer:coarse){ .nav a{ --pad:1.15rem; } }
.nav a::after{
  content:""; position:absolute; left:0; bottom:var(--pad); width:100%; height:var(--bw);
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-mid) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--text-accent); }

/* Transparent-over-hero state */
.hdr.on-hero:not(.is-stuck){
  --text:var(--c-white); --text-accent:var(--c-white);
  --line:var(--line-on-dark); --focus-ring:var(--c-white);
  color:var(--c-white);
}
.hdr.on-hero:not(.is-stuck) .wordmark__sub{ opacity:.85; }
.hdr.on-hero:not(.is-stuck) .wordmark__mark--dark{ display:none; }
.hdr.on-hero:not(.is-stuck) .wordmark__mark--light{ display:block; }
.hdr.on-hero:not(.is-stuck) .btn{ color:var(--c-white); border-color:var(--line-on-dark); }
.hdr.on-hero:not(.is-stuck) .btn::before{ background:var(--c-white); }
.hdr.on-hero:not(.is-stuck) .btn:hover{ color:var(--c-ink); border-color:var(--c-white); }
.hdr.on-hero:not(.is-stuck) .burger i{ background:var(--c-white); }

/* Burger */
.burger{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; width:var(--tap); height:var(--tap);
}
.burger i{
  display:block; width:22px; height:var(--bw); background:var(--c-ink);
  transition:transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger.is-open i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open i:nth-child(2){ opacity:0; }
.burger.is-open i:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

/* Full-screen overlay menu */
.menu{
  position:fixed; inset:0; z-index:var(--z-overlay); background:var(--surface);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--nav-h) var(--gutter) var(--sp-xl);
  clip-path:inset(0 0 100% 0); visibility:hidden;
  transition:clip-path .78s var(--ease), visibility 0s .78s;
}
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .78s var(--ease), visibility 0s 0s; }
.menu li{ overflow:hidden; }
.menu a{
  display:block; padding-block:.06em;
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(2rem,9vw,3.2rem); line-height:1.3;
  transform:translateY(105%);
  transition:transform .7s var(--ease), color var(--dur-fast) var(--ease);
}
.menu.is-open a{ transform:translateY(0); }
.menu a:hover{ color:var(--text-accent); }
.menu__foot{ margin-top:var(--sp-xl); padding-top:var(--sp-md); border-top:var(--bw) solid var(--line); }

@media(max-width:1099px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .hdr__in{ grid-template-columns:auto 1fr auto; }
  .nav--start{ grid-column:1; }
  .nav--end{ grid-column:3; }
}
@media(min-width:1100px){ .burger,.menu{ display:none; } }

/* Small screens: the brand lockup, the Enquire button and the burger together
   are wider than a phone, which pushed the burger off screen and left the menu
   unreachable. The menu and the floating WhatsApp button both carry the call
   to action, so the header button is the one that goes. */
@media(max-width:620px){
  .hdr .nav--end .btn{ display:none; }
  .hdr__in{ gap:var(--sp-sm); }
}
/* The sub sits under the name, so hiding it saves no width. Only the name
   size matters here. */
@media(max-width:360px){
  .hdr .wordmark__name{ font-size:1rem; }
  .hdr .wordmark__mark{ height:26px; }
}

/* ---------- 14. Footer ---------------------------------------------------- */

.ftr{ background:var(--surface-invert); color:var(--text-on-dark-muted); padding-top:clamp(3rem,6vw,5.5rem); }
.ftr__top{
  display:grid; grid-template-columns:1fr; gap:clamp(2.2rem,4vw,3.5rem);
  padding-bottom:clamp(2.4rem,4.5vw,4rem);
  border-bottom:var(--bw) solid var(--line-on-dark-soft);
}
@media(min-width:820px){ .ftr__top{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.5rem,3vw,3rem); } }
.ftr .wordmark__name{ color:var(--c-white); font-size:1.3rem; }
.ftr h4{
  margin-bottom:var(--sp-md); font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--c-sand-lt);
}
.ftr__list li + li{ margin-top:var(--sp-3xs); }
.ftr__list a{
  display:inline-block; padding-block:.46rem;
  font-size:.9rem; transition:color var(--dur-fast) var(--ease);
}
@media (pointer:coarse){ .ftr__list a{ padding-block:.72rem; } }
.ftr__list a:hover{ color:var(--c-white); }
.ftr__bot{
  padding-block:var(--sp-md); display:flex; flex-wrap:wrap; gap:var(--sp-sm) var(--sp-lg);
  justify-content:space-between; align-items:center;
  font-size:var(--fs-micro); letter-spacing:.1em; color:rgba(255,253,249,.5);
}
.socials{ display:flex; gap:var(--sp-2xs); margin-top:var(--sp-md); }
.socials a{
  display:grid; place-items:center; width:42px; height:42px;
  border:var(--bw) solid var(--line-on-dark);
  transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.socials a:hover{ background:var(--c-white); color:var(--c-ink); }
.socials svg{ width:16px; height:16px; }

/* ---------- 15. Marquee --------------------------------------------------- */

.marquee{
  overflow:hidden; background:var(--surface);
  border-block:var(--bw) solid var(--line);
  padding-block:clamp(1.1rem,2vw,1.6rem);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  display:flex; align-items:center; gap:clamp(1.6rem,3vw,3rem);
  padding-right:clamp(1.6rem,3vw,3rem);
  font-family:var(--font-display); font-weight:var(--fw-light);
  font-size:clamp(1.3rem,2.4vw,2.1rem); white-space:nowrap; color:var(--text-2);
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---------- 16. Floating WhatsApp ---------------------------------------- */

.wa{
  position:fixed; right:clamp(1rem,2vw,1.6rem); bottom:clamp(1rem,2vw,1.6rem);
  z-index:var(--z-float);
  display:flex; align-items:center; gap:var(--sp-2xs);
  padding:.9rem 1.2rem; min-height:var(--tap);
  background:var(--c-ink); color:var(--c-white);
  font-size:var(--fs-micro); font-weight:var(--fw-med);
  letter-spacing:.16em; text-transform:uppercase;
  box-shadow:var(--shadow-md);
  transform:translateY(130%);
  transition:transform .6s var(--ease), background-color var(--dur-fast) var(--ease);
}
.wa.is-on{ transform:translateY(0); }
.wa:hover{ background:var(--c-mocha-dp); }
.wa svg{ width:17px; height:17px; flex:none; }
.wa__txt{ display:none; }
@media(min-width:560px){ .wa__txt{ display:inline; } }

/* ---------- 17. Preloader ------------------------------------------------- */

.preloader{
  position:fixed; inset:0; z-index:var(--z-loader); background:var(--surface);
  display:grid; place-items:center;
  clip-path:inset(0 0 0 0); transition:clip-path 1.05s var(--ease);
}
.preloader.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.preloader__logo{ display:block; margin:0 auto; width:clamp(104px,16vw,150px); height:auto; }
.ftr__logo{ display:block; width:clamp(112px,13vw,142px); height:auto; }
.preloader__bar{
  width:min(220px,50vw); height:var(--bw); margin:var(--sp-md) auto 0;
  background:var(--line); overflow:hidden;
}
.preloader__bar i{
  display:block; height:100%; width:100%; background:var(--c-ink);
  transform:scaleX(0); transform-origin:left; transition:transform .25s linear;
}
.preloader__pct{ margin-top:var(--sp-2xs); font-size:var(--fs-micro);
  letter-spacing:var(--ls-eyebrow); color:var(--text-muted); }

/* ---------- 18. Custom cursor -------------------------------------------- */

.cursor{
  position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none;
  width:8px; height:8px; background:var(--c-ink); mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.cursor.is-big{ width:38px; height:38px; background:var(--c-sand); }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ---------- 19. Scroll reveal -------------------------------------------- */

/* Hiding is gated on .js, which an inline script in <head> adds immediately.
   If the script never runs - JS disabled, a parse error, a blocked file -
   content simply renders visible instead of being stranded behind a reveal. */
.js [data-rv]{ opacity:0; }
.js [data-rv="up"]{ transform:translateY(34px); }
.js [data-rv="fade"]{ transform:none; }
.js [data-rv="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); }
[data-rv].is-in{
  opacity:1; transform:none; clip-path:inset(0 0 0 0);
  transition:opacity .95s var(--ease), transform .95s var(--ease), clip-path var(--dur-xslow) var(--ease);
  transition-delay:var(--d,0ms);
}
/* Line-by-line mask reveal for headings */
.rv-lines .ln{ display:block; overflow:hidden; }
.js .rv-lines .ln > span{
  display:block; transform:translateY(105%);
  transition:transform .95s var(--ease); transition-delay:var(--d,0ms);
}
.rv-lines.is-in .ln > span{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv].is-in,.rv-lines .ln > span{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .marquee__track{ animation:none !important; }
}