/* ==========================================================================
   Augustine Global Trading — site stylesheet
   One sheet serves both directions: layout uses logical properties, so the
   Arabic (rtl) and English (ltr) builds share every rule below.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */

:root {
  /* Brand palette, sampled from the bronze-on-walnut signage */
  --ink:        #17100C;
  --espresso:   #241811;
  --wood:       #3E271B;
  --wood-soft:  #573A28;
  --bronze:     #C2A484;
  --bronze-dim: #A88763;
  --bronze-lit: #E0CBB2;
  --cream:      #F4EFE8;
  --paper:      #FBF8F4;
  --paper-warm: #F1EAE1;
  --line:       #E2D8CC;
  --muted:      #7B6B5E;
  --body:       #43362D;

  --focus: #8C6A45;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking-eyebrow: 0.18em;

  /* Rhythm */
  --header-h: 4.25rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --radius: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(23, 16, 12, .06), 0 4px 14px rgba(23, 16, 12, .05);
  --shadow-md: 0 12px 40px rgba(23, 16, 12, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Arabic build: one family, weight-driven hierarchy. Tajawal keeps numerals
   and Latin company names legible alongside the Arabic text. */
:root:lang(ar),
[dir="rtl"] {
  --font-display: "Tajawal", "Geeza Pro", "Segoe UI", sans-serif;
  --font-body: "Tajawal", "Geeza Pro", "Segoe UI", sans-serif;
  --tracking-eyebrow: 0.06em;
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sections that bleed decoration past their edge clip it themselves (.hero,
   .band). Nothing sets overflow on <body>: that would turn it into a scroll
   container and break both window scroll offsets and position: sticky. */

[dir="rtl"] body { font-weight: 400; line-height: 1.9; }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection { background: var(--bronze); color: var(--ink); }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

[dir="rtl"] :is(h1, h2, h3, h4) {
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
}

.display   { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.25rem); }
.h1        { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); }
.h2        { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.h3        { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }

[dir="rtl"] .display { font-size: clamp(2.1rem, 1.2rem + 4vw, 4.1rem); }
[dir="rtl"] .h1      { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); }
[dir="rtl"] .h2      { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.075rem, 1rem + .45vw, 1.3rem);
  line-height: 1.7;
  color: var(--body);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.15rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze-dim);
}
[dir="rtl"] .eyebrow { font-size: .85rem; text-transform: none; }

.eyebrow::before {
  content: "";
  inline-size: 2.25rem;
  block-size: 1px;
  background: currentColor;
  opacity: .55;
}

.muted { color: var(--muted); }

/* --- Layout -------------------------------------------------------------- */

.container {
  inline-size: min(100% - (var(--gutter) * 2), 78rem);
  margin-inline: auto;
}
.container--narrow { inline-size: min(100% - (var(--gutter) * 2), 52rem); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.section-head { max-inline-size: var(--measure); margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.section-head p { margin-block-start: 1.25rem; }

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
}
.skip-link:focus { inset-block-start: 1rem; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .95em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(.25em); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(.25em); }

.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: var(--wood); }

.btn--bronze { background: var(--bronze); color: var(--ink); }
.btn--bronze:hover { background: var(--bronze-lit); }

.btn--ghost { border-color: currentColor; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.btn--on-dark { border-color: rgba(224, 203, 178, .45); color: var(--cream); }
.btn--on-dark:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-start: 2.25rem; }

/* Text link with a rule that grows on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  padding-block-end: .3em;
  border-block-end: 1px solid var(--line);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.link:hover { border-block-end-color: var(--bronze-dim); color: var(--wood); }
.link .arrow { transition: transform .35s var(--ease); }
.link:hover .arrow { transform: translateX(.25em); }
[dir="rtl"] .link .arrow { transform: scaleX(-1); }
[dir="rtl"] .link:hover .arrow { transform: scaleX(-1) translateX(.25em); }

/* --- Opening animation ---------------------------------------------------
   A brief monogram splash on each page load. It exists only when scripting
   is on (the .js class is set in <head>), so a visitor without JavaScript
   never meets an overlay nothing can dismiss. Even with JavaScript, the
   keyframe below clears it on its own: the script normally removes it much
   sooner, but the page can never be left covered. */

.preloader { display: none; }

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  background: var(--espresso);
  color: var(--bronze);
  animation: preloader-hide .45s var(--ease) 2.4s forwards;
}

/* Set by the script once the document is ready — hides without the wait. */
.js .preloader[data-done="true"] {
  animation: preloader-hide .45s var(--ease) forwards;
}

.preloader__mark {
  inline-size: clamp(3rem, 9vw, 4.25rem);
  block-size: auto;
  animation: preloader-mark 1.5s var(--ease) infinite;
}

/* Grows and shrinks from its own centre, so it reads identically whether the
   page runs left-to-right or right-to-left. */
