/* =========================================================
   Mumtaz Tile Zone & Sanitary Ware — website styles
   Brand: Midnight Navy #010736 · Deep Navy #0D1C42 ·
          Royal Navy #22396F · White · Poppins
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --midnight: #010736;
  --deep: #0D1C42;
  --royal: #22396F;
  --royal-soft: #8D9BC2;
  --white: #FFFFFF;

  /* Neutral greys */
  --mist: #F1F3F8;
  --mist-2: #E5E9F2;
  --line: #D9DEE9;            /* decorative borders */
  --control-border: #7F8BAD;  /* form fields: 3.4:1 on white */

  /* Ink on light */
  --ink: #010736;
  --ink-2: #2E3859;
  --ink-3: #555F80;           /* 6.3:1 on white, 5.9:1 on mist */

  /* Ink on navy: solid tints, so contrast is predictable */
  --on-dark: #FFFFFF;
  --on-dark-2: #C9D1E8;       /* 12.7:1 on Midnight, 10.9:1 on Deep */
  --on-dark-3: #9AA6C8;       /* labels and meta on navy; 8.0:1 on Midnight, 6.9:1 on Deep */
  --on-dark-line: rgba(255, 255, 255, 0.16);

  --wa: #15803D;              /* WhatsApp buttons only, darkened so white text passes AA (5.0:1). Never lighten. */
  --wa-dark: #116B34;
  --danger: #B42318;
  --focus: var(--royal);

  /* Thin rules */
  --rule: 1px solid var(--midnight);          /* section-head tops */
  --rule-soft: 1px solid var(--line);         /* dividers on light */
  --rule-on-dark: 1px solid var(--on-dark-line);

  /* Square, tile-like corners */
  --radius-sm: 2px;
  --radius: 2px;
  --radius-lg: 4px;

  /* Flat surfaces. The names are kept so old references still resolve. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --shadow-float: 0 6px 20px rgba(1, 7, 54, 0.28);   /* .wa-float, the open ≤1260 nav panel, .is-scrolled header */
  --shadow-face: 0 4px 12px rgba(1, 7, 54, 0.35);    /* tile-face swatch on photos only. Never on the logo. */

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --edge: max(var(--gutter), (100vw - var(--container)) / 2);   /* left edge of the content */
  --col-gap: clamp(16px, 2vw, 24px);                           /* 12-column and card grids */
  --section-y: clamp(56px, 8vw, 120px);
  --head-gap: clamp(28px, 4vw, 56px);                          /* space below section heads */
  --header-h: 84px;
  --topbar-h: 44px;
  --bar-h: 0px;               /* mobile action bar (56px at ≤960) */
  --hero-peek: 0px;           /* 56px at ≤699, so the address row peeks onto the first screen */
  --hero-min: 520px;
  --hero-max: 860px;
  --rail-card: min(78vw, 320px);
  --rail-gap: 12px;
  --face: 64px;               /* tile-face swatch */

  /* Placeholder and scrims: Midnight only (no greige, no gold) */
  --hero-ph: var(--deep);
  --scrim-top: linear-gradient(180deg, rgba(1,7,54,.45) 0, rgba(1,7,54,0) 120px);
  --scrim-copy: linear-gradient(180deg, rgba(1,7,54,0) 0, rgba(1,7,54,.7) 72px, rgba(1,7,54,.82) 200px, rgba(1,7,54,.94) 100%);
  --scrim-side: linear-gradient(90deg, rgba(1,7,54,.9) 0, rgba(1,7,54,.82) calc(var(--edge) + 38rem),
                rgba(1,7,54,.35) calc(var(--edge) + 52rem), rgba(1,7,54,0) calc(var(--edge) + 66rem));
  --scrim-band: rgba(1, 7, 54, 0.8);

  /* Type */
  --font: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ur: "Naskh Web", "Noto Naskh Arabic", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Geeza Pro", serif; /* once html.ur-font is set */
  --font-ur-system: "Noto Naskh Arabic", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Geeza Pro", serif;
  --fs-display: clamp(2.5rem, 1.7rem + 4.4vw, 5.5rem);    /* hero h1: 41px @320, 44 @375, 61 @768, 88 @1440 */
  --fs-h2: clamp(1.875rem, 1.35rem + 2.6vw, 3.5rem);      /* 31px @375, 56 @1440 */
  --fs-h3-lg: clamp(1.375rem, 1.15rem + 1vw, 2rem);       /* 22 to 32px: lead product, wide cards, subheads */
  --fs-h3: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --fs-sm: .875rem;
  --fs-xs: .8125rem;
  --fs-label: .75rem;
  --lh-display: 1.02;
  --lh-head: 1.08;
  --lh-body: 1.65;
  --track-display: -.03em;
  --track-head: -.022em;
  --track-caps: .2em;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .2s;
  --dur-reveal: .6s;
  --dur-settle: 1.8s;

  /* Tile grid: kept for .section--navy (calculator), .brand-panel and .map only */
  --grid-line: rgba(255, 255, 255, 0.04);
  --tile-grid:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
@media (max-width: 960px) { :root { --header-h: 72px; --topbar-h: 40px; --bar-h: 56px; } }
@media (max-width: 699px) { :root { --hero-peek: 56px; } }
@media (max-width: 640px) { :root { --face: 56px; } }

/* Focus ring per surface: royal-soft on navy (7.0:1 on Midnight), royal on white */
.site-header, .hero, .proof, .page-head, .section--navy, .collections__note, .cta-band,
.site-footer, .brand-panel, .map, .action-bar { --focus: var(--royal-soft); }
.calc__card { --focus: var(--royal); }
@media (max-width: 1260px) { .nav { --focus: var(--royal); } }                   /* the drop-down stays white */

/* ---------- Fonts (self-hosted in assets/fonts/, OFL; owner's OK 21 Oct 2026) ---------- */
/* Poppins 400/500/600: the Latin subset (preloaded in index.html for 400 and 600) and Latin Extended, which
   browsers fetch only if a page character needs it. Unicode ranges are Google Fonts' own. */
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/poppins-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Noto Naskh Arabic for the Urdu policy: one variable file per script covers 400–600. Its own family name, used
   only by --font-ur, so nothing downloads it until main.js sets html.ur-font (the Latin part draws the digits). */
@font-face {
  font-family: "Naskh Web"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/naskh-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Naskh Web"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/naskh-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched local fallback while Poppins loads, so text doesn't jump (CLS) */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Roboto"), local("Helvetica");
  size-adjust: 112%;
  ascent-override: 93.75%;
  descent-override: 31.25%;
  line-gap-override: 8.93%;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  font-synthesis: none;  /* never fake a bold or an italic */
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }

/* Poppins 400 / 500 / 600 are loaded; 600 is the heaviest weight (no 700, no italics) */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3 { line-height: 1.25; letter-spacing: -0.01em; }
strong, b { font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.nw { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  color: var(--midnight);
  font-weight: 600;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn--light { background: var(--white); color: var(--midnight); }
.btn--dark { background: var(--midnight); color: var(--white); }   /* "See all …" on light sections */
.btn--ghost-light { border-color: rgba(255, 255, 255, 0.55); background: transparent; color: var(--white); }   /* transparent: also on <button> */
/* Green is for WhatsApp only: every button that opens WhatsApp (data-wa) is .btn--wa */
.btn--wa { background: var(--wa); color: var(--white); }

/* Hover colours only on a real mouse, so taps on phones never leave a "stuck" state */
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: var(--mist-2); }
  .btn--dark:hover { background: var(--royal); }
  .btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--white); }
  .btn--wa:hover { background: var(--wa-dark); }
}

