/* Lifter Shifter – generated from src/css. Do not edit dist directly. */
@layer reset, tokens, base, layout, components, motifs, pages, utilities;

/* ── base/00-reset.css ── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; }
  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  input, select, textarea, button { font: inherit; color: inherit; max-width: 100%; }
  table { border-collapse: collapse; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ── base/01-tokens.css ── */
/* Design tokens – “Coastal Calm”. The only place colours, fonts and radii are defined. */
@layer tokens {
  :root {
    /* Surfaces */
    --mist: #F5F8FA;
    --white: #FFFFFF;
    --powder: #DDE8F1;
    --seafoam: #D4ECE4;
    --peach: #FBE4D8;
    --footer-bg: #EAF1F6;

    /* Brand */
    --harbor: #2F5D7C;
    --harbor-dark: #22465E;
    --coral: #D9694C;
    --coral-text: #C2553A;

    /* Text */
    --ink: #1E2B36;
    --body: #3A4956;
    --muted: #4E5E6B;
    --on-seafoam: #1F5A4A;
    --on-seafoam-body: #2E4A43;
    --on-peach: #8E3A24;
    --on-peach-body: #4A3A33;
    --on-harbor-sub: #DDE8F1;

    /* Lines */
    --border: #D8E2EA;
    --border-soft: #E6EDF2;
    --input-border: #C3D1DC;
    --dash: #B6C6D3;
    --route: #9FB4C4;

    /* Motif materials */
    --cardboard: #E3C9A8;
    --cardboard-tape: #D4B48D;

    /* Type */
    --font-serif: 'Young Serif', Georgia, serif;
    --font-sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    --fs-h1: clamp(42px, 5.6vw, 64px);
    --fs-h1-home: clamp(42px, 5.6vw, 68px);
    --fs-h2: clamp(32px, 4vw, 46px);
    --fs-h2-cta: clamp(30px, 3.6vw, 42px);
    --fs-pause: clamp(30px, 3.8vw, 44px);
    --fs-body: 18px;
    --fs-lead: 20px;
    --fs-card: 16.5px;
    --fs-list: 17px;

    /* Layout */
    --container: 1200px;
    --gutter: 24px;
    --section-y: 104px;

    /* Radii */
    --r-card: 18px;
    --r-tile: 16px;
    --r-small: 14px;
    --r-btn: 12px;
    --r-form: 22px;
    --r-band: 26px;
    --r-pill: 999px;

    /* Section-scoped colours (overridden by the band modifiers in layout) */
    --eyebrow: var(--coral-text);
    --text: var(--body);
    --link: var(--harbor);
    --icon: var(--harbor);
  }

  @media (max-width: 760px) {
    :root { --section-y: 72px; --fs-body: 17px; --fs-lead: 18px; }
  }
}

/* ── base/02-typography.css ── */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--mist);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); text-wrap: balance; }
  p { color: var(--text); text-wrap: pretty; }
  strong { color: var(--ink); font-weight: 700; }

  a { color: var(--link); }
  a:hover { color: var(--harbor-dark); }
  :focus-visible { outline: 3px solid var(--harbor); outline-offset: 3px; border-radius: 4px; }

  /* Headline scale (also usable as classes on non-heading elements) */
  .t-h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -1px; text-wrap: balance; }
  .t-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.5px; text-wrap: balance; }
  .t-h3 { font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.15; }
  .t-subhead { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); }
  .t-title { font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.25; color: var(--ink); }
  .t-title--sm { font-size: 21px; }
  .t-title--md { font-size: 22px; }
  .t-lead { font-size: var(--fs-lead); }
  .t-small { font-size: 15px; color: var(--muted); }
  .t-accent { color: var(--coral-text); }

  .t-eyebrow {
    color: var(--eyebrow);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.5;
  }

  .t-link { font-weight: 700; color: var(--link); }
}