.preloader__bar {
  inline-size: clamp(4.5rem, 20vw, 7rem);
  block-size: 1px;
  background: currentColor;
  animation: preloader-bar 1.5s var(--ease) infinite;
}

@keyframes preloader-mark {
  0%, 100% { opacity: .5; transform: scale(.95); }
  50%      { opacity: 1;  transform: scale(1); }
}

@keyframes preloader-bar {
  0%, 100% { transform: scaleX(.15); opacity: .35; }
  50%      { transform: scaleX(1);   opacity: .9; }
}

@keyframes preloader-hide {
  to { opacity: 0; visibility: hidden; }
}

/* Nothing to gain from a splash for someone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .js .preloader { display: none; }
}

/* --- Header -------------------------------------------------------------- */

/* Every page opens on a dark band — the hero, or the page-head banner — so the
   bar starts transparent with light type and turns solid on scroll.
   Without scripting there is nothing to turn it solid, so it is absolute
   rather than fixed: it sits over the dark band and then scrolls away,
   instead of following the reader as cream-on-cream. */
.header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
  border-block-end: 1px solid transparent;
}
.js .header { position: fixed; }

/* --header-h is declared on :root so the hero and the page banner can reserve
   exactly the right amount of space under the fixed bar — no guessed padding
   that leaves a dead gap on small screens. */
@media (min-width: 1080px) {
  :root { --header-h: 5.5rem; }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  block-size: var(--header-h);
  transition: block-size .4s var(--ease);
}

/* Two logo files, one visible at a time: the light mark reads on the dark
   hero, the dark mark on the solid cream bar. Both switches live here — an
   inline style="display:none" could not be overridden by the solid rules. */
.header__logo-dark { display: none; }
.header--over-hero { color: var(--cream); }

.header--solid {
  background: rgba(251, 248, 244, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end-color: var(--line);
  color: var(--ink);
}
/* Scrolled state trims the bar a little on desktop; on mobile it is already
   shorter than this, so min() leaves it alone. */
.header--solid .header__inner { block-size: min(var(--header-h), 4.5rem); }
.header--solid .header__logo-light { display: none; }
.header--solid .header__logo-dark { display: block; }

.header__logo { flex: none; }
/* The mark is the wordmark alone, roughly 5.5:1, so it is sized by cap height
   rather than by overall box height. */
.header__logo img { block-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem); inline-size: auto; }

.header__nav { display: none; margin-inline-start: auto; }

@media (min-width: 1080px) {
  .header__nav { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding-block: .6rem;
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: .88;
  transition: opacity .3s var(--ease);
}
.nav__link:hover, .nav__link[aria-expanded="true"] { opacity: 1; }

.nav__link--current { opacity: 1; }
.nav__link--current::after {
  content: "";
  position: absolute;
  inset-block-end: .1rem;
  inset-inline: 0;
  block-size: 1px;
  background: var(--bronze);
}

.nav__caret { transition: transform .3s var(--ease); }
.nav__item:hover .nav__caret,
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + .35rem);
  inset-inline-start: 0;
  min-inline-size: 15rem;
  padding: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--body);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.4rem);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav__item:hover > .nav__menu,
.nav__item:focus-within > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: .6rem .85rem;
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--body);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__menu a:hover { background: var(--paper-warm); color: var(--ink); }

.header__actions { display: flex; align-items: center; gap: .75rem; margin-inline-start: auto; }
@media (min-width: 1080px) { .header__actions { margin-inline-start: 0; } }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5rem .85rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .06em;
  opacity: .8;
  transition: opacity .3s var(--ease), background-color .3s var(--ease);
}
.lang-switch:hover { opacity: 1; }

.header__cta { display: none; }
@media (min-width: 1080px) { .header__cta { display: inline-flex; } }

/* Burger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0 .6rem;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span {
  display: block;
  block-size: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  align-content: start;
  gap: .25rem;
  padding: 7rem var(--gutter) 3rem;
  background: var(--espresso);
  color: var(--cream);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
body[data-drawer-open="true"] { overflow: hidden; }

.drawer a {
  display: block;
  padding-block: .85rem;
  border-block-end: 1px solid rgba(224, 203, 178, .14);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
}
[dir="rtl"] .drawer a { font-size: 1.3rem; }
.drawer a:hover { color: var(--bronze); }
.drawer .drawer__sub a {
  padding-inline-start: 1.25rem;
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: .78;
}
.drawer__foot { margin-block-start: 2rem; display: grid; gap: .75rem; }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--espresso);
  color: var(--cream);
  padding-block: calc(var(--header-h) + clamp(1.5rem, 5vw, 4.5rem))
                 clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}
.hero::after {
  /* warm pool of light behind the wordmark side */
  content: "";
  position: absolute;
  inset-block-start: -20%;
  inset-inline-end: -10%;
  inline-size: 60vw;
  block-size: 60vw;
  background: radial-gradient(circle, rgba(194, 164, 132, .17), transparent 62%);
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}