.btn--lg { min-height: 56px; padding: 0.9rem 1.6rem; font-size: 1rem; }
.btn--block { display: flex; width: 100%; white-space: normal; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  color: var(--royal);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: underline 1px var(--royal-soft);
  text-underline-offset: 0.35em;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
}
.link-arrow .icon { transition: transform var(--dur-fast) var(--ease-out); }
/* On navy surfaces */
.link-arrow--light { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.45); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { color: var(--midnight); text-decoration-color: currentColor; }
  .link-arrow--light:hover { color: var(--white); }
  .link-arrow:hover .icon { transform: translateX(4px); }
}

/* ---------- Section scaffolding ---------- */
.section { padding-block: var(--section-y); }
.section--mist { background: var(--mist); }
.section--navy {
  background-color: var(--deep);
  background-image: var(--tile-grid);
  background-size: 64px 64px;
  color: var(--on-dark-2);
}
.section--navy h2,
.section--navy h3 { color: var(--on-dark); }
.section--midnight { background-color: var(--midnight); background-image: none; }

/* Ruled section head: a thin rule on top, the eyebrow in the left 3 of 12 columns on desktop */
.section-head { max-width: none; margin-bottom: var(--head-gap); padding-top: 20px; border-top: var(--rule); }
.section--navy .section-head { border-top: var(--rule-on-dark); }
.section-head h2,
.calc__intro h2,
.about__copy h2 { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.section-head p { margin-top: 1rem; max-width: 40rem; font-size: var(--fs-lead); color: var(--ink-3); }
/* Brand lines, plain text, no logos (SEO): Tile styles (the tile brands the shop is an authorized dealer of) and
   Sanitary ware (the sanitary brands it sells; deliberately not an authorized-dealer claim) */
.section-head p.brands-line { margin-top: 0.75rem; color: var(--ink-2); font-size: 1rem; }
.brands-line strong { color: var(--ink); font-weight: 600; }
.section--navy .section-head p { color: var(--on-dark-2); }
.section-head--center { margin-inline: 0; text-align: left; }
@media (min-width: 961px) {
  .section-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .section-head .eyebrow { grid-column: 1 / span 3; grid-row: 1 / span 2; margin: 0; padding-top: 0.7em; }
  .section-head h2 { grid-column: 4 / -1; }
  .section-head p { grid-column: 4 / span 7; }
  .outlet .section-head { display: block; }
  .outlet .section-head .eyebrow { margin-bottom: 1rem; padding-top: 0; }
}

/* Eyebrow mirrors the brand guide's spaced caps + short rule */
.eyebrow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 1rem;
  color: var(--royal);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.eyebrow::after {
  content: "";
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.eyebrow--light { color: var(--on-dark-2); }
.eyebrow--light::after { background: var(--white); }

/* ---------- Moving contact strips (top of the page, top of the footer) ---------- */
/* One component. main.js ('marquee') adds .is-moving, copies the group enough times to fill the strip and moves the
   track one group's width per loop at a steady speed, so the loop is seamless at any screen width. Without JS or with
   reduced motion the strip stands still: the group is centred and the strip scrolls sideways if it doesn't fit. */
.marquee {
  --focus: var(--white);
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--royal);
  color: var(--white);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee__track { display: flex; }
.marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.25rem;
  margin-inline: auto;
  padding-inline: 0.625rem;   /* half the gap on each side: groups meet with the same spacing as their items */
  white-space: nowrap;
}
.marquee__name,
.marquee__item { display: inline-flex; align-items: center; gap: 0.45rem; }
.marquee__name { font-weight: 600; }
.marquee a { color: var(--white); }
.marquee__item:hover { text-decoration: underline; text-underline-offset: 3px; }
.marquee .icon { flex: none; width: 16px; height: 16px; }
/* A small tile, turned on its corner, between the items */
.marquee__sep { flex: none; width: 6px; height: 6px; border: 1px solid currentColor; opacity: 0.6; transform: rotate(45deg); }
.marquee__social { display: inline-flex; gap: 0.35rem; }
.marquee__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transition: background-color var(--dur-fast);
}
.marquee__social a:hover { background: rgba(255, 255, 255, 0.14); }
.marquee:not(.is-moving) .marquee__group > .marquee__sep:last-child { display: none; }
.marquee.is-moving { overflow: hidden; }
.marquee.is-moving .marquee__track {
  width: max-content;
  animation: marquee var(--marquee-time, 30s) linear infinite;
}
.marquee.is-moving .marquee__group { margin-inline: 0; }
@keyframes marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }
/* Stops while someone points at it or tabs into it, so the links can be read and used */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Top of the page: a slim band above the header, as tall as --topbar-h (44px; 40px at ≤960) */
.marquee--top { font-size: 0.825rem; }
.marquee--top .marquee__group { min-height: var(--topbar-h); }
.marquee--top .marquee__social a { width: 30px; height: 30px; }
.marquee--top .marquee__social .icon { width: 14px; height: 14px; }

/* Top of the footer: the bigger, bolder band */
.marquee--footer { font-size: 1rem; }
.marquee--footer .marquee__group { min-height: 64px; gap: 1.75rem; padding-inline: 0.875rem; }
.marquee--footer .marquee__name { font-size: 1.125rem; }
.marquee--footer .icon { width: 18px; height: 18px; }
.marquee--footer .marquee__social a { width: 40px; height: 40px; }
.marquee--footer .marquee__sep { width: 8px; height: 8px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--midnight);
  border-bottom: var(--rule-on-dark);
  transition: box-shadow 0.2s;
}
.site-header.is-scrolled { box-shadow: var(--shadow-float); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

/* Logo: at least 140px wide, with a quarter of the icon height clear above and below
   (brand guide). Header height and logo width are sized together to keep that space. */
.brand { display: block; flex: none; }
.brand img { width: 172px; height: auto; }

.nav { display: flex; align-items: center; gap: 1.25rem; }
.nav__list { display: flex; align-items: center; gap: 0.25rem; }
.nav__list a {
  position: relative;
  display: block;
  padding: 0.5rem 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: color 0.2s, background-color 0.2s;
}
/* Light-on-navy links only in the desktop bar; the ≤1260 drop-down stays white (see below) */
@media (min-width: 1261px) {
  .nav__list a { color: var(--on-dark-2); font-size: 0.9rem; padding-inline: 0.375rem; }   /* 9 links fit in the 1200 px container */
  /* The current page (aria-current, set by tools/build-pages.py) or, on the home page, the section in view (.is-active) */
  .nav__list a.is-active,
  .nav__list a[aria-current] { color: var(--white); }
  .nav__list a.is-active::after,
  .nav__list a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0.5rem; right: 0.5rem; bottom: 6px;
    height: 1px;
    background: var(--white);
  }
  .nav__cta { min-height: 44px; padding: 0.55rem 1.1rem; font-size: 0.9rem; }
}
@media (min-width: 1261px) and (hover: hover) and (pointer: fine) {
  .nav__list a:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: var(--rule-on-dark);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-open .nav-toggle .icon--menu { display: none; }
.nav-open .nav-toggle .icon--close { display: block; }
.nav-backdrop { display: none; }

/* ---------- Hero (full-bleed room scene under a Midnight scrim) ---------- */
/* min-height, never a fixed height: the hero grows with its copy, so large Android font sizes are never clipped */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  min-height: min(var(--hero-max), max(var(--hero-min), calc(100vh - var(--topbar-h) - var(--header-h) - var(--hero-peek))));
  min-height: min(var(--hero-max), max(var(--hero-min), calc(100svh - var(--topbar-h) - var(--header-h) - var(--hero-peek))));
  background: var(--hero-ph);
  color: var(--on-dark-2);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus, 50% 40%);
  animation: settle var(--dur-settle) var(--ease-out) both;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-top); pointer-events: none; }
