/* ==========================================================================
   AR ENTERPRISES — INTERIOR TURNKEY SOLUTIONS
   Global Design System
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Brand colours — AR Enterprises official palette.
     Charcoal is TEXT-ONLY from here on — never a background fill. */
  --charcoal:        #202124;  /* Rich Charcoal — headings/body text only */
  --charcoal-soft:    #303236;  /* Graphite — secondary text only */
  --charcoal-line:    rgba(32,33,36,0.08);
  --off-white:        #FFFFFF;  /* White — main site background (unified white system) */
  --warm-white:       #FFFFFF;  /* White — cards & clean surfaces */
  --stone:            #ECE8E0;  /* Soft Stone — small component accents only (icon circles, placeholders); never a section background */
  --stone-dark:       #D9D4CB;
  --graphite:         #202124;
  --graphite-soft:    #6B6862;  /* Warm Grey — secondary text */
  --ar-orange:        #F97316;  /* AR Brand Orange */
  --ar-orange-light:  #FB8A47;
  --ar-orange-dark:   #E65F0E;  /* Orange Hover */
  --ar-orange-tint:   #FCE3D0;  /* Light Orange surface */
  --ar-orange-vivid:  #F97316;
  --border-stone:     #D9D4CB;  /* Light Stone Border */
  /* Premium light-blue SECTION BACKGROUND system — used sparingly to alternate
     section rhythm (stats / solutions / why-choose bands). Never a card fill,
     never the dominant brand colour — orange + charcoal stay primary. */
  --ar-light-blue:      #EEF7FA;
  --ar-light-blue-soft: #F5FAFC;
  --ar-blue-border:     #D7EAF0;
  --ar-blue-accent:     #B8DDE8;
  --scrim-light:       rgba(255,255,255,0.86); /* Frosted light panel — on-photo UI chrome only (arrows/dots), never hero copy */
  --footer-bg:         #0B0B0B;  /* Deep Black — footer background only, per brand rule */
  --footer-text:       rgba(255,255,255,0.68); /* Soft grey — footer body text */
  --footer-border:     rgba(255,255,255,0.12);

  /* Semantic */
  --bg-alt: #FFFFFF;           /* alternate-section surface — unified white; sections separate via spacing/borders, not colour */
  --bg-light: #FFFFFF;
  --text-body: var(--graphite);
  --text-muted: var(--graphite-soft);
  --border-light: rgba(32,33,36,0.12);
  /* Reserved for text/controls placed directly over a photo (e.g. outline
     buttons on the hero image) — NOT for section/card backgrounds. */
  --text-on-photo: #FFFFFF;
  --text-on-photo-soft: rgba(255,255,255,0.82);

  /* Type */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — reduced ~15% site-wide for a tighter, more restrained read (Task 3) */
  --fs-xxs: 0.73rem;
  --fs-xs: 0.82rem;
  --fs-sm: 0.92rem;
  --fs-base: 1.02rem;
  --fs-md: 1.17rem;
  --fs-lg: 1.43rem;
  --fs-xl: 1.94rem;
  --fs-h3: clamp(1.53rem, 1.22rem + 1.22vw, 2.24rem);
  --fs-h2: clamp(2.04rem, 1.53rem + 2.24vw, 3.47rem);
  --fs-h1: clamp(2.65rem, 1.63rem + 4.59vw, 5.30rem);
  --fs-hero: clamp(3.06rem, 1.63rem + 6.12vw, 6.53rem);

  /* Spacing — tightened so pages need noticeably less scrolling */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 2.25rem;
  --section-pad: clamp(2.5rem, 2rem + 2.2vw, 4.25rem);
  --section-pad-sm: clamp(1.25rem, 1rem + 1vw, 2rem);
  --container-w: 1360px;
  --container-pad: clamp(1.25rem, 1rem + 2vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 0.28s;
  --dur-med: 0.55s;
  --dur-slow: 0.9s;

  /* Effects */
  --shadow-sm: 0 2px 10px rgba(32,33,36,0.06);
  --shadow-md: 0 12px 40px rgba(32,33,36,0.12);
  --shadow-lg: 0 30px 80px rgba(32,33,36,0.22);
  --radius-sm: 4px;
  --radius-md: 8px;
  --header-h: 92px;
  --topbar-h: 38px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--off-white);
  font-size: var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); line-height:1.12; letter-spacing:-0.01em; color: var(--graphite); }
h1,h2{ font-weight:700; }
/* Base heading sizes — previously undefined for generic <h2> (every .section-head
   h2 sitewide was silently falling back to the browser default). More specific
   per-component rules elsewhere still win on specificity. */
h2{ font-size: var(--fs-h2); }
h3,h4{ font-weight:600; }
h5,h6{ font-family: var(--font-sans); font-weight:600; }
svg{ display:block; }

/* Focus states — accessible, visible, on-brand */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--ar-orange);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link{
  position:absolute; left:1rem; top:-60px; z-index:2000;
  background:var(--ar-orange); color:#fff; padding:0.8rem 1.4rem; border-radius:var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
  font-size:var(--fs-sm); font-weight:600;
}
.skip-link:focus{ top:1rem; }

