/* ==========================================================================
   TMAS Insurance Brokers Co. Limited — main stylesheet
   Brand colours are taken from the company logo: maroon #720000, gold #C7A63F.
   Change them in the :root block below and the whole site follows.
   ========================================================================== */

:root {
  /* --- brand --- */
  --maroon:       #720000;
  --maroon-deep:  #4C0000;
  --maroon-dark:  #3A0000;
  --maroon-soft:  #8E1A1A;
  --gold:         #C7A63F;
  --gold-light:   #E0C87B;
  --gold-deep:    #9C7F27;

  /* --- neutrals --- */
  --ink:          #2B1D1B;
  --body:         #5D504C;
  --muted:        #877A75;
  --line:         #E7DECF;
  --line-soft:    #F0E9DC;
  --cream:        #FBF7EF;
  --cream-2:      #F4EDE0;
  --white:        #FFFFFF;

  --radius:       4px;
  --radius-lg:    6px;
  --shadow-sm:    0 1px 2px rgba(74,30,20,.05), 0 2px 10px rgba(74,30,20,.05);
  --shadow-md:    0 6px 16px rgba(74,30,20,.08), 0 16px 40px rgba(74,30,20,.08);
  --shadow-lg:    0 24px 60px rgba(45,15,10,.18);

  --display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans:    "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gutter: 24px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--maroon); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--gold-deep); }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
strong { color: var(--ink); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

::selection { background: var(--gold-light); color: var(--maroon-deep); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--cream { background: var(--cream); }
.section--maroon { background: var(--maroon-deep); color: #E3D3CE; }
.section--maroon h2, .section--maroon h3, .section--maroon h4 { color: #fff; }
.section--maroon strong { color: var(--gold-light); }

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--gold);
  color: var(--maroon-deep); padding: 10px 18px; z-index: 999; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- gold rule motif (echoes the letterhead) ---------- */
.rule {
  width: 62px; height: 0; border-top: 2px solid var(--gold);
  margin: 0 0 22px; position: relative;
}
.rule::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 30px;
  border-top: 1px solid var(--gold); opacity: .6;
}
.rule--center { margin-left: auto; margin-right: auto; }
.rule--center::after { left: 50%; transform: translateX(-50%); }

/* ---------- header ---------- */
.topbar {
  background: var(--maroon-deep);
  color: #C9B3AF;
  font-size: .82rem;
  letter-spacing: .015em;
  border-bottom: 2px solid var(--gold);
}
.topbar__inner { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: center; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; }
.topbar a { color: #EFE3E0; }
.topbar a:hover { color: var(--gold-light); }
.topbar__contacts { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.topbar__tag {
  font-family: var(--display); font-style: italic; font-size: .88rem;
  color: var(--gold-light); letter-spacing: .01em;
}

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; }

.brand { display: flex; align-items: center; gap: 14px; }
.brand__mark { width: 78px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  color: var(--maroon); letter-spacing: .005em;
}
.brand__sub {
  font-size: .63rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--gold-deep); font-weight: 600; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  display: block; padding: 10px 15px; border-radius: var(--radius);
  font-size: .93rem; font-weight: 500; color: var(--ink);
  position: relative;
}
.nav a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 4px;
  border-bottom: 1.5px solid var(--gold); transform: scaleX(0);
  transition: transform .2s ease; transform-origin: left;
}
.nav a:hover { color: var(--maroon); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--maroon); font-weight: 650; }
.nav a.header-cta::after { display: none; }
.header-cta { margin-left: 12px; }
/* button colours must win over the generic .nav a colour */
.nav a.btn--primary { color: #fff; }
.nav a.btn--primary:hover { color: #fff; }
.nav a.btn--gold { color: var(--maroon-deep); }
.nav a.btn--outline { color: var(--maroon); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); width: 46px; height: 42px; cursor: pointer;
  align-items: center; justify-content: center; color: var(--maroon);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: currentColor; position: relative;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px; border-radius: var(--radius); font-family: var(--sans);
  font-weight: 600; font-size: .92rem; letter-spacing: .02em;
  border: 1.5px solid transparent; cursor: pointer; text-align: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover { background: var(--maroon-deep); color: #fff; box-shadow: 0 6px 18px rgba(114,0,0,.24); }
.btn--gold { background: var(--gold); color: var(--maroon-deep); }
.btn--gold:hover { background: var(--gold-light); color: var(--maroon-deep); }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); border-color: var(--gold); color: var(--gold-light); }
.btn--outline { border-color: var(--line); color: var(--maroon); background: #fff; }
.btn--outline:hover { border-color: var(--maroon); background: var(--cream); color: var(--maroon); }
.btn--sm { padding: 10px 20px; font-size: .85rem; }
.btn--block { width: 100%; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(199,166,63,.20), transparent 60%),
    linear-gradient(155deg, var(--maroon-dark) 0%, var(--maroon-deep) 45%, var(--maroon) 100%);
  color: #DDC9C5;
  overflow: hidden;
  border-bottom: 3px solid var(--gold);
}
/* soft wing-sweep echoing the letterhead curve — kept faint and clear of the text */
.hero::before {
  content: ""; position: absolute; left: -14%; right: -14%; top: -58%; height: 78%;
  border-radius: 50%; border-bottom: 1.5px solid rgba(199,166,63,.20);
  pointer-events: none; z-index: 2;
}
.hero::after {
  content: ""; position: absolute; left: -14%; right: -14%; bottom: -62%; height: 82%;
  border-radius: 50%; border-top: 1.5px solid rgba(199,166,63,.16);
  pointer-events: none; z-index: 2;
}
.hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.06fr .94fr;
  gap: 58px; align-items: center; padding: 88px var(--gutter) 92px; }
.hero h1 { color: #fff; margin-bottom: .42em; }
.hero h1 em { font-style: italic; color: var(--gold-light); font-weight: 400; }
.hero__lead { font-size: 1.09rem; color: #D5BFBA; max-width: 34em; }

.eyebrow {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.section--cream .eyebrow, .section--white .eyebrow { color: var(--gold-deep); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 8px 30px; margin-top: 36px; padding-top: 26px;
  border-top: 1px solid rgba(199,166,63,.28); font-size: .86rem; color: #C3ABA6;
}
.hero__trust span { display: flex; align-items: center; gap: 9px; }
.hero__trust svg { flex: none; color: var(--gold); }

/* quote card */
.quote-card {
  background: #fff; border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-lg); color: var(--body);
  border-top: 3px solid var(--gold);
}
.quote-card h2 { font-size: 1.42rem; margin-bottom: .2em; }
.quote-card .muted { font-size: .9rem; color: var(--muted); margin-bottom: 1.4em; }

/* ---------- forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: .78rem; font-weight: 650; color: var(--ink); margin-bottom: 6px; letter-spacing: .03em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(199,166,63,.18); outline: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-note { font-size: .78rem; color: var(--muted); margin: 12px 0 0; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.card--link { color: var(--body); }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--gold); }
.card--link h3 { color: var(--ink); transition: color .2s ease; }
.card--link:hover h3 { color: var(--maroon); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.section--cream .card { background: #fff; }

.card__icon {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); border-radius: 50%; color: var(--maroon);
  margin-bottom: 20px;
}
.card__icon svg { width: 22px; height: 22px; }
.card__more {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .84rem;
  color: var(--maroon); margin-top: 16px; letter-spacing: .04em; text-transform: uppercase;
}
.card--link:hover .card__more { color: var(--gold-deep); }

.stat { text-align: center; padding: 26px 16px; }
.stat__num { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--gold-light); line-height: 1; }
.stat__label { font-size: .82rem; color: #C3ABA6; margin-top: 10px; letter-spacing: .02em; }

.step { position: relative; padding-left: 64px; }
.step__num {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 1px solid var(--gold); color: var(--maroon);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
}
.section--maroon .step__num { color: var(--gold-light); }
.step h3 { margin-bottom: .3em; }

/* ---------- section headings ---------- */
.sec-head { max-width: 46em; margin-bottom: 48px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { font-size: 1.04rem; margin-bottom: 0; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: .55em; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .68em; width: 9px; height: 9px;
  border: 1px solid var(--gold); transform: rotate(45deg);
  background: rgba(199,166,63,.35);
}
.section--maroon .ticks li::before { border-color: var(--gold-light); background: rgba(224,200,123,.3); }

/* ---------- service detail blocks ---------- */
.service-block { scroll-margin-top: 120px; padding: 52px 0; border-top: 1px solid var(--line); }
.service-block:first-of-type { border-top: 0; padding-top: 10px; }
.service-block__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1.3em; }
.pill-list li {
  margin: 0; font-size: .81rem; font-weight: 600; color: var(--maroon);
  background: var(--cream); border: 1px solid var(--line); border-radius: 2px; padding: 6px 13px;
  letter-spacing: .02em;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(140deg, var(--maroon-deep) 0%, var(--maroon) 100%);
  border-radius: var(--radius-lg); padding: 52px; color: #DDC9C5;
  display: grid; grid-template-columns: 1.5fr auto; gap: 32px; align-items: center;
  border-top: 3px solid var(--gold);
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin-bottom: 0; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.note {
  background: var(--cream); border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
}
.note p:last-child { margin-bottom: 0; }

/* pull-quote / motto */
.motto {
  font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--gold-light); line-height: 1.45; margin: 0;
}
.motto--dark { color: var(--maroon); }

/* ---------- accordion ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer; padding: 20px 54px 20px 24px; font-weight: 650; color: var(--ink);
  position: relative; list-style: none; font-size: .98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 1.45rem; font-weight: 300; color: var(--gold-deep); line-height: 1;
}
.faq details[open] summary { color: var(--maroon); }
.faq details[open] summary::after { content: "\2212"; }
.faq__body { padding: 0 24px 22px; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- inner page hero ---------- */
.page-hero {
  background: linear-gradient(150deg, var(--maroon-dark), var(--maroon-deep) 60%, var(--maroon) 100%);
  color: #D5BFBA; padding: 68px 0 72px; border-bottom: 3px solid var(--gold);
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; left: -8%; right: -8%; bottom: -50%; height: 78%;
  border-radius: 50%; border-top: 2px solid rgba(199,166,63,.22); z-index: 2;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p { font-size: 1.05rem; max-width: 46em; margin-bottom: 0; }
.crumbs { font-size: .78rem; color: #B79B96; margin-bottom: 18px; letter-spacing: .08em; text-transform: uppercase; }
.crumbs a { color: var(--gold-light); }
.crumbs a:hover { color: #fff; }

/* ---------- contact ---------- */
.contact-item { display: flex; gap: 16px; margin-bottom: 28px; }
.contact-item__icon {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold); color: var(--maroon);
}
.contact-item__icon svg { width: 19px; height: 19px; }
.contact-item h3 { font-size: 1rem; margin-bottom: .15em; }
.contact-item p { margin-bottom: 0; font-size: .95rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--maroon-dark); color: #B8A19D; font-size: .92rem; padding: 66px 0 0;
  border-top: 3px solid var(--gold);
}
.site-footer h4 {
  color: var(--gold-light); font-family: var(--sans); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .2em; margin-bottom: 20px; font-weight: 600;
}
.site-footer a { color: #DCC9C5; }
.site-footer a:hover { color: var(--gold-light); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 44px; padding-bottom: 46px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .55em; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-brand img { width: 84px; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__sub { color: var(--gold); }
.footer-motto {
  font-family: var(--display); font-style: italic; color: var(--gold-light);
  font-size: 1rem; margin-top: 14px;
}
.footer-bottom {
  border-top: 1px solid rgba(199,166,63,.22); padding: 22px 0 28px;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  font-size: .81rem; color: #9C8682;
}

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 95;
  width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.24); transition: transform .18s ease;
}
.wa-float:hover { color: #fff; transform: scale(1.07); }
.wa-float svg { width: 29px; height: 29px; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .58s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 42px; padding: 62px 0 70px; }
  .service-block__grid { grid-template-columns: 1fr; gap: 28px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .cta-band { grid-template-columns: 1fr; padding: 36px; }

  .nav-toggle { display: flex; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 18px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--line-soft); }
  .nav a::after { display: none; }
  .header-cta { margin: 14px 8px 0; }
  .site-header__inner { position: relative; min-height: 76px; }
  .brand__mark { width: 62px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .quote-card { padding: 26px; }
  .cta-band { padding: 30px; }
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar__tag { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .step { padding-left: 56px; }
  .step__num { width: 40px; height: 40px; font-size: 1rem; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .topbar, .wa-float, .hero__actions, .cta-band { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section--maroon, .page-hero, .hero { background: #fff !important; color: #000 !important; }
  .page-hero h1, .hero h1 { color: #000 !important; }
}

/* ==========================================================================
   MOTION & PHOTOGRAPHY
   Added for the animated brand intro, the drawn logo, and the photo slots.
   Every animation below is disabled automatically for visitors who have
   "reduce motion" switched on in their operating system.
   ========================================================================== */

/* ---------- 1. brand intro ---------------------------------------------
   A six-second build. Each stage has ONE job, and the delays below are the
   running order — change a delay and everything after it should move too.

     0.30 - 2.10   the gold ring is drawn by a travelling point
     2.05 - 2.85   the wings unfurl from the centre
     2.70 - 3.35   the shield drops in
     3.20 - 3.70   the eagle lands
     3.55 - 4.20   the five rays fan out, one after another
     4.10 - 5.00   TMAS INSURANCE is written across the top
     4.80 - 5.70   BROKERS COMPANY LTD is written across the bottom
     5.60 - 6.30   a sheen passes over the finished mark
     5.70 - 6.40   the motto appears
     6.50 - 7.25   the whole thing dissolves into the site
   ----------------------------------------------------------------------- */
.brand-intro {
  display: none;
  position: fixed; inset: 0; z-index: 999;
  background:
    radial-gradient(115% 85% at 50% 44%, #5E0000 0%, var(--maroon-deep) 46%, var(--maroon-dark) 100%);
  align-items: center; justify-content: center;
  padding: 24px;
}
.brand-intro.is-playing {
  display: flex;
  animation: lnFieldIn .45s ease, lnOut .78s cubic-bezier(.4,0,.2,1) 6.5s forwards;
}
@keyframes lnFieldIn { from { opacity: 0; } }
@keyframes lnOut { to { opacity: 0; visibility: hidden; transform: scale(1.045); } }

.brand-intro__stage {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  animation: lnSettle 6.4s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes lnSettle {
  0% { transform: scale(.96); } 88% { transform: scale(1.005); } 100% { transform: scale(1); }
}
.brand-intro__logo {
  width: min(56vw, 440px); height: auto; overflow: visible;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.4));
}

/* every part starts hidden; each stage brings its own back */
.ln-ring, .ln-wings, .ln-shield, .ln-eagle, .ln-petal, .ln-text { opacity: 0; }

/* --- 1. the ring, drawn ------------------------------------------------ */
/* 933.05 is the circumference at r = 148.5, written out because older
   browsers ignore pathLength                                              */
.ln-draw {
  stroke-dasharray: 933.05; stroke-dashoffset: 933.05;
  animation: lnDraw 1.8s cubic-bezier(.55,.03,.28,1) .3s forwards,
             lnFade .35s ease 2.1s forwards;
}
@keyframes lnDraw { to { stroke-dashoffset: 0; } }
@keyframes lnFade { to { opacity: 0; } }
.ln-ring { animation: lnAppear .4s ease 2.05s forwards; }

.ln-pen {
  transform-box: view-box; transform-origin: 310px 193px; opacity: 0;
  animation: lnSpin 1.8s cubic-bezier(.55,.03,.28,1) .3s forwards,
             lnPenFade 2.1s ease .3s forwards;
}
@keyframes lnSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lnPenFade { 0% { opacity: 0; } 7% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }

/* --- masks: each one is a shutter that opens ---------------------------- */
.ln-mask { transform-box: view-box; }
.ln-mask--wings  { transform-origin: 310px 165px; transform: scaleX(0);
                   animation: lnOpenX .8s cubic-bezier(.16,.84,.28,1) 2.05s forwards; }
.ln-mask--shield { transform-origin: 310px 124px; transform: scaleY(0);
                   animation: lnOpenY .65s cubic-bezier(.2,.8,.3,1) 2.7s forwards; }
.ln-mask--top    { transform-origin: 140px 0;     transform: scaleX(0);
                   animation: lnOpenX .9s cubic-bezier(.35,.6,.3,1) 4.1s forwards; }
.ln-mask--bot    { transform-origin: 120px 0;     transform: scaleX(0);
                   animation: lnOpenX .9s cubic-bezier(.35,.6,.3,1) 4.8s forwards; }
@keyframes lnOpenX { to { transform: scaleX(1); } }
@keyframes lnOpenY { to { transform: scaleY(1); } }

/* --- 2, 3, 6, 7: the parts those shutters uncover ---------------------- */
.ln-wings  { animation: lnAppear .3s ease 2.05s forwards; }
.ln-shield { animation: lnAppear .3s ease 2.7s forwards; }
.ln-text   { animation: lnAppear .3s ease 4.1s forwards; }
.ln-text--bot { animation-delay: 4.8s; }
@keyframes lnAppear { to { opacity: 1; } }

/* --- 4. the eagle lands ------------------------------------------------ */
.ln-eagle {
  transform-box: view-box; transform-origin: 300px 104px;
  transform: scale(.78) translateY(-6px);
  animation: lnLand .52s cubic-bezier(.18,.9,.32,1) 3.2s forwards;
}
@keyframes lnLand { to { opacity: 1; transform: scale(1) translateY(0); } }

/* --- 5. the rays fan out ----------------------------------------------- */
.ln-petal {
  transform-box: view-box; transform-origin: 310px 246px;
  transform: scale(.35);
  animation: lnRay .42s cubic-bezier(.2,.9,.3,1) forwards;
}
.ln-petal--1 { animation-delay: 3.55s; }
.ln-petal--2 { animation-delay: 3.68s; }
.ln-petal--3 { animation-delay: 3.81s; }
.ln-petal--4 { animation-delay: 3.94s; }
.ln-petal--5 { animation-delay: 4.07s; }
@keyframes lnRay { to { opacity: 1; transform: scale(1); } }

/* --- 8. the sheen ------------------------------------------------------ */
.ln-sheen {
  transform-box: view-box; transform: translateX(0) skewX(-14deg); opacity: 0;
  animation: lnSheen .95s cubic-bezier(.4,0,.3,1) 5.6s forwards;
}
@keyframes lnSheen {
  0%   { transform: translateX(0) skewX(-14deg);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(980px) skewX(-14deg); opacity: 0; }
}

/* the halo blooms as the ring closes */
.ln-glow { opacity: 0; animation: lnGlow 1.4s ease 1.9s forwards; }
@keyframes lnGlow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: .5; } }

/* --- the motto and the way out ----------------------------------------- */
.brand-intro__motto {
  font-family: var(--display); font-style: italic;
  font-size: clamp(.95rem, 3.2vw, 1.35rem);
  color: var(--gold-light); margin: 0; text-align: center; letter-spacing: .01em;
  opacity: 0; transform: translateY(10px);
  animation: lnMotto .85s cubic-bezier(.2,.7,.2,1) 5.7s forwards;
}
@keyframes lnMotto { to { opacity: 1; transform: none; } }

.brand-intro__skip {
  position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: transparent; border: 1px solid rgba(199,166,63,.5);
  color: var(--gold-light); font: inherit; font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  opacity: 0; animation: lnSkipIn .5s ease 1.1s forwards;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.brand-intro__skip:hover { background: rgba(199,166,63,.16); border-color: var(--gold); color: #fff; }
@keyframes lnSkipIn { to { opacity: .85; } }

/* ---------- 2. crest watermark on the maroon banners --------------------
   Used on the inner page banners, where there is empty space on the right.
   The .hero__crest class is kept available if you ever want it on the home
   banner too — add <div class="hero__crest"></div> inside <section class="hero">. */
.hero, .page-hero { position: relative; }
.hero > .wrap, .page-hero > .wrap { position: relative; z-index: 3; }
.hero__crest, .page-hero__crest {
  position: absolute; right: -40px; top: 50%; transform: translateY(-50%) scale(.96);
  width: min(46%, 520px); aspect-ratio: 616 / 390; z-index: 1;
  background: url("../img/logo-light.svg") right center / contain no-repeat;
  opacity: 0; pointer-events: none;
  animation: crestIn 1.6s ease .35s forwards;
}
@keyframes crestIn { to { opacity: .07; transform: translateY(-50%) scale(1); } }
@media (max-width: 980px) { .hero__crest, .page-hero__crest { display: none; } }

/* ---------- 3. photographs ---------------------------------------------- */
/* Photos are set as CSS backgrounds so that a missing file simply falls back
   to the gradient underneath — no broken image icons, ever.
   Drop your files into assets/img/photos/ using the names in that folder's
   README.txt and they appear automatically.                                */
.hero__media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: .62;
  /* the photograph supplies the structure, the maroon behind it supplies the
     colour — a duotone, rather than a brown-tinted snapshot */
  filter: grayscale(1) contrast(1.12) brightness(1.04);
  mix-blend-mode: luminosity;
  animation: kenBurns 26s ease-in-out infinite alternate;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(40,0,0,.90) 0%, rgba(48,0,0,.66) 36%, rgba(66,0,0,.28) 66%, rgba(90,0,0,.10) 100%);
}
@keyframes kenBurns {
  from { transform: scale(1) translate3d(0,0,0); }
  to   { transform: scale(1.09) translate3d(-1.2%, -1.4%, 0); }
}

/* full-width photo band with a line of text over it */
.photo-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--maroon-deep) center / cover no-repeat;
  background-blend-mode: luminosity;
  border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
}
.photo-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(45,0,0,.82), rgba(58,0,0,.70));
}
.photo-band__inner {
  position: relative; z-index: 2; padding: 96px 24px; text-align: center;
  max-width: 46em; margin: 0 auto;
}
.photo-band__inner .motto { margin-bottom: .5em; }
.photo-band__inner p:last-child { margin-bottom: 0; color: #D9C3BF; font-size: .96rem; }

/* framed photo beside body copy */
.photo-figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--cream-2) center / cover no-repeat;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.photo-figure::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(199,166,63,.55);
  border-radius: var(--radius-lg);
}
.photo-figure--tall { aspect-ratio: 3 / 4; }

.photo-figure__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 34px 22px 18px; margin: 0; font-size: .84rem; color: #F3E7E4;
  background: linear-gradient(transparent, rgba(45,0,0,.86));
}

/* ---------- 4. small refinements ---------------------------------------- */
/* gold rules draw themselves out when scrolled into view */
.rule { width: 62px; transform-origin: left center; }
.rule--center { transform-origin: center; }
.reveal .rule, .reveal.rule { transform: scaleX(0); transition: transform .7s cubic-bezier(.6,.05,.25,1) .1s; }
.reveal.is-in .rule, .reveal.rule.is-in { transform: scaleX(1); }

/* stagger cards within a grid as they come into view */
.grid > .reveal:nth-child(2) { transition-delay: 0.06s; }
.grid > .reveal:nth-child(3) { transition-delay: 0.12s; }
.grid > .reveal:nth-child(4) { transition-delay: 0.18s; }
.grid > .reveal:nth-child(5) { transition-delay: 0.24s; }
.grid > .reveal:nth-child(6) { transition-delay: 0.30s; }
.grid > .reveal:nth-child(7) { transition-delay: 0.36s; }
.grid > .reveal:nth-child(8) { transition-delay: 0.42s; }
.grid > .reveal:nth-child(9) { transition-delay: 0.48s; }

/* hero content rises on load */
.hero__inner > div > * { animation: riseIn .85s cubic-bezier(.18,.72,.24,1) backwards; }
.hero__inner > div > *:nth-child(1) { animation-delay: .10s; }
.hero__inner > div > *:nth-child(2) { animation-delay: .18s; }
.hero__inner > div > *:nth-child(3) { animation-delay: .26s; }
.hero__inner > div > *:nth-child(4) { animation-delay: .34s; }
.hero__inner > div > *:nth-child(5) { animation-delay: .42s; }
.hero__inner > .quote-card { animation: riseIn .9s cubic-bezier(.2,.7,.3,1) .3s backwards; }
@keyframes riseIn { from { opacity: 0; transform: translateY(13px); } }

/* buttons gain a soft sheen on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn:hover::after { left: 120%; }

/* card icons turn gold as the card is hovered */
.card--link .card__icon { transition: background .25s ease, color .25s ease, border-color .25s ease; }
.card--link:hover .card__icon { background: var(--maroon); color: var(--gold-light); border-color: var(--maroon); }

/* the WhatsApp button breathes gently so it is noticed once, not constantly */
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(37,211,102,.6);
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ---------- 5. respect the visitor's motion preference ------------------ */
@media (prefers-reduced-motion: reduce) {
  .brand-intro { display: none !important; }
  .ln-ring, .ln-wings, .ln-shield, .ln-eagle, .ln-petal, .ln-text { opacity: 1; }
  .ln-draw, .ln-pen, .ln-sheen { display: none; }
  .ln-mask, .ln-eagle, .ln-petal, .brand-intro__stage, .brand-intro__motto {
    transform: none !important; animation: none !important; opacity: 1;
  }
  .hero__media, .hero__crest, .page-hero__crest,
  .hero__inner > div > *, .hero__inner > .quote-card,
  .wa-float::before { animation: none !important; }
  .hero__crest, .page-hero__crest { opacity: .07; transform: translateY(-50%); }
  .reveal .rule, .reveal.rule { transform: none; transition: none; }
  .btn::after { display: none; }
}


/* ==========================================================================
   MOBILE
   Everything below tunes the site for phones. Nothing here affects the
   desktop layout.
   ========================================================================== */

/* stop iOS blue-flashing every tap, and give it a brand-coloured highlight */
html { -webkit-tap-highlight-color: rgba(199,166,63,.22); }

/* long addresses and email addresses must never force a sideways scroll */
body { overflow-wrap: break-word; }
.topbar a, .site-footer a, .contact-item p { overflow-wrap: anywhere; }

/* honour the notch and the home indicator on modern phones */
.wa-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }

@media (max-width: 760px) {
  /* --- header ------------------------------------------------------- */
  .site-header__inner { min-height: 72px; }
  .brand { gap: 11px; }
  .brand__mark { width: 56px; }
  .brand__name { font-size: 1.08rem; }
  .brand__sub  { font-size: .56rem; letter-spacing: .18em; }
  .nav-toggle { width: 48px; height: 46px; }

  /* the drawer slides rather than appearing, and every row is thumb-sized */
  .nav { padding: 8px 12px 20px; animation: navDrop .26s cubic-bezier(.2,.7,.24,1); }
  .nav a { padding: 15px 10px; font-size: 1rem; }
  .nav a.is-active { color: var(--maroon); }
  .header-cta { margin: 16px 10px 0; padding: 15px 24px; }
  @keyframes navDrop { from { opacity: 0; transform: translateY(-10px); } }

  /* top bar: two comfortable rows rather than one cramped line */
  .topbar { font-size: .8rem; }
  .topbar__inner { gap: 0; padding-top: 4px; padding-bottom: 4px; }
  .topbar__contacts { width: 100%; justify-content: center; gap: 0 18px; }
  .topbar a { display: inline-block; padding: 7px 2px; }

  /* --- banners ------------------------------------------------------ */
  h1 { font-size: clamp(1.85rem, 8.4vw, 2.5rem); }
  h2 { font-size: clamp(1.45rem, 6.2vw, 1.95rem); }
  .hero__inner { padding: 46px var(--gutter) 54px; gap: 34px; }
  .hero__lead { font-size: 1rem; }
  .hero__actions { gap: 10px; margin-top: 26px; }
  .hero__trust { margin-top: 28px; padding-top: 20px; gap: 10px 20px; font-size: .84rem; }
  .page-hero { padding: 42px 0 46px; }
  .page-hero p { font-size: .98rem; }
  .crumbs { margin-bottom: 12px; }

  /* --- sections ----------------------------------------------------- */
  .section { padding: 52px 0; }
  .section--tight { padding: 40px 0; }
  .sec-head { margin-bottom: 32px; }
  .service-block { padding: 34px 0; scroll-margin-top: 84px; }
  .photo-band__inner { padding: 60px 22px; }
  .quote-card { padding: 22px 20px; }
  .card { padding: 24px 22px; }
  .cta-band { padding: 30px 24px; text-align: center; }
  .cta-band .rule--center, .cta-band__actions { justify-content: center; }
  .cta-band__actions .btn { flex: 1 1 100%; }

  /* --- forms: 16px keeps iOS from zooming in on focus ---------------- */
  .field input, .field select, .field textarea { font-size: 16px; padding: 14px 14px; }
  .field label { font-size: .72rem; }
  .btn { padding: 15px 26px; }

  /* --- thumb-sized contact links ------------------------------------ */
  .contact-item { gap: 14px; margin-bottom: 22px; }
  .contact-item p a { display: inline-block; padding: 6px 0; }
  .footer-grid li { margin-bottom: .1em; }
  .site-footer a { display: inline-block; padding: 7px 0; }
  .footer-grid { gap: 30px; padding-bottom: 34px; }
  .footer-brand img { width: 68px; }
  .footer-bottom { padding: 18px 0 24px; font-size: .78rem; text-align: center; justify-content: center; }

  /* --- the intro fills more of a small screen ----------------------- */
  .brand-intro__logo { width: min(74vw, 380px); }
  .brand-intro__stage { gap: 22px; }

  /* the WhatsApp button sits clear of the content and stays thumb-sized */
  .wa-float { width: 52px; height: 52px; right: 14px; }
  .wa-float svg { width: 27px; height: 27px; }
}

@media (max-width: 400px) {
  .wrap { --gutter: 18px; padding: 0 18px; }
  .hero__inner { padding-left: 18px; padding-right: 18px; }
  .card { padding: 22px 18px; }
  .faq summary { padding: 17px 46px 17px 18px; font-size: .94rem; }
  .faq summary::after { right: 18px; }
  .faq__body { padding: 0 18px 20px; }
  .pill-list li { font-size: .78rem; padding: 5px 11px; }
  .step { padding-left: 52px; }
  .step__num { width: 38px; height: 38px; font-size: .95rem; }
}

/* landscape phones: the intro should never overflow a short screen */
@media (max-height: 460px) {
  .brand-intro__logo { width: min(38vh * 1.58, 300px); }
  .brand-intro__stage { gap: 14px; }
  .brand-intro__motto { font-size: .9rem; }
}


/* ---------- mobile drawer: contact row + animated toggle ---------------- */
.nav-contact { display: none; }

@media (max-width: 760px) {
  .nav-contact {
    display: flex; flex-direction: column; gap: 2px;
    margin: 14px 10px 0; padding-top: 14px; border-top: 1px solid var(--line-soft);
  }
  .nav-contact a {
    padding: 12px 0; font-size: .92rem; font-weight: 600; color: var(--maroon);
  }
  .nav-contact a::before { content: "\2022"; color: var(--gold); margin-right: 9px; }

  /* the hamburger becomes a cross while the drawer is open */
  .nav-toggle span { transition: background .2s ease; }
  .nav-toggle span::before, .nav-toggle span::after { transition: transform .26s cubic-bezier(.2,.7,.24,1); }
  .nav-toggle[aria-expanded="true"] { border-color: var(--maroon); }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* the decorative gold arcs read as stray lines through text on a phone */
  .hero::before, .hero::after, .page-hero::after { display: none; }

  /* wide letter-spacing looks loose at small sizes */
  .eyebrow { letter-spacing: .15em; font-size: .64rem; }
  .crumbs { letter-spacing: .06em; }
}

@media (max-width: 760px) { .nav-contact a { border-bottom: 0; } }

/* ==========================================================================
   FEATURE SECTION — a photograph beside a piece of copy.
   Two columns on a desktop; on a phone the picture sits above the words.
   ========================================================================== */
.feature__grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
}
.feature__media {
  /* no overflow:hidden here — it would clip the offset frame below.
     The image clips itself with its own border-radius. */
  margin: 0; position: relative; isolation: isolate;
}
.feature__media img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative; z-index: 1;
}
/* a gold hairline drawn over the picture, echoing the letterhead rules */
.feature__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(199,166,63,.6);
}
/* and a small offset frame behind it, for depth */
.feature__media::before {
  content: ""; position: absolute; inset: 16px -16px -16px 16px; z-index: 0;
  border: 1px solid var(--gold); border-radius: var(--radius-lg);
  opacity: .55;
}
.feature .feature__body p:last-of-type { margin-bottom: 0; }

@media (max-width: 900px) {
  .feature__grid { grid-template-columns: 1fr; gap: 30px; }
  /* the offset frame is fussy on a small screen */
  .feature__media::before { display: none; }
}

@media (max-width: 760px) {
  .feature__grid { gap: 26px; }
  .feature__body .motto { font-size: 1.02rem !important; }
  .feature__body .btn { flex: 1 1 100%; }
}