/* ── layout/layout.css ── */
/* Layout primitives (l-*): containers, section bands, stacks and grids. No colours except band backgrounds. */
@layer layout {
  .l-container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Section bands. Rhythm rule: White → Mist → one soft band every 2–3 sections; never two tinted bands in a row. */
  .l-section { background: var(--white); }
  .l-section > .l-container { padding-block: var(--section-y); }
  .l-section--white { background: var(--white); }
  .l-section--mist { background: var(--mist); }
  .l-section--powder { background: var(--powder); --eyebrow: var(--harbor-dark); --link: var(--harbor-dark); --icon: var(--harbor); }
  .l-section--seafoam { background: var(--seafoam); --eyebrow: var(--on-seafoam); --text: var(--on-seafoam-body); --link: var(--on-seafoam); --icon: var(--on-seafoam); }
  .l-section--peach { background: var(--peach); --eyebrow: var(--on-peach); --text: var(--on-peach-body); --link: var(--on-peach); --icon: var(--coral-text); }

  .l-section--tight > .l-container { padding-block: calc(var(--section-y) - 8px); }
  .l-section--pause > .l-container { padding-block: calc(var(--section-y) - 16px); }
  .l-section--flush-top > .l-container { padding-top: 0; }

  /* Vertical stack with a consistent gap */
  /* Defaults are set on the class itself so nested layouts never inherit a parent's modifier. */
  .l-stack { --stack-gap: 18px; display: flex; flex-direction: column; gap: var(--stack-gap); }
  .l-stack--2xs { --stack-gap: 4px; }
  .l-stack--xs { --stack-gap: 8px; }
  .l-stack--sm { --stack-gap: 12px; }
  .l-stack--md { --stack-gap: 16px; }
  .l-stack--lg { --stack-gap: 28px; }
  .l-stack--xl { --stack-gap: 44px; }
  .l-stack--2xl { --stack-gap: 56px; }
  .l-stack--end { justify-content: flex-end; align-self: stretch; }

  /* Section heading block: eyebrow + H2 + intro, max 780px */
  .l-heading { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
  .l-heading--center { margin-inline: auto; text-align: center; align-items: center; }

  /* Grids – always auto-fit so they collapse on phones */
  .l-grid { --grid-min: 480px; --grid-gap: 18px; display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr)); }
  .l-grid--short { --grid-min: 340px; --grid-gap: 16px; }
  .l-grid--tight { --grid-gap: 16px; }
  .l-grid--list { --grid-gap: 0 48px; }
  .l-grid--three { --grid-min: 300px; --grid-gap: 16px; }

  /* Two columns: text + visual */
  .l-split { --split-min: 440px; --split-gap: 56px; --split-align: start; display: grid; gap: var(--split-gap); align-items: var(--split-align); grid-template-columns: repeat(auto-fit, minmax(min(var(--split-min), 100%), 1fr)); }
  .l-split--center { --split-align: center; }
  .l-split--wide-gap { --split-gap: 64px; }
  .l-split--faq { --split-min: 380px; --split-gap: 48px; }
  .l-split--tight-rows { --split-gap: 24px 56px; }   /* two text columns: smaller gap once they stack */
  .l-split--hero { --split-min: 460px; --split-gap: 56px; --split-align: center; }

  .l-cluster { --cluster-gap: 10px; display: flex; flex-wrap: wrap; gap: var(--cluster-gap); align-items: center; }
}

/* ── components/bands.css ── */
/* c-cta-band – Harbor panel that closes every page (src/partials/cta-band.html).
   c-pause – one large serif “ad line” between sections (max one per page).
   c-photo – rounded, flat photo frame (rendered by the {{> photo}} helper). */
