/* ==========================================================================
   SAMBHAL — MAIN STYLESHEET
   --------------------------------------------------------------------------
   This ONE file styles all five pages. It is organised into labelled
   sections so you can jump straight to the part you want to change.

   CONTENTS
     1.  THEME  ...... colours, fonts, sizes  <-- MOST EDITS HAPPEN HERE
     2.  BASE   ...... resets and default text styles
     3.  LAYOUT ...... page width, section spacing
     4.  BUTTONS
     5.  HEADER / NAVIGATION
     6.  FOOTER
     7.  WHATSAPP FLOATING BUTTON
     8.  PAGE HERO (the big banner at the top of every page)
     9.  REUSABLE BLOCKS (cards, steps, quotes, FAQ, forms, tables...)
     10. PAGE-SPECIFIC BITS
     11. ANIMATION
     12. RESPONSIVE (phone + tablet adjustments)

   TIP: to change the whole site's colours, edit section 1 only.
   ========================================================================== */


/* ==========================================================================
   1. THEME — edit these values to restyle the entire site
   ========================================================================== */
:root {

  /* ---- Brand colours (taken from the Sambhal logo) ---- */
  --navy:        #052E63;   /* primary brand colour: headings, dark panels */
  --navy-900:    #041C40;   /* darkest navy: footer background */
  --navy-700:    #123A6E;   /* lighter navy: gradient highlights */
  --orange:      #E5862E;   /* accent colour: buttons, icons, highlights */
  --orange-600:  #CE741D;   /* darker orange: button hover state */

  /* ---- Supporting colours ---- */
  --amber-50:    #FCF3E6;   /* very pale orange: icon backgrounds */
  --amber-100:   #FBEAD2;   /* pale orange: labels on dark backgrounds */
  --cream:       #FBF8F3;   /* soft background for alternating sections */
  --paper:       #FFFFFF;   /* white */
  --ink:         #182A47;   /* body text */
  --muted:       #5A6A82;   /* secondary / supporting text */
  --line:        #E9E5DC;   /* borders and dividers */
  --whatsapp:    #25D366;   /* official WhatsApp green */

  /* ---- Typography ---- */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;         /* headings */
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* body */
  --body-size: 17.5px;      /* base text size — kept large for older readers */

  /* ---- Layout ---- */
  --wrap: 1160px;           /* maximum content width */
  --gutter: 26px;           /* left/right page padding */
  --section-pad: 96px;      /* vertical space above/below each section */
  --radius: 18px;           /* rounded corner size for cards */
  --shadow: 0 18px 50px -24px rgba(5, 46, 99, .28);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  line-height: 1.12;
  letter-spacing: -.01em;
}

a   { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Visible keyboard focus ring — required for accessibility. Do not remove. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Hidden text that screen readers still announce */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* "Skip to content" link — appears when a keyboard user presses Tab */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

/* .wrap centres content and keeps it within the maximum width */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* .section adds the standard vertical breathing room */
.section { padding: var(--section-pad) 0; }

/* Background helpers — add to any <section> to change its background */
.bg-cream { background: var(--cream); }
.bg-white { background: var(--paper); }
.bg-navy  { background: radial-gradient(120% 140% at 80% 0%, var(--navy-700), var(--navy) 60%, var(--navy-900)); color: #fff; }
.bg-navy h2, .bg-navy h3 { color: #fff; }

/* Small uppercase label that sits above a heading */
.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-weight: 600; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-600);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px; }
.eyebrow.center  { justify-content: center; }
.bg-navy .eyebrow { color: var(--amber-100); }

/* Centred heading block used at the top of most sections */
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.sec-head h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 15px 0 14px; }
.sec-head p  { color: var(--muted); }

.lead { font-size: 19px; color: var(--muted); }

/* Two-column layout used by several sections */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.wide-left  { grid-template-columns: 1.1fr .9fr; }
.split.wide-right { grid-template-columns: .9fr 1.1fr; }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .2s ease, background .2s;
}

/* Orange — use for the single most important action on a screen */
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 12px 26px -12px rgba(229,134,46,.7); }
.btn-primary:hover { background: var(--orange-600); transform: translateY(-2px); }