.hero__inner { position: relative; width: 100%; padding: 72px 0 28px; background: var(--scrim-copy); }
.hero__copy { max-width: 36rem; }
.hero .eyebrow--light { color: var(--white); }
.hero__kicker { line-height: 1.5; }   /* the h1: the small label line (SEO), wraps on phones */
.hero__title {
  color: var(--white);
  margin: 0;
  font-weight: 600;   /* a <p> since the label became the h1; same look as before */
  text-wrap: balance;
  font-size: var(--fs-display);
  font-size: min(var(--fs-display), 8.5vh);   /* short laptop screens: a smaller heading keeps the facts bar in view */
  font-size: min(var(--fs-display), 8.5svh);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-shadow: 0 2px 24px rgba(1, 7, 54, 0.35);  /* text only, never the logo */
}
.hero__lead {
  max-width: 30rem;
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: var(--on-dark-2);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__phones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: var(--rule-on-dark);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.hero__phones-label { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__phones .icon { color: var(--white); }
.hero__phones a { color: var(--white); font-weight: 600; }
.hero__phones a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Facts bar: the last row of the hero, so it is always on the first screen */
.hero__facts { position: relative; border-top: var(--rule-on-dark); background: rgba(1, 7, 54, 0.94); }
@media (min-width: 961px) {
  .hero::before { background: var(--scrim-side); }
  .hero__inner {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding-block: clamp(24px, 5vh, 96px);
    padding-block: clamp(24px, 5svh, 96px);
    background: none;
  }
  .hero__facts { background: var(--scrim-band); }
  .hero__media img { object-position: var(--hero-focus-wide, 70% 50%); }
}
/* Short laptop screens (e.g. 1366 × 768): drop the second sentence and tighten the spacing, so the facts bar
   still fits on the first screen. The only height-based query on the site. */
@media (min-width: 961px) and (max-height: 820px) {
  .hero__lead-more { display: none; }
  .hero__lead { max-width: none; }
  .hero__actions { margin-top: 1.25rem; }
  .hero__phones { margin-top: 1rem; padding-top: 0.75rem; }
}

/* ---------- Facts (in the hero) and proof band (address, socials under the hero) ---------- */
.proof { background: var(--deep); color: var(--on-dark-2); }
.trust {
  display: grid;
  grid-template-columns: repeat(5, auto);   /* each fact as wide as its text (extra space shared out), so none wraps */
  gap: 0;
  margin: 0;
}
.trust li { display: flex; flex-direction: column; gap: 0.2rem; padding: 14px 20px; border-left: var(--rule-on-dark); }
.trust li:first-child { border-left: 0; padding-left: 0; }
.trust__value {
  color: var(--white);
  font-size: clamp(1.15rem, 0.85rem + 0.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.trust__label { color: var(--on-dark-3); font-size: 0.8125rem; }
.proof__visit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding-block: 12px;
  font-size: 0.875rem;
}
.proof__visit p { display: flex; flex: 1 1 20rem; gap: 0.5rem; }
.proof__visit p .icon { margin-top: 0.15em; color: var(--white); }
.proof__social { display: flex; }
.proof__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--white);
  transition: background-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .proof__social a:hover { background: rgba(255, 255, 255, 0.1); }
}
.proof__social .icon { width: 18px; height: 18px; }

/* Square icon tile, drawn as an outline (a single tile from the logo) */
.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: var(--rule-soft);
  border-radius: var(--radius);
  background: transparent;
  color: var(--royal);
}
.tile-icon .icon { width: 22px; height: 22px; }

/* ---------- Media frames ---------- */
/* Photos fill their frame; --pos (set inline where a crop needs it) moves the focal point.
   Every frame has a navy or mist background, so nothing collapses if an image fails. */
.product-card__media picture,
.product-card__media img,
.swatch-card__media picture,
.swatch-card__media img,
.bond-card__media picture,
.bond-card__media img { width: 100%; height: 100%; }
.product-card__media img,
.swatch-card__media img,
.bond-card__media img { object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- Products (Tiles leads, two unboxed side cards) ---------- */
.products__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.product-card { display: flex; flex-direction: column; min-width: 0; }
.product-card__media {
  margin: 0 0 1.25rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mist-2);
}
.product-card--lead .product-card__media { aspect-ratio: 4 / 3; }
.product-card h3 { font-size: var(--fs-h3); }
.product-card--lead h3 { font-size: var(--fs-h3-lg); line-height: 1.2; }
.product-card > p { margin-top: 0.6rem; color: var(--ink-3); }
.product-card .link-arrow { align-self: flex-start; margin-top: auto; padding-top: 1rem; }
/* Side cards (Sanitary ware, Bathroom fittings): text only since 18 Oct, under a thin rule */
.product-card--side { padding-top: 1.25rem; border-top: var(--rule-soft); }
@media (min-width: 641px) {
  .product-card--lead .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
}
@media (min-width: 961px) {
  .products__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .product-card--lead { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .product-card--lead .product-card__media { margin-bottom: 1.5rem; }
  /* Side cards: stacked to the right of the Tiles card */
  .product-card--side { grid-column: 8 / -1; }
  .product-card--side .checklist { margin-top: 1rem; font-size: 0.9375rem; }
  .product-card--side .link-arrow { margin-top: 0; padding-top: 0.75rem; }
}

.checklist { display: grid; gap: 0.55rem; margin-top: 1.25rem; }
.checklist li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--ink-2); }
.checklist .icon { width: 18px; height: 18px; margin-top: 0.22em; color: var(--royal); stroke-width: 2.4; }
.checklist--light li { color: var(--on-dark-2); }
.checklist--light .icon { color: var(--white); }

/* ---------- Collections ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
/* Decorative rule between the look chips (Luxury / Classic / Simple) and the room chips */
.filters__divider { flex: none; align-self: center; width: 1px; height: 28px; margin-inline: 0.25rem; background: var(--line); }
.chip {
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { border-color: var(--royal); color: var(--royal); }
}
.chip[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--white); }