@layer components {
  .c-cta-band .c-cta-band__wrap { padding-block: 0 var(--section-y); }
  .c-cta-band__panel {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
    padding: 56px 48px;
    border-radius: var(--r-band);
    background: var(--harbor);
  }
  .c-cta-band__text { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
  .c-cta-band__title { font-size: var(--fs-h2-cta); line-height: 1.15; color: var(--white); }
  .c-cta-band__lead { color: var(--on-harbor-sub); }
  @media (max-width: 560px) { .c-cta-band__panel { padding: 40px 24px; } }

  .c-pause__inner { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
  .c-pause__line { font-family: var(--font-serif); font-size: var(--fs-pause); line-height: 1.2; color: var(--ink); text-wrap: balance; max-width: 900px; }
  .c-pause__line em { font-style: normal; color: var(--coral-text); }
  .c-pause__sub { color: var(--muted); font-size: var(--fs-list); }
  /* Statement line set inside a section, left-aligned and larger */
  .c-pause__line--statement { max-width: 900px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.1; letter-spacing: -0.5px; text-align: left; }

  .c-photo { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--powder); }
  .c-photo__img { width: 100%; height: 100%; object-fit: cover; }
  .c-photo--landscape { aspect-ratio: 4 / 3; }
  .c-photo--wide { aspect-ratio: 16 / 9; }
  .c-photo--portrait { aspect-ratio: 4 / 5; }
  .c-photo--square { aspect-ratio: 1 / 1; }
  .c-photo--tall { aspect-ratio: 3 / 4; }
  .c-photo__caption {
    position: absolute;
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }

  /* Photo strip: a row of photos that wraps on phones */
  .c-gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
}

/* ── components/buttons.css ── */
/* c-btn – every button and button-styled link on the site. */
@layer components {
  .c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 16px 26px;
    border: 0;
    border-radius: var(--r-btn);
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }

  .c-btn--primary { background: var(--harbor); color: var(--white); }
  .c-btn--primary:hover { background: var(--harbor-dark); color: var(--white); }

  .c-btn--secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 14.5px 24px; }
  .c-btn--secondary:hover { background: var(--ink); color: var(--white); }

  .c-btn--on-harbor { background: var(--peach); color: var(--ink); }
  .c-btn--on-harbor:hover { background: var(--white); color: var(--ink); }

  .c-btn--outline-light { background: transparent; color: var(--white); border: 1.5px solid var(--white); padding: 14.5px 24px; }
  .c-btn--outline-light:hover { background: var(--white); color: var(--harbor); }

  .c-btn--sm { padding: 13px 22px; }
  .c-btn--block { width: 100%; }
  .c-btn[disabled] { opacity: .65; cursor: progress; }

  .c-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

  .c-skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--harbor);
    color: var(--white);
    padding: 10px 16px;
    border-radius: var(--r-btn);
    font-weight: 700;
  }
  .c-skip-link:focus { top: 12px; color: var(--white); }
}

/* ── components/cards.css ── */
/* c-card – horizontal card (icon/number left, text right) and simple stacked card.
   c-step – numbered step card. c-note – small mist box with a label. */
@layer components {
  .c-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 26px 28px;
    border-radius: var(--r-card);
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--ink);
    text-decoration: none;
  }
  .c-card--plain { border-color: transparent; }               /* white, no border – on tinted bands */
  .c-card--mist { background: var(--mist); border-color: transparent; }
  .c-card--stack { flex-direction: column; gap: 8px; }
  .c-card--peach { background: var(--peach); border-color: transparent; --text: var(--on-peach-body); }
  .c-card--peach .c-card__text { color: var(--on-peach-body); }
  .c-card--powder { background: var(--powder); border-color: transparent; }
  .c-card--compact { padding: 24px 26px; gap: 18px; }
  .c-card--roomy { padding: 28px; gap: 14px; }          /* stacked info card with a list (covered / keep-with-you / carrier options) */

  a.c-card { transition: border-color .15s ease; }
  a.c-card:hover { color: var(--ink); border-color: var(--harbor); }
  a.c-card:hover .c-card__more { text-decoration: underline; }

  .c-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .c-card__title { font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.25; color: var(--ink); }
  .c-card__title--sm { font-size: 21px; }
  .c-card__title--md { font-size: 22px; }
  .c-card__text { font-size: var(--fs-card); line-height: 1.6; color: var(--body); }
  .c-card__more { color: var(--harbor); font-weight: 700; font-size: 15px; }
  .c-card__label { color: var(--harbor); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }

  /* Numbered step */
  .c-step__num {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill);
    background: var(--harbor);
    color: var(--white);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .c-step__num--current { background: var(--coral); color: var(--ink); }
  .c-step__num--done { background: var(--on-seafoam); color: var(--white); }

  /* Coloured link tile that ends a grid of cards */
  .c-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 26px;
    border-radius: var(--r-card);
    background: var(--harbor);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
  }
  .c-card-link--seafoam { background: var(--on-seafoam); }
  .c-card-link:hover { color: var(--white); background: var(--harbor-dark); }
  .c-card-link::after {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
  }

  /* Small labelled box */
  .c-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border-radius: var(--r-small);
    background: var(--mist);
  }
  .c-note--white { background: var(--white); }
}