.hero h1 { color: var(--cream); }
.hero .eyebrow { color: var(--bronze); }
.hero__body {
  max-inline-size: 40rem;
  margin-block-start: 1.75rem;
  color: rgba(244, 239, 232, .78);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}

.hero__figure {
  position: relative;
  border: 1px solid rgba(224, 203, 178, .22);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.hero__figure img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; }

/* Phones: lead with the signage rather than opening on a field of brown.
   Kept square — the photograph is a centred composition and any crop clips
   it — and with the header spacing corrected the headline still lands above
   the fold underneath it. */
@media (max-width: 899px) {
  .hero__grid { gap: 2rem; }
  .hero__figure { order: -1; }
  .hero__body { margin-block-start: 1.25rem; line-height: 1.6; }
  .hero .btn-row { margin-block-start: 1.75rem; }
  .hero .eyebrow { letter-spacing: .1em; }
  [dir="rtl"] .hero .eyebrow { letter-spacing: 0; }
}

/* --- Page header (interior pages) ---------------------------------------- */

.page-head {
  background: var(--espresso);
  color: var(--cream);
  padding-block: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem))
                 clamp(2.5rem, 5vw, 4.5rem);
}
.page-head .eyebrow { color: var(--bronze); }
.page-head h1 { color: var(--cream); max-inline-size: 22ch; }
.page-head__lead {
  max-inline-size: var(--measure);
  margin-block-start: 1.5rem;
  color: rgba(244, 239, 232, .76);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-block-end: 1.75rem;
  font-size: .82rem;
  color: rgba(244, 239, 232, .6);
}
.breadcrumb a:hover { color: var(--bronze); }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: .5rem; opacity: .45; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb [aria-current] { color: var(--cream); }

/* --- Feature grid -------------------------------------------------------- */

.feature-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 640px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

.feature {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--paper);
  transition: background-color .4s var(--ease);
}
.feature:hover { background: var(--paper-warm); }
.feature__num {
  display: block;
  margin-block-end: 1.25rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--bronze-dim);
}
.feature h3 { margin-block-end: .75rem; font-size: 1.2rem; }
.feature p { font-size: .95rem; color: var(--muted); line-height: 1.7; }

.feature-note {
  max-inline-size: var(--measure);
  margin-block-start: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.45;
  color: var(--wood);
}
[dir="rtl"] .feature-note { font-weight: 500; line-height: 1.8; }

/* --- Service cards ------------------------------------------------------- */

.service-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 620px)  { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }

/* The first card spans two columns on wide screens so the row of five
   resolves into a 2+3 composition rather than an orphan. */
@media (min-width: 1000px) {
  .service-grid > :first-child { grid-column: span 2; }
  .service-grid > :first-child .service-card__media { aspect-ratio: 16 / 10; }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease),
              box-shadow .4s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--bronze);
  box-shadow: var(--shadow-md);
}

.service-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-warm);
}
.service-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.service-card:hover .service-card__media img { transform: scale(1.045); }

.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .65rem;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
}
.service-card__body h3 { font-size: 1.3rem; }
.service-card__body p { font-size: .93rem; color: var(--muted); line-height: 1.65; }
.service-card__body .link { margin-block-start: auto; align-self: flex-start; }

/* Whole card is clickable, link text stays the accessible name */
.service-card__link::after { content: ""; position: absolute; inset: 0; }

/* --- Statement band ------------------------------------------------------ */

.band {
  position: relative;
  isolation: isolate;
  background: var(--wood);
  color: var(--cream);
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute;
  inset-block: -40%;
  inset-inline-start: 55%;
  inline-size: 50vw;
  background: radial-gradient(circle, rgba(194, 164, 132, .2), transparent 65%);
  z-index: -1;
}
.band .eyebrow { color: var(--bronze-lit); }
.band h2 { color: var(--cream); }
.band p {
  max-inline-size: 46rem;
  margin-block-start: 1.5rem;
  color: rgba(244, 239, 232, .8);
}

/* --- Prose (services detail, legal, corporate) --------------------------- */