/* Unboxed cards: no border, background, shadow, lift or image zoom. A 3-column magazine grid at ≥700px,
   where the 3 wide room scenes span 2 columns; a swipe rail at ≤699px (see .rail). */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) var(--col-gap);
  container-type: inline-size;   /* 100cqi = the grid's width, for the wide-card height match */
}
.swatch-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: fade-in 0.35s var(--ease-out);   /* replays when a filter re-shows a card */
}
@keyframes fade-in { from { opacity: 0; } }
.swatch-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mist-2);
}
.swatch-card--wide { grid-column: span 2; }
.swatch-card--wide .swatch-card__media { aspect-ratio: 5 / 3; }   /* fallback: within about 6px of its 4:5 neighbours */
@supports (height: 1cqi) {
  /* Exact: the same height as a 4:5 neighbour, so the card bodies line up */
  .swatch-card--wide .swatch-card__media { aspect-ratio: auto; height: calc((100cqi - 2 * var(--col-gap)) / 3 * 1.25); }
}
/* Filtered: every card is one 4:5 column, so a short list never leaves holes */
.swatch-grid.is-filtered .swatch-card--wide { grid-column: auto; }
.swatch-grid.is-filtered .swatch-card--wide .swatch-card__media { aspect-ratio: 4 / 5; height: auto; }
/* Tile-face swatch on the room scene: the only shadow on a photo (never on the logo) */
.swatch-card__media .swatch-card__face {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: var(--face);
  height: var(--face);
  border: 2px solid var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-face);
}
.swatch-card__body { display: flex; flex: 1; flex-direction: column; padding: 1rem 0 0; }
/* The look (Luxury / Classic / Simple) as small spaced caps. It never holds the brand name. */
.swatch-card__look {
  margin-bottom: 0.35rem;
  color: var(--royal);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.swatch-card h3 { font-size: var(--fs-h3); }
@media (min-width: 961px) {
  .swatch-grid:not(.is-filtered) .swatch-card--wide h3 { font-size: var(--fs-h3-lg); line-height: 1.2; }
}
.swatch-card__size {
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.swatch-card__maker { color: var(--ink-2); font-weight: 600; }   /* maker + design code, like "Master · model OP-4" */
.swatch-card__maker + .swatch-card__size { margin-top: 0.1rem; }
.swatch-card p:not(.swatch-card__size):not(.swatch-card__look) { margin-top: 0.5rem; max-width: 34rem; color: var(--ink-3); font-size: 0.9375rem; }
.swatch-card .link-arrow { align-self: flex-start; margin-top: auto; padding-top: 0.75rem; }
/* The thin white mount frame on hover (opacity only), on a real mouse */
@media (hover: hover) and (pointer: fine) {
  .swatch-card__media::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    pointer-events: none;
  }
  .swatch-card:hover .swatch-card__media::before { opacity: 1; }
}
.rail-hint { display: none; }   /* phones only, see the ≤699 block */
/* Honesty label under the grid */
.gallery-note { margin-top: 1.25rem; color: var(--ink-3); font-size: var(--fs-sm); }

/* Tags as a quiet inline list: Floor · Wall · Kitchen */
.tags { display: flex; flex-wrap: wrap; gap: 0.15rem 0; margin-top: 0.85rem; }
.tags li {
  padding: 0;
  background: none;
  color: var(--ink-3);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.tags li + li::before {
  content: "·";
  content: "·" / "";  /* decorative: screen readers skip it */
  margin-inline: 0.5em;
  color: var(--royal-soft);
}
/* About: outlined value tiles */
.tags--lg { gap: 0.5rem; margin-top: 0.75rem; }
.tags--lg li {
  padding: 0.4rem 0.85rem;
  border: var(--rule-soft);
  border-radius: var(--radius);
  background: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.tags--lg li + li::before { content: none; }

/* Note card (tile styles, tile bond): a Midnight panel */
.collections__note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(20px, 3vw, 32px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--midnight);
}
.collections__note p { flex: 1 1 24rem; color: var(--white); font-weight: 400; }
.collections__note a:not(.btn) {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  text-underline-offset: 3px;
}

/* ---------- Calculator ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
}
.calc__intro { padding-top: 20px; border-top: var(--rule-on-dark); }   /* the ruled head, as on other sections */
.calc__intro > p { margin-top: 1rem; font-size: 1.05rem; }
.calc__intro .checklist { margin-top: 1.75rem; }

.calc__card {
  padding: clamp(20px, 3.2vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink-2);
}

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-row--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.field { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.field > label,
fieldset legend {
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}
.field__hint { color: var(--ink-3); font-size: 0.8rem; font-weight: 400; }
.field__error { color: var(--danger); font-size: 0.82rem; font-weight: 500; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322396F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 18px;
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-3); } /* darker than rest, distinct from the royal focus state */
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--royal);
  box-shadow: 0 0 0 4px rgba(34, 57, 111, 0.22);
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }

.input-unit { position: relative; }
.input-unit .input { padding-right: 3.4rem; }
.input-unit__suffix {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 0.85rem;
  font-weight: 500;
  pointer-events: none;
}

/* Segmented control (radio group) */
.seg { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { margin-bottom: 0.4rem; padding: 0; }
.seg__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--mist);
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.seg label:hover { color: var(--midnight); }
.seg input:checked + label { background: var(--midnight); color: var(--white); }
/* :focus fallback for browsers without :focus-visible; the second rule is skipped where unsupported */
.seg input:focus + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg input:focus:not(:focus-visible) + label { outline: none; }

.calc__results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0.4rem;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--mist);
}
.stat__label { color: var(--ink-3); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.stat__value { color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.65rem); font-weight: 600; line-height: 1.2; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.stat__unit { font-size: 0.62em; font-weight: 600; white-space: nowrap; }
.stat__sub { color: var(--ink-3); font-size: 0.8rem; }
.stat--primary { background: var(--midnight); }
.stat--primary .stat__label,
.stat--primary .stat__sub { color: var(--on-dark-2); }
.stat--primary .stat__value { color: var(--white); }

.calc__message {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--royal);
  border-radius: var(--radius);
  background: var(--mist);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
}
.calc__note { color: var(--ink-3); font-size: 0.82rem; }

/* ---------- Why us + policy ---------- */
/* Hairline cells: the 1px gaps show the grid's rule colour. 6 cells fill every row at 3, 2 or 1 columns. */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--line);
}
.feature {
  min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 0;
  background: var(--white);
}
.feature h3 { margin-top: 1.25rem; font-size: 1.1rem; font-weight: 600; }
.feature p { margin-top: 0.5rem; color: var(--ink-3); font-size: 0.95rem; }

.policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: clamp(40px, 5vw, 64px);
  overflow: hidden;
  border: var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.policy__col { padding: clamp(24px, 3.5vw, 40px); }
.policy__col--ur { background: var(--mist); }
.policy h3 { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; font-size: 1.25rem; }
.policy .checklist { margin-top: 1.25rem; }
/* Urdu: the system Naskh until main.js switches to the webfont near #policy (html.ur-font); never uppercase */
.policy__ur {
  color: var(--ink);
  font-family: var(--font-ur-system);
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.9;
}
html.ur-font .policy__ur,
html:not(.js) .policy__ur { font-family: var(--font-ur); }
.policy__ur h3 { font-family: inherit; font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
.policy__ur ul { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.policy__ur li { position: relative; padding-right: 1.3rem; }
.policy__ur li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.8em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--royal);
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);   /* ≥961; one column at ≤960 */
  align-items: start;
  gap: clamp(40px, 6vw, 80px);
}
.about__copy > p { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-3); }
.about__copy > p + p { margin-top: 0.85rem; }

/* People as ruled rows, not boxes */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0 var(--col-gap); margin-top: 2rem; }
.person {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border: 0;
  border-top: var(--rule-soft);
  border-radius: 0;
  background: none;
}
.person__mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--midnight);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.person__name { color: var(--ink); font-weight: 600; line-height: 1.3; }
.person__role { color: var(--ink-3); font-size: 0.88rem; }

/* Company profile: its 9 pages one at a time (native scroll-snap; the arrows and page count come from JS). No download
   (owner, 18 Oct). Pictures built by tools/profile.sh. Its own container under the two About columns, so the sticky
   brand panel stops before it. */
.profile-viewer { margin-top: clamp(48px, 6vw, 88px); }
.profile-viewer .subhead { margin-top: 0; margin-bottom: 0; }
.profile-viewer__intro { margin-top: 0.5rem; color: var(--ink-3); }
.profile-viewer__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--col-gap);
  margin-top: 1.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.profile-viewer__page { margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.profile-viewer__page img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--deep); }
.profile-viewer__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.profile-viewer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--midnight);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--midnight);
}
.profile-viewer__btn .icon { width: 1.25rem; height: 1.25rem; }
.profile-viewer__btn .icon--back { transform: scaleX(-1); }
.profile-viewer__btn:disabled { opacity: 0.35; cursor: default; }
.profile-viewer__count { min-width: 7.5em; text-align: center; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .profile-viewer__btn:not(:disabled):hover { background: var(--mist-2); }
}

/* Navy "plaque" for the stacked reversed logo (brand: logo on a navy panel); a thin inset frame, no shadow */
.brand-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  min-height: 420px;
  padding: clamp(40px, 6vw, 64px);
  border-radius: var(--radius-lg);
  outline: 1px solid var(--on-dark-line);
  outline-offset: -14px;
  background-color: var(--midnight);
  background-image: var(--tile-grid);
  background-size: 48px 48px;
  text-align: center;
}
.brand-panel img { width: clamp(150px, 70%, 260px); }   /* never below the 140px logo minimum in the narrow 4fr column */
.brand-panel__tagline {
  color: var(--white);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-panel__rule { width: 48px; height: 2px; background: rgba(255, 255, 255, 0.5); }
.brand-panel__lines { color: var(--on-dark-2); font-size: 0.95rem; }

/* ---------- Visit / contact ---------- */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);   /* ≥961; one column at ≤960 */
  align-items: start;
  gap: clamp(32px, 5vw, 56px);
}
/* Contacts as ruled rows */
.contact-list { display: grid; gap: 0; }
.contact-item { display: flex; gap: 1rem; padding-block: 1.25rem; border-top: var(--rule-soft); }
.contact-item__title { color: var(--ink); font-weight: 600; }
.contact-item__text { color: var(--ink-3); }
.contact-item__text a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--royal-soft);
  text-underline-offset: 3px;
}
.contact-item__text a:hover { color: var(--royal); text-decoration-color: currentColor; }
.contact-item .link-arrow { margin-top: 0.3rem; font-size: 0.9rem; }