/* ── components/data.css ── */
/* c-table – data tables (always inside c-table-wrap for horizontal scroll on phones).
   c-chip – small pills for cities, tags and statuses. */
@layer components {
  .c-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 4px; }
  .c-table { --table-min: 640px; width: 100%; min-width: var(--table-min); background: var(--white); border: 1px solid var(--border); font-size: var(--fs-list); line-height: 1.55; }
  .c-table--wide { --table-min: 720px; }
  .c-table--narrow { --table-min: 420px; }
  .c-table--compact { font-size: var(--fs-card); }
  .c-table th, .c-table td { padding: 16px 20px; border: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--body); }
  .c-table thead th { background: var(--powder); color: var(--ink); font-weight: 700; }
  .c-table tbody th { color: var(--ink); font-weight: 700; }
  .c-table caption { caption-side: bottom; text-align: left; padding-top: 12px; font-size: 15px; color: var(--muted); }

  .c-chip { display: inline-block; padding: 7px 14px; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border); font-weight: 600; font-size: 15px; line-height: 1.5; color: var(--ink); }
  .c-chip--lg { padding: 10px 18px; border: 0; font-size: 16px; }
  .c-chip--status { background: var(--peach); border: 0; color: var(--on-peach); font-weight: 700; font-size: 13px; padding: 5px 12px; }
  .c-chip--powder { background: var(--powder); border: 0; color: var(--harbor-dark); }
  .c-chip--seafoam { background: var(--seafoam); border: 0; color: var(--on-seafoam); }
  .c-chip-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
  .c-chip-list--loose { gap: 10px; }
}

/* ── components/footer.css ── */
/* c-footer – light footer shared by every page (src/partials/footer.html). Never dark. */
@layer components {
  .c-footer { background: var(--footer-bg); color: var(--body); font-size: 16px; line-height: 1.6; border-top: 1px solid var(--border); }
  .c-footer p { color: var(--body); }

  .c-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 40px 32px;
    padding-block: 64px 36px;
  }
  .c-footer__col { display: flex; flex-direction: column; gap: 9px; }
  .c-footer__brand { gap: 14px; }
  .c-footer__col a { color: var(--harbor-dark); text-decoration: none; }
  .c-footer__col a:hover { text-decoration: underline; }
  .c-footer__title { color: var(--ink); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
  .c-footer__domain { color: var(--ink) !important; font-weight: 700; }
  .c-footer__col .c-footer__phone { color: var(--ink); font-weight: 700; font-size: 20px; }
  .c-footer__col .c-footer__cta { align-self: flex-start; margin-top: 8px; padding: 12px 20px; color: var(--white); }
  .c-footer__col .c-footer__cta:hover { text-decoration: none; color: var(--white); }

  .c-footer__bottom { border-top: 1px solid var(--border); }
  .c-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 20px; font-size: 14px; }

  /* Mumbai service areas line above the copyright bar */
  .c-footer__areas { display: flex; flex-direction: column; gap: 8px; padding-block: 4px 32px; }
  .c-footer__areas p { font-size: 15px; line-height: 1.8; color: var(--body); }
}

/* ── components/forms.css ── */
/* c-form, c-field – the short quote form (src/partials/quote-form.html + field partials). */
@layer components {
  .c-form { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--r-form); background: var(--white); }
  .c-form--bordered { border: 1px solid var(--border); }
  .c-form__head { display: flex; flex-direction: column; gap: 4px; }
  .c-form__title { font-size: 28px; line-height: 1.2; }
  .c-form__intro { font-size: 16px; color: var(--muted); }
  .c-form__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
  .c-form__note { font-size: 14px; color: var(--muted); }

  .c-form__status { font-size: 15px; font-weight: 600; padding: 12px 14px; border-radius: var(--r-btn); background: var(--seafoam); color: var(--on-seafoam); }
  .c-form__status.is-error { background: var(--peach); color: var(--on-peach); }
  .c-form__status a { color: inherit; }

  .c-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
  .c-field__input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--input-border);
    border-radius: var(--r-btn);
    background: var(--mist);
    color: var(--ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }
  .c-field__input::placeholder { color: var(--muted); opacity: .85; }
  .c-field__input:focus { outline: 3px solid var(--powder); outline-offset: 0; border-color: var(--harbor); background: var(--white); }
  .c-field__input--area { resize: vertical; min-height: 96px; }
  .c-field.is-invalid .c-field__input { border-color: var(--coral-text); }
}