/* ---------- Layout Utilities ---------- */
.container{ max-width: var(--container-w); margin:0 auto; padding: 0 var(--container-pad); }
.section{ padding: var(--section-pad) 0; }
.section-dark{ background: var(--bg-alt); }
.section-stone{ background: var(--warm-white); }
/* Soft light-blue section bands — Task 5 colour rhythm (stats / solutions / why-choose). */
.section-blue{ background: var(--ar-light-blue); }
.section-blue-soft{ background: var(--ar-light-blue-soft); }
.grid{ display:grid; gap: var(--gap-lg); }
.g-2{ grid-template-columns: repeat(2,1fr); }
.g-3{ grid-template-columns: repeat(3,1fr); }
.g-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1024px){ .g-4{ grid-template-columns: repeat(2,1fr); } .g-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .g-2,.g-3,.g-4{ grid-template-columns: 1fr; } }
@media (max-width:640px){ :root{ --gap-xl: 1.75rem; --gap-lg: 1.5rem; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family: var(--font-sans); font-size: var(--fs-xxs); font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase; color: var(--ar-orange);
}
.eyebrow::before{ content:''; width:28px; height:1px; background: var(--ar-orange); }

.section-head{ max-width: 780px; margin-bottom: var(--gap-xl); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ margin-top:0.9rem; }
.section-head p{ margin-top:1.1rem; font-size: var(--fs-md); color: var(--text-muted); max-width:60ch; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.section-head > .btn{ margin-top:1.4rem; }

.text-center{ text-align:center; }
.mt-lg{ margin-top: var(--gap-lg); }
.mt-xl{ margin-top: var(--gap-xl); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  padding: 1.05rem 2.1rem; font-size: var(--fs-xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  border-radius: 2px; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  white-space:nowrap; overflow:hidden; isolation:isolate;
}
.btn-primary{ background: var(--ar-orange); color:#fff; }
.btn-primary:hover{ background: var(--ar-orange-dark); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-outline-dark{ border:1px solid rgba(32,33,36,0.35); color: var(--graphite); }
.btn-outline-dark:hover{ border-color: var(--ar-orange); background: var(--ar-orange); color:#fff; transform: translateY(-2px); }
.btn-outline-light{ border:1px solid rgba(255,255,255,0.55); color: var(--text-on-photo); }
.btn-outline-light:hover{ border-color:#fff; background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.btn-ghost-light{ color: var(--text-on-photo); font-weight:700; font-size:var(--fs-xs); letter-spacing:0.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:0.6rem; }
.btn-ghost-light .arrow{ transition: transform var(--dur-fast) var(--ease); }
.btn-ghost-light:hover .arrow{ transform: translateX(6px); }
.btn-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.btn.magnetic{ will-change: transform; }
.btn .arrow{ display:inline-block; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

/* ---------- Top Header ----------
   Normal document-flow block (not fixed) so it can never overlap the hero —
   it simply scrolls away with the page like any other content above the
   sticky main nav. */
.top-header{
  position:static;
  height: var(--topbar-h);
  display:flex; align-items:center;
  background: #FFFFFF; color: var(--graphite);
  border-bottom:1px solid var(--border-light);
  font-size: var(--fs-xxs);
}
.top-header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; width:100%; }
.top-header-contact{ display:flex; align-items:center; gap:1.8rem; }
.top-header-contact a{ display:inline-flex; align-items:center; gap:0.5rem; color: var(--graphite); font-weight:600; letter-spacing:0.02em; transition: color var(--dur-fast) var(--ease); }
.top-header-contact a:hover{ color: var(--ar-orange-dark); }
.top-header-contact svg{ flex-shrink:0; color: var(--ar-orange); }
.top-header-social{ display:flex; align-items:center; gap:0.9rem; }
.top-header-social a{ display:flex; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.top-header-social a:hover{ color: var(--ar-orange-dark); }
@media (max-width:760px){
  .top-header-contact a:nth-child(2) span{ display:none; }
  .top-header-social{ display:none; }
}
@media (max-width:560px){ .top-header{ font-size:0.58rem; } .top-header-contact{ gap:1.1rem; } }

/* ---------- Header ----------
   Sticky (not fixed): it reserves its own height in normal flow at initial
   load — so the hero below it starts exactly at its bottom edge, with zero
   overlap — then sticks to the viewport top once scrolled past, with no
   layout jump because sticky elements never leave flow the way fixed ones do. */
.site-header{
  position:sticky; top:0; z-index:1000;
  height: var(--header-h);
  display:flex; align-items:center;
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(32,33,36,0.06);
  transition: box-shadow var(--dur-med) var(--ease);
}
.site-header.is-solid{ box-shadow: var(--shadow-sm); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:2rem; width:100%; }

.brand{ display:flex; align-items:center; gap:0.7rem; flex-shrink:0; }
.brand-logo{ display:block; height:78px; width:auto; flex-shrink:0; transition: background var(--dur-med) var(--ease), padding var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); border-radius:10px; }
.brand-logo img{ height:100%; width:auto; max-width:none; object-fit:contain; display:block; }
.brand .brand-fallback{ font-family: var(--font-display); font-size:1.15rem; color: var(--graphite); letter-spacing:0.02em; }
.brand .brand-fallback span{ color: var(--ar-orange); }

.main-nav{ display:flex; align-items:center; gap:2.2rem; }
.main-nav > ul{ display:flex; align-items:center; gap:0.3rem; }
.main-nav a{ color: var(--graphite); font-size: var(--fs-sm); font-weight:600; letter-spacing:0.02em; position:relative; padding:0.62rem 1.05rem; border-radius:999px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.main-nav a::after{
  content:''; position:absolute; left:1.05rem; right:1.05rem; bottom:0.1rem; height:1px; background: var(--ar-orange-vivid);
  transform:scaleX(0); transform-origin:left; transition: transform var(--dur-fast) var(--ease);
}
.main-nav a:hover::after{ transform:scaleX(1); }
.main-nav a:hover{ color: var(--ar-orange-dark); }
.main-nav a.active{ color:#fff; background: var(--ar-orange); box-shadow: 0 6px 18px rgba(249,115,22,0.35); }
.main-nav a.active::after{ display:none; }
.main-nav a.active:hover{ color:#fff; background: var(--ar-orange-dark); }
.nav-item{ position:relative; }
.nav-item > a{ display:flex; align-items:center; gap:0.35rem; }
.nav-caret{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition: transform var(--dur-fast) var(--ease); margin-top:-3px; }
.nav-item:hover .nav-caret{ transform: rotate(225deg); margin-top:3px; }

.header-actions{ display:flex; align-items:center; gap:1.3rem; }
.header-actions .btn{ padding:0.85rem 1.6rem; border-radius:999px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; padding:0.4rem; z-index:1100; }
.menu-toggle span{ width:24px; height:2px; background: var(--graphite); transition: all var(--dur-fast) var(--ease); }

/* Anchor targets clear the sticky header when jumped to via CTA links */
[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Mega Menu (two-column, Services / Other Services) ---------- */
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,14px);
  width:min(680px, 92vw);
  background: var(--warm-white); color: var(--graphite);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 2.4rem 2.6rem 2rem;
  opacity:0; visibility:hidden; pointer-events:none;
  /* Merging Services + Other Services into one panel makes this tall enough
     that it can outgrow a short viewport — cap it and let it scroll instead
     of clipping content silently or spilling off-screen. */
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-x:hidden; overflow-y:auto;
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft), visibility var(--dur-med);
}
.mega-menu::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--ar-orange) 0%, var(--ar-orange-light) 100%);
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translate(-50%,0);
}
.mega-2col{ display:grid; grid-template-columns: 1fr 1fr; column-gap:2.6rem; row-gap:0.1rem; }
.mega-col ul{ display:flex; flex-direction:column; gap:0.1rem; }
.mega-col a{
  display:flex; align-items:center; gap:0.7rem; font-size: var(--fs-base); font-weight:600; color: var(--graphite);
  padding:0.62rem 0.9rem; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.mega-col a .mega-num{ font-family: var(--font-display); font-size:var(--fs-xs); font-weight:700; color: var(--ar-orange-light); flex-shrink:0; }
.mega-col a:hover{ background: var(--ar-orange-tint); color: var(--ar-orange-dark); padding-left:1.15rem; }
/* Divides the merged Services dropdown's core-services block from the
   secondary Other Services block, keeping both under one nav item. */
.mega-group-label{
  margin:0.9rem 0 0.5rem; padding-top:0.9rem; border-top:1px solid var(--border-light);
  font-size:var(--fs-xxs); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-muted);
}
.mega-viewall{
  display:flex; align-items:center; justify-content:center; gap:0.6rem; margin-top:1rem; padding-top:1.3rem;
  border-top:1px solid var(--border-light); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ar-orange-dark);
}
.mega-viewall .arrow{ transition: transform var(--dur-fast) var(--ease); }
.mega-viewall:hover .arrow{ transform: translateX(6px); }

@media (max-width:1320px){
  .main-nav{ gap:1.1rem; }
  .main-nav > ul{ gap:0.05rem; }
  .main-nav a{ padding:0.62rem 0.75rem; font-size:0.71rem; }
  .header-actions{ gap:0.8rem; }
  .header-actions .btn{ padding:0.85rem 1.2rem; font-size:0.66rem; }
}

/* ---------- Mobile nav ---------- */
.mobile-nav-cta{ display:none; }
@media (max-width:960px){
  .main-nav{ position:fixed; inset:0 0 0 auto; width:min(400px,88vw); height:100vh; background: var(--warm-white); box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform var(--dur-med) var(--ease-soft);
    flex-direction:column; align-items:stretch; justify-content:flex-start; padding: calc(var(--header-h) + 1rem) 2rem 2rem; overflow-y:auto; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .main-nav > ul > li{ border-bottom:1px solid var(--border-light); }
  .main-nav a{ display:flex; padding:1.1rem 0.2rem; font-size:var(--fs-md); border-radius:8px; color: var(--graphite); }
  .main-nav a:hover{ color: var(--ar-orange-dark); }
  .main-nav a.active{ padding:0.9rem 1rem; }
  .main-nav a.active, .main-nav a.active:hover{ color:#fff; }
  .nav-item > a{ justify-content:space-between; }
  .mega-menu{ position:static; transform:none; width:100%; box-shadow:none; background:transparent; padding:0; max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto; display:block; transition: max-height var(--dur-med) var(--ease-soft); }
  .mega-menu::before{ display:none; }
  .nav-item.mm-open .mega-menu{ max-height:1400px; padding:0.2rem 0 1.2rem; }
  /* Clicking/tabbing to the Services link focuses it, matching the desktop
     :focus-within centering transform below — same selector here to win on
     specificity and keep the mobile drawer's mega-menu from sliding off-screen. */
  .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu{ position:static; left:auto; transform:none; }
  .mega-2col{ grid-template-columns:1fr; column-gap:0; row-gap:0; }
  .mega-col{ padding-left:0.2rem; }
  .mega-col a{ padding:0.75rem 0.6rem; font-size:var(--fs-base); color: var(--text-muted); }
  .mega-col a:hover{ background: var(--ar-orange-tint); color: var(--ar-orange-dark); }
  .mega-viewall{ justify-content:flex-start; color: var(--ar-orange-dark); border-top-color: var(--border-light); }
  .header-actions .btn-primary{ display:none; }
  .mobile-nav-cta{ display:block; margin-top:1.8rem; }
  .mobile-nav-cta .btn{ width:100%; justify-content:center; border-radius:999px; }
  .menu-toggle{ display:flex; }
}
@media (min-width:961px){ .menu-toggle{ display:none; } }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
/* Premium editorial treatment: copy sits directly on the photo in white,
   legible via a bottom-anchored dark gradient scrim (not a frosted card). */
.hero{
  position:relative; min-height:64vh; display:flex; align-items:flex-end;
  overflow:hidden; background: var(--stone); color: var(--text-on-photo);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; transform: scale(1.08); animation: heroZoom 16s var(--ease-soft) forwards; }
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(0deg, rgba(10,9,8,0.62) 0%, rgba(10,9,8,0.28) 32%, rgba(10,9,8,0) 60%);
}
.hero-inner{
  position:relative; z-index:1; width:100%; max-width:720px;
  margin: 0 var(--container-pad) clamp(2.25rem,4vw,4rem);
  padding: 0;
}
.hero .eyebrow{ color: var(--ar-orange-light); }
/* Sized for the ~720px on-photo copy block — --fs-h1/--fs-hero run the full
   container width and would badly overwrap here. */
.hero h1{ font-size: clamp(1.84rem,1.33rem + 2.65vw,3.16rem); color: var(--text-on-photo); margin-top:0.9rem; }
.hero .hero-sub{ margin-top:1.4rem; font-size: var(--fs-md); color: var(--text-on-photo-soft); }
.hero .btn-row{ margin-top:2rem; }
.hero .btn-outline-dark{ border-color: rgba(255,255,255,0.55); color:#fff; }
.hero .btn-outline-dark:hover{ border-color:#fff; background: rgba(255,255,255,0.16); color:#fff; }
.hero-scroll{ position:absolute; right: var(--container-pad); bottom:2.4rem; z-index:1; display:flex; flex-direction:column; align-items:center; gap:0.6rem; color: var(--text-on-photo-soft); font-size:var(--fs-xxs); letter-spacing:0.18em; text-transform:uppercase; writing-mode: vertical-rl; }
.hero-scroll .line{ width:1px; height:60px; background: rgba(255,255,255,0.3); position:relative; overflow:hidden; }
.hero-scroll .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--ar-orange); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
.page-hero{ min-height:56vh; }
@media (max-width:760px){
  .page-hero{ min-height:min(68vh, 480px); }
  /* Extra bottom margin clears the fixed mobile-cta-bar (~64px) so the
     CTA row never sits underneath it. */
  .hero-inner{ max-width:none; margin-bottom: calc(64px + 1.75rem); }
}

/* Breadcrumb */
.breadcrumb{ position:relative; z-index:1; display:flex; gap:0.5rem; align-items:center; font-size:var(--fs-xs); color: var(--text-muted); margin-bottom:1.2rem; text-transform:uppercase; letter-spacing:0.08em; }
.breadcrumb a:hover{ color: var(--ar-orange-dark); }
.breadcrumb .sep{ opacity:0.5; }
.hero .breadcrumb{ color: var(--text-on-photo-soft); }
.hero .breadcrumb a:hover{ color: var(--text-on-photo); }

/* ---------- Hero Carousel (homepage) ---------- */
.hero-carousel{ position:relative; overflow:hidden; background: var(--stone); height: clamp(600px, 52vw, 680px); }
.hc-track{ position:relative; width:100%; height:100%; }
.hc-slide{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none; transition: opacity 0.9s var(--ease-soft);
}
.hc-slide.is-active{ opacity:1; visibility:visible; pointer-events:auto; z-index:1; }
.hc-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Light top-to-bottom scrim — brighter overall than a full-frame tint, with the
   extra contrast concentrated low where the (now bottom-anchored) copy sits. */
.hc-slide::after{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(8,7,6,0.12) 0%, rgba(8,7,6,0.02) 32%, rgba(8,7,6,0.34) 66%, rgba(8,7,6,0.56) 100%);
}
.hc-panel{
  position:relative; z-index:1; width:100%; max-width:760px;
  margin: 0 auto; padding: 0 var(--container-pad);
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
  text-align:center; display:flex; flex-direction:column; align-items:center;
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.hc-panel .eyebrow{ color: var(--ar-orange-light); }
.hc-panel h1{ font-size: clamp(2.04rem, 1.53rem + 2.45vw, 3.47rem); color:#fff; margin-top:0.9rem; }
@media (min-width:1025px){
  .hc-panel{ max-width:1300px; }
  .hc-panel h1{ font-size: clamp(1.9rem, 1rem + 1.5vw, 3.2rem); white-space:nowrap; }
}
.hc-panel p{ margin-top:1rem; font-size: var(--fs-md); color: var(--text-on-photo-soft); max-width:48ch; }
.hc-panel .btn-row{ margin-top:1.6rem; justify-content:center; }
.hc-panel .btn-outline-dark{ border-color: rgba(255,255,255,0.55); color:#fff; }
.hc-panel .btn-outline-dark:hover{ border-color:#fff; background: rgba(255,255,255,0.16); color:#fff; }
.hc-arrow{
  position:absolute; top:30%; transform:translateY(-50%) scale(1); z-index:2;
  width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center; color: var(--graphite);
  box-shadow: var(--shadow-md); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hc-arrow:hover{ background: var(--ar-orange); color:#fff; transform: translateY(-50%) scale(1.06); }
.hc-prev{ left:1.4rem; }
.hc-next{ right:1.4rem; }
.hc-dots{ position:absolute; right: var(--container-pad); bottom:2rem; z-index:2; display:flex; gap:0.6rem; }
.hc-dot{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.75); border:1px solid rgba(32,33,36,0.15); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.hc-dot.is-active{ background: var(--ar-orange); transform:scale(1.25); border-color: transparent; }
@media (max-width:1024px) and (min-width:761px){
  .hero-carousel{ height: clamp(520px, 58vw, 600px); }
}
@media (max-width:760px){
  .hero-carousel{ height: clamp(520px, 145vw, 650px); }
  .hc-arrow{ width:38px; height:38px; top:14%; }
  .hc-prev{ left:0.8rem; }
  .hc-next{ right:0.8rem; }
  .hc-panel{ max-width:none; padding:0 1.25rem; padding-bottom: calc(64px + 2.5rem); }
  .hc-dots{ right:1rem; bottom: calc(64px + 1rem); }
}
@media (prefers-reduced-motion: reduce){ .hc-slide{ transition:none; } }

/* ---------- Why Clients Choose — auto carousel (homepage) ---------- */
.why-carousel{ position:relative; margin-top: var(--gap-lg); }
/* Arrows flank the viewport itself (not the whole component, which also
   includes the dots row below) so they stay vertically centered on the tiles.
   .wc-frame wraps just the viewport (no overflow:hidden of its own) so the
   arrows — siblings of the clipped .wc-viewport, not descendants of it — are
   never clipped by the viewport's own overflow:hidden. */
.wc-frame{ position:relative; }
.wc-viewport{ overflow:hidden; }
.wc-frame .wc-prev{ left:-20px; }
.wc-frame .wc-next{ right:-20px; }
@media (max-width:900px){
  .wc-frame .wc-prev{ left:-2px; }
  .wc-frame .wc-next{ right:-2px; }
}
.wc-track{ display:flex; gap: var(--gap-lg); transition: transform 0.7s var(--ease); will-change: transform; }
.wc-item{ flex:0 0 calc((100% - 2*var(--gap-lg))/3.15); min-width:0; }
.wc-item .why-tile{ height:100%; transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft); }
.wc-item .why-tile:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--ar-orange); }
.wc-dots{ display:flex; justify-content:center; gap:0.6rem; margin-top:1.8rem; }
.wc-dot{ width:9px; height:9px; border-radius:50%; background: var(--border-light); border:none; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.wc-dot.is-active{ background: var(--ar-orange); transform:scale(1.25); }
@media (max-width:1024px){ .wc-item{ flex-basis: calc((100% - var(--gap-lg))/2); } }
@media (max-width:640px){ .wc-item{ flex-basis:100%; } }
@media (prefers-reduced-motion: reduce){ .wc-track{ transition:none; } .wc-item .why-tile{ transition:none; } }

/* ---------- Card Carousel (Services / Featured Projects / Testimonials) ---------- */
.card-carousel{ position:relative; margin-top: var(--gap-lg); }
/* Arrows flank the track — absolutely positioned, vertically centered on the
   track's own relative parent — instead of grouped in a row above the content
   (Task 2). Shared by Featured Projects (.card-carousel) and, via .wc-prev/
   .wc-next, the Why-Choose-Us carousel (positioned relative to .wc-viewport). */
.cc-arrow{
  position:absolute; top:50%; transform:translateY(-50%) scale(1); z-index:5;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border-light); background: var(--warm-white);
  display:flex; align-items:center; justify-content:center; color: var(--graphite); flex-shrink:0;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cc-arrow:hover{ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; transform: translateY(-50%) scale(1.06); }
.cc-arrow.is-disabled{ opacity:0.35; pointer-events:none; }
.cc-prev{ left:-20px; }
.cc-next{ right:-20px; }
@media (max-width:900px){
  .cc-arrow{ width:40px; height:40px; }
  .cc-prev{ left:-2px; }
  .cc-next{ right:-2px; }
}
.cc-track{
  display:flex; gap: var(--gap-lg); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:0.4rem;
}
.cc-track::-webkit-scrollbar{ display:none; }
.cc-item{ flex:0 0 calc((100% - 2*var(--gap-lg))/3); scroll-snap-align:start; min-width:0; }
.card-carousel--2up .cc-item{ flex-basis: calc((100% - var(--gap-lg))/2); }
.card-carousel--4up .cc-item{ flex-basis: calc((100% - 3*var(--gap-lg))/4); }
@media (max-width:1024px){
  .cc-item{ flex-basis: calc((100% - var(--gap-lg))/2); }
  .card-carousel--2up .cc-item{ flex-basis: 84%; }
  .card-carousel--4up .cc-item{ flex-basis: calc((100% - var(--gap-lg))/2); }
}
@media (max-width:640px){ .cc-item, .card-carousel--2up .cc-item, .card-carousel--4up .cc-item{ flex-basis: 86%; } }

/* ---------- "One-stop shop for all things interiors" slider (homepage) ----------
   Scoped classes (not the shared .cc- / .card-carousel engine) so its controls are
   always DOM descendants of the root the JS queries against. */
.complete-interior-slider{ position:relative; margin-top: var(--gap-lg); }
/* Arrows flank the track, vertically centered (Task 2) — absolutely positioned
   against .complete-interior-slider instead of grouped above the cards. */
.complete-interior-arrow{
  position:absolute; top:50%; transform:translateY(-50%) scale(1); z-index:5;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border-light); background: var(--warm-white);
  display:flex; align-items:center; justify-content:center; color: var(--graphite); flex-shrink:0;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.complete-interior-arrow:hover{ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; transform: translateY(-50%) scale(1.06); }
.complete-interior-arrow.is-disabled{ opacity:0.35; pointer-events:none; }
.complete-interior-prev{ left:-20px; }
.complete-interior-next{ right:-20px; }
@media (max-width:900px){
  .complete-interior-arrow{ width:40px; height:40px; }
  .complete-interior-prev{ left:-2px; }
  .complete-interior-next{ right:-2px; }
}
.complete-interior-track{
  display:flex; gap: var(--gap-lg); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:0.4rem;
}
.complete-interior-track::-webkit-scrollbar{ display:none; }
.complete-interior-card{ flex:0 0 calc((100% - 3*var(--gap-lg))/4); scroll-snap-align:start; min-width:0; }
@media (max-width:1024px){ .complete-interior-card{ flex-basis: calc((100% - var(--gap-lg))/2); } }
@media (max-width:640px){ .complete-interior-card{ flex-basis: 86%; } }

/* ---------- Split / Intro sections ---------- */
.split{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-xl); align-items:center; }
.split.reverse{ grid-template-columns: 1.1fr 0.9fr; }
.split.reverse .split-media{ order:2; }
.split-media{ position:relative; }
.split-media img{ width:100%; border-radius: var(--radius-md); }
.split-media .float-card{
  position:absolute; bottom:-1.6rem; left:-1.6rem; background: var(--warm-white); box-shadow: var(--shadow-lg);
  padding:1.6rem 1.9rem; border-radius: var(--radius-sm); max-width:260px;
}
.split-media .float-card strong{ font-family: var(--font-display); font-size:1.7rem; color: var(--ar-orange); display:block; }
.split-media .float-card span{ font-size: var(--fs-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.split-body p{ color: var(--text-muted); font-size: var(--fs-md); margin-top:1.2rem; max-width:52ch; }
.split-body .btn{ margin-top:2rem; }
@media (max-width:900px){
  .split, .split.reverse{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .split-media .float-card{ position:static; margin-top:1rem; max-width:none; }
}

/* ---------- Who We Are — image collage ---------- */
.collage{ position:relative; }
.collage-main{ border-radius: var(--radius-md); overflow:hidden; aspect-ratio:4/5; box-shadow: var(--shadow-md); }
.collage-main img{ width:100%; height:100%; object-fit:cover; }
.collage-accent{
  position:absolute; top:-1.75rem; right:-1.75rem; width:46%; aspect-ratio:1/1;
  border-radius: var(--radius-md); overflow:hidden; border:6px solid var(--off-white);
  box-shadow: var(--shadow-lg); z-index:1;
}
.collage-accent img{ width:100%; height:100%; object-fit:cover; }
.collage .float-card{ z-index:2; }
@media (max-width:900px){ .collage-accent{ top:-1rem; right:-1rem; width:50%; } }
@media (max-width:480px){ .collage-accent{ width:44%; } }

/* Journey timeline (DISCOVER -> DELIVER) */
.journey{ display:flex; justify-content:space-between; margin-top: var(--gap-xl); flex-wrap:wrap; gap:1.5rem; position:relative; }
.journey::before{ content:''; position:absolute; top:9px; left:0; right:0; height:1px; background: var(--border-light); }
.journey-step{ position:relative; padding-top:2rem; flex:1; min-width:110px; }
.journey-step::before{ content:''; position:absolute; top:0; left:0; width:19px; height:19px; border-radius:50%; background: var(--warm-white); border:1.5px solid var(--ar-orange); }
.journey-step span{ font-size: var(--fs-xs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--graphite); }

/* ---------- Cards: Services ---------- */
.service-card{
  position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 3/4; isolation:isolate;
  box-shadow: var(--shadow-sm);
}
.service-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 0.9s var(--ease-soft); z-index:-2; }
/* Light frosted panel behind the caption instead of a dark scrim — keeps the
   photo bright and avoids a black/charcoal overlay across the whole card. */
.service-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:44%; background: linear-gradient(180deg, transparent 0%, var(--scrim-light) 60%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index:-1; transition: height var(--dur-med) var(--ease); }
.service-card:hover img{ transform: scale(1.08); }
.service-card:hover::after{ height:60%; }
.service-card-body{ position:absolute; left:0; right:0; bottom:0; padding: 1.9rem 1.9rem 2.1rem; color: var(--graphite); }
.service-card-body .num{ font-size: var(--fs-xxs); color: var(--ar-orange-dark); letter-spacing:0.14em; font-weight:700; }
.service-card-body h3{ color: var(--graphite); font-size: var(--fs-lg); margin-top:0.5rem; transition: transform var(--dur-fast) var(--ease); }
.service-card-body .reveal-link{ display:flex; align-items:center; gap:0.6rem; margin-top:0.9rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--ar-orange-dark);
  max-height:0; opacity:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease), margin-top var(--dur-med) var(--ease); }
.service-card:hover .reveal-link{ max-height:40px; opacity:1; }
.service-card .arrow{ transition: transform var(--dur-fast) var(--ease); }
.service-card:hover .arrow{ transform: translateX(6px); }

/* ---------- Signature Services (Homepage) ---------- */
.sig-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: var(--gap-xl); flex-wrap:wrap; margin-bottom: var(--gap-xl); }
.sig-head-left{ max-width:540px; }
.sig-head-left h2{ margin-top:0.9rem; }
.sig-head-desc{ max-width:38ch; font-size: var(--fs-md); color: var(--text-muted); padding-bottom:0.35rem; }
/* Inline supporting copy under a .sig-head-left title (used when the header's
   right-hand slot holds a "View All" action instead of a paragraph). */
.sig-head-left p{ margin-top:0.9rem; color: var(--text-muted); font-size: var(--fs-md); max-width:56ch; }
@media (max-width:900px){
  .sig-head{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .sig-head-desc{ max-width:60ch; }
}

.sig-card{
  position:relative; display:block; border-radius:24px; overflow:hidden; aspect-ratio: 3/5;
  isolation:isolate; box-shadow: var(--shadow-sm); background: var(--stone);
}
.sig-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 0.4s var(--ease-soft); z-index:-2; }
.sig-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:46%;
  background: linear-gradient(180deg, rgba(15,11,8,0) 0%, rgba(15,11,8,0.88) 100%);
  z-index:-1; transition: height 0.4s var(--ease-soft);
}
.sig-card::before{
  content: attr(data-num); position:absolute; top:1.25rem; right:1.5rem; z-index:1;
  font-family: var(--font-display); font-size:clamp(1.62rem,1.19rem+1.7vw,2.21rem); font-weight:700;
  color: rgba(255,255,255,0.55); letter-spacing:-0.02em; pointer-events:none;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.55);
}
.sig-icon{
  position:absolute; top:1.25rem; left:1.25rem; z-index:1; width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;
  color: var(--ar-orange-dark); box-shadow: var(--shadow-sm);
}
.sig-icon svg{ width:20px; height:20px; }
.sig-body{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:1.6rem 1.5rem 1.75rem; }
.sig-body h3{ color:#fff; font-size: var(--fs-md); font-weight:700; line-height:1.24; }
.sig-desc{
  color: rgba(255,255,255,0.82); font-size: var(--fs-xs); line-height:1.5; margin-top:0;
  max-height:0; opacity:0; overflow:hidden; transition: max-height 0.4s var(--ease-soft), opacity 0.35s var(--ease), margin-top 0.35s var(--ease);
}
.sig-cta{
  display:inline-flex; align-items:center; gap:0.5rem; margin-top:0; font-size: var(--fs-xxs); font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:#fff;
  max-height:0; opacity:0; overflow:hidden; transition: max-height 0.4s var(--ease-soft), opacity 0.35s var(--ease), margin-top 0.35s var(--ease);
}
.sig-cta .arrow{ color: var(--ar-orange-light); transition: transform 0.35s var(--ease); }

.sig-card:hover img, .sig-card.is-active img{ transform: scale(1.03); }
.sig-card:hover::after, .sig-card.is-active::after{ height:64%; }
.sig-card:hover .sig-desc, .sig-card.is-active .sig-desc{ max-height:60px; opacity:1; margin-top:0.55rem; }
.sig-card:hover .sig-cta, .sig-card.is-active .sig-cta{ max-height:30px; opacity:1; margin-top:0.7rem; }
.sig-card:hover .sig-cta .arrow, .sig-card.is-active .sig-cta .arrow{ transform: translateX(4px); }

/* Two-row manual services slider (Task 12) — each row is an independent
   .card-carousel instance (same native scroll-snap engine as Featured
   Projects / Testimonials, wired up generically by initCardCarousels() for
   every .card-carousel on the page), sized to the existing .sig-card
   proportions instead of the generic 3-up grid. No autoplay, no infinite
   loop — purely user-driven via each row's own prev/next arrows, and the
   two rows never affect each other since each carousel manages its own
   track/arrows. */
.sig-rows{ display:flex; flex-direction:column; gap:2.75rem; margin-top: var(--gap-lg); }
.sig-row-label{
  display:block; font-size: var(--fs-xxs); font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--text-muted); margin-bottom:1rem;
}
.card-carousel--svc{ margin-top:0; }
.card-carousel--svc .cc-item{ flex:0 0 auto; width:min(300px,72vw); }
@media (max-width:640px){ .card-carousel--svc .cc-item{ width:min(260px,74vw); } }

.sig-footer{ text-align:center; margin-top:3rem; }
.btn-pill{ border-radius:999px; padding:1.15rem 2.5rem; }

@media (prefers-reduced-motion: reduce){
  .sig-card img, .sig-card::after, .sig-desc, .sig-cta, .sig-cta .arrow{ transition:none; }
}

/* ---------- Project / Portfolio cards ---------- */
.filter-bar{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom: var(--gap-lg); }
.filter-btn{ padding:0.65rem 1.4rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--border-light); border-radius:30px; color: var(--text-muted); transition: all var(--dur-fast) var(--ease); }
.filter-btn:hover{ border-color: var(--ar-orange); color: var(--ar-orange); }
.filter-btn.active{ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; }

.project-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--gap-lg); }
.project-card{ opacity:1; transform:scale(1); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.project-card.is-hidden{ display:none; }
.project-card figure{ position:relative; overflow:hidden; border-radius: var(--radius-md); aspect-ratio: 4/5; }
.project-card img{ width:100%; height:100%; object-fit:cover; transition: transform 0.8s var(--ease-soft); }
.project-card:hover img{ transform: scale(1.07); }
.project-card figure::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, var(--scrim-light) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity:0; transition: opacity var(--dur-fast) var(--ease); }
.project-card:hover figure::after{ opacity:1; }
.project-card .tag{ position:absolute; top:1.1rem; left:1.1rem; background: rgba(255,255,255,0.92); color: var(--graphite); font-size:var(--fs-xxs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:0.4rem 0.8rem; border-radius:20px; }
.project-card .explore{ position:absolute; left:1.1rem; bottom:1.1rem; right:1.1rem; color: var(--ar-orange-dark); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; display:flex; align-items:center; gap:0.5rem; opacity:0; transform: translateY(8px); transition: all var(--dur-fast) var(--ease); }
.project-card:hover .explore{ opacity:1; transform:translateY(0); }
.project-card .meta{ margin-top:1.1rem; }
.project-card .meta h3{ font-size: var(--fs-lg); }
.project-card .meta p{ margin-top:0.3rem; color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width:900px){ .project-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .project-grid{ grid-template-columns: 1fr; } }

/* ---------- Turnkey advantage (dark numbered list) ---------- */
.advantage-list{ display:grid; grid-template-columns: repeat(2,1fr); border-top:1px solid var(--border-light); margin-top: var(--gap-xl); }
.advantage-item{ display:flex; gap:1.6rem; padding:2.1rem 1.5rem 2.1rem 0; border-bottom:1px solid var(--border-light); }
.advantage-item:nth-child(odd){ border-right:1px solid var(--border-light); padding-right:2.4rem; }
.advantage-item:nth-child(even){ padding-left:2.4rem; }
.advantage-item .idx{ font-family: var(--font-display); font-size:1.36rem; color: var(--ar-orange-dark); flex-shrink:0; }
.advantage-item h4{ color: var(--graphite); font-size:0.98rem; font-family:var(--font-sans); font-weight:700; }
.advantage-item p{ margin-top:0.5rem; color: var(--text-muted); font-size:var(--fs-sm); }
@media (max-width:760px){ .advantage-list{ grid-template-columns:1fr; } .advantage-item:nth-child(odd){ border-right:none; padding-right:0; } .advantage-item:nth-child(even){ padding-left:0; } }

/* ---------- Service tiles (icon-based) ---------- */
.svc-tile{ position:relative; padding:2.2rem 1.8rem; border:1px solid var(--border-light); border-radius: var(--radius-md); background: var(--warm-white); transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.svc-tile:hover{ border-color: var(--ar-orange); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.svc-icon{ width:52px; height:52px; border-radius:50%; background: var(--stone); color: var(--graphite); display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.svc-icon svg{ width:24px; height:24px; }
.svc-tile:hover .svc-icon{ background: var(--ar-orange); color:#fff; }
.svc-tile h4{ font-size:0.89rem; }
.svc-tile ul{ margin-top:0.9rem; display:flex; flex-direction:column; gap:0.5rem; }
.svc-tile li{ font-size: var(--fs-sm); color: var(--text-muted); padding-left:1.1rem; position:relative; }
.svc-tile li::before{ content:''; position:absolute; left:0; top:0.6em; width:6px; height:1.5px; background: var(--ar-orange); }

/* ---------- Why Choose Tiles (homepage only) ---------- */
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.75rem; }
.why-tile{
  position:relative; text-align:left; background: var(--warm-white);
  border:1px solid var(--border-stone); border-radius:26px;
  padding:2.6rem 2.4rem 2.8rem;
  box-shadow: 0 2px 14px rgba(32,33,36,0.04);
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.why-tile:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--ar-orange); }
.section-blue .why-tile{ border-color: var(--ar-blue-border); box-shadow: 0 2px 14px rgba(23,33,43,0.05); }
.section-blue .why-icon{ background: var(--ar-light-blue-soft); }
.why-icon{
  width:88px; height:88px; border-radius:50%; background: var(--stone);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.8rem; flex-shrink:0;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-soft);
}
.why-tile:hover .why-icon{ transform: scale(1.06); }
.why-icon svg{ width:42px; height:42px; display:block; }
.why-tile h3{ font-size:1.06rem; margin-bottom:0.8rem; }
.why-tile p{ color: var(--text-muted); font-size: var(--fs-sm); max-width:34ch; }
@media (max-width:1024px){ .why-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){
  .why-grid{ grid-template-columns: 1fr; gap:1.2rem; }
  .why-tile{ padding:2.1rem 1.8rem 2.3rem; }
  .why-icon{ width:74px; height:74px; margin-bottom:1.4rem; }
  .why-icon svg{ width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){ .why-tile, .why-icon{ transition:none; } }

/* ---------- Compare panel (old way vs AR way) ---------- */
.split-compare{ display:grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-md); }
.split-compare .panel{ padding:2.6rem 2.2rem; }
.split-compare .panel-bad{ background: var(--stone); }
.split-compare .panel-good{ background: var(--warm-white); border:2px solid var(--ar-orange); }
.split-compare .panel-good h3{ color: var(--graphite); }
.split-compare .panel-tag{ font-size: var(--fs-xxs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color: var(--graphite-soft); margin-bottom:0.8rem; }
.split-compare .panel-good .panel-tag{ color: var(--ar-orange-dark); }
.split-compare ul{ margin-top:1.4rem; display:flex; flex-direction:column; gap:0.9rem; }
.split-compare li{ display:flex; gap:0.7rem; font-size: var(--fs-sm); align-items:flex-start; line-height:1.5; }
.split-compare .panel-bad li::before{ content:'✕'; color: var(--graphite-soft); font-weight:700; flex-shrink:0; }
.split-compare .panel-good li{ color: var(--text-body); }
.split-compare .panel-good li::before{ content:'✓'; color: var(--ar-orange); font-weight:700; flex-shrink:0; }
@media (max-width:760px){ .split-compare{ grid-template-columns:1fr; } }

/* ---------- Slim stat band ---------- */
.section-slim{ padding: var(--section-pad-sm) 0; }

/* ---------- Process steps ---------- */
.process-rail{ position:relative; margin-top: var(--gap-xl); }
.process-line{ position:absolute; left:29px; top:10px; bottom:10px; width:1px; background: var(--border-light); }
.process-line-fill{ position:absolute; left:0; top:0; width:100%; height:0%; background: var(--ar-orange); transition: height 0.2s linear; }
.process-step{ display:grid; grid-template-columns:60px 1fr; gap:1.8rem; padding-bottom: var(--gap-xl); position:relative; }
.process-step:last-child{ padding-bottom:0; }
.process-num{ width:60px; height:60px; border-radius:50%; border:1px solid var(--border-light); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-size:1.11rem; background: var(--warm-white); z-index:1; }
.process-step h3{ font-size: var(--fs-lg); }
.process-step p{ margin-top:0.6rem; color: var(--text-muted); max-width:60ch; }

/* ---------- Project Showcase — masonry gallery (homepage) ---------- */
.showcase-grid{ display:grid; grid-template-columns: repeat(4,1fr); grid-auto-rows:150px; grid-auto-flow:dense; gap:1.1rem; }
.showcase-item{ position:relative; overflow:hidden; border-radius: var(--radius-md); isolation:isolate; }
.showcase-item.s-tall{ grid-row: span 2; }
.showcase-item.s-wide{ grid-column: span 2; }
.showcase-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:none; opacity:1; transition: transform 0.8s var(--ease-soft); }
.showcase-item:hover img{ transform: scale(1.03); }
/* A faint resting scrim (Task 6: "subtle overlay" at rest) strengthens to a
   near-opaque, closer gradient ramp on hover so the caption has real contrast
   — plain dark gradient (no backdrop-filter); touch devices get the hover
   state via the .is-active class (main.js tap toggle).
   z-index is required here: ::after is generated AFTER .showcase-cap in the
   box's child order, so with both boxes position:absolute and no explicit
   z-index it used to paint on top of the caption — that's what was making
   the hover title look washed out/illegible. Overlay now sits below (z-index:1,
   pointer-events:none so it never intercepts clicks/taps) and the caption
   sits above (z-index:2). */
.showcase-item::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(0deg, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.78) 38%, rgba(10,9,8,0.18) 72%, rgba(10,9,8,0) 100%); opacity:0.32; transition: opacity 0.35s ease; }
.showcase-item:hover::after, .showcase-item.is-active::after{ opacity:1; }
.showcase-cap{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:2; color:#fff; transform:translateY(10px); opacity:0; transition: transform 0.35s ease, opacity 0.35s ease; }
.showcase-item:hover .showcase-cap, .showcase-item.is-active .showcase-cap{ transform:translateY(0); opacity:1; }
.showcase-cap .cat{ font-size:var(--fs-xxs); text-transform:uppercase; letter-spacing:0.1em; color: var(--ar-orange-light); font-weight:700; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.showcase-cap .ttl{ display:block; font-family: var(--font-display); font-size:clamp(0.83rem,0.72rem+0.43vw,1.06rem); font-weight:700; margin-top:0.3rem; line-height:1.3; color:#fff; text-shadow: 0 1px 4px rgba(0,0,0,0.55); }
@media (max-width:900px){
  .showcase-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:560px){
  .showcase-grid{ grid-template-columns: 1fr; grid-auto-rows:240px; }
  .showcase-item.s-tall{ grid-row: span 1; }
  .showcase-item.s-wide{ grid-column: span 1; }
  /* Titles must stay readable without a hover/tap on small mobile screens
     (no pointer to hover with) — keep a permanent, moderate scrim instead of
     relying on the :hover/.is-active trigger. */
  .showcase-item::after{ opacity:0.62; }
  .showcase-cap{ opacity:1; transform:translateY(0); }
}

/* ---------- Inspiration gallery slider (homepage) ----------
   Two full 3x2 .showcase-grid slides sit side by side inside a 200%-wide
   track; only one slide's worth (50% of the track) is ever visible at a
   time via translateX, so the two grids never show simultaneously. */
.inspiration-slider{ position:relative; margin-top: var(--gap-lg); }
/* Arrows flank the viewport, vertically centered (Task 2) — absolutely
   positioned against .inspiration-viewport instead of grouped above the grid. */
.inspiration-arrow{
  position:absolute; top:50%; transform:translateY(-50%) scale(1); z-index:5;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border-light); background: var(--warm-white);
  display:flex; align-items:center; justify-content:center; color: var(--graphite); flex-shrink:0;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.inspiration-arrow:hover{ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; transform: translateY(-50%) scale(1.06); }
.inspiration-arrow.is-disabled{ opacity:0.35; pointer-events:none; }
.inspiration-arrow.inspiration-prev{ left:-20px; }
.inspiration-arrow.inspiration-next{ right:-20px; }
@media (max-width:900px){
  .inspiration-arrow{ width:40px; height:40px; }
  .inspiration-arrow.inspiration-prev{ left:-2px; }
  .inspiration-arrow.inspiration-next{ right:-2px; }
}
.inspiration-viewport{ position:relative; overflow:hidden; }
.inspiration-track{ display:flex; width:200%; transition: transform 0.6s var(--ease); will-change: transform; }
.inspiration-slide{ flex:0 0 50%; min-width:0; }
.inspiration-grid{ grid-auto-rows:230px; }
@media (max-width:900px){ .inspiration-grid{ grid-auto-rows:200px; } }
@media (max-width:560px){ .inspiration-grid{ grid-auto-rows:220px; } }
@media (prefers-reduced-motion: reduce){ .inspiration-track{ transition:none; } }

/* ---------- Testimonials — infinite marquee (homepage) ---------- */
/* Two identical .testi-track-inner rows sit side by side (not stacked) so the
   single-row marquee can slide the pair as one continuous strip and loop
   seamlessly once the first row's width has scrolled past */
.testi-marquee{
  overflow:hidden; position:relative; cursor:grab; margin-top: var(--gap-xl);
  display:flex; gap:1.6rem; align-items:flex-start;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-marquee .testi-track-inner{ flex:0 0 auto; }
.testi-marquee.dragging{ cursor:grabbing; }
.testi-track-inner{ display:flex; gap:1.6rem; width:max-content; will-change: transform; }
.testi-card{
  flex:0 0 auto; width:min(420px,86vw); min-height:300px; background: var(--warm-white); color: var(--graphite);
  border:1px solid var(--border-stone); border-radius:24px; padding:2.2rem 2.1rem; box-shadow: var(--shadow-sm);
}
.testi-card{ display:flex; flex-direction:column; }
.testi-card .stars{ display:flex; gap:3px; color: var(--ar-orange); margin-bottom:1rem; }
.testi-card .stars svg{ width:15px; height:15px; }
.testi-card blockquote{ font-family: var(--font-display); font-size:0.89rem; line-height:1.55; color: var(--graphite); flex:1; }
.testi-card blockquote::before{ content:'\201C'; color: var(--ar-orange); }
.testi-card .testi-foot{ display:flex; align-items:center; gap:0.9rem; margin-top:1.6rem; }
.testi-card .testi-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background: var(--ar-orange-tint); color: var(--ar-orange-dark);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:0.72rem;
}
.testi-card .testi-name{ font-weight:700; }
.testi-card .testi-role{ color: var(--text-muted); font-size: var(--fs-sm); margin-top:0.1rem; }
@media (prefers-reduced-motion: reduce){
  .testi-marquee{ overflow-x:auto; cursor:auto; -webkit-mask-image:none; mask-image:none; }
  .testi-track-inner{ scroll-snap-type:x mandatory; }
  .testi-card{ scroll-snap-align:start; }
}

/* ---------- Ready to Build — CTA + consultation form (homepage) ---------- */
/* Light orange-to-white wash, no dark image overlay — the form sits in a
   light glass card matching every other light-panel-on-photo pattern on the site. */
.ready-band{ position:relative; padding: var(--section-pad) 0; overflow:hidden; background: linear-gradient(135deg, var(--ar-orange-tint) 0%, var(--warm-white) 100%); }
.ready-grid{ position:relative; z-index:1; display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xl); align-items:start; }
.ready-content{ color: var(--graphite); padding-top:0.5rem; }
.ready-content h2{ color: var(--graphite); margin-top:1rem; }
.ready-content > p{ margin-top:1.4rem; color: var(--text-muted); font-size: var(--fs-md); max-width:48ch; }
.ready-contacts{ margin-top:2.6rem; display:flex; flex-direction:column; gap:1.7rem; }
.ready-contact{ display:flex; gap:1.1rem; align-items:flex-start; }
.ready-icon{
  width:50px; height:50px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(249,115,22,0.3); background: var(--warm-white); color: var(--ar-orange);
  display:flex; align-items:center; justify-content:center;
}
.ready-contact h4{ color: var(--graphite); font-size:0.85rem; font-family: var(--font-sans); font-weight:700; }
.ready-contact a, .ready-contact p{ margin-top:0.3rem; color: var(--text-muted); font-size: var(--fs-sm); }
.ready-contact a:hover{ color: var(--ar-orange-dark); }

.consult-panel{
  background: rgba(255,255,255,0.7); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.6); border-radius:24px; padding: clamp(1.8rem,2vw,2.8rem);
  box-shadow: var(--shadow-lg);
}
.consult-panel h3{ color: var(--graphite); font-size:1.28rem; }
.consult-panel .form-grid{ margin-top:1.6rem; }
.consult-panel .field label{ color: var(--graphite); }
.consult-panel .field input, .consult-panel .field select, .consult-panel .field textarea{
  background: var(--warm-white); border-color: var(--border-light); color: var(--graphite);
}
.consult-panel .btn-primary{ width:100%; margin-top:1.6rem; justify-content:center; }
.consult-privacy{ text-align:center; margin-top:1rem; font-size: var(--fs-xs); color: var(--text-muted); }
@media (max-width:900px){ .ready-grid{ grid-template-columns:1fr; } }

/* ---------- Materials / craftsmanship grid ---------- */
.materials-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-top: var(--gap-xl); }
.materials-grid figure{ position:relative; overflow:hidden; border-radius: var(--radius-sm); aspect-ratio:1; }
.materials-grid img{ width:100%; height:100%; object-fit:cover; transition: transform 0.7s var(--ease-soft); }
.materials-grid figure:hover img{ transform:scale(1.1); }
.materials-grid figcaption{ position:absolute; left:0.9rem; bottom:0.8rem; color: var(--graphite); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.materials-grid figure::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--scrim-light), transparent 55%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width:900px){ .materials-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Before / After slider ---------- */
.compare{ position:relative; width:100%; aspect-ratio:16/10; border-radius: var(--radius-md); overflow:hidden; user-select:none; box-shadow: var(--shadow-md); }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.compare .compare-after{ clip-path: inset(0 0 0 50%); }
.compare .compare-handle{ position:absolute; top:0; bottom:0; left:50%; width:0; transform:translateX(-50%); cursor:ew-resize; }
.compare .compare-handle::before{ content:''; position:absolute; top:0; bottom:0; left:0; width:2px; background:#fff; transform:translateX(-1px); }
.compare .handle-btn{ position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); gap:4px; }
.compare .handle-btn::before, .compare .handle-btn::after{ content:''; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.compare .handle-btn::before{ border-right:7px solid var(--graphite); }
.compare .handle-btn::after{ border-left:7px solid var(--graphite); }
.compare-label{ position:absolute; top:1.1rem; font-size:var(--fs-xxs); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--graphite); background: rgba(255,255,255,0.92); padding:0.4rem 0.9rem; border-radius:20px; }
.compare-label.before{ left:1.1rem; }
.compare-label.after{ right:1.1rem; }
.compare-caption{ text-align:center; margin-top:1.2rem; font-family:var(--font-display); font-size:1.02rem; }

/* ---------- Testimonials ---------- */
.testi-track{ position:relative; overflow:hidden; }
.testi-slide{ display:none; grid-template-columns: 0.85fr 1.15fr; gap: var(--gap-xl); align-items:center; }
.testi-slide.active{ display:grid; animation: fadeIn 0.6s var(--ease); }
.testi-slide img{ border-radius: var(--radius-md); aspect-ratio:4/5; object-fit:cover; width:100%; }
.testi-quote{ font-family: var(--font-display); font-size: clamp(1.19rem,0.94rem+1.02vw,1.7rem); line-height:1.4; color: var(--graphite); }
.testi-quote::before{ content:'\201C'; color: var(--ar-orange); }
.testi-name{ margin-top:1.6rem; font-weight:700; letter-spacing:0.02em; }
.testi-role{ color: var(--text-muted); font-size: var(--fs-sm); margin-top:0.2rem; }
.testi-nav{ display:flex; gap:0.8rem; margin-top:2.2rem; }
.testi-dot{ width:9px; height:9px; border-radius:50%; background: var(--border-light); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.testi-dot.active{ background: var(--ar-orange); transform:scale(1.2); }
@media (max-width:800px){ .testi-slide{ grid-template-columns:1fr; } .testi-slide img{ aspect-ratio:16/10; } }

/* ---------- Counters / thin trust bar ---------- */
.stats-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--gap-lg); margin-top: var(--gap-md); }
.stat{ text-align:center; padding: var(--gap-sm) var(--gap-sm); border-left:1px solid var(--border-light); }
.stat:first-child{ border-left:none; }
.stat .num{ font-family: var(--font-display); font-size: clamp(1.36rem,1.11rem+1.02vw,2.04rem); color: var(--ar-orange); }
.stat .label{ margin-top:0.3rem; font-size: var(--fs-xs); letter-spacing:0.08em; text-transform:uppercase; color: var(--text-muted); }
@media (max-width:760px){ .stats-row{ grid-template-columns: repeat(2,1fr); } .stat:nth-child(odd){ border-left:none; } }

/* ---------- Stats strip (homepage thin trust band) ---------- */
.stats-strip{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  max-width:900px; margin:0 auto;
}
.stats-strip .stat{
  flex:1 1 0; min-width:130px; padding:0 var(--gap-lg); border-left:1px solid var(--ar-blue-border);
}
.stats-strip .stat:first-child{ border-left:none; }
.stats-strip .stat .num{ font-size: clamp(1.22rem,0.98rem+0.94vw,1.6rem); line-height:1; }
.stats-strip .stat .label{ font-size: var(--fs-xxs); margin-top:0.15rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--graphite); line-height:1.25; }
.stats-strip .stat .label span{ display:block; font-weight:500; letter-spacing:0.04em; color: var(--text-muted); font-size:0.94em; text-transform:none; margin-top:0.05rem; line-height:1.25; }
@media (max-width:760px){
  .stats-strip .stat{ padding:0 var(--gap-sm); }
}
@media (max-width:640px){
  .stats-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 0; max-width:360px; }
  .stats-strip .stat{ padding:0 0.5rem; }
  .stats-strip .stat:nth-child(odd){ border-left:none; }
}

