/* ============================================================
   PAGE: Home (node 2902:1056) — home-only styles.
   Each section's desktop rules are followed immediately by its
   own responsive (<=1024px) overrides.
   ============================================================ */

/* ---- 02 Hero ---- */
.home-hero__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: 24px; position: relative; }

.home-hero__media { position: relative; height: calc(868 * var(--u)); border-radius: 8px; overflow: hidden; background: #14171E; }

.home-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.home-hero__scrim { position: absolute; inset: 0; border-radius: 8px; opacity: 0.8; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 82.21%); }

.home-hero__content { position: absolute; left: 0; right: 0; top: calc(298 * var(--u)); margin-inline: auto;
  width: 672px; max-width: calc(100% - 48px); text-align: center; display: flex; flex-direction: column; align-items: center; }

.home-hero__title { font-size: 56px; line-height: 64px; font-weight: 300; letter-spacing: -1.12px; color: #fff; }


/* ---- 03 Treatments ---- */
.home-treat { margin-top: calc(-126 * var(--u)); position: relative; z-index: 1; }

.home-treat__row { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: repeat(3, calc(574 * var(--u))); gap: 16px; justify-content: space-between; }


/* ---- 04 Why Choose Us ---- */
.home-why { margin-top: calc(200 * var(--u)); position: relative; }

.home-why::before {
  content: "";
  position: absolute;
  left: 0%;
  top: -700px;
  width: 870px;
  height: 1247px;
  background: url("../images/artwork-bgs/artwork-blue.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: 0;
}

.home-why__inner { position: relative; z-index: 1; max-width: calc(1304 * var(--u)); margin-inline: auto; padding-inline: calc(24 * var(--u)); }

.home-why__header { text-align: center; max-width: calc(1080 * var(--u)); margin-inline: auto; }

.home-why__heading { font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.home-why__intro { margin-top: calc(24 * var(--u)); }

.home-why__grid { max-width: calc(1308 * var(--u)); margin-top: calc(80 * var(--u)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, calc(408 * var(--u))); gap: calc(80 * var(--u)) calc(40 * var(--u)); justify-content: center; }

.why-item { display: grid; grid-template-columns: 64px 1fr; gap: calc(24 * var(--u)); align-items: start; }

.why-item__icon { width: 64px; height: 64px; }

.why-item__title { font-size: 18px; line-height: 25.2px; font-weight: 500; letter-spacing: -0.54px; color: var(--ink); }

.why-item__copy { margin-top: 8px; }


/* Home-only: line up left/right edges with the Why Choose Us column above
   (max-width 1304 + 24px padding) instead of the shared inset gutter —
   .inset-doctors is reused from the inset template, so this is scoped to
   .page-home rather than touching the shared component. */
.page-home .inset-doctors__inner {
  max-width: calc(1304 * var(--u)); margin-inline: auto; padding-inline: 0;
}

/* The section shares .inset-doctors for its layout, but on home it sits on the
   page background instead of the gradient band, and the team section follows
   straight after. */
.home-doctors { background: none; padding-bottom: 0; }


/* ---- 06 Our Team ---- */
.home-team { margin-top: calc(118 * var(--u)); position: relative; }

.home-team::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: 0;
  /* transform: translateX(-50%); */
  width: calc(100% - 48px);
  height: 1624px;
  background: url(../images/artwork-bgs/bg-home-team.svg) no-repeat center / cover;
  pointer-events: none;
  z-index: -1;
  border-radius: 8px;
}

.home-team__inner { position: relative; max-width: calc(1572 * var(--u)); margin-inline: auto; height: calc(670 * var(--u)); }

.home-team__logo { position: absolute; left: calc(526 * var(--u)); top: 0; width: calc(520 * var(--u)); height: calc(449 * var(--u)); }

.home-team__logo svg { width: 100%; height: 100%; display: block; }

.home-team__photo { position: absolute; left: 0; top: calc(160 * var(--u)); width: calc(1572 * var(--u)); height: calc(510 * var(--u)); }

.home-team__photo img { width: 100%; height: 100%; object-fit: contain; }


/* ---- 07 Costs ---- */
.home-costs { margin-top: calc(40 * var(--u)); }

.home-costs__inner { max-width: calc(1920 * var(--u)); margin-inline: auto; padding-inline: var(--gut); }

.home-costs__band { position: relative; height: calc(840 * var(--u)); border-radius: 8px; overflow: hidden; background: var(--surface); }

.home-costs__band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.home-costs__panel { position: absolute; right: 0; top: 0; width: calc(1035 * var(--u)); height: 100%;
  /* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 22%, rgba(255, 255, 255, .94) 46%); */
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(245, 245, 245, 0.00) 0%, rgba(245, 245, 245, 0.90) 100%); }

.home-costs__circle { position: absolute; right: 300px; bottom: 100px; width: 592px; height: 592px; border-radius: 50%; border-radius: 592px; background: #FFF; filter: blur(126px); }

.home-costs__content { position: absolute; left: calc(1156 * var(--u)); top: calc(243 * var(--u)); width: calc(451 * var(--u)); }

.home-costs__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.home-costs__copy { margin-top: calc(24 * var(--u)); }


/* ---- 08 Before & Afters ---- */
.home-ba { margin-top: calc(165 * var(--u)); position: relative; }

.home-ba::before {
  content: "";
  position: absolute;
  right: -270px;
  top: -600px;
  width: 1336px;
  height: 1247px;
  background: url("../images/artwork-bgs/artwork-orange.svg") no-repeat center / contain;
  pointer-events: none;
  z-index: -1;
}

.home-ba__header { text-align: center; max-width: calc(1030 * var(--u)); margin-inline: auto; padding-inline: var(--gut); }

.home-ba__heading { margin-top: calc(32 * var(--u)); font-size: 40px; line-height: 51px; font-weight: 300; letter-spacing: -1.2px; color: var(--ink); }

.home-ba__subcopy { margin-top: calc(24 * var(--u)); }

/* Two cards wide and centred (Figma 1-13), the rest reachable via the arrows.
   The track is capped at 2 cards + gap and centred with margin-inline:auto —
   justify-content:center would make the overflowing cards unreachable in a
   scroll container. */
.home-ba__carousel { position: relative; margin-top: calc(80 * var(--u)); }

.home-ba__row { display: flex; gap: calc(40 * var(--u)); align-items: start; overflow-x: auto; scroll-snap-type: x mandatory; max-width: calc(1432 * var(--u)); margin-inline: auto; padding-inline: 0; scrollbar-width: none; }

.home-ba__row::-webkit-scrollbar { display: none; }

.home-ba__arrow { position: absolute; top: calc(131 * var(--u)); transform: translateY(-50%); color: var(--brand); background: none; border: none; }

.home-ba__arrow .ico-arw { display: none; }

.home-ba__arrow:disabled { opacity: .3; pointer-events: none; }

.home-ba__arrow--prev { left: calc(50% - (716 * var(--u)) - 66px); }

.home-ba__arrow--next { right: calc(50% - (716 * var(--u)) - 66px); }

.home-ba__cta { margin-top: calc(84 * var(--u)); text-align: center; }


.home-ba .ba-card { scroll-snap-align: start; }


/* ---- 10 Book a Consultation (home-only spacing hook) ---- */


/* Blurred pink triangle behind the consult band. Placed from the artboard:
   the wash peaks at x 1120 and centres 423px below the photo top, and the SVG
   filter box (1205x1106) is centred on the triangle. */
.home-consult::before {
    content: "";
    position: absolute;
    right: 600px;
    top: 170px;
    width: 653px;
    height: 554px;
    pointer-events: none;
    z-index: -1;
    background: var(--aco_cbd_pink, #B86EAD);
    opacity: 0.2;
    filter: blur(138px);
}


/* ============================================================
   RESPONSIVE OVERRIDES — one block per breakpoint, widest first, so the
   cascade reads top to bottom. Keep this the tail of the file: a top-level
   rule added below a block would silently beat it inside that breakpoint.
   ============================================================ */

@media (max-width: 1440px) {
  .home-team::before { height: 1192px; }

  /* the band comes off the 84px gutter and onto a fixed 24px inset — the
     scaled calc(24 * var(--u)) shrank to 18px at 1440 */
  .home-costs__inner { padding-inline: 24px; }

  .home-costs__content { left: calc(1000 * var(--u)); top: calc(141 * var(--u)); width: calc(600 * var(--u)); }

  /* the pink blob is anchored in fixed px, so below 1920 it has to come in off
     the right edge and shrink with the band */
  .home-consult::before {
    right: 500px;
    top: 70px;
    width: 550px;
    height: 450px;
  }
  .home-treat__row {
    grid-template-columns: repeat(3, calc(560 * var(--u)));
  }
}

@media (max-width: 1024px) {
  /* hero goes full-bleed on mobile: no side gutter, square corners */
  .home-hero__inner { padding-inline: 0; }

  .home-hero__media, .home-hero__scrim { border-radius: 0; }
  .home-hero__media { height: 565px; }
  /* Artboard: button sits 33px off the bottom of the photo, and the title is
     28/36 so "Your Premier Orthodontist" holds one line (334px of the 342
     available) instead of wrapping to three lines. */
  .home-hero__content { top: auto; bottom: 33px; left: 24px; right: 24px; transform: none; width: auto; text-align: center; align-items: center; }
  /* -0.56px is the design-system -0.02em tracking at 28px (desktop is 56/-1.12).
     margin-bottom lifts the block so line 1 ink lands on the artboard Y (480). */
  .home-hero__title { font-size: 28px; line-height: 36px; letter-spacing: -0.56px; margin-bottom: 11px; }

  .home-treat { margin-top: 65px; }
  .home-treat__row {
    display: flex !important; flex-direction: column; grid-template-columns: none !important;
    gap: 16px; overflow: visible; min-height: 0; max-width: 100%;
    padding-left: 24px !important; padding-right: 24px !important; margin-right: 0;
  }

  .home-why__inner {
    display: block; grid-template-columns: none !important; gap: 0;
    padding-left: 24px !important; padding-right: 24px !important; max-width: 100%; min-height: 0;
  }
  .home-why__heading {
    font-size: 26px; line-height: 33px; letter-spacing: -0.78px;
  }

  /* artboard breaks it as "Why Choose" / "Auckland City Orthodontics" */
  .home-why__heading span { display: block; }

  /* artboard: 24px ink from the heading to the intro, 47px ink from the intro
     to the first feature icon (and the same 41px box gap between items) */
  .home-why__intro { margin-top: 16px; }

  /* artboard: 16/24 title, 16px between the icon and the text column */
  .why-item { gap: 16px; }

  .why-item__title { font-size: 16px; line-height: 24px; } 
  .home-why { margin-top: 65px; overflow: hidden; margin-bottom: 65px; }
  .home-why__header { text-align: center; max-width: inherit; margin-inline: auto; }
  .home-why__grid { display: block; max-width: inherit; }
  .home-why__grid .why-item { margin-top: 45px; }
      .home-why::before {
        width: 520px;
        height: 440.732px;
        position: absolute;
        left: auto;
        right: -347px;
        top: 100px;
        background: var(--aco_grey_lynn_blue, #00B3F0);
        opacity: 0.1;
        filter: blur(88.5px);
    }

  /* the 1304 * --u cap collapses to 265px here, and it outranks the shared
     __inner mobile rule that already sets max-width: 100% */
  .page-home .inset-doctors__inner { max-width: 100%; }

  .home-doctors { margin-top: 80px; }

  .home-team { margin-top: 65px; }
  .home-team::before { 
    left: 0px;
    bottom: 0;
    width: calc(100% - 0px);
    height: 1170px;
    background: url(../images/artwork-bgs/bg-home-team-mob.png) no-repeat center / cover;
    border-radius: 0px;
  }
  .home-team__inner { height: auto; aspect-ratio: 390 / 368; max-width: 100%; }
  .home-team__logo { left: 12%; top: 1px; width: 70%; height: auto; }
  .home-team__photo { left: 0; top: auto; bottom: 0; width: 100%; height: auto; }

  .home-team__photo img { width: 390px; height: 330px; object-fit: cover; object-position: -235px; }

  .home-costs__inner {
    display: block; grid-template-columns: none !important; gap: 0;
    padding-left: 10px !important; padding-right: 10px !important; max-width: 100%; min-height: 0;
  }
  .home-costs__heading {
    font-size: 26px; line-height: 33px; letter-spacing: -0.78px;
  }
  .home-costs { margin-top: 65px; }
  .home-costs__band { height: auto; background: none; border-radius: 0; }
  /* artboard: the costs photo is 532 tall on a ~374 wide band, i.e. 486 at the
     342 the mobile band actually gets (was 360) */
  .home-costs__band > img { position: static; width: 100%; height: auto; aspect-ratio: 338 / 486; object-fit: cover; object-position: -228px; border-radius: 8px; }
  .home-costs__panel { display: none; }

  .home-costs__circle { opacity: 0; }
  .home-costs__content { position: static; width: auto; padding: 32px 12px 35px; }

  /* missed by the shared .inset-*__heading mobile rule in styles.css, so this
     was still rendering at the desktop 40/51 (artboard has 26/33) */
  .home-ba__heading { font-size: 26px; line-height: 33px; letter-spacing: -0.78px; }

  .home-ba__subcopy { margin-top: 22px; }

  .home-ba { margin-top: 65px; overflow-x: clip; }
  .home-ba::before {
    width: 520px;
    height: 340.732px;
    position: absolute;
    left: auto;
    right: -412px;
    top: -200px;
        background: var(--aco_remuera_orange, #F68B24);
        opacity: 0.15;
        filter: blur(88.5px);
  }
  /* One card per view; arrows drop below the card, centred (Figma 2902:957).
     flex-wrap on the carousel puts them on their own line under the full-width
     track, and scroll-padding keeps card 2+ snapping to the 24px gutter rather
     than to the scroll container padding edge. */
  .home-ba__carousel { display: flex; flex-wrap: wrap; justify-content: center; }
  .home-ba__row { flex: 0 0 100%; flex-direction: row; align-items: start; gap: 24px; padding-inline: 24px; scroll-padding-inline: 24px; max-width: none; }
  .home-ba .ba-card { flex: 0 0 100%; }
  .home-ba__arrow { position: static; transform: none; margin-top: 34px; width: 46px; height: 46px; border: 1px solid var(--brand); }
  .home-ba__arrow--next { margin-left: 20px; }
  .home-ba__arrow .ico-chev { display: none; }
  .home-ba__arrow .ico-arw { display: block; }
  .home-ba__cta { margin-top: 33px; }

  .home-ba__header { margin-bottom: 30px; padding-inline: 24px; max-width: 100%; }

  .home-reviews { margin-top: 65px; }

  .home-consult { margin-top: 65px; overflow-x: clip; }

  /* left: auto is needed for the right offset to apply at all — the desktop
     rule sets left: 518px, and with left + width + right all set the right
     offset is the one that gets ignored. overflow-x: clip above keeps the
     -400px off the page width without cutting the artwork at the top. */
  .home-consult::before {
    left: auto;
    right: -400px;
    top: 170px;
    width: 653px;
    height: 400px;
  }
}

@media (min-width: 1025px) {
/* ---- 05 Meet the Doctors (home-only spacing hook) ---- */
 .page-home .home-doctors { /* margin-top: calc(330 * var(--u)); */ }

/* Artboard: reviews band ends 7009, consult photo starts 7135 -> 126px gap. */
 .page-home .home-consult { margin-top: calc(126 * var(--u)); }
}

@media (min-width: 1920.02px) {
/* Ultra-wide (>1920px): the 1920-canvas box stops growing and leaves a huge
   dead gap either side; past that point, hold the gap at a fixed 25px instead. */

  .home-hero__inner { width: calc(100% - 50px); max-width: none; padding-inline: 0; }

/* Ultra-wide (>1920px): hold the edge gap at 25px instead of it growing.
   .home-costs__content is re-anchored from the right (145px, same offset it
   already sits at from the band's right edge at 1920) so it stays lined up
   with .home-costs__panel — which is also right-anchored — instead of
   drifting out from under the white panel as the band gets wider. */

  .home-costs__inner { width: calc(100% - 50px); max-width: none; padding-inline: 0; }
  .home-costs__content { left: auto; right: 245px; }
}