/* ── components/header.css ── */
/* c-header, c-logo, c-nav – site header shared by every page (src/partials/header.html). */
@layer components {
  .c-header { background: var(--white); border-bottom: 1px solid var(--border); position: relative; z-index: 20; }

  .c-header__strip { background: var(--powder); font-size: 14px; }
  .c-header__strip-inner { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; padding-block: 8px; }
  .c-header__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .c-header__contact a { color: var(--harbor-dark); text-decoration: none; }
  .c-header__contact a:hover { text-decoration: underline; }
  .c-header__phone { font-weight: 700; }

  .c-header__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding-block: 14px; }
  .c-header__menu { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

  .c-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
  .c-logo:hover { color: var(--ink); }
  .c-logo__mark { flex: 0 0 auto; }
  .c-logo__word { font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.3px; line-height: 1.2; }
  .c-logo__accent { color: var(--coral-text); }
  .c-logo--footer { gap: 10px; }
  .c-logo--footer .c-logo__word { font-size: 24px; letter-spacing: 0; }

  .c-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .c-nav__link {
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
  }
  .c-nav__link:hover { background: var(--mist); color: var(--harbor-dark); }
  .c-nav__link[aria-current="page"] { background: var(--powder); color: var(--harbor-dark); font-weight: 700; }

  /* Menu toggle – only visible on small screens */
  .c-header__toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-btn);
    background: var(--white);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
  }
  .c-header__toggle-bars,
  .c-header__toggle-bars::before,
  .c-header__toggle-bars::after { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s ease; }
  .c-header__toggle-bars::before,
  .c-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
  .c-header__toggle-bars::before { top: -6px; }
  .c-header__toggle-bars::after { top: 6px; }
  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars { background: transparent; }
  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .c-header__toggle[aria-expanded="true"] .c-header__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

  @media (max-width: 1100px) {
    .c-header__tagline { display: none; }
    .c-header__strip-inner { justify-content: flex-end; }
    .c-header__toggle { display: inline-flex; }
    .c-header__menu {
      display: none;
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding: 8px 0 6px;
      border-top: 1px solid var(--border);
    }
    .c-header__menu.is-open { display: flex; }
    .c-nav { flex-direction: column; align-items: stretch; }
    .c-nav__link { padding: 12px 14px; }
  }

  @media (max-width: 480px) {
    .c-header__bar { column-gap: 12px; }
    .c-logo { gap: 10px; }
    .c-logo__mark { width: 38px; height: 38px; }
    .c-logo__word { font-size: 22px; }
  }

  /* Without JavaScript, keep the menu reachable */
  .no-js .c-header__menu { display: flex; }
  .no-js .c-header__toggle { display: none; }
}

/* ── components/hero.css ── */
/* c-hero – the first band on every page. Sits on a soft band (powder / seafoam / peach). */
@layer components {
  .c-hero > .l-container { padding-block: 80px 88px; }
  @media (max-width: 760px) { .c-hero > .l-container { padding-block: 48px 64px; } }
  .c-hero__text { display: flex; flex-direction: column; gap: 22px; }

  .c-hero__pill {
    align-self: flex-start;
    background: var(--white);
    color: var(--eyebrow);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 1.5px;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: var(--r-pill);
  }

  .c-hero__title { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -1px; }
  .c-hero__title--xl { font-size: var(--fs-h1-home); }
  .c-hero__title em { font-style: normal; color: var(--coral-text); }
  .c-hero__lead { font-size: var(--fs-lead); color: var(--text); }

  /* Trust ticks under the hero buttons */
  .c-hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; font-weight: 600; color: var(--eyebrow); padding: 0; list-style: none; }
  .c-hero__ticks li { display: flex; align-items: center; gap: 8px; }
  .c-hero__ticks li::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background: var(--icon);
    -webkit-mask: var(--icon-tick) center / contain no-repeat;
    mask: var(--icon-tick) center / contain no-repeat;
  }
}