.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-block-start: 1.15em; }
.prose h2 { margin-block-start: 2.5em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.prose h3 { margin-block-start: 2em; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
.prose strong { font-weight: 600; color: var(--ink); }

.tick-list { display: grid; gap: .85rem; margin-block-start: 1.5em; }
.tick-list li {
  position: relative;
  padding-inline-start: 2rem;
  line-height: 1.7;
}
.tick-list li::before {
  content: "";
  position: absolute;
  inset-block-start: .72em;
  inset-inline-start: 0;
  inline-size: 1.1rem;
  block-size: 1px;
  background: var(--bronze-dim);
}

.callout {
  margin-block-start: 2.5em;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-warm);
  border-inline-start: 2px solid var(--bronze);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.55;
  color: var(--wood);
}
[dir="rtl"] .callout { font-weight: 500; line-height: 1.85; }

/* Two-column split used by corporate + service detail pages */
.split { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .split--aside { grid-template-columns: 1.6fr .9fr; } }

.split__media img { inline-size: 100%; border-radius: var(--radius-lg); }

.aside-card {
  position: sticky;
  inset-block-start: 6.5rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--radius-lg);
}
.aside-card h3 { color: var(--cream); font-size: 1.25rem; margin-block-end: .75rem; }
.aside-card p { color: rgba(244, 239, 232, .75); font-size: .95rem; }
.aside-card .btn { inline-size: 100%; margin-block-start: 1.5rem; }

.side-nav { display: grid; gap: .15rem; }
.side-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  font-size: .95rem;
  color: var(--body);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.side-nav a:hover { background: var(--paper-warm); color: var(--ink); }
.side-nav a[aria-current] { background: var(--ink); color: var(--cream); }

/* --- Contact ------------------------------------------------------------- */

.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: .85fr 1.15fr; } }

.contact-list { display: grid; gap: 1.75rem; margin-block-start: 2.5rem; }
.contact-list dt {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze-dim);
  margin-block-end: .4rem;
}
[dir="rtl"] .contact-list dt { text-transform: none; font-size: .85rem; }
.contact-list dd { margin: 0; font-size: 1.05rem; color: var(--ink); }

/* Marks the number as the office landline. */
.contact-list__note {
  display: block;
  margin-block-start: .2rem;
  font-size: .82rem;
  color: var(--muted);
}

/* Laid out across the page rather than down it, for the homepage block. */
@media (min-width: 640px) {
  .contact-list--row {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2rem 2.5rem;
    margin-block-start: 0;
  }
}
.contact-list dd a:hover { color: var(--wood); text-decoration: underline; text-underline-offset: .25em; }
.contact-list address { font-style: normal; line-height: 1.7; }

/* Map --------------------------------------------------------------------
   Sits under the contact details so the short left column balances against
   the tall form beside it. The frame keeps its own aspect ratio, so the
   embed never causes layout shift while it loads. */

.map {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-warm);
}

.map__frame {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

/* Two columns wide the map sits beside the contact details, and instead of
   holding a fixed ratio that leaves one column hanging below the other, it
   stretches to whatever height the details come to — so both columns finish
   on the same line. */
@media (min-width: 940px) {
  .contact-grid--with-map { align-items: stretch; }
  .contact-grid--with-map > :last-child { display: flex; }
  .contact-grid--with-map .map {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-block-start: 0;
  }
  .contact-grid--with-map .map__frame { flex: 1; aspect-ratio: auto; min-block-size: 17rem; }
}

.map__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.5rem);
  border-block-start: 1px solid var(--line);
  background: var(--paper);
}
.map__caption p { max-inline-size: 34ch; font-size: .88rem; color: var(--muted); }
.map__caption .link { flex: none; font-size: .85rem; }


/* --- Footer -------------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: rgba(244, 239, 232, .72);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
}
.footer__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer__logo img { block-size: clamp(1.6rem, 1.4rem + .8vw, 2.1rem); inline-size: auto; }
.footer__tagline {
  max-inline-size: 24rem;
  margin-block-start: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--cream);
}
[dir="rtl"] .footer__tagline { font-size: 1.2rem; font-weight: 500; line-height: 1.7; }

.footer h4 {
  margin-block-end: 1.25rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
}
[dir="rtl"] .footer h4 { text-transform: none; font-size: .85rem; }

.footer ul { display: grid; gap: .7rem; }
.footer a { font-size: .93rem; transition: color .3s var(--ease); }
.footer a:hover { color: var(--bronze-lit); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-block-start: clamp(3rem, 6vw, 4.5rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid rgba(244, 239, 232, .12);
  font-size: .82rem;
  color: rgba(244, 239, 232, .5);
}

/* --- 404 ----------------------------------------------------------------- */

.notfound {
  display: grid;
  place-items: center;
  min-block-size: 70vh;
  padding-block: 8rem 4rem;
  text-align: center;
}
.notfound p { max-inline-size: 40ch; margin-inline: auto; margin-block-start: 1.25rem; }

/* --- Scroll reveal ------------------------------------------------------- */

/* Scoped to .js so that with scripting off every section is simply visible
   rather than stuck at opacity 0. The class is set by an inline script in
   <head>, before first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  .header, .drawer, .band { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-head { background: #fff; color: #000; padding-block: 2rem; }
  .hero h1, .page-head h1 { color: #000; }
}