/* Tight, controlled gap between the Stats band and the Our Partners section —
   sibling sections share .section-slim, so this collapses the combined
   padding to a single ~20-32px seam instead of stacking both sides' padding. */
.section-slim + .section-slim{ padding-top:0; }

/* ---------- FAQ Accordion ---------- */
.faq-list{ border-top:1px solid var(--border-light); }
.faq-item{ border-bottom:1px solid var(--border-light); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; text-align:left; font-family: var(--font-display); font-size:var(--fs-md); }
.faq-q .plus{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background: var(--graphite); transition: transform var(--dur-fast) var(--ease); }
.faq-q .plus::before{ top:50%; left:0; width:100%; height:1.5px; transform:translateY(-50%); }
.faq-q .plus::after{ left:50%; top:0; height:100%; width:1.5px; transform:translateX(-50%); }
.faq-item.open .plus::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease-soft); }
.faq-a p{ padding-bottom:1.6rem; color: var(--text-muted); max-width:70ch; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---------- Homepage FAQ — 3-column illustrated layout (scoped, .faq-premium only) ----------
   Task 13: a 200px|1fr|200px grid reserves side gutters for two decorative
   interior-vignette illustrations flanking the FAQ list; .faq-premium-main's
   own max-width:760px + margin:0 auto still centres the accordion within its
   own (middle) column. */
.faq-premium{ position:relative; }
.faq-premium-grid{ display:grid; grid-template-columns: 200px 1fr 200px; gap: var(--gap-xl); align-items:start; }
.faq-premium-main{ max-width:760px; margin:0 auto; width:100%; }
.faq-premium .section-head{ margin-bottom:2.4rem; }

/* Decorative side illustrations — purely presentational (aria-hidden), so
   they only ever add visual rhythm and never compete with the FAQ content. */
.faq-premium-deco{ position:relative; padding-top:2.5rem; }
.faq-premium-deco-blob{
  position:absolute; top:2rem; left:50%; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50%; background: var(--ar-light-blue);
  z-index:0;
}
.faq-premium-deco svg{ position:relative; z-index:1; width:100%; max-width:200px; display:block; margin:0 auto; }
.faq-premium-deco-left svg{ animation: faqDecoFloat 6s ease-in-out infinite; }
.faq-premium-deco-right svg{ animation: faqDecoFloat 6s ease-in-out infinite; animation-delay:-3s; }
@keyframes faqDecoFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .faq-premium-deco-left svg, .faq-premium-deco-right svg{ animation:none; }
}