/* ── components/icons.css ── */
/* Shared icon masks (used as CSS masks so the colour comes from background-color) and icon tiles. */
@layer components {
  :root {
    --icon-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E");
    --icon-tick-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4.5 4.5L19 7'/%3E%3C/svg%3E");
    --icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }

  /* 56px tinted tile holding a 28px stroke icon. Stroke colour comes from currentColor. */
  .c-icon-tile {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: var(--r-tile);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--powder);
    color: var(--harbor);
  }
  .c-icon-tile svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .c-icon-tile--powder { background: var(--powder); color: var(--harbor); }
  .c-icon-tile--seafoam { background: var(--seafoam); color: var(--on-seafoam); }
  .c-icon-tile--peach { background: var(--peach); color: var(--coral-text); }
  .c-icon-tile--white { background: var(--white); }
  .c-icon-tile--sm { width: 48px; height: 48px; border-radius: var(--r-small); }
  .c-icon-tile--sm svg { width: 24px; height: 24px; }
  /* Short text instead of an icon (e.g. “6 wks”); darker text shades keep 4.5:1 contrast */
  .c-icon-tile--text { font-weight: 800; font-size: 15px; line-height: 1.1; text-align: center; }
  .c-icon-tile--text.c-icon-tile--powder { color: var(--harbor-dark); }
  .c-icon-tile--text.c-icon-tile--peach { color: var(--on-peach); }

  /* Inline icon at text size */
  .c-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
}

/* ── components/lists.css ── */
/* c-divided – “Why us” style list split by 1px rules.
   c-ticks – tick / cross bullet lists.
   c-qa – FAQ question & answer rows.
   c-checklist – tickable checkbox list (ticks last while the page is open, as the moving guide says). */
@layer components {
  /* Divided list */
  .c-divided__item { display: flex; flex-direction: column; gap: 8px; padding: 26px 0; border-top: 1px solid var(--border); }
  .c-divided__item--sm { gap: 6px; padding: 22px 0; }
  .c-divided--closed { border-bottom: 1px solid var(--border); }
  /* Row variant: small icon tile on the left, text on the right */
  .c-divided__item--icon { flex-direction: row; gap: 18px; align-items: flex-start; }
  /* On the Powder band the default rule is too faint: use the stronger input-border shade */
  .l-section--powder :is(.c-divided__item, .c-divided--closed) { border-color: var(--input-border); }
  /* White 1.5px rules (on Seafoam / Peach bands) */
  .c-divided--white .c-divided__item { border-top: 1.5px solid var(--white); }
  .c-divided__title { font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.25; color: var(--ink); }
  .c-divided__title--sm { font-size: 21px; }
  .c-divided__title--md { font-size: 22px; }
  .c-divided__text { color: var(--text); font-size: var(--fs-list); }

  /* Tick lists */
  .c-ticks { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; color: var(--text); font-size: var(--fs-card); line-height: 1.55; --tick: var(--harbor); }
  .c-ticks > li { display: flex; gap: 10px; align-items: flex-start; }
  .c-ticks > li::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 4px;
    background: var(--tick);
    -webkit-mask: var(--icon-tick) center / contain no-repeat;
    mask: var(--icon-tick) center / contain no-repeat;
  }
  .c-ticks--green { --tick: var(--on-seafoam); }
  .c-ticks--coral { --tick: var(--coral-text); }
  .c-ticks--cross > li::before { -webkit-mask-image: var(--icon-cross); mask-image: var(--icon-cross); }
  .c-ticks--plus > li::before { -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); }
  .c-ticks--loose { gap: 10px; }
  /* Ruled variant: each item on its own row with a soft rule above */
  .c-ticks--ruled { gap: 0; font-size: var(--fs-list); line-height: 1.7; }
  .c-ticks--ruled > li { gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
  .c-ticks--ruled > li::before { width: 20px; height: 20px; }

  /* FAQ rows */
  .c-qa { display: flex; flex-direction: column; }
  .c-qa__item { display: flex; flex-direction: column; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--border); }
  .c-qa__item:last-child { border-bottom: 0; }
  .c-qa--ruled-top { border-bottom: 1px solid var(--border); }
  .c-qa--ruled-top .c-qa__item { border-bottom: 0; border-top: 1px solid var(--border); }
  .c-qa__q { font-family: var(--font-sans); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--ink); }
  .c-qa__a { color: var(--text); font-size: var(--fs-list); }

  /* Checkbox checklist */
  .c-checklist { display: flex; flex-direction: column; }
  .c-checklist__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 9px 0;
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-card);
    line-height: 1.55;
    color: var(--body);
    cursor: pointer;
  }
  .c-checklist__box { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--harbor); cursor: pointer; }
  .c-checklist__item:has(.c-checklist__box:checked) { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--route); }
}