/* Map facade: a Deep navy tile-grid panel; the Google iframe is only added when "Show map here" is tapped */
.map {
  position: relative;
  margin-top: 2rem;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--deep);
  background-image: var(--tile-grid);
  background-size: 32px 32px;
  color: var(--on-dark-2);
  aspect-ratio: 16 / 10;
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__facade {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 20px;
  text-align: center;
}
.map__facade > .icon { width: 32px; height: 32px; color: var(--white); }
.map__place { color: var(--white); font-weight: 600; line-height: 1.4; }
.map__note { color: var(--on-dark-3); font-size: 0.8125rem; }
.map__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; }
.map + .map { margin-top: 1rem; }   /* the Sukkur map under the Khairpur Mirs one */

.form-card {
  padding: clamp(24px, 3.5vw, 40px);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.form-card h3 { font-size: 1.4rem; }
.form-card > p { margin-top: 0.4rem; margin-bottom: 1.5rem; color: var(--ink-3); }
.form-note { display: flex; gap: 0.5rem; color: var(--ink-3); font-size: 0.82rem; }
.form-note .icon { width: 16px; height: 16px; margin-top: 0.15em; }

/* ---------- CTA band (marble texture under a 0.8 Midnight scrim: white text is about 11:1 over any of it) ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--midnight);
  color: var(--on-dark-2);
}
.cta-band__bg,
.cta-band__bg img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-band); pointer-events: none; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  padding-block: clamp(64px, 9vw, 120px);
}
.cta-band h2 { color: var(--white); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
.cta-band p { margin-top: 0.5rem; max-width: 36rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--midnight); color: var(--on-dark-2); font-size: 0.93rem; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));   /* brand, Products, Company, Contact, Follow */
  gap: 40px;
  padding-block: clamp(56px, 7vw, 80px) 48px;
}
.site-footer__brand img { width: 210px; }
.site-footer__brand p { max-width: 22rem; margin-top: 1.25rem; }
.site-footer h2 {
  margin-bottom: 1rem;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.site-footer ul { display: grid; gap: 0; }
.site-footer li { display: flex; align-items: flex-start; gap: 0.6rem; }
.site-footer li a,
.site-footer li span { display: inline-block; padding-block: 0.45rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.site-footer li .icon { width: 17px; height: 17px; margin-top: 0.42em; color: var(--white); }
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--on-dark-line);
  font-size: 0.85rem;
}
@media (min-width: 961px) {
  .site-footer__bottom { padding-right: 80px; }   /* keeps the text clear of the floating WhatsApp button (desktop only) */
}

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--white);
  box-shadow: var(--shadow-float);
  transition: transform 0.25s, background-color 0.2s, opacity 0.25s, visibility 0.25s;
}
.wa-float:hover { background: var(--wa-dark); transform: scale(1.06); }
.wa-float:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 8px var(--midnight); }
.wa-float .icon { width: 30px; height: 30px; }
.wa-float.is-hidden { opacity: 0; visibility: hidden; transform: scale(0.85); pointer-events: none; }

/* ---------- Mobile action bar (≤960px): WhatsApp / Call / Directions, replacing the floating button ----------
   Hidden by main.js (.is-hidden) while a full-width WhatsApp button ([data-hide-fab]) is on screen, and while the
   menu is open or a text field has focus. visibility is transitioned too, so a hidden bar can't be tapped or tabbed to.
   Kill switch: delete the markup and this block (incl. the ≤960 footer padding and .wa-float rules); the floating
   button then works everywhere exactly as before. */
.action-bar { display: none; }
@media (max-width: 960px) {
  /* Room for the bar at the end of the page. On the footer, not the body, so the strip stays Midnight when the bar slides away. */
  .site-footer { padding-bottom: var(--bar-h); }
  .wa-float { display: none; }
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    min-height: var(--bar-h);
    border-top: var(--rule-on-dark);
    background: var(--midnight);
    transition: transform 0.25s var(--ease-out), visibility 0.25s;
  }
  .action-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    outline-offset: -4px;
  }
  .action-bar a + a { border-left: var(--rule-on-dark); }
  .action-bar .icon { width: 20px; height: 20px; }
  /* Green only on the WhatsApp cell; a white focus ring there (5.0:1 on green) */
  .action-bar .action-bar__wa { --focus: var(--white); flex-direction: row; gap: 8px; background: var(--wa); font-size: 0.9375rem; }
  .action-bar.is-hidden,
  .is-typing .action-bar,
  .nav-open .action-bar { transform: translateY(100%); visibility: hidden; }
  /* With JS, wait for main.js's first check (.is-ready), so the bar never flashes or slides away on load.
     Without JS (or if main.js fails and the <head> fallback removes .js) the bar simply stays. */
  .js .action-bar:not(.is-ready) { transform: translateY(100%); visibility: hidden; transition: none; }
}
@media (max-width: 960px) and (hover: hover) and (pointer: fine) {
  .action-bar .action-bar__wa:hover { background: var(--wa-dark); }
}

/* ---------- Hero entrance (pure CSS, never waits on JS) ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* The hero photo settles from a slight zoom; it is never faded in, so it doesn't delay LCP */
@keyframes settle {
  from { transform: scale(1.06); }
  to { transform: none; }
}
.rise { animation: rise 0.6s var(--ease-out) both; }
.rise-d1 { animation-delay: 0.06s; }
.rise-d2 { animation-delay: 0.12s; }
.rise-d3 { animation-delay: 0.18s; }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-d1 { transition-delay: 0.08s; }
.js .reveal-d2 { transition-delay: 0.16s; }
.js .reveal-d3 { transition-delay: 0.24s; }

/* ---------- Photo cards (sanitary, outlet gallery): unboxed ---------- */
.subhead {
  margin: clamp(48px, 6vw, 88px) 0 clamp(20px, 3vw, 32px);
  padding-top: 16px;
  border-top: var(--rule-soft);
  font-size: var(--fs-h3-lg);
  line-height: 1.2;
}
.subhead--sm { margin: 1.75rem 0 0; padding-top: 0; border-top: 0; font-size: 1rem; }
.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.photo-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--mist-2); }
.photo-card figcaption {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.75rem 0 0;
}
.photo-card figcaption strong { color: var(--ink); font-weight: 600; line-height: 1.35; }
.photo-card figcaption span { color: var(--ink-3); font-size: 0.85rem; }
.photo-card--wide img { aspect-ratio: 3 / 1; object-fit: contain; border: var(--rule-soft); background: var(--white); }
/* "Illustration" badge on AI images: white on Midnight (19:1); 12px, the minimum for content */
.photo-card figcaption .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  background: var(--midnight);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Two real photos, staggered across the 12-column grid */
/* The first subhead sits right under the section head: no extra gap above it */
.section-head + .subhead { margin-top: 0; }
/* Sanitary feature: the Canva picture (caption band included), full width, with an "Ask about these basins" link */
.san-banner { margin: 0; }
.san-banner img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--midnight); }
.san-banner figcaption { margin-top: 0.85rem; }
.san-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); }
/* Supplier product photos on white: shown whole (contain) inside the same square frame, whatever their size */
.photo-card--product img {
  aspect-ratio: 1;
  object-fit: contain;
  padding: 10%;
  border: var(--rule-soft);
  background: var(--white);
}
.photo-card--product .link-arrow { margin-top: 0.25rem; }
/* Room & bathroom ideas (/tiles/): the owner's AI room pictures (6:5, a real-tile inset in the picture), 3 columns from
   700 px, a swipe rail below; the "Illustration" badge comes from .photo-card */