/* Outlined — use for secondary actions */
.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(5,46,99,.22); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(5,46,99,.04); }

/* White — use on dark or orange backgrounds */
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }

/* Outlined white — use on dark or orange backgrounds */
.btn-outline { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }

.btn-block { width: 100%; }


/* ==========================================================================
   5. HEADER / NAVIGATION
   The header markup is identical on every page — see any .html file.
   ========================================================================== */
header.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
/* .scrolled is added by JavaScript once the page scrolls */
header.nav.scrolled { box-shadow: 0 8px 30px -20px rgba(5,46,99,.35); border-color: var(--line); }

.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand img { height: 48px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-weight: 500; font-size: 15.5px; color: var(--navy); opacity: .82; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
/* .active marks the page you are currently on */
.nav-links a.active { opacity: 1; font-weight: 600; border-bottom: 2px solid var(--orange); padding-bottom: 2px; }

.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-phone { font-weight: 600; font-size: 15px; color: var(--navy); display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.nav-phone svg { width: 16px; height: 16px; fill: var(--orange); }

/* Hamburger button — only visible on small screens (see section 12) */
.hamb { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamb span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; }


/* ==========================================================================
   6. FOOTER
   ========================================================================== */
footer { background: var(--navy-900); color: #C6D2E5; padding: 64px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand .wm  { font-family: var(--serif); font-size: 30px; color: #fff; font-weight: 600; }
.foot-brand .gur { color: var(--orange); font-size: 20px; margin-left: 8px; }
.foot-brand p    { font-size: 14px; margin-top: 12px; max-width: 34ch; color: #9FB0CA; }
.foot-col h4 { color: #fff; font-family: var(--sans); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.foot-col a  { display: block; font-size: 14.5px; margin-bottom: 10px; color: #B9C6DA; transition: color .2s; }
.foot-col a:hover { color: var(--orange); }
.foot-note   { font-size: 12.5px; color: #7E90AD; margin-top: 24px; max-width: 70ch; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: #8FA1BD;
}


/* ==========================================================================
   7. WHATSAPP FLOATING BUTTON (appears on every page)
   ========================================================================== */
.wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(37,211,102,.6);
  transition: transform .2s;
}
.wa:hover { transform: scale(1.07); }
.wa svg { width: 30px; height: 30px; fill: #fff; }


/* ==========================================================================
   8. PAGE HERO
   .hero      = the tall home-page banner with the logo artwork
   .page-hero = the shorter banner used on the four inner pages
   ========================================================================== */

/* ---- Home page hero ---- */
.hero { background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); overflow: hidden; }
/* Vertical padding only — the left/right gutter comes from .wrap on the same
   element, so a "padding" shorthand here would wipe it out. */
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 70px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(38px, 5vw, 60px); margin: 20px 0; }
.hero h1 .accent { color: var(--orange); font-style: italic; }
.hero p.sub { font-size: 20px; color: var(--muted); max-width: 34ch; }
.hero-actions { display: flex; gap: 14px; margin: 32px 0 26px; flex-wrap: wrap; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 14px; border-top: 1px solid var(--line); max-width: 38ch; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--navy); }
.chip svg { width: 16px; height: 16px; flex: none; }

/* The rounded navy "cradle" that holds the logo emblem */
.cradle { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.cradle-panel {
  position: relative; width: 100%; max-width: 430px; aspect-ratio: 1 / 1;
  border-radius: 40% 40% 46% 46% / 44% 44% 48% 48%;
  background: radial-gradient(120% 120% at 50% 20%, var(--navy-700), var(--navy) 55%, var(--navy-900));
  box-shadow: 0 40px 80px -30px rgba(5,46,99,.55);
  display: flex; align-items: center; justify-content: center;
}
.cradle-panel::after { content: ""; position: absolute; inset: 14px; border-radius: inherit; border: 1px solid rgba(255,255,255,.10); }
.cradle-emblem { width: 63%; background: #fff; padding: 22px; border-radius: 50%; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }

/* Small floating "update" cards around the cradle */
.u-card {
  position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 15px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px; font-weight: 500; color: var(--navy);
}
.u-card .dot { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.u-card small { display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; }
.u1 { top: 8%;    left: -6%;  animation: float 6s ease-in-out infinite; }
.u2 { top: 44%;   right: -8%; animation: float 6s ease-in-out infinite .8s; }
.u3 { bottom: 6%; left: 2%;   animation: float 6s ease-in-out infinite 1.6s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---- Inner-page hero ---- */
.page-hero { background: linear-gradient(180deg, var(--cream) 0%, #fff 100%); padding: 62px 0 58px; text-align: center; }
.page-hero h1 { font-size: clamp(34px, 4.4vw, 52px); margin: 16px auto 18px; max-width: 18ch; }
.page-hero p  { font-size: 19px; color: var(--muted); max-width: 60ch; margin: 0 auto; }
.page-hero .hero-actions { justify-content: center; margin-bottom: 0; }

/* Breadcrumb trail under the header */
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.crumbs a:hover { color: var(--orange-600); }


/* ==========================================================================
   9. REUSABLE BLOCKS
   ========================================================================== */

/* ---- Trust strip: the navy bar of four promises ---- */
.pillars { background: var(--navy); color: #fff; }
.pillars .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding: 34px var(--gutter); }
.pillar { display: flex; gap: 13px; align-items: flex-start; }
.pillar svg  { width: 26px; height: 26px; flex: none; stroke: var(--orange); }
.pillar b    { display: block; font-size: 15.5px; font-weight: 600; }
.pillar span { font-size: 13.5px; color: #B9C6DA; }

/* ---- Card grid: used for service summaries and testimonials ---- */
.cards    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards.two{ grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #dfe7f0; }
.card .ic  { width: 54px; height: 54px; border-radius: 15px; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.card .ic svg { width: 27px; height: 27px; stroke: #fff; fill: none; }
.card h3 { font-size: 21px; margin-bottom: 9px; }
.card p  { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.card .card-link { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--orange-600); }
.card .card-link:hover { text-decoration: underline; }

/* Bulleted list with orange dots — used inside cards and service blocks */
.dot-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dot-list li { font-size: 14.5px; color: var(--navy); display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.dot-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-top: 9px; flex: none; }
.dot-list li span { display: block; font-weight: 400; color: var(--muted); font-size: 13.5px; }

/* ---- Detailed service block (Services page) ---- */
.svc {
  display: grid; grid-template-columns: 300px 1fr; gap: 48px;
  padding: 44px 0; border-top: 1px solid var(--line);
}
.svc:first-of-type { border-top: 0; }
.svc-side { position: sticky; top: 96px; align-self: start; }
.svc-side .ic { width: 60px; height: 60px; border-radius: 17px; background: var(--navy); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.svc-side .ic svg { width: 30px; height: 30px; stroke: #fff; fill: none; }
.svc-side h2 { font-size: 27px; margin-bottom: 10px; }
.svc-side .promise { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); line-height: 1.45; }
.svc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-item { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.svc-item b { display: block; font-size: 15.5px; color: var(--navy); margin-bottom: 3px; }
.svc-item p { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ---- Numbered steps (How it works) ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step  { padding: 28px 22px; border-radius: var(--radius); background: var(--cream); border: 1px solid var(--line); }
.step .num {
  font-family: var(--serif); font-size: 15px; font-weight: 600; color: #fff;
  background: var(--orange); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.step h3 { font-size: 18.5px; margin-bottom: 8px; }
.step p  { font-size: 14.5px; color: var(--muted); }

/* ---- Plan (pricing) cards ---- */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; display: flex; flex-direction: column; position: relative;
  transition: transform .2s, box-shadow .2s;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Add class "feat" to the plan you want to highlight as recommended */
.plan.feat { border: 2px solid var(--orange); box-shadow: 0 24px 60px -30px rgba(229,134,46,.55); }
.plan.feat .ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
  white-space: nowrap;
}
.plan .tag  { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-600); }
.plan h3    { font-size: 23px; margin: 10px 0 4px; }
.plan .price{ font-weight: 700; font-size: 15px; color: var(--muted); margin-bottom: 6px; }
.plan .price b { font-family: var(--serif); font-weight: 600; font-size: 30px; color: var(--navy); }
.plan .price-note { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.plan ul    { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; flex: 1; }
.plan li    { font-size: 14px; display: flex; gap: 9px; align-items: flex-start; color: var(--navy); }
.plan li svg{ width: 16px; height: 16px; flex: none; margin-top: 4px; stroke: var(--orange); }

/* ---- Comparison table (Plans page) ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
table.compare th, table.compare td { padding: 15px 18px; text-align: center; border-bottom: 1px solid var(--line); }
table.compare thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: 14.5px; }
table.compare thead th:first-child { text-align: left; }
table.compare tbody th { text-align: left; font-weight: 500; color: var(--navy); background: var(--cream); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
/* Highlight the recommended column */
table.compare .col-feat { background: var(--amber-50); }
table.compare thead .col-feat { background: var(--orange); }
.tick  { color: var(--orange); font-weight: 700; }
.cross { color: #B7C0CE; }
.caption-row td { font-size: 13px; color: var(--muted); }

/* ---- Testimonial quotes ---- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
.quote .stars { color: var(--orange); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.quote p { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--navy); font-style: italic; margin-bottom: 18px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .av  { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-family: var(--serif); flex: none; }
.quote .who b    { font-size: 14.5px; color: var(--navy); }
.quote .who span { display: block; font-size: 12.5px; color: var(--muted); }

/* ---- FAQ accordion ---- */
.faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.fq { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.fq button {
  width: 100%; text-align: left; background: none; border: 0; padding: 20px 22px;
  font-family: var(--sans); font-size: 16.5px; font-weight: 600; color: var(--navy);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
/* The little +/- sign on the right of each question */
.fq button .pm { width: 22px; height: 22px; flex: none; position: relative; }
.fq button .pm::before, .fq button .pm::after { content: ""; position: absolute; background: var(--orange); border-radius: 2px; }
.fq button .pm::before { width: 14px; height: 2px; top: 10px; left: 4px; }
.fq button .pm::after  { width: 2px; height: 14px; top: 4px; left: 10px; transition: transform .25s; }
.fq.open button .pm::after { transform: scaleY(0); }   /* minus sign when open */
.fq .ans { max-height: 0; overflow: hidden; transition: max-height .3s ease; color: var(--muted); font-size: 15.5px; }
.fq .ans p { padding: 0 22px 20px; }

/* ---- Feature tiles on dark backgrounds (NRI page) ---- */
.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nfeat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px; }
.nfeat svg  { width: 24px; height: 24px; stroke: var(--orange); margin-bottom: 9px; fill: none; }
.nfeat b    { display: block; font-size: 15px; margin-bottom: 3px; color: #fff; }
.nfeat span { font-size: 13px; color: #B9C6DA; }

/* ---- Icon + text row (used in "who we help" and contact details) ---- */
.row-item { display: flex; gap: 15px; align-items: flex-start; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.row-item .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--amber-50); display: flex; align-items: center; justify-content: center; flex: none; }
.row-item .ic svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; }
.row-item b { font-size: 16px; color: var(--navy); }
.row-item p { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ---- Contact details list ---- */
.cinfo { display: flex; flex-direction: column; gap: 14px; }
.cinfo a { display: flex; align-items: center; gap: 13px; font-weight: 600; color: var(--navy); }
.cinfo a .ci { width: 44px; height: 44px; border-radius: 12px; background: var(--amber-50); display: flex; align-items: center; justify-content: center; flex: none; }
.cinfo a .ci svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; }
.cinfo a small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }

/* ---- Enquiry form ---- */
.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.form h3 { font-size: 21px; margin-bottom: 6px; }
.form .form-intro { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 12px 14px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); background: var(--cream);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--orange); background: #fff; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.form-privacy { font-size: 12.5px; color: var(--muted); margin-top: 12px; text-align: center; }
/* Message shown after the form is submitted */
.form-msg { display: none; margin-top: 14px; padding: 13px 16px; border-radius: 11px; font-size: 14.5px; }
.form-msg.show  { display: block; }
.form-msg.ok    { background: #E9F7EF; color: #1D6B3E; border: 1px solid #BFE5CE; }
.form-msg.error { background: #FDECEC; color: #9B2C2C; border: 1px solid #F5C6C6; }

/* ---- Full-width call-to-action band ---- */
.cta-band { background: var(--orange); text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 14px; }
.cta-band p  { color: #FFF5EA; font-size: 18px; margin-bottom: 28px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-light { color: var(--orange-600); }

/* ---- Notes and small print ---- */
.note-line { text-align: center; margin-top: 30px; font-size: 14.5px; color: var(--muted); font-style: italic; }
.callout {
  background: var(--amber-50); border: 1px solid #F3DEBF; border-left: 4px solid var(--orange);
  border-radius: 12px; padding: 20px 24px; font-size: 15.5px; color: var(--ink);
}
.callout b { color: var(--navy); }


/* ==========================================================================
   10. PAGE-SPECIFIC BITS
   ========================================================================== */

/* Home — "our story" portrait panel */
.story-panel {
  border-radius: var(--radius); overflow: hidden; background: var(--cream);
  border: 1px solid var(--line); padding: 40px; text-align: center;
}
.story-panel .gur { font-family: var(--serif); font-size: 54px; color: var(--navy); display: block; margin-bottom: 10px; }
.story-panel .meaning { font-size: 15px; color: var(--muted); }
.story-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.story-stats div b { display: block; font-family: var(--serif); font-size: 30px; color: var(--orange); }
.story-stats div span { font-size: 13px; color: var(--muted); }

/* Services — the "what we don't do" panel */
.not-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.not-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; color: var(--muted); }
.not-item b { display: block; color: var(--navy); font-size: 15px; margin-bottom: 3px; }

/* Services — quick jump links */
.jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.jump a {
  font-size: 14px; font-weight: 600; color: var(--navy);
  background: #fff; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: 999px; transition: .2s;
}
.jump a:hover { border-color: var(--orange); color: var(--orange-600); }

/* Contact — service-area list */
.areas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.area-pill { font-size: 14px; font-weight: 600; color: var(--navy); background: var(--amber-50); border: 1px solid #F3DEBF; padding: 8px 16px; border-radius: 999px; }
.area-pill.soon { background: #fff; border-color: var(--line); color: var(--muted); font-weight: 500; }


/* ==========================================================================
   11. ANIMATION
   Elements with class "reveal" fade in as they scroll into view (see main.js)
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }


/* ==========================================================================
   12. RESPONSIVE
   Rules below only apply on narrower screens. Because most visitors are on
   phones, always check your changes at 375px wide.
   ========================================================================== */

/* ---- Tablet and small laptop ---- */
@media (max-width: 980px) {
  .nav-links, .nav-phone { display: none; }
  .hamb { display: block; }
  /* .mobile is added by JavaScript when the hamburger is tapped */
  .nav-links.mobile {
    display: flex; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start;
    background: #fff; padding: 20px var(--gutter); gap: 18px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .hero-grid, .split, .split.wide-left, .split.wide-right { grid-template-columns: 1fr; gap: 40px; }
  .cradle { min-height: 380px; }
  .pillars .wrap { grid-template-columns: 1fr 1fr; gap: 26px; }
  .cards, .cards.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: 1fr; gap: 26px; }
  .svc-side { position: static; }
  .not-list { grid-template-columns: 1fr 1fr; }
}

/* ---- Phone ---- */
@media (max-width: 620px) {
  :root { --body-size: 16.5px; --section-pad: 64px; --gutter: 20px; }
  .cards, .cards.two, .steps, .plan-grid, .pillars .wrap,
  .feat-grid, .svc-items, .not-list, .story-stats { grid-template-columns: 1fr; }
  .hero p.sub, .hero-chips { max-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .brand img { height: 40px; }
  /* Hide two of the three floating cards so the hero stays uncluttered */
  .u-card { display: none; }
  .u2 { display: flex; right: 0; }
  .btn { width: 100%; }              /* full-width, easy-to-tap buttons */
  .nav-cta .btn { width: auto; }
}

/* ---- Respect the visitor's "reduce motion" setting ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Printing ---- */
@media print {
  header.nav, .wa, .cta-band, .hamb { display: none; }
  body { font-size: 12pt; }
}