/* ── components/panels.css ── */
/* c-panel – white rounded panel that sits beside text or on a tinted band (hero side panels,
   jump lists, label keys, Q&A blocks, sample quotes, timelines).
   c-rows – a plain list split by soft rules, usually inside a c-panel. */
@layer components {
  .c-panel {
    display: flex;
    flex-direction: column;
    gap: var(--panel-gap, 16px);
    padding: 30px;
    border-radius: 20px;
    background: var(--white);
    /* Panels are white, so reset band-tinted text colours inside them */
    --text: var(--body);
    --link: var(--harbor);
    --eyebrow: var(--coral-text);
  }
  .c-panel--mist { background: var(--mist); }
  .c-panel--bordered { border: 1px solid var(--border); }
  .c-panel--hero { padding: 32px; border-radius: var(--r-form); --panel-gap: 18px; }
  .c-panel--list { padding: 8px 30px; --panel-gap: 0; }
  .c-panel--gapless { --panel-gap: 0; }                 /* children set their own spacing (head + rows) */
  @media (max-width: 560px) {
    .c-panel { padding: 24px 20px; }
    .c-panel--list { padding: 4px 20px; }
  }

  .c-panel__caption { font-weight: 800; font-size: 14px; letter-spacing: 1.5px; line-height: 1.5; color: var(--muted); }
  /* Caption row with a 2px ink rule (label / quote / timeline headers) */
  .c-panel__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
  }

  /* Jump link row inside a panel (“In this guide”, “All services”): soft rule above, or below with --under */
  .c-panel__link { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-soft); color: var(--ink); font-weight: 600; text-decoration: none; }
  .c-panel__link--under { border-top: 0; border-bottom: 1px solid var(--border-soft); }
  .c-panel__link:hover { color: var(--harbor-dark); text-decoration: underline; }

  .c-rows { display: flex; flex-direction: column; padding: 0; list-style: none; }
  .c-rows > li { padding: 14px 0; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: var(--fs-list); }
  .c-rows > li:last-child { border-bottom: 0; }
  .c-rows--top > li { border-bottom: 0; border-top: 1px solid var(--border-soft); }
  .c-rows--top > li:first-child { border-top: 0; }
}

/* ── motifs/motifs.css ── */
/* m-* – the three brand motifs. Keep visuals identical everywhere; only the words change per page.
   m-label (moving label) · m-tracker (move tracker) · m-boxes (box tags) */