.ideas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) var(--col-gap); }
.photo-card--idea img { aspect-ratio: 6 / 5; height: auto; }
.photo-card--idea .btn { margin-top: 0.75rem; }   /* each card's green "Ask on WhatsApp" button (owner, 31 Oct) */
.san-note { margin-top: 1rem; color: var(--ink-3); font-size: 0.88rem; }
.fittings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.section-cta { display: flex; justify-content: flex-start; margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Tile bond ---------- */
.bond-banner { display: block; width: 100%; height: auto; margin-bottom: 2rem; border-radius: var(--radius-lg); }
@media (max-width: 699px) { .bond-banner { display: none; } }   /* its text is too small on phones; lazy, so not fetched */
.bond-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.bond-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
/* Studio pack shots (807×1000) barely crop in a 4:5 frame */
.bond-card__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--midnight); }
.bond-card .tags { margin-bottom: 0.25rem; }
.bond-card .link-arrow { align-self: flex-start; margin-top: auto; padding-top: 0.75rem; }
.bond-card__body { display: flex; flex-direction: column; padding: 1rem 0 0; }
.bond-card h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.bond-card__lead { margin-top: 0.35rem; color: var(--royal); font-weight: 600; }
.bond-card .checklist { margin-top: 1rem; }

/* ---------- Aura Vanity (the shop's own brand): 3:5 photo cards, design 01 large ---------- */
.vanity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vanity-card figure { display: flex; flex-direction: column; height: 100%; margin: 0; }
.vanity-card picture {
  position: relative;
  display: block;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--midnight);
}
.vanity-card img { width: 100%; height: 100%; object-fit: cover; }
.vanity-card figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.85rem; }
.vanity-card figcaption strong { color: var(--white); font-weight: 600; }
.vanity-card figcaption span { color: var(--on-dark-2); font-size: var(--fs-sm); }
.vanity-card .link-arrow { align-self: flex-start; margin-top: 0.5rem; font-size: var(--fs-sm); }
/* Design 01 spans two columns and two rows; its photo fills the height the two rows give it. Size containment keeps
   the photo from making the rows taller (an absolutely placed image here was skipped by lazy loading in Chrome). */
.vanity-card--feature { grid-column: span 2; grid-row: span 2; }
.vanity-card--feature picture { flex: 1 1 auto; min-height: 20rem; aspect-ratio: auto; contain: size; }
.vanity-card--feature figcaption strong { font-size: var(--fs-h3-lg); }
.vanity__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(32px, 4vw, 48px); }
.section--navy .rail-hint { color: var(--on-dark-3); }
@media (min-width: 700px) and (max-width: 960px) {
  .vanity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Outlet (Midnight): the showroom gallery ---------- */
.outlet {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.outlet .section-head .link-arrow { margin-top: 0.75rem; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gallery .photo-card:first-child { grid-column: 1 / -1; }   /* three photos: the aisle leads, full width */
.gallery .photo-card img { aspect-ratio: 16 / 9; }
.gallery .photo-card figcaption { gap: 0.1rem; }
.section--navy .photo-card img { background: var(--deep); }
.section--navy .photo-card figcaption strong { color: var(--white); }
.section--navy .photo-card figcaption span { color: var(--on-dark-2); }

/* ---------- About: vision & mission (unboxed; the vision reads as a pull-quote) ---------- */
/* Vision and mission: a navy panel in the look of the company profile slides (owner, 18 Oct): Midnight with one
   diagonal Royal Navy band, and the mission as numbered boxes 01–04 like profile page 3. Hard colour stops, no blur. */
.vm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.75rem;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius-lg);
  background-color: var(--midnight);
  background-image: linear-gradient(115deg, transparent 0 64%, rgba(34, 57, 111, 0.55) 64% 74%, transparent 74%);
  color: var(--on-dark-2);
}
.vm__item { min-width: 0; }
.vm__item h3 { color: var(--on-dark); font-size: 1rem; font-weight: 600; }   /* sentence case, never an uppercase label */
.vm__item p { margin-top: 0.5rem; color: var(--on-dark-2); font-size: 0.95rem; }
.vm__item:first-child p {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  border-left: 2px solid var(--royal-soft);
  color: var(--on-dark);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 500;
  line-height: 1.35;
}
.vm__mission { display: grid; gap: 0.6rem var(--col-gap); margin: 0.75rem 0 0; padding: 0; list-style: none; }
.vm__mission li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  background: var(--deep);
  color: var(--on-dark-2);
  font-size: 0.95rem;
  line-height: 1.4;
}
.vm__num {
  flex: none;
  min-width: calc(2.1rem + 1rem + 2px);   /* 01-04 same width, so the text lines up */
  box-sizing: border-box;
  padding-right: 1rem;
  border-right: 2px solid var(--royal);
  color: var(--on-dark);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 641px) {
  .vm__mission { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Questions (#faq): native <details>, so answers open without JavaScript and stay in the page for search ---------- */
.faq { max-width: 52rem; border-bottom: var(--rule-soft); }
.faq__item { border-top: var(--rule-soft); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 1rem 0;
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {   /* a plus that turns into a minus */
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--royal), var(--royal)) center / 14px 2px no-repeat,
    linear-gradient(var(--royal), var(--royal)) center / 2px 14px no-repeat;
}
.faq__item[open] summary::after { background-size: 14px 2px, 0 0; }
.faq__item p { max-width: 44rem; padding: 0 0 1.25rem; color: var(--ink-3); font-size: 1rem; line-height: 1.65; }
.faq__item a { color: var(--royal); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { color: var(--royal); }
}
.faq__more { margin-top: 1rem; }
/* The same questions in Roman Urdu and Urdu (#faq-ur): two columns like the store policy. The Urdu column uses the
   system Naskh until main.js switches to the webfont (html.ur-font); never letter-spaced (it breaks the joined letters). */
.faq-ur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); }
.faq-ur__col { min-width: 0; }
.faq-ur .faq { max-width: none; }
.faq-ur__title { margin-bottom: 0.5rem; font-size: 1.1rem; }
.faq-ur__col--ur { font-family: var(--font-ur-system); }
html.ur-font .faq-ur__col--ur,
html:not(.js) .faq-ur__col--ur { font-family: var(--font-ur); }
.faq-ur__col--ur .faq-ur__title,
.faq-ur__col--ur .faq__item summary { font-family: inherit; letter-spacing: 0; }
.faq-ur__col--ur .faq-ur__title { font-size: 1.35rem; }
.faq-ur__col--ur .faq__item summary { font-size: 1.2rem; line-height: 1.7; }
.faq-ur__col--ur .faq__item p { max-width: none; font-size: 1.15rem; line-height: 1.9; }
@media (max-width: 960px) {
  .faq-ur { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Inner pages (tiles, sanitary ware, vanities, tile bond, calculator, branches, brands) ---------- */
/* Page head: breadcrumb, the page's one h1, a short lead and the main actions. Midnight with one diagonal Royal
   band, like the vision panel and the company profile slides. */
.page-head {
  padding-block: clamp(24px, 3.5vw, 48px) clamp(40px, 6vw, 88px);
  background-color: var(--midnight);
  background-image: linear-gradient(115deg, transparent 0 66%, rgba(34, 57, 111, 0.55) 66% 78%, transparent 78%);
  color: var(--on-dark-2);
}
.page-head .eyebrow { margin-top: clamp(28px, 4vw, 56px); }
.page-head h1 {
  max-width: 22ch;
  color: var(--white);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
}
.page-head__lead { max-width: 40rem; margin-top: 1rem; font-size: var(--fs-lead); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; color: var(--on-dark-3); font-size: var(--fs-sm); }
.breadcrumb li + li::before {
  content: "›";
  content: "›" / "";  /* decorative: screen readers skip it */
  margin-inline: 0.6em;
}
.breadcrumb a,
.breadcrumb [aria-current] { display: inline-block; padding-block: 0.35rem; }
.breadcrumb a { color: var(--on-dark-2); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--white); text-decoration-color: currentColor; }
.breadcrumb [aria-current] { color: var(--white); }

/* Two plain white sections in a row read as one band: no double gap (the ruled section head separates them) */
.section:not(.section--mist):not(.section--navy) + .section:not(.section--mist):not(.section--navy) { padding-top: 0; }

/* "See all …" and related links under a summary on the home page */
.section-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-top: clamp(28px, 3.5vw, 40px); }