/* Illustration colour tokens — fill/stroke only ever reference the palette
   documented for this feature; charcoal (fi-outline) is stroke-only, never
   a fill, per the site's brand rule. */
.faq-premium-deco .fi-line{ stroke: var(--graphite); fill:none; }
.faq-premium-deco .fi-outline{ stroke: var(--graphite); }
.faq-premium-deco .fi-border{ stroke: var(--border-light); fill:none; }
.faq-premium-deco .fi-ring-orange{ stroke: var(--ar-orange); fill:none; }
.faq-premium-deco .fi-orange{ fill: var(--ar-orange); }
.faq-premium-deco .fi-orange-light{ fill: var(--ar-orange-light); }
.faq-premium-deco .fi-orange-dark{ fill: var(--ar-orange-dark); }
.faq-premium-deco .fi-orange-tint{ fill: var(--ar-orange-tint); }
.faq-premium-deco .fi-blue{ fill: var(--ar-light-blue); }
.faq-premium-deco .fi-blue-accent{ fill: var(--ar-blue-accent); }
.faq-premium-deco .fi-stone{ fill: var(--stone); }
.faq-premium-deco .fi-stone-dark{ fill: var(--stone-dark); }
.faq-premium-deco .fi-white{ fill: var(--warm-white); }

@media (max-width:1024px){
  .faq-premium-grid{ grid-template-columns: 110px 1fr 110px; gap: var(--gap-lg); }
  .faq-premium-deco{ padding-top:1.5rem; }
  .faq-premium-deco svg{ max-width:150px; }
  .faq-premium-deco-blob{ width:110px; height:110px; top:1.4rem; }
}
@media (max-width:760px){
  .faq-premium-grid{ grid-template-columns: 1fr; gap:0; }
  .faq-premium-main{ order:1; }
  .faq-premium-deco-right{ display:none; }
  .faq-premium-deco-left{
    order:2; max-width:200px; margin:2rem auto 0; opacity:0.55; padding-top:0;
  }
  .faq-premium-deco-left .faq-premium-deco-blob{ width:130px; height:130px; top:0.6rem; }
  .faq-premium-deco-left svg{ max-width:130px; }
}

