/* ============================================================================
   ANAYA INTERIORS - 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); }
.check input:checked::after{
  content:""; width:10px; height:10px; background:var(--c-white);
}
.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--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) .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; } }

/* ---------- 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__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; }
}