/* Running text, in line with the section heading (columns 4 to 12 on desktop) */
.prose { max-width: 44rem; color: var(--ink-2); font-size: 1.0625rem; }
.prose > * + * { margin-top: 1rem; }
.prose a:not(.link-arrow) { color: var(--royal); font-weight: 500; text-decoration: underline; text-decoration-color: var(--royal-soft); text-underline-offset: 3px; }
.prose a:not(.link-arrow):hover { color: var(--midnight); text-decoration-color: currentColor; }
.prose .checklist { margin-top: 1.25rem; }
.prose .tags--lg { margin-top: 1.25rem; }
/* Numbered steps 01, 02 … in the style of the mission boxes */
.steps { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; min-height: 2.25rem; padding-left: 4rem; counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  border-right: 2px solid var(--royal);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.steps strong { color: var(--ink); }
/* Term and description pairs (vanities by colour) */
.facts { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0; margin: 0; }
.facts dt,
.facts dd { padding-block: 0.75rem; border-top: var(--rule-soft); }
.facts dt { padding-right: var(--col-gap); color: var(--ink); font-weight: 600; }
.facts dd { margin: 0; color: var(--ink-3); }
@media (min-width: 961px) {
  .prose,
  .table-wrap { margin-left: calc(25% + var(--col-gap) / 4); }
}

/* Brands we stock: brand names as plain text tiles, no logos */
.brands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) var(--col-gap); }
.brands__group--lead { grid-column: 1 / -1; }
.brands__group { min-width: 0; padding-top: 1rem; border-top: var(--rule); }
.brands__group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-size: 1.1rem; }
.brands__group h3 span { color: var(--royal); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.brands__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.brands__list li {
  padding: 0.45rem 0.9rem;
  border: var(--rule-soft);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}
.brands__list a { color: var(--royal); text-decoration: underline; text-decoration-color: var(--royal-soft); text-underline-offset: 3px; }

/* Link cards: related pages, the rooms on /tiles/, what's in a showroom */
.related__title {
  margin-bottom: clamp(20px, 3vw, 32px);
  padding-top: 20px;
  border-top: var(--rule);
  font-size: var(--fs-h3-lg);
  line-height: 1.2;
}
.related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; padding: 0; list-style: none; }
.related__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 1.25rem 3rem 1.25rem 1.25rem;
  border: var(--rule-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: border-color var(--dur-fast);
}
.related__name { color: var(--ink); font-weight: 600; line-height: 1.3; }
.related__line { color: var(--ink-3); font-size: var(--fs-sm); }
.related__card .icon { position: absolute; top: 1.3rem; right: 1.25rem; color: var(--royal); transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .related__card:hover { border-color: var(--royal); }
  .related__card:hover .icon { transform: translateX(4px); }
}

/* Sanitary ware: the range in three ruled columns */
.range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem var(--col-gap); }
.range__col { min-width: 0; padding-top: 1rem; border-top: var(--rule); }
.range__col h3 { font-size: 1.1rem; }
.range .checklist { margin-top: 1rem; }