/* Card-style accordion rows, layered on top of the shared .faq-item/.faq-q/.plus rules above */
.faq-premium .faq-list{ border-top:none; display:flex; flex-direction:column; gap:0.9rem; }
.faq-premium .faq-item{
  border:1px solid var(--border-light); border-radius:16px; background: var(--warm-white);
  padding:0 1.7rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.faq-premium .faq-item:hover{ border-color: var(--ar-blue-accent); }
.faq-premium .faq-item.open{ border-color: var(--ar-orange); box-shadow: var(--shadow-sm); }
.faq-premium .faq-q{ padding:1.3rem 0; color: var(--graphite); transition: color var(--dur-fast) var(--ease); }
.faq-premium .faq-q:hover{ color: var(--ar-orange-dark); }
.faq-premium .faq-badge{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
}
.faq-premium .faq-item:hover .faq-badge{ border-color: var(--ar-blue-accent); }
.faq-premium .faq-item.open .faq-badge{ border-color: var(--ar-orange); background: var(--ar-orange-tint); transform: rotate(180deg); }

/* Smooth height + opacity accordion (overrides the shared max-height technique, scoped only here) */
.faq-premium .faq-a{
  display:grid; grid-template-rows:0fr; max-height:none; opacity:0;
  transition: grid-template-rows var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft);
}
.faq-premium .faq-a-inner{ overflow:hidden; }
.faq-premium .faq-a p{ padding-top:0.2rem; }
.faq-premium .faq-item.open .faq-a{ grid-template-rows:1fr; opacity:1; }

@media (max-width:760px){
  .faq-premium .faq-item{ padding:0 1.25rem; }
}

/* ---------- CTA Band ---------- */
/* Flat light-orange band, no photo — per brand rules a CTA band never sits on
   a dark image overlay. The .cta-media image markup (still present on many
   pages) is intentionally hidden rather than deleted from each page's HTML. */
.cta-band{ position:relative; padding: var(--section-pad-sm) 0; text-align:center; overflow:hidden; background: var(--ar-orange-tint); }
.cta-band .cta-media{ display:none; }
.cta-band .cta-content{ position:relative; z-index:1; color: var(--graphite); }
.cta-band h2{ color: var(--graphite); }
.cta-band .btn-row{ justify-content:center; margin-top:2.2rem; }

/* ---------- Forms ---------- */
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.4rem; }
.field{ display:flex; flex-direction:column; gap:0.5rem; }
.field.full{ grid-column: 1/-1; }
.field label{ font-size: var(--fs-xs); font-weight:700; letter-spacing:0.04em; color: var(--graphite); }
.field input, .field select, .field textarea{
  padding:0.95rem 1.1rem; border:1px solid var(--border-light); border-radius: var(--radius-sm); background: var(--warm-white);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--ar-orange); box-shadow: 0 0 0 3px var(--ar-orange-tint); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.consent{ display:flex; align-items:flex-start; gap:0.7rem; font-size:var(--fs-xs); color:var(--text-muted); }
.consent input{ margin-top:0.2rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* Multi-step form */
.step-progress{ display:flex; gap:0.5rem; margin-bottom: var(--gap-lg); }
.step-progress .bar{ flex:1; height:3px; background: var(--border-light); border-radius:3px; overflow:hidden; }
.step-progress .bar span{ display:block; height:100%; width:0%; background: var(--ar-orange); transition: width var(--dur-med) var(--ease); }
.step-progress .bar.done span{ width:100%; }
.step-labels{ display:flex; justify-content:space-between; margin-bottom:0.6rem; font-size:var(--fs-xxs); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-muted); }
.step-labels .current{ color: var(--ar-orange); font-weight:700; }
.form-step{ display:none; }
.form-step.active{ display:block; animation: fadeIn 0.4s var(--ease); }
.step-nav{ display:flex; justify-content:space-between; margin-top:2rem; }
.chip-group{ display:flex; flex-wrap:wrap; gap:0.7rem; }
.chip{ position:relative; padding:0.7rem 1.2rem; border:1px solid var(--border-light); border-radius:30px; font-size:var(--fs-sm); cursor:pointer; transition: all var(--dur-fast) var(--ease); }
/* Input stays in the tab order and keeps native check semantics — visually
   hidden (not display:none) so it remains focusable for keyboard users. */
.chip input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.chip.selected, .chip:has(input:checked){ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; }
.chip:has(input:focus-visible){ outline:2px solid var(--ar-orange); outline-offset:2px; }

.field-error{ display:none; align-items:center; gap:0.6rem; margin-top:1rem; padding:0.7rem 1rem; background: var(--ar-orange-tint); border:1px solid var(--ar-orange-light); border-radius: var(--radius-sm); color: var(--ar-orange-dark); font-size:var(--fs-sm); font-weight:600; }
.field-error.show{ display:flex; }
.field-error svg{ flex-shrink:0; }
.form-success{ text-align:center; padding: var(--gap-xl) 0; }
.form-success h2{ margin-top:1rem; }
.form-success p{ margin-top:1rem; color: var(--text-muted); max-width:50ch; margin-left:auto; margin-right:auto; }

/* ---------- Contact — "Our Location" map embed ---------- */
.contact-map{
  margin-top: var(--gap-xl);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ar-blue-border);
  box-shadow: var(--shadow-sm);
  background: var(--warm-white);
  line-height: 0;
}
.contact-map iframe{
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}
@media (max-width:900px){ .contact-map iframe{ height: 380px; } }
@media (max-width:560px){ .contact-map iframe{ height: 300px; } }

/* ---------- Footer ---------- */
/* Premium deep-black footer — the one intentional home for a black background
   on the site (everywhere else stays white/off-white per the brand rule). */
.site-footer{ background: var(--footer-bg); color: var(--footer-text); border-top:none; }

/* Footer CTA strip — a white card floating on the black footer, sits above the column grid */
.footer-cta{ padding: var(--gap-xl) 0; border-bottom:1px solid var(--footer-border); }
.footer-cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; padding: clamp(2rem,2vw,3rem) clamp(2rem,3vw,3.6rem); border:1px solid var(--ar-orange-tint); border-radius:28px; background: var(--warm-white); }
.footer-cta-text h2{ color: var(--graphite); font-size: var(--fs-h3); }
.footer-cta-text p{ margin-top:0.8rem; color: var(--text-muted); font-size: var(--fs-md); max-width:52ch; }
.footer-cta .btn{ flex-shrink:0; }
@media (max-width:760px){ .footer-cta-inner{ padding:1.8rem; border-radius:20px; } .footer-cta .btn{ width:100%; justify-content:center; } }

.footer-grid{ display:grid; grid-template-columns: 1.3fr 0.85fr 1fr 1fr; gap: var(--gap-lg); padding: var(--section-pad) 0 var(--gap-xl); border-bottom:1px solid var(--footer-border); }
/* White tile around the logo — the footer's only white-on-black chip, giving
   the dark-wordmark AR Enterprises logo full clarity against the black bg. */
.footer-brand .footer-logo-wrap{ display:inline-flex; margin-bottom:1.4rem; background:#fff; border-radius:12px; padding:0.95rem 1.3rem; }
.footer-brand .footer-logo-wrap .brand-logo{ height:73px; }
@media (max-width:560px){ .footer-brand .footer-logo-wrap .brand-logo{ height:62px; } .footer-brand .footer-logo-wrap{ padding:0.8rem 1.1rem; } }
.footer-brand p{ max-width:34ch; font-size:var(--fs-sm); color: var(--footer-text); }
.footer-social{ display:flex; gap:0.9rem; margin-top:1.6rem; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--footer-border); background: rgba(255,255,255,0.05); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; transition: all var(--dur-fast) var(--ease); }
.footer-social a:hover{ background: var(--ar-orange); border-color: var(--ar-orange); color:#fff; }
.footer-col h6{ color:#fff; font-size:var(--fs-xs); letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1.3rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:0.8rem; }
.footer-col a{ font-size:var(--fs-sm); color: var(--footer-text); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover{ color: var(--ar-orange-light); }
.footer-col address{ font-style:normal; font-size:var(--fs-sm); line-height:1.8; }
.footer-contact{ display:flex; flex-direction:column; gap:1.1rem; }
.footer-contact li{ display:flex; align-items:flex-start; gap:0.8rem; font-size:var(--fs-sm); line-height:1.5; color: var(--footer-text); }
.footer-contact svg{ flex-shrink:0; margin-top:0.15rem; color: var(--ar-orange-light); }
.footer-contact a{ color: var(--footer-text); }
.footer-contact a:hover{ color: var(--ar-orange-light); }
.footer-bottom{ padding:1.8rem 0; font-size:var(--fs-xs); color: var(--footer-text); }
.footer-bottom-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom ul{ display:flex; gap:1.6rem; }
.footer-bottom a:hover{ color: var(--ar-orange-light); }
.footer-credit{ margin-top:1rem; text-align:center; color: var(--footer-text); opacity:0.6; }
.footer-credit a{ color: var(--footer-text); }
.footer-credit a:hover{ color: var(--ar-orange-light); }
@media (max-width:1100px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; } .footer-bottom-row{ flex-direction:column; align-items:flex-start; } }

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar{ display:none; }
@media (max-width:760px){
  .mobile-cta-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
    background: var(--warm-white); border-top:1px solid var(--border-light); box-shadow: 0 -4px 20px rgba(32,33,36,0.08);
    padding: 0.7rem env(safe-area-inset-right) calc(0.7rem + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  }
  .mobile-cta-bar a{ flex:1; text-align:center; color: var(--graphite); font-size:var(--fs-xs); font-weight:700; letter-spacing:0.04em; padding:0.6rem 0.3rem; display:flex; flex-direction:column; align-items:center; gap:0.3rem; border-right:1px solid var(--border-light); }
  .mobile-cta-bar a:last-child{ border-right:none; }
  .mobile-cta-bar a.highlight{ color: var(--ar-orange-dark); }
  body{ padding-bottom:64px; }
}

/* ---------- Reveal animations ---------- */
.reveal{ opacity:0; transform: translateY(36px); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(0.94); transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft); }
.reveal-scale.in{ opacity:1; transform:scale(1); }
.stagger > *{ opacity:0; transform:translateY(28px); transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft); }
.stagger.in > *{ opacity:1; transform:translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay:0.05s; }
.stagger.in > *:nth-child(2){ transition-delay:0.14s; }
.stagger.in > *:nth-child(3){ transition-delay:0.23s; }
.stagger.in > *:nth-child(4){ transition-delay:0.32s; }
.stagger.in > *:nth-child(5){ transition-delay:0.41s; }
.stagger.in > *:nth-child(6){ transition-delay:0.5s; }
.stagger.in > *:nth-child(7){ transition-delay:0.59s; }
.stagger.in > *:nth-child(8){ transition-delay:0.68s; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .stagger > *{ opacity:1; transform:none; }
  .hero-media img{ animation:none; transform:none; }
}

