@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Devanagari:wght@400;500;600&family=Noto+Serif+Bengali:wght@400;500;600&family=Noto+Serif+Gujarati:wght@400;500;600&family=Noto+Serif+Gurmukhi:wght@400;500;600&family=Noto+Serif+Kannada:wght@400;500;600&family=Noto+Serif+Malayalam:wght@400;500;600&family=Noto+Serif+Oriya:wght@400;500;600&family=Noto+Serif+Tamil:wght@400;500;600&family=Noto+Serif+Telugu:wght@400;500;600&family=Noto+Nastaliq+Urdu:wght@400;500;600&family=Noto+Sans+Ol+Chiki:wght@400;500;600&family=Noto+Sans+Meetei+Mayek:wght@400;500;600&display=swap');
/* Indic serif fallbacks above: only the family whose script is actually
   rendered gets downloaded, so this costs nothing until you translate. */

/* ============================================================
   Projexel Heritage — "Aged Archive" Heritage Theme
   Inspired by vintage parchment, sepia ink & heritage collage
   Palette: parchment / sepia ink / rust red / antique bronze
   ============================================================ */

:root {
  /* Core palette */
  --paper:        #e8d8b0;
  --paper-light:  #efe3c4;
  --paper-card:   #f3e8cc;
  --paper-dark:   #ddc796;
  --paper-deep:   #c9ae7c;
  --ink:          #46331f;
  --ink-soft:     #6f583c;
  --rust:         #9a441c;
  --rust-dark:    #7c3616;
  --bronze:       #9c7a3c;
  --bronze-soft:  #c0a05f;
  --brown-deep:   #2c1f0f;

  /* Legacy aliases (referenced by inline styles on pages) */
  --maroon:       var(--rust);
  --maroon-dark:  var(--rust-dark);
  --maroon-deep:  #4a3116;
  --gold:         var(--bronze);
  --gold-soft:    var(--bronze-soft);
  --cream:        var(--paper);
  --sand:         var(--paper-dark);
  --sand-dark:    #c2a878;
  --white:        var(--paper-card);

  --radius: 3px;
  --shadow: 0 16px 38px rgba(70, 45, 15, 0.20);
  --shadow-sm: 0 6px 16px rgba(70, 45, 15, 0.13);
  --hairline: 1px solid rgba(70, 45, 15, 0.25);

  --font-head: "Cormorant Garamond", "Noto Serif Devanagari", "Noto Serif Bengali", "Noto Serif Gujarati", "Noto Serif Gurmukhi", "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Oriya", "Noto Serif Tamil", "Noto Serif Telugu", "Noto Nastaliq Urdu", "Noto Sans Ol Chiki", "Noto Sans Meetei Mayek", Georgia, "Times New Roman", serif;
  --font-body: "EB Garamond", "Noto Serif Devanagari", "Noto Serif Bengali", "Noto Serif Gujarati", "Noto Serif Gurmukhi", "Noto Serif Kannada", "Noto Serif Malayalam", "Noto Serif Oriya", "Noto Serif Tamil", "Noto Serif Telugu", "Noto Nastaliq Urdu", "Noto Sans Ol Chiki", "Noto Sans Meetei Mayek", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Segoe Script", cursive;

  /* Subtle paper grain (inline SVG noise) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.23 0 0 0 0 0.10 0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    var(--grain),
    radial-gradient(900px 520px at 6% 2%, rgba(122, 83, 34, 0.18), transparent 60%),
    radial-gradient(1100px 620px at 97% 8%, rgba(122, 83, 34, 0.14), transparent 60%),
    radial-gradient(1000px 720px at 50% 115%, rgba(101, 67, 24, 0.20), transparent 65%),
    linear-gradient(160deg, #eee1bf 0%, #e8d8b0 45%, #ddc99b 100%);
  line-height: 1.7;
  font-size: 17px;
  overflow-x: hidden;
}

::selection { background: rgba(156, 69, 29, 0.25); }

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

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; color: var(--ink); font-weight: 600; }
h1, h2 { text-transform: uppercase; letter-spacing: 0.08em; }

a { color: var(--rust); text-decoration: none; }

.container { width: min(1180px, 92%); margin: 0 auto; }

section { padding: 76px 0; position: relative; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-body);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-gold { background: var(--bronze); color: var(--paper-light); border-color: var(--bronze); }
.btn-gold:hover { background: #8a6a30; color: var(--paper-light); }
.btn-maroon { background: var(--rust); color: #f4e8cb; border-color: var(--rust); }
.btn-maroon:hover { background: var(--rust-dark); color: #f4e8cb; }
.btn-outline { border-color: rgba(70, 45, 15, 0.55); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper-light); }
.btn-outline-light { border-color: rgba(70, 45, 15, 0.55); color: var(--ink); background: transparent; }
.btn-outline-light:hover { background: var(--ink); color: var(--paper-light); }

/* ---------- Badges / labels ---------- */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rust);
  margin-bottom: 16px;
  font-family: var(--font-body);
}
.eyebrow.on-light { color: var(--rust); }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.8vw, 42px); margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); font-size: 18px; }

.placeholder-note {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.8;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--brown-deep);
  color: rgba(236, 220, 180, 0.85);
  font-size: 13.5px;
  padding: 8px 0;
  letter-spacing: 0.03em;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar-contacts { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar-contacts a { color: rgba(236, 220, 180, 0.85); }
.topbar-contacts a:hover { color: var(--bronze-soft); }

/* ---------- Navbar ---------- */
.navbar {
  background: linear-gradient(#efe3c4, #e9d9b4);
  border-bottom: var(--hairline);
  box-shadow: 0 2px 14px rgba(70, 45, 15, 0.10);
  position: sticky;
  top: 0;
  z-index: 60;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 20px; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bronze);
  box-shadow: inset 0 0 0 3px var(--paper-light), inset 0 0 0 4px rgba(156, 122, 60, 0.6);
  color: var(--rust);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.04em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-head); font-size: 21px; color: var(--ink); letter-spacing: 0.06em; }
.brand-text small { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 15px; }
.nav > a { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap; letter-spacing: 0.03em; }
.nav > a:hover { color: var(--rust); }
.nav > a.active { color: var(--rust); border-bottom-color: var(--bronze); font-weight: 600; }
.nav-cta { padding: 9px 16px; font-size: 11px; letter-spacing: 0.14em; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.2s; }

/* ---------- Home hero (parchment centrepiece) ---------- */
.hero {
  position: relative;
  color: var(--ink);
  padding: 96px 0 84px;
  overflow: hidden;
  text-align: center;
}
.hero-inner { position: relative; display: block; z-index: 2; }

.hero-kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rust);
  margin-bottom: 30px;
}