/* Tile calculator page: tiles per box for every size */
.table-wrap { max-width: 44rem; overflow-x: auto; border: var(--rule-soft); border-radius: var(--radius-lg); background: var(--white); }
.size-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.size-table th,
.size-table td { padding: 0.7rem 1rem; border-bottom: var(--rule-soft); text-align: left; vertical-align: top; }
.size-table thead th { background: var(--mist); color: var(--ink-3); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.size-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.size-table tbody tr:last-child > * { border-bottom: 0; }

/* Home: the slim pointer to the tile calculator page */
.calc-teaser { padding-block: clamp(48px, 6vw, 88px); }
.calc-teaser__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.calc-teaser h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
.calc-teaser p { max-width: 36rem; margin-top: 0.75rem; }

/* Branch pages: contacts beside the map */
.branch { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: clamp(32px, 5vw, 56px); }
.branch .map { margin-top: 0; }
.contact-item__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

/* ---------- Responsive ---------- */
@media (min-width: 961px) {
  /* Outlet: the aisle photo large on the left, the other two stacked on the right. Its picture fills the height of
     both rows; size containment keeps the photo itself from making the rows taller. */
  .gallery { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
  .gallery .photo-card:first-child { grid-column: auto; grid-row: span 2; }
  .gallery .photo-card:first-child picture { flex: 1 1 auto; min-height: 12rem; contain: size; }
  .gallery .photo-card:first-child img { height: 100%; aspect-ratio: auto; }
  .gallery .photo-card:first-child figcaption { flex: none; }
  .brand-panel { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Nine nav links need room: the menu collapses below 1261px */
@media (max-width: 1260px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    max-height: calc(100vh - var(--nav-top, var(--header-h)));
    max-height: calc(100dvh - var(--nav-top, var(--header-h)));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem var(--gutter) 1.5rem;
    border-top: var(--rule-soft);
    background: var(--white);
    box-shadow: var(--shadow-float);
  }
  .nav-open .nav { display: flex; }
  .nav-open { overflow: hidden; }
  /* Dimmed backdrop under the open menu; tapping it closes the menu. It is a sibling of the
     header, so it can cover the page below the header. */
  .nav-open .nav-backdrop {
    display: block;
    position: fixed;
    top: var(--nav-top, var(--header-h));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(1, 7, 54, 0.5);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a { padding: 1rem 0.5rem; border-bottom: var(--rule-soft); border-radius: 0; color: var(--ink-2); font-size: 1.0625rem; }
  .nav__list a.is-active::after,
  .nav__list a[aria-current]::after { display: none; }
  .nav__list a.is-active,
  .nav__list a[aria-current] { color: var(--midnight); font-weight: 600; box-shadow: inset 3px 0 0 var(--royal); }
  .nav__cta { width: 100%; }

  .calc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .calc__intro { max-width: 680px; }
  .calc__card { width: 100%; max-width: 780px; }
}
@media (max-width: 1260px) and (hover: hover) and (pointer: fine) {
  .nav__list a:hover { background: var(--mist); color: var(--midnight); }
}

@media (min-width: 961px) and (max-width: 1260px) {
  .nav { left: auto; right: var(--gutter); width: 380px; border: var(--rule-soft); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
}

@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
  .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .brand img { width: 148px; }

  /* Chips scroll sideways; the edges fade so the cut-off chip reads as "more" */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 6px;   /* room for the focus ring */
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }

  /* Hero facts: a ruled 2 / 1 / 2 grid; the customers figure gets the middle row to itself */
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust li { padding: 14px 16px; }
  .trust li:nth-child(3) { grid-column: 1 / -1; }
  .trust li:nth-child(3),
  .trust li:nth-child(4) { border-left: 0; padding-left: 0; }
  .trust li:nth-child(n+3) { border-top: var(--rule-on-dark); }

  .san-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .about,
  .visit,
  .branch { grid-template-columns: minmax(0, 1fr); }
  .brand-panel { min-height: 0; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .policy { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 700px) and (max-width: 960px) {
  /* Tile bond: one card per row, the pack shot beside the text */
  .bond-grid { grid-template-columns: minmax(0, 1fr); }
  .bond-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: none; }
  .bond-card__media { aspect-ratio: auto; min-height: 300px; }
}

/* Products on tablets: the Tiles lead spans both columns at 3:2; the two text-only side cards sit side by side below it */
@media (min-width: 641px) and (max-width: 960px) {
  .products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--col-gap); }
  .product-card--lead { grid-column: 1 / -1; }
  .product-card--lead .product-card__media { aspect-ratio: 3 / 2; }
}

/* Swipe rail on phones (tile bond; tile styles): native scroll-snap, no library. The negative
   margin cancels the container's padding exactly, so the page never scrolls sideways.
   position: relative keeps absolutely positioned children (the visually-hidden link text)
   inside the rail's scroll box; without it they widen the phone's layout viewport. */
@media (max-width: 699px) {
  .rail {
    position: relative;
    display: flex;
    gap: var(--rail-gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 12px;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 var(--rail-card); min-width: 0; scroll-snap-align: start; }

  /* Aura Vanity: design 01 is an ordinary 3:5 card in the rail */
  .vanity-card--feature picture { flex: none; min-height: 0; aspect-ratio: 3 / 5; contain: none; }
  .vanity-card--feature figcaption strong { font-size: inherit; }

  /* Tile styles: wide cards turn 4:5 like the rest (this must come after the @supports cqi rule) */
  .swatch-card--wide .swatch-card__media { aspect-ratio: 4 / 5; height: auto; }
  .rail-hint {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    color: var(--ink-3);
    font-size: var(--fs-xs);
  }
  .collections .section-head { margin-bottom: 24px; }
  .filters { margin-bottom: 1.25rem; }
}

@media (max-width: 640px) {
  .eyebrow { letter-spacing: 0.14em; }

  /* Hero: trim only (the second sentence's facts sit in the proof band directly below);
     "Visit our showroom" becomes a text link under the full-width WhatsApp button */
  .hero__lead-more { display: none; }
  .hero__actions .btn--wa { flex: 1 1 100%; }
  .hero .hero__visit {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.9375rem;
    text-decoration: underline 1px rgba(255, 255, 255, 0.45);
    text-underline-offset: 0.3em;
  }
  .hero__phones { margin-top: 0.25rem; padding-top: 0; border-top: 0; }

  /* Why us: compact rows, the icon tile beside the heading and text */
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .feature .tile-icon { grid-row: span 2; }
  .feature h3 { margin-top: 0; }
  .feature p { margin-top: 0.35rem; font-size: 0.9rem; }

  /* About: the header already carries the logo on every screen, so the plaque (and its lazy SVG) is skipped */
  .brand-panel { display: none; }

  /* Map: grows with the facade's text and buttons instead of clipping them. aspect-ratio is dropped here,
     because with it the 300px min-height turns into a 480px min-width and the page scrolls sideways. */
  .map { display: grid; aspect-ratio: auto; min-height: 300px; }
  .map__facade { position: relative; inset: auto; }

  /* Products: the Tiles photo goes full-bleed; the side cards' lists become one compact dotted line */
  .product-card--lead .product-card__media { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .product-card--side .checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 12px;
    font-size: 0.875rem;
  }
  .product-card--side .checklist li { display: block; }
  .product-card--side .checklist .icon { display: none; }
  .product-card--side .checklist li + li::before {
    content: "·";
    content: "·" / "";  /* decorative: screen readers skip it */
    margin-inline: 0.45em;
    color: var(--ink-3);
  }

  /* Sanitary: the two real photos stay side by side, still staggered, with compact captions */
  .fittings { grid-template-columns: minmax(0, 1fr); }
  .san-grid { gap: 12px; }
  .san-grid .photo-card figcaption strong { font-size: 0.9rem; }

  .collections__note .btn,
  .section-cta .btn { white-space: normal; }

  .gallery { gap: 12px; }

  .form-row,
  .form-row--3 { grid-template-columns: minmax(0, 1fr); }

  .calc__results { grid-template-columns: minmax(0, 1fr); }
  .stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.15rem 1rem; }
  .stat__value { grid-row: span 2; align-self: center; text-align: right; }

  .collections__note .btn,
  .section-cta .btn { width: 100%; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 100%; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  /* Inner pages: one column; the page-head and summary buttons share the width */
  .brands,
  .range,
  .related__grid,
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts dd { padding-top: 0; border-top: 0; }
  .page-head__actions .btn,
  .calc-teaser .btn { flex: 1 1 100%; white-space: normal; }
  .section-links .btn { width: 100%; white-space: normal; }
}

@media (max-width: 480px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  /* Box-size table: tighter, and "Forte" may wrap, so all three columns fit a 320 px phone */
  .size-table { font-size: 0.875rem; }
  .size-table th,
  .size-table td { padding: 0.6rem; }
  .size-table tbody th { white-space: normal; }
}

@media (max-width: 400px) {
  .btn--lg { padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media img,
  .rise,
  .swatch-card,
  .marquee__track { animation: none !important; }   /* an infinite loop at 0.01ms would flicker */
  .link-arrow .icon,
  .swatch-card__media::before,
  .action-bar { transition: none; }
}

@media print {
  .js .reveal,
  .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .site-footer { padding-bottom: 0; }
  .marquee,
  .vanity__actions,
  .nav,
  .nav-toggle,
  .nav-backdrop,
  .wa-float,
  .action-bar,
  .map,
  .filters,
  .rail-hint,
  .hero__media,
  .hero::before,
  .proof__social,
  .brand-panel,
  .profile-viewer__track,
  .profile-viewer__nav,
  .cta-band__bg,
  .cta-band::before,
  .site-footer__brand img { display: none !important; }
  /* Rails print as a plain 2-column grid */
  .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
  /* The reversed logo needs its navy panel */
  .site-header {
    position: static;
    box-shadow: none;
    background: var(--midnight) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .hero { min-height: 0; }
  .hero,
  .hero__inner,
  .hero__facts,
  .page-head,
  .proof,
  .section--navy,
  .collections__note,
  .vm,
  .vm__mission li,
  .cta-band,
  .site-footer,
  .stat--primary { background: none !important; color: #000; }
  .stat--primary { border: 1px solid #000; }
  /* Light-on-dark text would print white on white */
  .hero__title,
  .hero__lead,
  .page-head h1,
  .page-head__lead,
  .breadcrumb ol,
  .breadcrumb a,
  .breadcrumb [aria-current],
  .hero__phones,
  .hero__phones a,
  .hero__phones .icon,
  .eyebrow--light,
  .section--navy h2,
  .calc__intro p,
  .checklist--light li,
  .checklist--light .icon,
  .btn--ghost-light,
  .hero__visit,
  .trust__value,
  .trust__label,
  .proof__visit,
  .proof__visit .icon,
  .link-arrow--light,
  .section--navy .section-head p,
  .section--navy .photo-card figcaption strong,
  .section--navy .photo-card figcaption span,
  .vanity-card figcaption strong,
  .vanity-card figcaption span,
  .collections__note p,
  .collections__note a:not(.btn),
  .cta-band h2,
  .cta-band p,
  .stat--primary .stat__label,
  .stat--primary .stat__value,
  .stat--primary .stat__sub,
  .site-footer,
  .site-footer h2,
  .site-footer a,
  .vm__item h3,
  .vm__item p,
  .vm__mission li,
  .vm__num,
  .site-footer li .icon { color: #000 !important; }
  .eyebrow--light::after { background: #000; }
  .btn--ghost-light { border-color: #000; }
  /* Filled labels and buttons print as black outlines (the "Illustration" badge must stay readable) */
  .btn--wa,
  .photo-card figcaption .badge,
  .seg input:checked + label { background: none !important; color: #000 !important; border: 1px solid #000; }
}