/* ---------- Check grid (Key Benefits — icon-free tick list) ---------- */
.check-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem 2.6rem; margin-top: var(--gap-xl); }
.check-item{ display:flex; gap:1.1rem; align-items:flex-start; }
.check-item .tick{ width:30px; height:30px; border-radius:50%; background: var(--ar-orange-tint); color: var(--ar-orange-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; font-size:0.72rem; margin-top:0.1rem; }
.check-item h4{ font-size:0.88rem; }
.check-item p{ margin-top:0.35rem; color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width:640px){ .check-grid{ grid-template-columns:1fr; } }

/* ---------- Misc components ---------- */
.divider-line{ height:1px; background: var(--border-light); width:100%; }
.tag-pill{ display:inline-block; padding:0.4rem 1rem; border:1px solid var(--border-light); border-radius:30px; font-size:var(--fs-xs); color: var(--text-muted); }
.pretitle-num{ font-family: var(--font-display); font-size:0.85rem; color: var(--ar-orange); }

/* ---------- Our Partners — infinite logo marquee (built on .testi-marquee engine) ---------- */
/* Logo/card sizes are the previous values scaled up ~30% (gaps scaled with them so spacing stays balanced) */
.partners-marquee.testi-marquee{ margin-top: var(--gap-lg); align-items:center; }
.partners-marquee .testi-track-inner{ gap:2.6rem; align-items:center; }
.partner-card{
  flex:0 0 auto; height:179px; padding:0 0.95rem; display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur-fast) var(--ease);
}
.partner-card:hover{ transform: scale(1.05); }
.partner-card img{ display:block; max-height:82px; max-width:257px; width:auto; height:auto; object-fit:contain; }
@media (max-width:1024px){
  .partners-marquee .testi-track-inner{ gap:2.1rem; }
  .partner-card{ height:156px; padding:0 0.8rem; }
  .partner-card img{ max-height:72px; max-width:224px; }
}
@media (max-width:760px){
  .partners-marquee .testi-track-inner{ gap:1.6rem; }
  .partner-card{ height:140px; padding:0 0.65rem; }
  .partner-card img{ max-height:62px; max-width:195px; }
}

/* ---------- Our Partner — single-brand feature (Godrej) ---------- */
.partner-feature{
  display:flex; align-items:center; justify-content:center; gap:2.2rem;
  margin-top: var(--gap-xl);
}
.partner-feature-rule{ flex:1 1 auto; max-width:180px; height:1px; background: var(--border-light); }
.partner-feature img{ max-height:96px; width:auto; flex-shrink:0; }
@media (max-width:640px){
  .partner-feature{ gap:1rem; }
  .partner-feature-rule{ max-width:48px; }
  .partner-feature img{ max-height:64px; }
}

/* ---------- Video Testimonial cards (homepage — "What Our Clients Say") ----------
   Three real client videos live in assets/images/testimonialvid/ and are shown
   as a plain 3-up grid (2-up tablet, 1-up mobile) — no carousel, since all
   three fit cleanly. The sources have mixed aspect ratios (one 16:9, two
   vertical), so every card is a fixed 4:5 frame and the <video> uses
   object-fit:contain over a branded charcoal ground: nothing is cropped or
   stretched, and the letterbox area reads as intentional. Each <video> also
   carries a 4:5 poster (assets/images/testimonialvid/testimonial-N-thumb.jpg)
   built from that same clip — a sharp real frame centred over a blurred,
   dimmed fill of the frame — so before playback the card shows the actual
   client / finished project, never a blank panel. Native HTML5 only —
   preload="none" means no video bytes load until the visitor presses play
   (the poster is a normal image request), and initVideoTestimonials() in
   main.js adds controls on activation and pauses the other two so they never
   play together. */
.vt-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-top: var(--gap-lg);
}
.video-testi-card{
  position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; isolation:isolate;
  box-shadow: var(--shadow-md); border:1px solid var(--ar-blue-border);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, var(--charcoal) 0%, #2d2f34 55%, var(--charcoal) 100%);
}
.vt-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:transparent; z-index:0;
}
.vt-video:focus-visible{ outline:2px solid var(--ar-orange); outline-offset:-3px; }
.vt-badge{
  position:absolute; top:0.9rem; left:0.9rem; z-index:2;
  font-size: var(--fs-xxs); font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color: rgba(255,255,255,0.82); background: rgba(15,11,8,0.34); backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,0.28); border-radius:20px; padding:0.3rem 0.7rem;
  transition: opacity var(--dur-fast) var(--ease);
}
.vt-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); z-index:3;
  width:64px; height:64px; border-radius:50%; background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; color: var(--ar-orange-dark);
  /* layered: soft drop + a faint dark ring so the button separates on any
     poster, including the bright office frame on card 3 */
  box-shadow: 0 12px 30px rgba(15,11,8,0.34), 0 0 0 6px rgba(15,11,8,0.14);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.vt-play svg{ width:22px; height:22px; }
.vt-play-icon{ display:flex; margin-left:3px; }
.vt-play:hover, .vt-play:focus-visible{ transform: translate(-50%,-50%) scale(1.08); background: var(--ar-orange); color:#fff; }
/* subtle centre spotlight — lifts the play button off the poster, fades out
   the moment the real video takes over */
.video-testi-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(circle at 50% 48%,
    rgba(15,11,8,0.30) 0%, rgba(15,11,8,0.12) 24%, rgba(15,11,8,0) 46%);
  transition: opacity var(--dur-fast) var(--ease);
}
.video-testi-card.is-playing .vt-play,
.video-testi-card.is-playing .vt-badge{ opacity:0; visibility:hidden; pointer-events:none; }
.video-testi-card.is-playing::after{ opacity:0; }
@media (max-width:1024px){
  .vt-grid{ grid-template-columns: repeat(2, 1fr); max-width:760px; margin-left:auto; margin-right:auto; }
  /* keep the lone third card centred instead of stuck hard-left */
  .vt-grid > .video-testi-card:last-child:nth-child(odd){
    grid-column: 1 / -1; justify-self:center; width:calc(50% - var(--gap-lg) / 2);
  }
}
@media (max-width:640px){
  .vt-grid{ grid-template-columns: 1fr; max-width:420px; }
  /* one column: card 3 is a normal full-width item again. Must also clear the
     justify-self:center set in the 1024 rule — the card's children are all
     absolutely positioned, so with width:auto + center it would collapse to 0. */
  .vt-grid > .video-testi-card:last-child:nth-child(odd){
    grid-column:auto; width:auto; justify-self:stretch;
  }
}
@media (prefers-reduced-motion: reduce){ .vt-play, .vt-badge{ transition:none; } }

/* Team cards */
.team-card figure{ overflow:hidden; border-radius: var(--radius-md); aspect-ratio:3/4; }
.team-card img{ width:100%; height:100%; object-fit:cover; transition: transform 0.7s var(--ease-soft); filter:grayscale(0.15); }
.team-card:hover img{ transform:scale(1.06); }
.team-card h4{ margin-top:1.1rem; font-size:var(--fs-md); }
.team-card p{ color: var(--text-muted); font-size:var(--fs-sm); margin-top:0.2rem; }

/* Blog cards */
.blog-card figure{ overflow:hidden; border-radius: var(--radius-md); aspect-ratio:16/11; }
.blog-card img{ width:100%; height:100%; object-fit:cover; transition: transform 0.7s var(--ease-soft); }
.blog-card:hover img{ transform:scale(1.06); }
.blog-card .meta{ display:flex; gap:1rem; margin-top:1.2rem; font-size:var(--fs-xxs); letter-spacing:0.08em; text-transform:uppercase; color: var(--ar-orange); }
.blog-card h3{ margin-top:0.7rem; font-size:var(--fs-lg); }
.blog-card p{ margin-top:0.6rem; color:var(--text-muted); font-size:var(--fs-sm); }

/* Gallery (project detail) */
.gallery-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:1rem; }
.gallery-grid img{ border-radius: var(--radius-sm); width:100%; height:100%; object-fit:cover; }
.gallery-grid .g-span2{ grid-column:span 3; aspect-ratio:4/3; }
.gallery-grid .g-span3{ grid-column:span 4; aspect-ratio:16/10; }
.gallery-grid .g-span1{ grid-column:span 2; aspect-ratio:3/4; }
@media (max-width:760px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } .gallery-grid .g-span2,.gallery-grid .g-span3,.gallery-grid .g-span1{ grid-column: span 2; aspect-ratio:4/3; } }

/* Cursor dot (desktop only, subtle) */
.cursor-dot{ position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background: var(--ar-orange); pointer-events:none; z-index:9999; opacity:0; transform:translate(-50%,-50%); transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease; }
.cursor-dot.show{ opacity:0.8; }
.cursor-dot.grow{ width:34px; height:34px; }
@media (hover:none), (max-width:960px){ .cursor-dot{ display:none; } }

/* Floating CTA group — Back to Top / Email / WhatsApp */
.cta-float-stack{ position:fixed; right:1.6rem; bottom:1.6rem; z-index:800; display:flex; flex-direction:column; align-items:center; gap:0.85rem; }
.cta-float-btn{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; box-shadow: var(--shadow-md); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease-soft); }
.cta-float-btn:hover{ transform: scale(1.07); box-shadow: var(--shadow-lg); }
.back-to-top, .email-float{ background: var(--warm-white); color: var(--ar-orange-dark); border:1px solid var(--border-light); }
.back-to-top{ cursor:pointer; opacity:0; transform:scale(0.6); pointer-events:none; }
.back-to-top.is-visible{ opacity:1; transform:scale(1); pointer-events:auto; }
.back-to-top.is-visible:hover{ transform: scale(1.07); }
.whatsapp-float{ background:#25D366; }
@media (max-width:760px){
  .cta-float-stack{ right:1.1rem; bottom:6.2rem; gap:0.6rem; }
  .cta-float-btn{ width:48px; height:48px; }
}

/* ---------- Meet the Founder ---------- */
.split-media img.founder-photo{ border-radius:22px; box-shadow: var(--shadow-lg); aspect-ratio:1/1; object-fit:cover; object-position:center; }
.founder-meta{ margin-top:1.5rem; }
.founder-meta h4{ font-size:1.02rem; }
.founder-meta span{ display:block; margin-top:0.3rem; font-size:var(--fs-xs); color: var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
.founder-quote{ margin:1.8rem 0; padding-left:1.4rem; border-left:3px solid var(--ar-orange); }

/* ---------- Stats — infinite scrolling wheel ---------- */
.stats-marquee{
  overflow:hidden; position:relative; cursor:grab; margin-top: var(--gap-xl);
  display:flex; gap:1.4rem; align-items:stretch;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stats-marquee .stats-track-inner{ flex:0 0 auto; }
.stats-marquee.dragging{ cursor:grabbing; }
.stats-track-inner{ display:flex; gap:1.4rem; width:max-content; will-change: transform; }
.stats-card{
  flex:0 0 auto; width:min(250px,72vw); text-align:center; background: var(--warm-white);
  border:1px solid var(--border-stone); border-radius:20px; padding:2.3rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.stats-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--ar-orange); }
.stats-card .stats-value{ font-family: var(--font-display); font-weight:700; font-size:clamp(1.32rem,1.11rem+0.77vw,1.79rem); color: var(--ar-orange); }
.stats-card .stats-label{ margin-top:0.6rem; font-size:var(--fs-sm); color: var(--text-muted); font-weight:600; }
@media (prefers-reduced-motion: reduce){
  .stats-marquee{ overflow-x:auto; cursor:auto; -webkit-mask-image:none; mask-image:none; }
  .stats-track-inner{ scroll-snap-type:x mandatory; }
  .stats-card{ scroll-snap-align:start; }
}

/* ---------- Our Values — 4-up grid (built on .why-tile) ---------- */
.values-grid{ grid-template-columns: repeat(4,1fr); }
.values-grid .why-tile{ padding:2.2rem 1.9rem 2.4rem; }
.values-grid .why-icon{ width:74px; height:74px; margin-bottom:1.4rem; }
.values-grid .why-icon svg{ width:36px; height:36px; }
@media (max-width:1024px){ .values-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .values-grid{ grid-template-columns: 1fr; } }

/* Subtle low-opacity architectural grid backdrop */
.section-pattern{ position:relative; }
.section-pattern::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.05;
  background-image: linear-gradient(var(--graphite) 1px, transparent 1px), linear-gradient(90deg, var(--graphite) 1px, transparent 1px);
  background-size: 46px 46px;
}
.section-pattern > *{ position:relative; z-index:1; }

/* ---------- FAQ — intro + accordion layout (About page) ---------- */
.faq-layout{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--gap-xl); align-items:flex-start; }
.faq-intro{ position:sticky; top: calc(var(--header-h) + 24px); }
.faq-deco{ margin-top:2.6rem; max-width:200px; opacity:0.55; }
@media (max-width:900px){
  .faq-layout{ grid-template-columns:1fr; }
  .faq-intro{ position:static; }
  .faq-deco{ display:none; }
}