.hero-wordmark { margin-bottom: 38px; }
.hero-wordmark .wordmark {
  display: block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 68px);
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  color: var(--bronze);
  line-height: 1.05;
}
.hero-wordmark .wordmark-sub {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.62em;
  margin-right: -0.62em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero h1 {
  color: var(--ink);
  font-size: clamp(28px, 4.4vw, 50px);
  letter-spacing: 0.1em;
  margin: 0 auto 26px;
  max-width: 960px;
}
.hero h1 span, .hero h1 em { display: block; font-style: normal; }
.hero h1 em { color: var(--rust); }

.hero p.lead {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 0 auto 36px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.hero-strip {
  margin-top: 46px;
  display: flex;
  gap: 12px 40px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero-strip span { display: flex; align-items: center; gap: 9px; }
.hero-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); display: inline-block; }

/* Handwritten margin notes */
.hero-note {
  position: absolute;
  z-index: 1;
  width: 250px;
  font-family: var(--font-hand);
  font-size: 21px;
  line-height: 1.4;
  color: #7a5a33;
  text-align: left;
}
.note-left  { left: 3.5%; top: 34%; transform: rotate(-3.5deg); }
.note-right { right: 2.5%; bottom: 3%; transform: rotate(2.5deg); }

/* Torn-paper collage fragments */
.hero-frag {
  position: absolute;
  z-index: 0;
  background-image: var(--grain), linear-gradient(140deg, #b08a4e 0%, #96703a 55%, #7d5a2c 100%);
  clip-path: polygon(0 0, 16% 5%, 33% 0, 51% 8%, 69% 2%, 87% 9%, 100% 3%, 96% 24%, 100% 47%, 93% 70%, 99% 89%, 85% 100%, 63% 93%, 42% 100%, 23% 92%, 8% 99%, 0 83%, 5% 61%, 0 38%, 6% 17%);
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.frag-tl { top: -80px;  left: -100px;  width: 300px; height: 250px; transform: rotate(-5deg); }
.frag-tr { top: -70px;  right: -110px; width: 360px; height: 270px; transform: rotate(4deg); opacity: 0.34; }
.frag-bl { bottom: -100px; left: -90px; width: 270px; height: 250px; transform: rotate(6deg); opacity: 0.3; }
.frag-br { bottom: -90px; right: -90px; width: 300px; height: 230px; transform: rotate(-4deg); opacity: 0.34; }

/* Fragments carrying a sepia photograph */
.hero-frag.photo { opacity: 0.5; }
.hero-frag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.5) saturate(0.72) contrast(0.95);
}

/* Scroll indicator */
.hero-scroll {
  margin-top: 56px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
}
.hero-scroll .scroll-ring {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(70, 45, 15, 0.5);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ink-soft);
  animation: heroBob 2.6s ease-in-out infinite;
}
.hero-scroll .scroll-label {
  font-size: 13px;
  letter-spacing: 0.4em;
  margin-right: -0.4em;
  text-transform: uppercase;
}
.hero-scroll:hover .scroll-ring { border-color: var(--rust); color: var(--rust); }
@keyframes heroBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* ---------- Stats band ---------- */
.stats-band {
  background: rgba(160, 120, 60, 0.10);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
  color: var(--ink);
  padding: 42px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 44px; color: var(--bronze); line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.18em; text-transform: uppercase; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.card {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card-body { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 23px; margin-bottom: 10px; letter-spacing: 0.02em; }
.card-body p { color: var(--ink-soft); font-size: 15.5px; flex: 1; }
.card-link {
  margin-top: 18px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
}
.card-link:hover { color: var(--bronze); }

.icon-tile {
  width: 54px; height: 54px;
  border-radius: 2px;
  background: transparent;
  border: 1px solid rgba(70, 45, 15, 0.35);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  color: var(--rust);
}
.icon-tile svg { width: 26px; height: 26px; }

/* ---------- Placeholder imagery (aged-photo look) ---------- */
.ph {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  color: rgba(240, 226, 190, 0.9);
  overflow: hidden;
  border-bottom: 1px solid rgba(70, 45, 15, 0.18);
}
.ph svg.motif { width: 74px; height: 74px; opacity: 0.85; }
.ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.32) saturate(0.8) contrast(0.94);
}
.ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(43, 28, 10, 0.38) 100%);
}
.ph .ph-tag {
  position: absolute;
  bottom: 10px; right: 10px;
  background: rgba(35, 24, 10, 0.5);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
  z-index: 1;
}
.ph-a { background: linear-gradient(140deg, #8a6a45, #5d452c); }
.ph-b { background: linear-gradient(140deg, #a3814f, #6e5430); }
.ph-c { background: linear-gradient(140deg, #7d6248, #4c3a28); }
.ph-d { background: linear-gradient(140deg, #93755a, #5f4936); }
.ph-e { background: linear-gradient(140deg, #a08052, #63492e); }
.ph-f { background: linear-gradient(140deg, #6e6b52, #464434); }
.ph-wide { aspect-ratio: 16 / 7; }
.ph-square { aspect-ratio: 1; }

/* ---------- USP band (aged paper note) ---------- */
.usp-band {
  position: relative;
  background-image:
    var(--grain),
    radial-gradient(140% 130% at 50% 0%, #e6d2a2 0%, #d9c089 55%, #c5a56b 100%);
  color: var(--ink);
  border-radius: 10px 16px 12px 18px;
  padding: 58px 56px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 44px;
  align-items: center;
  box-shadow: 0 26px 54px rgba(70, 45, 15, 0.24), inset 0 0 70px rgba(112, 74, 28, 0.28);
}
.usp-band::before {
  content: "";
  position: absolute;
  inset: -12px 8px 6px -10px;
  background: #ab8750;
  opacity: 0.45;
  transform: rotate(1.4deg);
  z-index: -1;
  clip-path: polygon(0 4%, 14% 0, 36% 5%, 58% 1%, 82% 6%, 100% 0, 98% 30%, 100% 55%, 96% 78%, 100% 96%, 76% 100%, 52% 95%, 28% 100%, 9% 94%, 0 100%, 3% 68%, 0 42%, 4% 20%);
}
.usp-band h2 { color: var(--ink); font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
.usp-band p { color: var(--ink-soft); margin-bottom: 24px; font-size: 17px; }
.usp-points { list-style: none; margin: 0 0 28px; display: grid; gap: 11px; }
.usp-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.usp-points .tick { color: var(--rust); font-weight: 700; }
.usp-band svg { filter: sepia(0.35) saturate(0.75); opacity: 0.92; }

/* ---------- Feature list (why choose us) ---------- */
.feature {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.18);
  border-top: 2px solid var(--bronze);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.feature h3 { font-size: 21px; margin-bottom: 8px; }
.feature p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Project cards ---------- */
.project-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.project-meta span { display: flex; align-items: center; gap: 5px; }
.chip {
  display: inline-block;
  background: transparent;
  color: var(--rust);
  border: 1px solid rgba(154, 68, 28, 0.45);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 4px 12px;
  text-transform: uppercase;
}

/* ---------- Filter pills ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-pill {
  border: 1px solid rgba(70, 45, 15, 0.35);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 2px;
  padding: 9px 22px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: 0.15s;
}
.filter-pill:hover { border-color: var(--rust); color: var(--rust); }
.filter-pill.active { background: var(--rust); border-color: var(--rust); color: #f4e8cb; }

/* ---------- Testimonials ---------- */
.quote-card {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.18);
  border-radius: var(--radius);
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.quote-card::before {
  content: "\201C";
  font-family: var(--font-head);
  font-size: 80px;
  color: var(--bronze);
  line-height: 1;
  position: absolute;
  top: 10px; left: 20px;
  opacity: 0.45;
}
.quote-card p { font-size: 16.5px; color: var(--ink-soft); margin: 28px 0 20px; font-style: italic; }
.quote-who { display: flex; align-items: center; gap: 12px; }
.quote-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--bronze);
  color: var(--rust); font-weight: 600; font-size: 17px;
  font-family: var(--font-head);
  display: grid; place-items: center;
}
.quote-who b { display: block; font-size: 15.5px; }
.quote-who span { font-size: 13px; color: var(--ink-soft); }

/* ---------- CTA band ---------- */
.cta-band {
  background-image: var(--grain), linear-gradient(140deg, #3a2a16 0%, #291d0d 100%);
  border: 1px solid rgba(192, 160, 95, 0.35);
  border-radius: 6px;
  padding: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.cta-band h2 { font-size: clamp(24px, 3.2vw, 34px); color: var(--bronze-soft); margin-bottom: 10px; }
.cta-band p { color: rgba(238, 222, 180, 0.8); max-width: 560px; }
.cta-band .btn-maroon { background: var(--bronze-soft); border-color: var(--bronze-soft); color: var(--brown-deep); }
.cta-band .btn-maroon:hover { background: #d0b579; color: var(--brown-deep); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  padding: 78px 0 62px;
  text-align: center;
  border-bottom: var(--hairline);
}
.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  background-image: var(--grain), linear-gradient(140deg, #8a643a 0%, #6b4a26 55%, #55381b 100%);
  clip-path: polygon(0 0, 16% 5%, 33% 0, 51% 8%, 69% 2%, 87% 9%, 100% 3%, 96% 24%, 100% 47%, 93% 70%, 99% 89%, 85% 100%, 63% 93%, 42% 100%, 23% 92%, 8% 99%, 0 83%, 5% 61%, 0 38%, 6% 17%);
  opacity: 0.4;
  pointer-events: none;
}
.page-hero::before { top: -60px; left: -70px; width: 280px; height: 230px; transform: rotate(-5deg); }
.page-hero::after { bottom: -70px; right: -70px; width: 300px; height: 230px; transform: rotate(4deg); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--ink); font-size: clamp(30px, 4.5vw, 48px); margin-top: 14px; letter-spacing: 0.1em; }
.page-hero p.sub { margin: 16px auto 0; color: var(--ink-soft); max-width: 660px; font-size: 18px; }
.crumbs { font-size: 12.5px; color: var(--ink-soft); letter-spacing: 0.22em; text-transform: uppercase; }
.crumbs a { color: var(--rust); }

/* Collage variant: real photo fragments replace the plain torn shapes */
.page-hero.collage::before,
.page-hero.collage::after { display: none; }
.page-hero .hero-frag.photo { opacity: 0.45; }
.page-hero .hero-note { width: 200px; font-size: 19px; }
.page-hero .note-left { top: 22%; }
.page-hero .note-right { bottom: 6%; }

/* ---------- Process timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: step; }
.step {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.18);
  border-radius: var(--radius);
  padding: 26px 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 600;
  color: var(--bronze);
  display: block;
  margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--ink-soft); }

/* ---------- Before / After slider ---------- */
.ba {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(70, 45, 15, 0.25);
  aspect-ratio: 16 / 9;
  user-select: none;
}
.ba .ba-layer { position: absolute; inset: 0; }
.ba .ba-layer svg { width: 100%; height: 100%; object-fit: cover; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2; }
.ba-range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 5;
}
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--bronze-soft);
  z-index: 3;
  transform: translateX(-50%);
}
.ba-handle::after {
  content: "⇔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--bronze-soft);
  color: var(--brown-deep);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(35, 24, 10, 0.4);
}
.ba-label {
  position: absolute;
  top: 14px;
  background: rgba(35, 24, 10, 0.55);
  color: #efe3c4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 2px;
  z-index: 4;
}
.ba-label.before { left: 14px; }
.ba-label.after { right: 14px; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(70, 45, 15, 0.2);
  padding: 0;
  background: none;
  text-align: left;
}
.gallery-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(35, 24, 10, 0.72));
  color: #efe3c4;
  padding: 28px 14px 12px;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  z-index: 1;
}
dialog.lightbox {
  border: 1px solid rgba(192, 160, 95, 0.4);
  border-radius: var(--radius);
  padding: 0;
  max-width: min(860px, 92vw);
  width: 100%;
  background: var(--paper-card);
  box-shadow: 0 30px 80px rgba(20, 12, 4, 0.5);
}
dialog.lightbox::backdrop { background: rgba(26, 17, 6, 0.8); }
.lightbox-body { padding: 0; }
.lightbox-body .ph { aspect-ratio: 16/9; }
.lightbox-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
.lightbox-foot span { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- Forms ---------- */
.form-card {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.2);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 42px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0.04em; }
.form-field label .req { color: var(--rust); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 15.5px;
  padding: 12px 14px;
  border: 1px solid var(--sand-dark);
  border-radius: 2px;
  background: #f7eed7;
  color: var(--ink);
  transition: border-color 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--rust);
  background: #faf3e0;
}
.form-field input.invalid, .form-field select.invalid, .form-field textarea.invalid { border-color: #9a2b1c; background: #f3e0d2; }
.form-field .hint { font-size: 12.5px; color: var(--ink-soft); }
.form-error { color: #9a2b1c; font-size: 13px; display: none; }
.form-field.show-error .form-error { display: block; }

.upload-box {
  border: 1px dashed #a98d5c;
  border-radius: 2px;
  padding: 24px;
  text-align: center;
  background: #f7eed7;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 15px;
  color: var(--ink-soft);
}
.upload-box:hover { border-color: var(--rust); background: #faf3e0; }
.upload-box b { color: var(--rust); }
.upload-list { list-style: none; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); display: grid; gap: 4px; }
.upload-list li::before { content: "📎 "; }

.form-success {
  display: none;
  background: #ece5c2;
  border: 1px solid #a3a065;
  border-radius: 4px;
  padding: 28px;
  text-align: center;
}
.form-success.visible { display: block; }
.form-success h3 { color: #5c6231; margin-bottom: 8px; }
.form-success p { font-size: 15px; color: var(--ink-soft); }

/* ---------- Info blocks (contact) ---------- */
.info-tile {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.18);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.info-tile .icon-tile { margin-bottom: 0; flex-shrink: 0; }
.info-tile b { display: block; margin-bottom: 4px; font-size: 16.5px; }
.info-tile p, .info-tile a { font-size: 15px; color: var(--ink-soft); }
.map-frame {
  border: 1px solid rgba(70, 45, 15, 0.25);
  width: 100%;
  height: 100%;
  min-height: 320px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  filter: sepia(0.3);
}

/* ---------- Team ---------- */
.team-card { text-align: center; }
.team-card .ph {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 150px;
  margin: 0 auto 16px;
  border: 1px solid rgba(70, 45, 15, 0.3);
}
.team-card h3 { font-size: 20px; }
.team-card span { font-size: 14px; color: var(--ink-soft); }

/* ---------- Alt section backgrounds ---------- */
.section-sand {
  background: rgba(160, 120, 60, 0.10);
  border-top: var(--hairline);
  border-bottom: var(--hairline);
}
.section-white { background: rgba(247, 238, 215, 0.55); }

/* ---------- Blog ---------- */
.post-date { font-size: 12px; color: var(--rust); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 8px; }

/* ---------- Footer ---------- */
footer {
  background-image: var(--grain), linear-gradient(165deg, #33240f 0%, #241807 100%);
  color: rgba(236, 220, 180, 0.8);
  margin-top: 40px;
  border-top: 3px solid rgba(192, 160, 95, 0.4);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 62px 0 46px;
}
.footer-main h4 {
  color: var(--bronze-soft);
  font-size: 15px;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.footer-main p { font-size: 15px; }
.footer-links { list-style: none; display: grid; gap: 9px; }
.footer-links a { color: rgba(236, 220, 180, 0.8); font-size: 15px; letter-spacing: 0.03em; }
.footer-links a:hover { color: var(--bronze-soft); }
.footer-contact { list-style: none; display: grid; gap: 12px; font-size: 15px; }
.footer-contact a { color: rgba(236, 220, 180, 0.8); }
.footer-contact a:hover { color: var(--bronze-soft); }
.footer-bottom {
  border-top: 1px solid rgba(236, 220, 180, 0.18);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: rgba(236, 220, 180, 0.55);
  letter-spacing: 0.04em;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .brand-mark {
  background: transparent;
  border-color: var(--bronze-soft);
  box-shadow: none;
  color: var(--bronze-soft);
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 84vw);
    background-color: var(--paper-light);
    background-image: var(--grain);
    border-left: var(--hairline);
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 30px 30px;
    gap: 18px;
    box-shadow: -10px 0 40px rgba(35, 24, 10, 0.25);
    transform: translateX(105%);
    transition: transform 0.25s ease;
    z-index: 70;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav-toggle { display: flex; z-index: 80; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .hero-note { display: none; }
}

@media (max-width: 860px) {
  section { padding: 56px 0; }
  .hero { padding: 66px 0 60px; }
  .hero-frag { opacity: 0.3; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .usp-band { grid-template-columns: 1fr; padding: 38px 30px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 28px 22px; }
  .cta-band { padding: 38px 30px; }
}

@media (max-width: 560px) {
  .grid-3, .grid-4, .gallery-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; }
  .topbar-inner { justify-content: center; }
  .brand-text small { display: none; }
  .hero-wordmark .wordmark { letter-spacing: 0.22em; margin-right: -0.22em; }
}

/* ============================================================
   Nav dropdowns — Works ▾ (Execution · Site study · DPR)
   Parchment flyouts with bronze rule, matching the archive theme
   ============================================================ */
.nav-dd { position: relative; }
.nav-dd > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.nav-dd > a:hover { color: var(--rust); }
.nav-dd > a.active { color: var(--rust); border-bottom-color: var(--bronze); font-weight: 600; }
.nav-dd .caret { font-size: 10px; color: var(--bronze); transition: transform 0.2s ease; }
.nav-dd:hover > a .caret { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 13px);
  left: -18px;
  min-width: 236px;
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.28);
  border-top: 2px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 90;
}
.nav-dd:hover > .nav-dd-menu,
.nav-dd:focus-within > .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-dd-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 14.5px;
  letter-spacing: 0.03em;
  color: var(--ink);
  white-space: nowrap;
}
.nav-dd-menu a:hover { background: rgba(156, 69, 29, 0.10); color: var(--rust); }
.nav-dd-menu .dd-divider { height: 1px; background: rgba(70, 45, 15, 0.18); margin: 7px 14px; }

.nav-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.nav-sub-toggle:hover,
.nav-sub:hover > .nav-sub-toggle { background: rgba(156, 69, 29, 0.10); color: var(--rust); }
.nav-sub { position: relative; }
.nav-sub .arrow { font-size: 9px; color: var(--bronze); }

.nav-sub-menu {
  position: absolute;
  top: -9px;
  left: 100%;
  min-width: 252px;
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.28);
  border-left: 2px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-sub:hover > .nav-sub-menu,
.nav-sub:focus-within > .nav-sub-menu { opacity: 1; visibility: visible; transform: translateX(0); }
.nav-sub-menu a { font-size: 13.5px; color: var(--ink-soft); padding: 7px 18px; }
.nav-sub-menu a::before { content: "—"; color: var(--bronze); flex-shrink: 0; }
.nav-sub-menu a:hover { color: var(--rust); }

/* ---------- Project detail pages ---------- */
.proj-meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.proj-meta .chip { margin: 0; }

.doc-card {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.22);
  border-bottom: 3px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 52px 34px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.doc-card .doc-icon { color: var(--bronze); margin: 0 auto 18px; }
.doc-card h3 { font-size: 24px; margin-bottom: 8px; }
.doc-card p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 24px; }

/* Real photos inside the before/after slider */
.ba .ba-layer img { width: 100%; height: 100%; object-fit: cover; }

.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ba-pair figure { position: relative; margin: 0; }
.ba-pair figcaption {
  position: absolute; top: 12px; left: 12px;
  background: rgba(35, 24, 10, 0.6);
  color: #efe3c4;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 2px; z-index: 2;
}

/* Timeline (works page — organisational experience) */
.timeline { border-left: 2px solid rgba(156, 122, 60, 0.45); padding-left: 30px; display: grid; gap: 30px; }
.timeline-item { position: relative; }
.timeline-item::before {
  content: ""; position: absolute; left: -37px; top: 8px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper-card); border: 2px solid var(--bronze);
}
.timeline-item .when {
  font-size: 12px; color: var(--rust);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 5px;
}
.timeline-item h3 { font-size: 21px; margin-bottom: 3px; }
.timeline-item p { color: var(--ink-soft); font-size: 15.5px; }

/* Definition rows (profile page) */
.fact-list { list-style: none; display: grid; gap: 0; }
.fact-list li {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 0; border-bottom: 1px dashed rgba(70, 45, 15, 0.22);
  font-size: 15.5px;
}
.fact-list li:last-child { border-bottom: 0; }
.fact-list li span:first-child { color: var(--ink-soft); letter-spacing: 0.04em; }
.fact-list li span:last-child { color: var(--ink); font-weight: 600; text-align: right; }

.tick-list { list-style: none; display: grid; gap: 10px; }
.tick-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--ink); }
.tick-list li::before { content: "✦"; color: var(--rust); flex-shrink: 0; }

/* ---------- Responsive: nav dropdowns collapse to accordions ---------- */
@media (max-width: 1280px) {
  .nav { overflow-y: auto; align-items: stretch; }
  .nav-dd, .nav-sub { position: static; }
  .nav-dd > a { justify-content: space-between; width: 100%; }
  .nav-dd-menu,
  .nav-sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background-image: none;
    background-color: transparent;
    border: 0;
    border-left: 1px solid rgba(70, 45, 15, 0.22);
    border-radius: 0;
    box-shadow: none;
    padding: 4px 0 4px 14px;
    margin: 8px 0 4px 4px;
  }
  .nav-dd.open > .nav-dd-menu,
  .nav-sub.open > .nav-sub-menu { display: block; }
  .nav-dd-menu a, .nav-sub-toggle { padding: 8px 4px; white-space: normal; }
  .nav-sub-menu a { padding: 7px 4px; }
  .nav-sub.open > .nav-sub-toggle .arrow { transform: rotate(90deg); }
  .nav-sub .arrow { transition: transform 0.2s ease; display: inline-block; }
}

@media (max-width: 860px) {
  .ba-pair { grid-template-columns: 1fr; }
  .doc-card { padding: 40px 24px; }
}

/* ============================================================
   Alternating story rows — pasted-photograph one side, text the other
   Used on the Completed Works page
   ============================================================ */
.story { display: grid; gap: 90px; counter-reset: story; }

.story-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}
.story-row .story-figure { order: 1; }
.story-row .story-body   { order: 2; }
.story-row:nth-child(even) .story-figure { order: 2; }
.story-row:nth-child(even) .story-body   { order: 1; }

/* The photograph, mounted like a print pasted onto the page */
.story-figure {
  position: relative;
  margin: 0;
  background-color: var(--paper-card);
  background-image: var(--grain);
  padding: 15px 15px 0;
  border: 1px solid rgba(70, 45, 15, 0.22);
  box-shadow: var(--shadow);
  transform: rotate(-0.7deg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-row:nth-child(even) .story-figure { transform: rotate(0.7deg); }
.story-figure:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 48px rgba(70, 45, 15, 0.26); }

.story-figure .frame { position: relative; overflow: hidden; display: block; }
.story-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  filter: sepia(0.3) saturate(0.82) contrast(0.95);
}
.story-figure.tall img { aspect-ratio: 3 / 4; }
.story-figure .frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain), radial-gradient(120% 90% at 50% 40%, transparent 52%, rgba(43, 28, 10, 0.30) 100%);
  pointer-events: none;
}
.story-figure figcaption {
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 1.35;
  color: #7a5a33;
  padding: 11px 4px 13px;
  text-align: center;
}

/* The text half */
.story-body .story-step {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 600;
  color: var(--bronze);
  line-height: 1;
  margin-bottom: 10px;
}
.story-body .story-step::before { counter-increment: story; content: counter(story, decimal-leading-zero); }
.story-body h3 {
  font-size: clamp(23px, 2.7vw, 31px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.story-body p { color: var(--ink-soft); font-size: 16.5px; margin-bottom: 13px; }
.story-body p:last-child { margin-bottom: 0; }
.story-body .story-note {
  border-left: 2px solid var(--bronze);
  padding: 4px 0 4px 16px;
  color: var(--ink);
  font-size: 15.5px;
  font-style: italic;
}

/* Wide panorama plate */
.plate {
  position: relative;
  background-color: var(--paper-card);
  background-image: var(--grain);
  padding: 16px 16px 0;
  border: 1px solid rgba(70, 45, 15, 0.22);
  box-shadow: var(--shadow);
  margin: 0;
}
.plate img { width: 100%; filter: sepia(0.26) saturate(0.85) contrast(0.96); }
.plate figcaption {
  font-family: var(--font-hand);
  font-size: 20px;
  color: #7a5a33;
  padding: 12px 4px 14px;
  text-align: center;
}

/* Materials / register cards */
.mat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mat {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.2);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 24px 22px;
}
.mat h3 { font-size: 20px; margin-bottom: 4px; letter-spacing: 0.03em; }
.mat .native { font-size: 15px; color: var(--rust); margin-bottom: 9px; }
.mat p { font-size: 15px; color: var(--ink-soft); }

.register { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
.register .reg {
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.2);
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.register .reg b {
  display: block;
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
  color: var(--bronze);
  line-height: 1.1;
}
.register .reg span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 980px) {
  .mat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .story { gap: 58px; }
  .story-row { grid-template-columns: 1fr; gap: 26px; }
  .story-row .story-figure,
  .story-row:nth-child(even) .story-figure { order: 1; transform: rotate(0deg); }
  .story-row .story-body,
  .story-row:nth-child(even) .story-body { order: 2; }
  .mat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Nam O-style editorial homepage
   Full-bleed parchment, torn corners, scattered collage,
   centred letterspaced serif display, handwritten margin notes
   ============================================================ */

/* ---------- Hero ---------- */
.na-hero {
  position: relative;
  min-height: 94vh;
  display: grid;
  place-items: center;
  padding: 80px 0 64px;
  overflow: hidden;
  text-align: center;
}
.na-hero .container { position: relative; z-index: 2; }

/* Torn photo fragments bleeding off all four corners */
.na-corner {
  position: absolute;
  z-index: 0;
  opacity: 0.4;
  mix-blend-mode: multiply;
  pointer-events: none;
  overflow: hidden;
  clip-path: polygon(0 0, 16% 5%, 33% 0, 51% 8%, 69% 2%, 87% 9%, 100% 3%, 96% 24%, 100% 47%, 93% 70%, 99% 89%, 85% 100%, 63% 93%, 42% 100%, 23% 92%, 8% 99%, 0 83%, 5% 61%, 0 38%, 6% 17%);
}
.na-corner img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.8) saturate(0.5) contrast(0.94); }
.na-c-tl { top: -70px;  left: -80px;   width: min(34vw, 460px); aspect-ratio: 5/4;  transform: rotate(-4deg); }
.na-c-tr { top: -60px;  right: -90px;  width: min(32vw, 430px); aspect-ratio: 4/3;  transform: rotate(3deg); opacity: 0.34; }
.na-c-bl { bottom: -80px; left: -70px; width: min(30vw, 400px); aspect-ratio: 4/3;  transform: rotate(5deg); opacity: 0.32; }
.na-c-br { bottom: -70px; right: -80px; width: min(33vw, 440px); aspect-ratio: 5/4; transform: rotate(-3deg); opacity: 0.36; }

/* Wordmark */
.na-mark { margin-bottom: 40px; }
.na-mark .na-word {
  display: inline-block;
  font-family: var(--font-head);
  font-size: clamp(30px, 4.6vw, 54px);
  font-weight: 500;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: var(--ink);
  text-transform: uppercase;
}
.na-mark .na-ring {
  display: inline-block;
  width: 0.6em; height: 0.6em;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  vertical-align: 0.04em;
  margin-left: 0.12em;
}
.na-mark .na-sub {
  display: block;
  margin-top: 12px;
  font-family: var(--font-head);
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 0.55em;
  margin-right: -0.55em;
  text-transform: uppercase;
  color: var(--bronze);
}

/* The rule-and-divider pair, like the language switch on the reference */
.na-switch {
  display: inline-flex;
  border-top: 1px solid rgba(70, 45, 15, 0.4);
  border-bottom: 1px solid rgba(70, 45, 15, 0.4);
  margin-bottom: 44px;
}
.na-switch span {
  padding: 12px 34px;
  font-size: 12px;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.na-switch span + span { border-left: 1px solid rgba(70, 45, 15, 0.4); }

/* Centred display type */
.na-display {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.na-display span { display: block; }
.na-display em { font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0.03em; }

/* Handwritten margin notes */
.na-note {
  position: absolute;
  z-index: 1;
  width: min(26vw, 300px);
  font-family: var(--font-hand);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.45;
  color: #7a5a33;
  text-align: left;
}
.na-note-l { left: 4%;  top: 30%;    transform: rotate(-3deg); }
.na-note-r { right: 4%; bottom: 20%; transform: rotate(2.5deg); }

/* Scroll cue */
.na-scroll { display: inline-grid; justify-items: center; gap: 11px; margin-top: 52px; }
.na-scroll .ring {
  width: 44px; height: 44px;
  border: 1px solid rgba(70, 45, 15, 0.45);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px;
  color: var(--ink-soft);
  transition: 0.2s;
}
.na-scroll .label { font-size: 11px; letter-spacing: 0.34em; margin-right: -0.34em; text-transform: uppercase; color: var(--ink-soft); }
.na-scroll:hover .ring { border-color: var(--rust); color: var(--rust); transform: translateY(3px); }

/* ---------- Full-bleed sepia band with ghosted wordmark ---------- */
.na-band { position: relative; overflow: hidden; }
.na-band img {
  width: 100%;
  height: clamp(240px, 46vh, 430px);
  object-fit: cover;
  filter: sepia(0.72) saturate(0.5) contrast(0.94);
  display: block;
}
.na-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(var(--paper) 0%, transparent 22%, transparent 78%, var(--paper) 100%);
  pointer-events: none;
}
.na-band .ghost {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-size: clamp(34px, 7.5vw, 104px);
  font-weight: 500;
  letter-spacing: 0.36em;
  margin-right: -0.36em;
  text-transform: uppercase;
  color: rgba(247, 238, 214, 0.34);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Section heading helpers ---------- */
.na-head {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(23px, 3.3vw, 40px);
  line-height: 1.32;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.na-head span { display: block; }
.na-kicker {
  font-size: 11.5px;
  letter-spacing: 0.36em;
  margin-right: -0.36em;
  text-transform: uppercase;
  color: var(--bronze);
  display: block;
  margin-bottom: 16px;
}
.na-italic {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
.na-italic span { display: block; }
.na-script {
  font-family: var(--font-hand);
  font-size: clamp(19px, 2vw, 25px);
  color: #7a5a33;
  line-height: 1.35;
}
.na-script.underlined { border-bottom: 1px solid rgba(156, 122, 60, 0.6); display: inline-block; padding-bottom: 4px; }

/* Gold arc ornament */
.na-arc { display: block; margin: 22px auto 0; width: min(260px, 60%); height: auto; }

/* Thin vertical connector */
.na-link-line { width: 1px; height: 96px; margin: 0 auto; background: linear-gradient(rgba(70, 45, 15, 0.45), rgba(70, 45, 15, 0)); }

/* ---------- History collage ---------- */
.na-hist { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px 28px; align-items: start; }
.na-hist .h-title  { grid-column: 1 / span 4; padding-top: 8px; }
.na-hist .h-center { grid-column: 5 / span 4; grid-row: 1 / span 3; align-self: center; }
.na-hist .h-note-a { grid-column: 1 / span 4; }
.na-hist .h-sketch { grid-column: 1 / span 4; }
.na-hist .h-note-b { grid-column: 9 / span 4; }
.na-hist .h-side   { grid-column: 9 / span 4; }

.na-frag {
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 16% 5%, 33% 0, 51% 8%, 69% 2%, 87% 9%, 100% 3%, 96% 24%, 100% 47%, 93% 70%, 99% 89%, 85% 100%, 63% 93%, 42% 100%, 23% 92%, 8% 99%, 0 83%, 5% 61%, 0 38%, 6% 17%);
}
.na-frag img { width: 100%; display: block; filter: sepia(0.78) saturate(0.5) contrast(0.95); mix-blend-mode: multiply; }

/* ---------- Scattered prints ---------- */
.na-scatter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
.na-scatter figure {
  margin: 0 -10px;
  background-color: var(--paper-card);
  background-image: var(--grain);
  padding: 9px 9px 0;
  border: 1px solid rgba(70, 45, 15, 0.2);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.na-scatter figure img { width: 100%; display: block; filter: sepia(0.36) saturate(0.78) contrast(0.95); }
.na-scatter figcaption { font-family: var(--font-hand); font-size: 15px; color: #7a5a33; padding: 7px 2px 8px; text-align: center; }
.na-scatter figure:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: var(--shadow); z-index: 4; }
.na-scatter figure:nth-child(1) { width: 168px; transform: rotate(-6deg);  margin-top: 26px; }
.na-scatter figure:nth-child(2) { width: 212px; transform: rotate(3deg);   margin-top: -18px; }
.na-scatter figure:nth-child(3) { width: 150px; transform: rotate(-2deg);  margin-top: 44px; }
.na-scatter figure:nth-child(4) { width: 244px; transform: rotate(1.5deg); margin-top: 0; }
.na-scatter figure:nth-child(5) { width: 162px; transform: rotate(-4deg);  margin-top: 34px; }
.na-scatter figure:nth-child(6) { width: 196px; transform: rotate(5deg);   margin-top: -10px; }

/* ---------- Split rows ---------- */
.na-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 60px; align-items: center; }
.na-split.reverse .na-split-media { order: 2; }
.na-mono img { width: 100%; display: block; filter: grayscale(1) contrast(1.06) brightness(1.02); box-shadow: var(--shadow); }

/* ---------- Layered frame collage ---------- */
.na-frames { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; align-items: center; }
.na-frames figure {
  margin: 0;
  background-color: var(--paper-card);
  background-image: var(--grain);
  padding: 8px 8px 0;
  border: 1px solid rgba(70, 45, 15, 0.22);
  box-shadow: var(--shadow-sm);
}
.na-frames figure img { width: 100%; display: block; filter: sepia(0.42) saturate(0.75) contrast(0.95); }
.na-frames figcaption { font-family: var(--font-hand); font-size: 14px; color: #7a5a33; padding: 6px 2px 7px; text-align: center; }
.na-frames .f-round {
  grid-column: 1 / span 2; grid-row: 1;
  border-radius: 50%; padding: 0; border: 0; box-shadow: none; background: none;
  overflow: hidden; aspect-ratio: 1;
}
.na-frames .f-round img { height: 100%; object-fit: cover; border-radius: 50%; border: 1px solid rgba(70, 45, 15, 0.3); }
.na-frames .f-a { grid-column: 3 / span 2; grid-row: 1; transform: rotate(-3deg); }
.na-frames .f-b { grid-column: 5 / span 2; grid-row: 1; transform: rotate(2.5deg); }
.na-frames .f-c { grid-column: 1 / span 3; grid-row: 2; transform: rotate(2deg); }
.na-frames .f-d { grid-column: 4 / span 3; grid-row: 2; transform: rotate(-2deg); margin-top: 20px; }

/* ---------- Torn-paper note card with offset backing ---------- */
.na-torn-wrap { position: relative; padding: 18px 0 0 18px; }
.na-torn-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 34px; bottom: 34px;
  background: rgba(252, 248, 238, 0.85);
  box-shadow: 0 10px 30px rgba(70, 45, 15, 0.14);
}
.na-torn {
  position: relative;
  background-color: #efe1bd;
  background-image: var(--grain), radial-gradient(120% 110% at 25% 15%, rgba(212, 184, 130, 0.55), transparent 60%);
  padding: 46px 44px 50px;
  box-shadow: 0 14px 34px rgba(70, 45, 15, 0.18);
  clip-path: polygon(
    0% 2.2%, 4% 0.4%, 9% 2.4%, 15% 0.6%, 21% 2.6%, 28% 0.8%, 35% 2.4%, 43% 0.6%, 51% 2.6%, 59% 0.9%, 67% 2.7%, 75% 1%, 83% 2.8%, 91% 1.1%, 97% 2.6%, 100% 0.9%,
    99.1% 9%, 100% 18%, 98.6% 27%, 100% 36%, 98.8% 45%, 100% 54%, 98.5% 63%, 100% 72%, 98.9% 81%, 100% 90%, 99.2% 98%,
    93% 100%, 86% 97.9%, 78% 99.6%, 70% 97.7%, 62% 99.4%, 54% 97.5%, 46% 99.3%, 38% 97.4%, 30% 99.1%, 22% 97.3%, 14% 99%, 7% 97.4%, 1% 99.2%,
    0.9% 90%, 0% 81%, 1.3% 72%, 0% 63%, 1.5% 54%, 0% 45%, 1.2% 36%, 0% 27%, 1.4% 18%, 0% 9%
  );
}
.na-torn p { color: #5c4526; font-size: 16px; margin-bottom: 14px; }
.na-torn p:last-child { margin-bottom: 0; }
.na-torn p.sec { font-style: italic; color: #7a5a33; font-size: 15.5px; }
.na-torn .na-seal {
  width: 34px; height: 34px;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  margin-bottom: 22px;
}

/* Metadata blocks (CLIENT / SERVICES) */
.na-meta { display: grid; gap: 22px; margin-top: 34px; }
.na-meta-row { display: flex; gap: 15px; align-items: flex-start; }
.na-meta-row .sq {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px;
  background:
    linear-gradient(var(--bronze-soft), var(--bronze-soft)) 0 0 / 7px 7px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) 10px 10px / 7px 7px no-repeat,
    linear-gradient(rgba(156,122,60,.45), rgba(156,122,60,.45)) 10px 0 / 7px 7px no-repeat,
    linear-gradient(rgba(156,122,60,.45), rgba(156,122,60,.45)) 0 10px / 7px 7px no-repeat;
}
.na-meta-row b { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze); font-weight: 600; margin-bottom: 5px; }
.na-meta-row span { font-size: 15.5px; color: var(--ink-soft); display: block; line-height: 1.5; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .na-hist { grid-template-columns: repeat(6, 1fr); }
  .na-hist .h-title  { grid-column: 1 / span 6; grid-row: auto; }
  .na-hist .h-center { grid-column: 1 / span 3; grid-row: auto; }
  .na-hist .h-note-a { grid-column: 4 / span 3; }
  .na-hist .h-sketch { grid-column: 1 / span 3; }
  .na-hist .h-note-b { grid-column: 4 / span 3; }
  .na-hist .h-side   { grid-column: 1 / span 6; }
  .na-note { display: none; }
}

@media (max-width: 860px) {
  .na-hero { min-height: auto; padding: 58px 0 52px; }
  .na-corner { opacity: 0.26; }
  .na-split, .na-split.reverse { grid-template-columns: 1fr; gap: 30px; }
  .na-split.reverse .na-split-media { order: 1; }
  .na-scatter { gap: 14px; }
  .na-scatter figure,
  .na-scatter figure:nth-child(1),
  .na-scatter figure:nth-child(2),
  .na-scatter figure:nth-child(3),
  .na-scatter figure:nth-child(4),
  .na-scatter figure:nth-child(5),
  .na-scatter figure:nth-child(6) { width: 45%; margin: 0; transform: rotate(0deg); }
  .na-frames { grid-template-columns: repeat(4, 1fr); }
  .na-frames .f-round { grid-column: 1 / span 2; grid-row: 1; }
  .na-frames .f-a { grid-column: 3 / span 2; grid-row: 1; transform: none; }
  .na-frames .f-b { grid-column: 1 / span 2; grid-row: 2; transform: none; }
  .na-frames .f-c { grid-column: 3 / span 2; grid-row: 2; transform: none; }
  .na-frames .f-d { grid-column: 1 / span 4; grid-row: 3; transform: none; margin-top: 0; }
  .na-torn { padding: 34px 26px 38px; }
  .na-torn-wrap { padding: 12px 0 0 12px; }
  .na-torn-wrap::before { right: 22px; bottom: 22px; }
}

@media (max-width: 560px) {
  .na-hist { grid-template-columns: 1fr; }
  .na-hist .h-title,
  .na-hist .h-center,
  .na-hist .h-note-a,
  .na-hist .h-sketch,
  .na-hist .h-note-b,
  .na-hist .h-side { grid-column: 1 / -1; }
  .na-scatter figure,
  .na-scatter figure:nth-child(1),
  .na-scatter figure:nth-child(2),
  .na-scatter figure:nth-child(3),
  .na-scatter figure:nth-child(4),
  .na-scatter figure:nth-child(5),
  .na-scatter figure:nth-child(6) { width: 100%; }
  .na-mark .na-word { letter-spacing: 0.24em; margin-right: -0.24em; }
}


/* Homepage: navbar sits directly on the parchment until the page is scrolled */
body.na-home .navbar {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.na-home .navbar.scrolled {
  background: linear-gradient(#efe3c4, #e9d9b4);
  border-bottom-color: rgba(70, 45, 15, 0.25);
  box-shadow: 0 2px 14px rgba(70, 45, 15, 0.10);
}

/* ============================================================
   Language picker (Google Translate, Indian languages)
   ============================================================ */
.lang-picker { position: relative; flex-shrink: 0; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(236, 220, 180, 0.08);
  border: 1px solid rgba(236, 220, 180, 0.28);
  border-radius: 2px;
  color: rgba(236, 220, 180, 0.9);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  line-height: 1.5;
}
.lang-btn:hover { background: rgba(236, 220, 180, 0.16); border-color: var(--bronze-soft); color: #f3e8cc; }
.lang-btn .globe { font-size: 13px; filter: saturate(0.4); }
.lang-btn .caret { font-size: 9px; color: var(--bronze-soft); transition: transform 0.2s ease; }
.lang-picker.open .lang-btn .caret { transform: rotate(180deg); }
.lang-picker.open .lang-btn { background: rgba(236, 220, 180, 0.16); border-color: var(--bronze-soft); }
.lang-btn.is-busy { opacity: 0.6; pointer-events: none; }

.lang-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 120;
  width: 268px;
  max-height: 60vh;
  overflow-y: auto;
  background-color: var(--paper-card);
  background-image: var(--grain);
  border: 1px solid rgba(70, 45, 15, 0.3);
  border-top: 2px solid var(--bronze);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(35, 24, 10, 0.4);
  padding: 7px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.lang-picker.open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-menu button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
}
.lang-menu button:hover { background: rgba(156, 69, 29, 0.10); }
.lang-menu button[aria-selected="true"] { background: rgba(156, 122, 60, 0.16); }
.lang-menu button[aria-selected="true"] .latin { color: var(--rust); }
.lang-menu .native { font-size: 15.5px; flex: 1; }
.lang-menu .latin { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); flex-shrink: 0; }

.lang-menu::-webkit-scrollbar { width: 8px; }
.lang-menu::-webkit-scrollbar-track { background: rgba(70, 45, 15, 0.07); }
.lang-menu::-webkit-scrollbar-thumb { background: rgba(156, 122, 60, 0.55); border-radius: 4px; }

/* ------------------------------------------------------------
   Google's own chrome — hidden, but NOT with display:none.
   The widget must actually render its <select> for us to drive
   it; display:none stops that and forces a page reload instead.
   ------------------------------------------------------------ */
#google_translate_element {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.skiptranslate { display: none !important; visibility: hidden !important; }
body { top: 0 !important; position: static !important; }
.goog-te-gadget-icon { display: none !important; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
.goog-tooltip, .goog-tooltip:hover { display: none !important; }

/* ------------------------------------------------------------
   Google wraps every translated text node in nested <font> tags.
   Force them to inherit so type styling survives translation.
   ------------------------------------------------------------ */
font {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  background: none !important;
  vertical-align: inherit !important;
}

/* ------------------------------------------------------------
   Indic scripts have no case and their conjuncts break when
   letter-spaced, so relax the display tracking once translated.
   ------------------------------------------------------------ */
html:is(.translated-ltr, .translated-rtl) h1,
html:is(.translated-ltr, .translated-rtl) h2,
html:is(.translated-ltr, .translated-rtl) .na-display,
html:is(.translated-ltr, .translated-rtl) .na-head,
html:is(.translated-ltr, .translated-rtl) .na-italic,
html:is(.translated-ltr, .translated-rtl) .story-body h3,
html:is(.translated-ltr, .translated-rtl) .page-hero h1 {
  letter-spacing: 0.015em;
  text-transform: none;
  line-height: 1.45;
}
html:is(.translated-ltr, .translated-rtl) .eyebrow,
html:is(.translated-ltr, .translated-rtl) .na-kicker,
html:is(.translated-ltr, .translated-rtl) .crumbs,
html:is(.translated-ltr, .translated-rtl) .chip,
html:is(.translated-ltr, .translated-rtl) .stat span,
html:is(.translated-ltr, .translated-rtl) .footer-main h4,
html:is(.translated-ltr, .translated-rtl) .na-switch span,
html:is(.translated-ltr, .translated-rtl) .na-scroll .label,
html:is(.translated-ltr, .translated-rtl) .ba-label,
html:is(.translated-ltr, .translated-rtl) .ph .ph-tag,
html:is(.translated-ltr, .translated-rtl) .register .reg span,
html:is(.translated-ltr, .translated-rtl) .na-meta-row b,
html:is(.translated-ltr, .translated-rtl) .brand-text small {
  letter-spacing: 0.06em;
  margin-right: 0;
  text-transform: none;
  line-height: 1.6;
}
html:is(.translated-ltr, .translated-rtl) .na-mark .na-word,
html:is(.translated-ltr, .translated-rtl) .na-mark .na-sub,
html:is(.translated-ltr, .translated-rtl) .na-band .ghost,
html:is(.translated-ltr, .translated-rtl) .hero-wordmark .wordmark {
  letter-spacing: 0.12em;
  margin-right: 0;
}
/* The handwriting face has no Indic coverage — drop to the body serif */
html:is(.translated-ltr, .translated-rtl) .na-script,
html:is(.translated-ltr, .translated-rtl) .na-note,
html:is(.translated-ltr, .translated-rtl) .story-figure figcaption,
html:is(.translated-ltr, .translated-rtl) .plate figcaption,
html:is(.translated-ltr, .translated-rtl) .na-scatter figcaption,
html:is(.translated-ltr, .translated-rtl) .na-frames figcaption,
html:is(.translated-ltr, .translated-rtl) .hero-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Nastaliq (Urdu / Kashmiri / Sindhi) needs extra leading to avoid clipping */
html.translated-rtl body { line-height: 1.95; }
html.translated-rtl h1,
html.translated-rtl h2,
html.translated-rtl h3 { line-height: 1.7; }

@media (max-width: 560px) {
  .topbar-inner { justify-content: center; }
  .lang-menu { right: auto; left: 50%; transform: translate(-50%, -6px); }
  .lang-picker.open .lang-menu { transform: translate(-50%, 0); }
}

/* ---------- "Talk to Us" nav button ---------- */
.nav > a.nav-cta {
  background: var(--rust);
  border: 1px solid var(--rust);
  border-radius: 2px;
  color: #f4e8cb;
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav > a.nav-cta:hover,
.nav > a.nav-cta.active { background: var(--rust-dark); border-color: var(--rust-dark); color: #f4e8cb; }
@media (max-width: 1280px) {
  .nav > a.nav-cta { align-self: stretch; text-align: center; }
}

/* ---------- Enquiry tabs (Talk to Us) ---------- */
.enquiry-tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(70, 45, 15, 0.35);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 2px;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--font-body);
  transition: 0.15s;
}
.tab-btn:hover { border-color: var(--rust); color: var(--rust); }
.tab-btn.active { background: var(--rust); border-color: var(--rust); color: #f4e8cb; }
.tab-btn .tab-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
  background: var(--bronze);
  color: var(--paper-light);
  border-radius: 2px;
  padding: 3px 7px;
}
.tab-btn.active .tab-tag { background: var(--bronze-soft); color: var(--brown-deep); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-intro { max-width: 720px; margin: 0 auto 30px; text-align: center; color: var(--ink-soft); font-size: 17px; }

/* ---------- Logo brand (header + footer, shared with homepage) ---------- */
.brand-logo { height: 52px; width: auto; display: block; }
.footer-brand { align-items: baseline; gap: 10px; }
.footer-logo {
  height: 46px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.footer-legal {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236, 220, 180, 0.55);
}
.footer-bottom a { color: rgba(236, 220, 180, 0.75); text-decoration: underline; }
.footer-bottom a:hover { color: var(--bronze-soft); }
@media (max-width: 860px) {
  .brand-logo { height: 42px; }
  .footer-logo { height: 40px; }
}
@media (max-width: 400px) {
  .brand-logo { height: 36px; }
}