@layer motifs {
  /* ── Moving label ── */
  .m-label { position: relative; display: flex; flex-direction: column; padding: 30px; border-radius: var(--r-card); border: 1.5px solid var(--input-border); background: var(--white); }
  .m-label__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
  .m-label__title { font-weight: 800; letter-spacing: 2px; font-size: 14px; }
  .m-label__meta { font-size: 13px; color: var(--muted); }
  .m-label__row { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; padding: 14px 0; border-bottom: 1px dashed var(--dash); }
  .m-label__row:last-child { border-bottom: 0; padding-bottom: 20px; }
  .m-label__key { font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--muted); line-height: 1.7; }
  .m-label__value { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.35; color: var(--ink); }
  .m-label__row--accent .m-label__value { color: var(--coral-text); }
  .m-label__barcode {
    height: 46px;
    width: min(100%, 152px);
    background: repeating-linear-gradient(90deg,
      var(--ink) 0 4px, transparent 4px 7px, var(--ink) 7px 9px, transparent 9px 12px,
      var(--ink) 12px 18px, transparent 18px 21px, var(--ink) 21px 23px, transparent 23px 26px,
      var(--ink) 26px 29px, transparent 29px 32px, var(--ink) 32px 39px, transparent 39px 42px,
      var(--ink) 42px 44px, transparent 44px 47px, var(--ink) 47px 51px, transparent 51px 54px);
  }
  .m-label__stamp {
    position: absolute;
    right: 26px;
    bottom: 30px;
    transform: rotate(-8deg);
    padding: 8px 14px;
    border: 2.5px solid var(--coral-text);
    border-radius: 10px;
    background: var(--white);
    color: var(--coral-text);
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 14px;
    line-height: 1.4;
  }
  @media (max-width: 480px) {
    .m-label { padding: 22px; }
    .m-label__row { grid-template-columns: 1fr; gap: 2px; }
    .m-label__stamp { right: 16px; bottom: 22px; font-size: 12px; }
  }

  /* ── Move tracker ── */
  .m-tracker { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 20px; background: var(--white); }
  .m-tracker--bordered { border: 1px solid var(--border); }
  .m-tracker__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .m-tracker__caption { font-weight: 800; font-size: 14px; letter-spacing: 1.5px; color: var(--muted); }
  .m-tracker__status { background: var(--peach); color: var(--on-peach); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: var(--r-pill); }
  .m-tracker__route { display: flex; align-items: center; gap: 10px; }
  .m-tracker__place { font-family: var(--font-serif); font-size: 20px; line-height: 1.3; color: var(--ink); }
  .m-tracker__line { flex: 1; min-width: 16px; border-top: 2.5px dashed var(--route); }
  .m-tracker__truck { flex: 0 0 auto; }
  .m-tracker__steps { display: flex; flex-direction: column; }
  .m-tracker__step { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-soft); font-weight: 600; color: var(--ink); line-height: 1.5; }
  .m-tracker__step:last-child { border-bottom: 0; }
  .m-tracker__text { flex: 1; }
  .m-tracker__note { flex-basis: 100%; padding-left: 40px; font-weight: 400; font-size: 15px; color: var(--muted); }
  .m-tracker__dot { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-pill); border: 2px solid var(--route); position: relative; }
  .m-tracker__step--done .m-tracker__dot { background: var(--harbor); border-color: var(--harbor); }
  .m-tracker__step--done .m-tracker__dot::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--white);
    -webkit-mask: var(--icon-tick-bold) center / contain no-repeat;
    mask: var(--icon-tick-bold) center / contain no-repeat;
  }
  .m-tracker__step--current .m-tracker__dot { background: var(--coral); border-color: var(--coral); }
  .m-tracker__step--next .m-tracker__text { color: var(--muted); }

  /* ── Box tags ── */
  .m-boxes { position: relative; height: 400px; }
  .m-boxes__box { position: absolute; display: flex; align-items: center; justify-content: center; background: var(--cardboard); border-radius: 10px; }
  .m-boxes__box::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--tape, 44%); width: 30px; background: var(--cardboard-tape); }
  .m-boxes__box--one { left: 0; top: 30px; width: 62%; height: 180px; transform: rotate(-4deg); }
  .m-boxes__box--two { right: 0; top: 0; width: 48%; height: 160px; transform: rotate(5deg); --tape: 42%; }
  .m-boxes__box--three { left: 8%; bottom: 0; width: 76%; height: 180px; transform: rotate(2deg); --tape: 46%; }
  .m-boxes__tag { position: relative; padding: 10px 18px; border-radius: 6px; font-weight: 800; letter-spacing: 2px; font-size: 15px; line-height: 1.4; text-align: center; margin-inline: 12px; }
  .m-boxes__tag--white { background: var(--white); color: var(--harbor-dark); }
  .m-boxes__tag--seafoam { background: var(--seafoam); color: var(--on-seafoam); }
  .m-boxes__tag--harbor { background: var(--harbor); color: var(--white); padding: 12px 20px; }
  .m-boxes__sticker {
    position: absolute;
    right: 4%;
    bottom: 150px;
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 2.5px solid var(--coral-text);
    color: var(--coral-text);
    font-weight: 800;
    font-size: 13px;
    line-height: 1.2;
    transform: rotate(-10deg);
  }
  @media (max-width: 480px) {
    .m-boxes { height: 360px; }
    .m-boxes__tag { font-size: 12px; letter-spacing: 1.2px; padding: 8px 12px; }
    .m-boxes__sticker { width: 76px; height: 76px; font-size: 11px; }
  }
}

/* ── utilities/utilities.css ── */
/* u-* – single-purpose helpers. Keep this list short; prefer a component or page class. */
@layer utilities {
  .u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .u-self-start { align-self: flex-start; }
  .u-center { text-align: center; }
  .u-max-text { max-width: 780px; }
}