/* ---------- Design Process — horizontal 6-step timeline (Service pages) ---------- */
.dp-rail{ position:relative; display:grid; grid-template-columns: repeat(6,1fr); gap:1.4rem; margin-top: var(--gap-xl); }
.dp-line{ position:absolute; top:44px; left:0; right:0; height:2px; background: var(--ar-orange); opacity:0.35; z-index:0; }
.dp-step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
.dp-media{ position:relative; width:88px; height:88px; flex-shrink:0; }
.dp-media img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; border:4px solid var(--ar-orange); box-shadow: var(--shadow-md); }
.dp-badge{
  position:absolute; top:-10px; right:-10px; width:32px; height:32px; border-radius:50%;
  background: var(--ar-orange); color:#fff; font-family: var(--font-display); font-weight:700; font-size:0.81rem;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--warm-white); z-index:2;
  box-shadow: 0 2px 8px rgba(32,33,36,0.25);
}
.dp-card{
  margin-top:1.6rem; background: var(--warm-white); border:1px solid var(--border-light); border-radius:16px;
  padding:1.6rem 1.4rem; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.dp-card:hover{ transform: translateY(-4px); border-color: var(--ar-orange); }
.dp-card h3{ font-size:0.87rem; color: var(--graphite); }
.dp-card p{ margin-top:0.55rem; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width:1024px){
  .dp-rail{ grid-template-columns: repeat(3,1fr); gap:2.4rem 1.2rem; }
  .dp-line{ display:none; }
}
@media (max-width:640px){
  .dp-rail{ grid-template-columns: 1fr; gap:0; }
  .dp-step{ flex-direction:row; align-items:flex-start; text-align:left; gap:1.3rem; padding-bottom:2.2rem; position:relative; }
  .dp-step::before{ content:''; position:absolute; left:43px; top:88px; bottom:0; width:2px; background: var(--ar-orange); opacity:0.35; }
  .dp-step:last-child::before{ display:none; }
  .dp-step:last-child{ padding-bottom:0; }
  .dp-media{ width:86px; height:86px; }
  .dp-card{ margin-top:0; flex:1; }
}
@media (prefers-reduced-motion: reduce){ .dp-card{ transition:none; } }

/* ---------- Design System — 4-stage split section (Service pages) ---------- */
.ds-split{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-xl); align-items:start; }
.ds-intro .ds-illustration{ margin-top:2.2rem; max-width:220px; opacity:0.85; }
.ds-stages{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; }
.ds-stage{
  position:relative; background: var(--warm-white); border:1px solid var(--border-stone); border-radius:20px;
  padding:2rem 1.8rem; transition: transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.ds-stage:hover{ transform: translateY(-5px); border-color: var(--ar-orange); box-shadow: var(--shadow-md); }
.ds-num{
  display:block; font-family: var(--font-display); font-weight:700; font-size:1.79rem;
  color: var(--ar-orange-tint); -webkit-text-stroke:1.5px var(--ar-orange);
}
.ds-icon{ width:50px; height:50px; margin:0.9rem 0 1.1rem; }
.ds-icon svg{ width:100%; height:100%; display:block; }
.ds-stage h3{ font-size:0.92rem; }
.ds-stage p{ margin-top:0.5rem; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width:900px){
  .ds-split{ grid-template-columns:1fr; }
  .ds-stages{ margin-top:1rem; }
}
@media (max-width:560px){ .ds-stages{ grid-template-columns:1fr; } }

/* ---------- Related Services — infinite carousel cards (built on .testi-marquee engine) ---------- */
.related-marquee .testi-track-inner{ gap:1.4rem; align-items:stretch; }
.related-svc-card{
  flex:0 0 auto; width:270px; display:block; border-radius: var(--radius-md); overflow:hidden;
  background: var(--warm-white); border:1px solid var(--border-stone); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.related-svc-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--ar-orange); }
.related-svc-media{ aspect-ratio:4/3; overflow:hidden; }
.related-svc-media img{ width:100%; height:100%; object-fit:cover; transition: transform 0.6s var(--ease-soft); }
.related-svc-card:hover .related-svc-media img{ transform: scale(1.07); }
.related-svc-body{ padding:1.3rem 1.3rem 1.5rem; }
.related-svc-body h3{ font-size:0.87rem; }
.related-svc-body p{ margin-top:0.4rem; font-size: var(--fs-sm); color: var(--text-muted); }
.related-svc-body .reveal-link{ margin-top:0.9rem; display:inline-flex; align-items:center; gap:0.5rem; font-size:var(--fs-xs); font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--ar-orange-dark); }
.related-svc-body .reveal-link .arrow{ transition: transform var(--dur-fast) var(--ease); }
.related-svc-card:hover .reveal-link .arrow{ transform: translateX(5px); }

/* ---------- Consultation Page ---------- */
.why-tile .tile-num{ display:block; font-size: var(--fs-xxs); font-weight:700; letter-spacing:0.14em; color: var(--ar-orange-dark); text-transform:uppercase; margin-bottom:0.9rem; }

.check-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:1rem 2rem; margin-top:1.7rem; }
.check-list li{ display:flex; gap:0.7rem; align-items:flex-start; font-size: var(--fs-sm); color: var(--graphite); }
.check-list li svg{ flex-shrink:0; color: var(--ar-orange); margin-top:0.15rem; }
@media (max-width:640px){ .check-list{ grid-template-columns:1fr; } }

/* Compact 4-step journey — horizontal rail on desktop, left-aligned
   vertical timeline on mobile (no per-step imagery, keeps the section short). */
.consult-steps{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; margin-top: var(--gap-xl); }
.consult-steps::before{ content:''; position:absolute; top:26px; left:0; right:0; height:2px; background: var(--ar-orange); opacity:0.28; }
.consult-step{ position:relative; text-align:center; }
.consult-step .cs-num{
  position:relative; z-index:1; width:52px; height:52px; margin:0 auto 1.1rem; border-radius:50%;
  background: var(--warm-white); border:2px solid var(--ar-orange); color: var(--ar-orange-dark);
  font-family: var(--font-display); font-weight:700; font-size:0.89rem;
  display:flex; align-items:center; justify-content:center;
}
.consult-step h3{ font-size:0.89rem; }
.consult-step p{ margin-top:0.5rem; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width:760px){
  .consult-steps{ grid-template-columns:1fr; gap:0; margin-top:var(--gap-lg); }
  .consult-steps::before{ top:0; bottom:0; left:26px; right:auto; width:2px; height:auto; }
  .consult-step{ text-align:left; display:flex; gap:1.2rem; padding-bottom:2rem; }
  .consult-step:last-child{ padding-bottom:0; }
  .consult-step .cs-num{ margin:0; flex-shrink:0; }
}

/* Compact contact-info row next to the booking form */
.consult-contacts{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:1.8rem; padding-bottom:1.8rem; border-bottom:1px solid var(--border-light); }

/* Compact trust strip — pill badges, deliberately lighter than the card grid above */
.trust-row{ display:flex; flex-wrap:wrap; gap:0.9rem 1rem; margin-top:1.8rem; }
.trust-item{
  display:flex; align-items:center; gap:0.6rem; font-size: var(--fs-sm); font-weight:600; color: var(--graphite);
  background: var(--stone); border-radius:999px; padding:0.65rem 1.2rem 0.65rem 0.9rem;
}
.trust-item svg{ color: var(--ar-orange); flex-shrink:0; }

/* ================================================================
   Our Partner — flanking decorative illustrations
   New, self-contained block (does not read from or modify any
   .faq-premium rule). Adds two aria-hidden interior vignettes in the
   left/right margins of #our-partners so the section's large empty
   white space either side of the centred Godrej lockup carries some
   visual weight, without ever competing with the logo, the divider
   rules, or the heading/paragraph for attention.
   ================================================================ */

/* Sides use a bounded, viewport-responsive width (200–240px) rather
   than a literal equal 1fr share — an even three-way split would
   squeeze the centred partner-feature row/paragraph well below their
   natural width. Centre keeps minmax(0,1fr) so it can never be forced
   wider than the space actually left over by the two side columns. */
.partner-showcase-grid{
  display:grid;
  grid-template-columns: clamp(200px, 15vw, 240px) minmax(0,1fr) clamp(200px, 15vw, 240px);
  align-items:center;
  gap: var(--gap-xl);
}
.partner-showcase-main{ min-width:0; }

.partner-deco{ opacity:0.8; }
.partner-deco svg{ display:block; width:100%; height:auto; }
.partner-deco svg{ stroke-linecap:round; stroke-linejoin:round; }

/* Colour tokens — deliberately quieter than the rest of the page so
   the Godrej logo stays the brightest thing in the section. Graphite
   is stroke-only everywhere below, never used as a fill. */
.partner-deco .pd-line{ stroke: var(--border-light); fill:none; stroke-width:1.5; }
.partner-deco .pd-outline{ stroke: var(--graphite); fill:none; stroke-width:2; }
.partner-deco .pd-stone{ fill: var(--stone); stroke: var(--graphite); stroke-width:2; }
.partner-deco .pd-stone-dark{ fill: var(--stone-dark); stroke: var(--graphite); stroke-width:2; }
.partner-deco .pd-white{ fill: var(--warm-white); stroke: var(--graphite); stroke-width:2; }
.partner-deco .pd-tint{ fill: var(--ar-orange-tint); stroke: var(--graphite); stroke-width:2; }
.partner-deco .pd-glow{ fill: var(--ar-orange-tint); stroke:none; opacity:0.55; }
.partner-deco .pd-accent{ fill: var(--ar-orange); stroke: var(--graphite); stroke-width:2; }

/* Slow opposite-phase float, mirroring the pace (not the rules) used
   elsewhere on the page for side illustrations. */
.partner-deco-left svg{ animation: partnerDecoFloat 8s ease-in-out infinite; }
.partner-deco-right svg{ animation: partnerDecoFloat 8s ease-in-out infinite; animation-delay:-4s; }
@keyframes partnerDecoFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){
  .partner-deco-left svg, .partner-deco-right svg{ animation:none; }
}

@media (max-width:1199px){
  .partner-showcase-grid{ grid-template-columns: 150px minmax(0,1fr) 150px; gap: var(--gap-lg); }
}
@media (max-width:1023px){
  .partner-showcase-grid{ grid-template-columns: 130px minmax(0,1fr); }
  .partner-deco-right{ display:none; }
}
@media (max-width:759px){
  .partner-showcase-grid{ grid-template-columns: 1fr; }
  .partner-deco-left, .partner-deco-right{ display:none; }
}
@media (max-width:640px){ .related-svc-card{ width:230px; } }

/* =========================================================================
   WHY CHOOSE CAROUSEL — premium refinement (homepage only, index.html)
   Every selector here is scoped under .wc-item (or .wc-frame — also unique
   to this carousel; confirmed via grep that .wc-item/.wc-frame/.why-carousel
   appear only in index.html). Nothing below touches the base .why-tile /
   .why-icon / .why-grid rules ("Why Choose Tiles (homepage only)", ~line
   736) or .section-blue .why-tile / .section-blue .why-icon (~line 746),
   which are shared by 20+ other pages and the about.html .values-grid.
   Overrides win the cascade purely through matching specificity + being
   declared later in the file, not by editing any existing line above.
   ========================================================================= */

/* 1 & 2 — icon circle: on .section-blue the circle background
   (--ar-light-blue-soft) is nearly identical to the white tile it sits on,
   so it disappears. Give it a visible, quiet surface + a 1px ring, and
   shrink the circle so the icon isn't floating in dead space. */
.wc-item .why-icon{
  width:76px; height:76px;
  background: var(--stone);
  border: 1px solid var(--ar-blue-border);
}
.wc-item .why-icon svg{ width:48px; height:48px; }

/* 3 — flex column so short paragraphs no longer leave a dead band at the
   bottom of the tile; a decorative hairline + chevron is pinned to the
   floor of every tile via margin-top:auto regardless of text length.
   overflow:hidden clips the accent bar (added below) to the tile's
   26px rounded corners. */
.wc-item .why-tile{
  display:flex; flex-direction:column; overflow:hidden;
}
.wc-item .wc-tile-foot{
  display:flex; align-items:center; gap:0.6rem; margin-top:auto; padding-top:1.6rem;
}
.wc-item .wc-tile-rule{ width:42px; height:1px; background: var(--ar-blue-border); flex-shrink:0; }
.wc-item .wc-tile-chevron{ color: var(--ar-orange); flex-shrink:0; transition: transform var(--dur-fast) var(--ease); }
.wc-item .why-tile:hover .wc-tile-chevron{ transform: translateX(4px); }

/* 4 — quieter hover: a left accent bar instead of the whole border turning
   orange. Border stays var(--ar-blue-border) at rest and on hover; the
   existing translateY(-4px) lift and var(--shadow-md) hover shadow are
   untouched (declared above, ~line 477). */
.wc-item .why-tile::before{
  content:''; position:absolute; top:0; left:0; bottom:0; width:4px;
  background: var(--ar-orange); transform: scaleY(0); transform-origin:bottom;
  transition: transform 0.35s var(--ease-soft);
}
.wc-item .why-tile:hover::before{ transform: scaleY(1); }
.wc-item .why-tile:hover{ border-color: var(--ar-blue-border); }

/* 5 — deepen the resting shadow slightly so the tiles read as lifted off
   the blue section background rather than flat cut-outs. */
.wc-item .why-tile{ box-shadow: 0 4px 20px rgba(23,33,43,0.07); }

/* 6 — arrows crowd the first/last visible card at left:-20px/right:-20px
   (~line 468). Give them more clearance on wide screens only; the ≤900px
   override (left:-2px/right:-2px, ~line 471) is untouched. */
@media (min-width:901px){
  .wc-frame .wc-prev{ left:-40px; }
  .wc-frame .wc-next{ right:-40px; }
}

/* Responsive re-tune of the icon circle + bottom accent for the 1-card
   mobile layout (base .why-icon drops to 74px/36px at ≤640px, ~line 761). */
@media (max-width:640px){
  .wc-item .why-icon{ width:64px; height:64px; }
  .wc-item .why-icon svg{ width:38px; height:38px; }
  .wc-item .wc-tile-foot{ padding-top:1.2rem; }
  .wc-item .wc-tile-rule{ width:34px; }
}

@media (prefers-reduced-motion: reduce){
  .wc-item .why-tile::before, .wc-item .wc-tile-chevron{ transition:none; }
}

/* =========================================================================
   SERVICE DETAIL PAGES — restructure (Task: 16-page section rework)
   Everything below is new and scoped under classes prefixed .svc-/.sd-,
   plus one additive .dp-media svg rule. Confirmed via grep that svc-brands-
   grid, svc-testi-grid, svc-faq-*, svc-cta-deco and every sd-* utility are
   unused anywhere else in the repo, so none of this can match on index.html,
   about.html, services.html or other-services.html. .dp-media svg is a new
   selector (existing pages only ever put an <img> in .dp-media, per the
   rule at ~line 1509) so it cannot affect the process rails on services.html
   or other-services.html, which still render photos there.
   ========================================================================= */

/* ---------- Materials & Brands — logo row (built on .partner-card, ~line 1284) ---------- */
.svc-brands-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:1.5rem; margin-top: var(--gap-xl);
}

/* ---------- Testimonials — static grid (built on .testi-card, ~line 902) ----------
   Homepage testimonials scroll inside .testi-marquee; these are a fixed
   2/3-up grid instead, so .testi-card's marquee sizing (flex:0 0 auto;
   width:min(420px,86vw)) is overridden to fill its grid cell. */
.svc-testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.75rem; margin-top: var(--gap-xl); }
.svc-testi-grid .testi-card{ width:100%; }
@media (max-width:1024px){ .svc-testi-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .svc-testi-grid{ grid-template-columns: 1fr; } }

/* ---------- Process rail icons — .dp-media now holds an inline SVG instead of a
   cropped photo (~line 1508). Additive rule only: services.html and
   other-services.html still put an <img> in .dp-media and keep using the
   existing .dp-media img rule untouched. */
.dp-media svg{
  width:100%; height:100%; padding:19px; box-sizing:border-box; display:block;
  border-radius:50%; border:2px solid var(--ar-orange); background: var(--stone);
  box-shadow: var(--shadow-md);
}

/* ---------- Service-page FAQ — 3-column illustrated layout, scoped to .svc-faq-grid
   only (independent of the homepage's .faq-premium-grid at ~line 1051, which
   these pages do not use). Replaces the old inline
   style="max-width:820px;margin:0 auto;" on .faq-list with .svc-faq-main. */
.svc-faq-grid{ display:grid; grid-template-columns: 160px 1fr 160px; gap: var(--gap-xl); align-items:start; }
.svc-faq-main{ max-width:820px; margin:0 auto; width:100%; }
.svc-faq-deco{ position:relative; padding-top:2rem; }
.svc-faq-deco svg{ width:100%; max-width:190px; display:block; margin:0 auto; }
.svc-faq-deco-left svg{ animation: svcDecoFloat 6s ease-in-out infinite; }
.svc-faq-deco-right svg{ animation: svcDecoFloat 6s ease-in-out infinite; animation-delay:-3s; }
@keyframes svcDecoFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:1024px){
  .svc-faq-grid{ grid-template-columns: 110px 1fr 110px; gap: var(--gap-lg); }
  .svc-faq-deco svg{ max-width:140px; }
}
@media (max-width:760px){
  .svc-faq-grid{ grid-template-columns:1fr; gap:0; }
  .svc-faq-deco{ display:none; }
}

/* ---------- CTA band edge illustration — sits outside .cta-content, clipped by
   .cta-band's own overflow:hidden (~line 1143). */
.svc-cta-deco{
  position:absolute; top:50%; left:-40px; transform:translateY(-50%);
  width:150px; opacity:0.5; pointer-events:none; z-index:0;
}
.svc-cta-deco svg{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .svc-cta-deco{ display:none; } }

/* ---------- Design Styles — service-page style/application cards (Y4). Reuses
   homepage .showcase-grid/.showcase-item/.showcase-cap (~line 821) so the visual
   language (rounded corners, dark bottom overlay, hover scale) matches the rest of
   the site, but scoped under .style-grid so index.html's hover-only caption and
   masonry s-tall/s-wide behaviour are untouched. Style cards are a uniform grid
   (no tall/wide variance) with the caption always legible, not hover-gated. */
.style-grid{ grid-auto-rows:auto; }
.style-grid .showcase-item{ aspect-ratio:3/4; }
.style-grid .showcase-item::after{ opacity:0.62; }
.style-grid .showcase-cap{ opacity:1; transform:translateY(0); }
@media (max-width:900px){ .style-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .style-grid{ grid-template-columns:repeat(2,1fr); } .style-grid .showcase-item{ aspect-ratio:1/1; } }

/* ---------- Related Services — curated static grid (Y4). Built on the same
   .related-svc-card used by the homepage-style marquee (~line 1564), but a plain
   responsive grid for a short curated set (4-6 relevant services) instead of the
   full 15-service scroller — overrides the marquee card's flex:0 0 auto;width:270px
   sizing to fill its grid cell, same pattern as .svc-testi-grid (~line 1781). */
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.6rem; margin-top: var(--gap-xl); }
.related-grid .related-svc-card{ width:100%; }

/* ---------- sd-* paint utilities for the shared decorative vignettes.
   Originally scoped to .svc-faq-deco / .svc-cta-deco; the scoping list is
   extended here (per the page-decoration task) to the three new single-edge
   contexts — .ct-form-deco (contact.html), .bc-form-deco (book-consultation.html)
   and .about-faq-deco (about.html) — rather than duplicating the 12 rules.
   projects.html reuses .svc-cta-deco directly and needs no addition.
   Stroke tokens always pair with fill:none so var(--graphite) is never used
   as a filled shape. */
.svc-faq-deco .sd-fill-orange, .svc-cta-deco .sd-fill-orange, .ct-form-deco .sd-fill-orange, .bc-form-deco .sd-fill-orange, .about-faq-deco .sd-fill-orange{ fill: var(--ar-orange); }
.svc-faq-deco .sd-fill-orange-dark, .svc-cta-deco .sd-fill-orange-dark, .ct-form-deco .sd-fill-orange-dark, .bc-form-deco .sd-fill-orange-dark, .about-faq-deco .sd-fill-orange-dark{ fill: var(--ar-orange-dark); }
.svc-faq-deco .sd-fill-orange-tint, .svc-cta-deco .sd-fill-orange-tint, .ct-form-deco .sd-fill-orange-tint, .bc-form-deco .sd-fill-orange-tint, .about-faq-deco .sd-fill-orange-tint{ fill: var(--ar-orange-tint); }
.svc-faq-deco .sd-fill-blue, .svc-cta-deco .sd-fill-blue, .ct-form-deco .sd-fill-blue, .bc-form-deco .sd-fill-blue, .about-faq-deco .sd-fill-blue{ fill: var(--ar-light-blue); }
.svc-faq-deco .sd-fill-stone, .svc-cta-deco .sd-fill-stone, .ct-form-deco .sd-fill-stone, .bc-form-deco .sd-fill-stone, .about-faq-deco .sd-fill-stone{ fill: var(--stone); }
.svc-faq-deco .sd-fill-stone-dark, .svc-cta-deco .sd-fill-stone-dark, .ct-form-deco .sd-fill-stone-dark, .bc-form-deco .sd-fill-stone-dark, .about-faq-deco .sd-fill-stone-dark{ fill: var(--stone-dark); }
.svc-faq-deco .sd-stroke-border, .svc-cta-deco .sd-stroke-border, .ct-form-deco .sd-stroke-border, .bc-form-deco .sd-stroke-border, .about-faq-deco .sd-stroke-border{ stroke: var(--border-light); fill:none; }
.svc-faq-deco .sd-stroke-graphite, .svc-cta-deco .sd-stroke-graphite, .ct-form-deco .sd-stroke-graphite, .bc-form-deco .sd-stroke-graphite, .about-faq-deco .sd-stroke-graphite{ stroke: var(--graphite); fill:none; }
.svc-faq-deco .sd-stroke-orange, .svc-cta-deco .sd-stroke-orange, .ct-form-deco .sd-stroke-orange, .bc-form-deco .sd-stroke-orange, .about-faq-deco .sd-stroke-orange{ stroke: var(--ar-orange); fill:none; }
.svc-faq-deco .sd-stroke-orange-dark, .svc-cta-deco .sd-stroke-orange-dark, .ct-form-deco .sd-stroke-orange-dark, .bc-form-deco .sd-stroke-orange-dark, .about-faq-deco .sd-stroke-orange-dark{ stroke: var(--ar-orange-dark); fill:none; }
.svc-faq-deco .sd-stroke-blue-border, .svc-cta-deco .sd-stroke-blue-border, .ct-form-deco .sd-stroke-blue-border, .bc-form-deco .sd-stroke-blue-border, .about-faq-deco .sd-stroke-blue-border{ stroke: var(--ar-blue-border); fill:none; }
.svc-faq-deco .sd-stroke-blue-accent, .svc-cta-deco .sd-stroke-blue-accent, .ct-form-deco .sd-stroke-blue-accent, .bc-form-deco .sd-stroke-blue-accent, .about-faq-deco .sd-stroke-blue-accent{ stroke: var(--ar-blue-accent); fill:none; }

@media (prefers-reduced-motion: reduce){
  .svc-faq-deco-left svg, .svc-faq-deco-right svg{ animation:none; }
}


/* =========================================================================
   RELATED SERVICES — premium horizontal peek carousel (individual service
   pages). Markup rendered by renderRelatedServices() in js/components.js;
   infinite-loop / drag / keyboard behaviour by initRelatedCarousel() in
   js/main.js. Everything is scoped under .related-services / .rc-* so no
   existing component is affected. Arrow buttons reuse the shared .cc-arrow
   style (~line 491).
   ========================================================================= */
.related-services{
  --rc-gap: clamp(14px, 1.5vw, 22px);
  --rc-card-w: clamp(256px, calc((min(100vw, var(--container-w)) - (2 * var(--container-pad)) - (3 * var(--rc-gap))) / 4.35), 340px);
}
.related-services .rc-head{ position:relative; z-index:1; }
.rc-underline{ display:block; width:64px; height:3px; margin:1.15rem auto 0; border-radius:2px; background: var(--ar-orange); }

.related-services .rc{ position:relative; margin-top: var(--gap-xl); }
.rc-viewport{ overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); cursor:grab; touch-action:pan-y; }
.rc-track{
  display:flex; gap: var(--rc-gap); margin:0; padding:0; list-style:none;
  padding-inline: clamp(var(--container-pad), calc(50vw - (var(--container-w) / 2) + var(--container-pad)), 15vw);
  transition: transform 0.55s var(--ease); will-change: transform;
}
.rc-track.is-grabbing{ cursor:grabbing; }
.rc-slide{ flex:0 0 var(--rc-card-w); display:flex; }

.rc-card{
  display:flex; flex-direction:column; width:100%; color: var(--graphite);
  background: var(--warm-white); border:1px solid var(--border-stone); border-radius:16px;
  overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}
.rc-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--ar-orange); }
.rc-card-media{ display:block; aspect-ratio:16 / 11; overflow:hidden; background: var(--stone); }
.rc-card-media img{ width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; transition: transform 0.6s var(--ease-soft); }
.rc-card:hover .rc-card-media img{ transform: scale(1.06); }
.rc-card-body{ display:flex; flex-direction:column; gap:0.55rem; padding:1.4rem 1.4rem 1.5rem; flex:1; }
.rc-card-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:0.3rem; border-radius:12px;
  background: var(--ar-orange-tint); color: var(--ar-orange-dark);
}
.rc-card-icon svg{ width:22px; height:22px; }
.rc-card-title{ font-family: var(--font-display); font-weight:700; font-size:1.06rem; line-height:1.22; color: var(--graphite); }
.rc-card-desc{ font-size: var(--fs-sm); line-height:1.5; color: var(--text-muted); }
.rc-card-cta{
  margin-top:auto; padding-top:0.7rem; display:inline-flex; align-items:center; gap:0.5rem;
  font-size: var(--fs-xxs); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--ar-orange-dark);
}
.rc-card-cta .rc-arrow{ transition: transform var(--dur-fast) var(--ease); }
.rc-card:hover .rc-card-cta .rc-arrow{ transform: translateX(5px); }

.related-services .rc-prev{ left: calc(50% - 50vw + clamp(8px, 2vw, 40px)); }
.related-services .rc-next{ right: calc(50% - 50vw + clamp(8px, 2vw, 40px)); }

.rc-noscript{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.6rem 1.4rem; margin-top: var(--gap-lg); }
.rc-noscript a{ color: var(--ar-orange-dark); font-weight:600; font-size: var(--fs-sm); }

@media (max-width:1024px){
  .related-services{ --rc-card-w: clamp(240px, 40vw, 320px); }
  .rc-track{ padding-inline: var(--container-pad); }
}
@media (max-width:640px){
  .related-services{ --rc-gap:12px; --rc-card-w: 80vw; }
  .rc-card-body{ padding:1.2rem 1.2rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .rc-track{ transition:none; }
  .rc-card, .rc-card-media img, .rc-card-cta .rc-arrow{ transition:none; }
}


/* =========================================================================
   PAGE-SPECIFIC DECORATION — contact / book-consultation / about / projects
   (Task: per-page background texture + decorative side illustrations)

   Background texture is applied only by adding the existing shared
   .section-pattern class in each page's markup — the .section-pattern rule
   (~line 1471) itself is NOT touched. index.html and the .faq-premium* rules
   are not touched.

   New single-edge illustration contexts introduced below:
     .ct-form-deco    — contact.html,          contact-form section  (left edge)
     .bc-form-deco    — book-consultation.html, booking-form section  (right edge)
     .about-faq-deco  — about.html,             FAQ section           (left edge)
   projects.html reuses the existing .svc-cta-deco component verbatim, so it
   needs no rule here. Verified via grep that .ct-form-deco / .bc-form-deco /
   .about-faq-deco appear in no other HTML file, so nothing below can match on
   index.html or the 16 service pages. The vignettes are aria-hidden wrappers,
   sit behind page content (z-index:0), never animate, and are removed
   entirely below 1024px (display:none, no reserved layout space). Their
   fill/stroke colours come only from the shared .sd-* utilities (palette
   tokens), whose scoping list was extended above.
   ========================================================================= */

.ct-form-deco svg, .about-faq-deco svg{ width:100%; height:auto; display:block; }

/* contact.html — pinned to the lower outer-left of the contact-form section.
   That section carries .section-pattern, so it is already position:relative;
   the > selector out-specifies ".section-pattern > *" (which would otherwise
   force position:relative / z-index:1 onto this wrapper). The vignette clears
   the right-hand form column completely and only ever sits — faint and behind
   — over the empty lower track beneath the short contact-details column. */
.section-pattern > .ct-form-deco{
  position:absolute; left:0; bottom:0;
  width:120px; opacity:0.32; z-index:0; pointer-events:none;
}

/* about.html — lower outer-left of the FAQ section (also .section-pattern).
   The FAQ's left column (.faq-intro) is short and sticky, so the lower half
   of its grid track is structural empty space; on wide viewports the vignette
   sits in the true outer margin. */
.section-pattern > .about-faq-deco{
  position:absolute; left:0; bottom:0;
  width:140px; opacity:0.34; z-index:0; pointer-events:none;
}

/* book-consultation.html — right edge of the multi-step-form section.
   That section is deliberately NOT given .section-pattern and must stay
   unpositioned: js/main.js scrolls the step Next/Back using
   `form.offsetTop`, which is measured against <body>. This wrapper is a
   zero-height position:relative peg placed as a SIBLING of .container (never
   an ancestor of #consultForm), so it establishes a containing block for the
   SVG without altering the form's offsetParent. The SVG is pinned to the
   right gutter, below the step indicator, and stays clear of every field —
   the 820px form container leaves >=100px of margin at >=1024px. */
.bc-form-deco{ position:relative; height:0; }
.bc-form-deco svg{
  position:absolute; top:300px; right:0;
  width:132px; height:auto; display:block;
  opacity:0.4; pointer-events:none;
}

/* Single-edge vignettes are hidden entirely below 1024px, where these forms
   go full-width — no layout space reserved. The booking form sits in a narrow
   820px container, so its vignette is retired a little earlier (1120px) to keep
   a comfortable gap from the fields at every width it is shown. */
@media (max-width:1024px){
  .section-pattern > .ct-form-deco,
  .section-pattern > .about-faq-deco{ display:none; }
}
@media (max-width:1120px){
  .bc-form-deco{ display:none; }
}