/* ============================================================
   Walter North Adelaide — shared site system
   Header navigation, the mobile phone icon, and the appointment
   request modal. Loaded by every page after calc-base.css so the
   header and the modal are defined once for the whole site.
   ============================================================ */

/* ---- header: section links on desktop, icon on mobile ---- */
.w-calc .w-head { gap: 3.2rem; }
.w-calc .w-head nav { display: flex; align-items: center; gap: 2.8rem; }
.w-calc .w-head nav a { color: var(--white); font-size: 1.8rem; white-space: nowrap; text-decoration: none; transition: color .2s ease; }
.w-calc .w-head nav a:hover { color: var(--primary-light); }
.w-calc .w-head .nav-link { position: relative; padding-bottom: .4rem; }
.w-calc .w-head .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--primary-light); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.w-calc .w-head .nav-link:hover::after { transform: scaleX(1); }
.w-calc .w-head .nav-link.is-tool { color: var(--accent); }
.w-calc .w-head .w-head-tel-icon { display: none; }
.w-calc .w-head .w-head-tel-icon svg { display: block; width: 2.4rem; height: 2.4rem; }

/* the header plane itself, shared by every surface. Previously this lived in
   the home page's own style block, so any other page fell back to the pale
   calc-base header and the white nav links vanished. */
.w-calc .w-head { position: sticky; top: 0; background: var(--base); border-bottom: 0; padding: 2rem var(--section-padding-x); backdrop-filter: none; }
.w-calc .w-head > a:first-child { flex: 0 0 auto; }
.w-calc .w-head img { height: 62px; width: auto; }
.w-calc .w-head nav { min-width: 0; flex: 0 1 auto; }

/* tablet band: the six links, the number and the CTA do not fit beside the
   lockup below ~1150, so the links collapse there rather than at 900, where
   they used to squeeze the lockup to nothing and push the header 2px wide. */
@media (max-width: 1150px) {
  .w-calc .w-head { gap: 2rem; }
  .w-calc .w-head .nav-link { display: none; }
  .w-calc .w-head nav { gap: 1.6rem; }
}
.w-calc .w-head .w-head-cta { background: var(--secondary); color: var(--base); border-radius: 2px; padding: 1.2rem 2.4rem; white-space: nowrap; }
.w-calc .w-head .w-head-cta:hover { background: var(--secondary-hover); color: var(--base); }
.w-calc .w-head .w-head-tel { font-variation-settings: "wght" 500, "wdth" 67.5; letter-spacing: .02em; }
@media (max-width: 900px) {
  .w-calc .w-head { padding: 1.4rem var(--space-m); gap: 1.2rem; }
  .w-calc .w-head img { height: 46px; }
  .w-calc .w-head .w-head-cta { padding: 1.1rem 1.6rem; font-size: 1.6rem; }
}

/* ---- appointment modal ---- */
.ap-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 2rem; background: rgba(72,43,17,.62); }
.ap-modal.show { display: flex; }
.ap-card { background: var(--secondary-ultra-light); width: 100%; max-width: 108rem; max-height: calc(100vh - 4rem); display: flex; flex-direction: column; position: relative; }
.ap-close { position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3; background: transparent; border: 0; cursor: pointer; line-height: 1; color: var(--primary); font-size: 3rem; padding: .6rem 1.2rem; }
.ap-close:hover { background: rgba(78,42,10,.06); }
.ap-head { padding: 3.2rem 4rem 2.4rem; border-bottom: 1px dotted var(--primary); }
.ap-head .lab { font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; font-size: 2rem; letter-spacing: 0; color: var(--primary); margin: 0 0 1.2rem; }
.ap-head h2 { font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 500, "wdth" 67.5; text-transform: none; font-size: 3.2rem; line-height: 1.2; letter-spacing: 0; color: var(--base); margin: 0 0 1.2rem; }
.ap-head p { font-size: 2rem; color: var(--primary); margin: 0; max-width: 64ch; }

.ap-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; overflow-y: auto; min-height: 0; }
.ap-col { padding: 3.2rem 4rem; }
.ap-col + .ap-col { border-left: 1px dotted var(--primary); }
.ap-col h3 { font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 500, "wdth" 67.5; text-transform: none; font-size: 2.4rem; letter-spacing: 0; color: var(--base); margin: 0 0 2rem; }

/* fields, on the site recipe: stone fill, dotted underline */
.ap-field { margin-bottom: 2rem; }
.ap-field label { display: block; font-size: 1.8rem; color: var(--primary); margin-bottom: .8rem; }
.ap-field input, .ap-field textarea, .ap-field select {
  width: 100%; box-sizing: border-box; background: var(--secondary); border: 0;
  border-bottom: 2px dotted var(--primary); border-radius: 0; padding: 1.2rem 1.4rem;
  font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-size: 2rem; color: var(--primary);
}
.ap-field textarea { min-height: 9rem; resize: vertical; }
.ap-field input::placeholder, .ap-field textarea::placeholder { color: rgba(78,42,10,.7); opacity: 1; }
.ap-field input:focus-visible, .ap-field textarea:focus-visible, .ap-field select:focus-visible { outline: .2rem solid var(--primary-dark); outline-offset: .2rem; }

/* date strip */
.ap-dates { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: 2.4rem; }
.ap-date {
  background: var(--white); border: 1px solid rgba(78,42,10,.2); border-radius: 0; cursor: pointer;
  padding: 1.2rem .6rem; text-align: center; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%;
  color: var(--primary); transition: background .2s ease, border-color .2s ease, color .2s ease;
  display: grid; gap: .4rem; min-height: 8.4rem; align-content: center;
}
.ap-date:hover { border-color: var(--primary); background: var(--secondary); }
.ap-date .dow { font-size: 1.5rem; color: rgba(78,42,10,.8); }
.ap-date .dom { font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; font-size: 2.8rem; line-height: 1; }
.ap-date .mon { font-size: 1.4rem; color: rgba(78,42,10,.75); }
.ap-date[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ultra-light); }
.ap-date[aria-pressed="true"] .dow, .ap-date[aria-pressed="true"] .mon { color: rgba(252,242,232,.85); }
.ap-date[disabled] { opacity: .4; cursor: not-allowed; }

/* time slots */
.ap-times { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.ap-time {
  background: var(--white); border: 1px solid rgba(78,42,10,.2); border-radius: 0; cursor: pointer;
  padding: 1.4rem .8rem; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-size: 2rem;
  color: var(--primary); transition: background .2s ease, border-color .2s ease, color .2s ease; min-height: 5.6rem;
}
.ap-time:hover { border-color: var(--primary); background: var(--secondary); }
.ap-time[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ultra-light); }
.ap-hint { font-size: 1.8rem; color: rgba(78,42,10,.8); margin: 2rem 0 0; }

/* footer of the card: the action is always in view */
.ap-foot { border-top: 1px dotted var(--primary); background: var(--secondary-ultra-light); padding: 2.4rem 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.ap-summary { font-size: 2rem; color: var(--primary); }
.ap-summary b { font-variation-settings: "wght" 500, "wdth" 67.5; color: var(--base); }
.ap-actions { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ap-btn { display: inline-block; text-decoration: none; cursor: pointer; border: 0; border-radius: 0; padding: 1.6rem 3.2rem; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 500, "wdth" 67.5; font-size: 2rem; background: var(--primary); color: var(--primary-ultra-light); transition: opacity .2s ease; }
.ap-btn:hover { opacity: .8; color: var(--primary-ultra-light); }
.ap-btn--quiet { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1px rgba(78,42,10,.35); }
.ap-btn--quiet:hover { background: rgba(78,42,10,.06); color: var(--primary); }
.ap-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ap-legal { font-size: 1.5rem; color: rgba(78,42,10,.75); margin: 1.2rem 0 0; width: 100%; }

/* confirmation state */
.ap-done { display: none; padding: 4.8rem 4rem; }
.ap-modal.done .ap-done { display: block; }
.ap-modal.done .ap-head, .ap-modal.done .ap-body, .ap-modal.done .ap-foot { display: none; }
.ap-done h2 { font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 500, "wdth" 67.5; text-transform: none; font-size: 3.2rem; color: var(--base); margin: 0 0 1.6rem; }
.ap-done p { font-size: 2.2rem; color: var(--primary); margin: 0 0 2.4rem; max-width: 60ch; }
.ap-done .ap-recap { background: var(--secondary); padding: 2.4rem; margin-bottom: 2.4rem; font-size: 2.2rem; }
.ap-done .ap-recap b { font-variation-settings: "wght" 500, "wdth" 67.5; color: var(--base); }

@media (max-width: 900px) {
  .w-calc .w-head nav { gap: 1.6rem; }
  .w-calc .w-head .nav-link { display: none; }
  .w-calc .w-head .w-head-tel { display: none; }
  .w-calc .w-head .w-head-tel-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border: 1px solid rgba(246,215,187,.5); color: var(--white); }
  .w-calc .w-head .w-head-tel-icon:hover { border-color: var(--accent); color: var(--accent); }
  .ap-modal { padding: 0; align-items: stretch; }
  .ap-card { max-width: none; max-height: 100vh; }
  .ap-head { padding: 2.8rem var(--space-m) 2rem; }
  .ap-head h2 { font-size: 2.8rem; }
  .ap-body { grid-template-columns: minmax(0,1fr); }
  .ap-col { padding: 2.8rem var(--space-m); }
  .ap-col + .ap-col { border-left: 0; border-top: 1px dotted var(--primary); }
  .ap-dates { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ap-times { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ap-foot { padding: 2rem var(--space-m); flex-direction: column; align-items: stretch; }
  .ap-actions { flex-direction: column; }
  .ap-btn { width: 100%; text-align: center; }
  .ap-done { padding: 3.2rem var(--space-m); }
}


/* ============================================================
   Width limits and the tablet band
   ============================================================ */

/* Full-bleed imagery is sourced at 2048px, so above ~2200 it upscales and goes
   soft. The page shell caps there and centres, with the brand brown behind it,
   rather than stretching a 2048px render across a 4K screen. */
body { background: var(--primary); }
.w-calc { max-width: 2200px; margin-left: auto; margin-right: auto; }

/* the footer motif tiles instead of being stretched 4x */
.w-calc .w-foot .pattern { background-image: url(/walter/img/pattern-footer.webp); background-repeat: repeat; background-size: 42rem auto; }
.w-calc .w-foot .pattern img { display: none; }

/* Tablet band: between 901 and 1200 the two-column splits leave 310px columns,
   which a 44px display heading cannot sit in. Gaps come in, the narrow splits
   stack, and the display sizes step down. */
@media (max-width: 1200px) {
  .w-calc .welcome .grid, .w-calc .hood .grid, .w-calc .calcband .grid, .w-calc .prec .top,
  .w-calc .f-relief .top { grid-template-columns: minmax(0,1fr) !important; gap: 5.6rem !important; }
  .w-calc .avail .grid, .w-calc .f-types { gap: 4.8rem !important; }
  .w-calc .h2, .w-calc .f-relief h2, .w-calc .wdz-faq h2 { font-size: 3.2rem; }
  .w-calc .hero h1, .w-calc .f-hero h1 { font-size: 4.4rem; }
  .w-calc .avail .status { font-size: 2.6rem; }
  .w-calc .avail .type-price, .w-calc .f-type-price { font-size: 3.6rem; }
  .w-calc .prec .quote { font-size: 2.6rem; }
  .w-calc .prec .strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .w-calc .prec .strip img { height: 34rem; }
  .w-calc .hood .map img, .w-calc .calcband .shot img { max-width: 72rem; margin-left: 0; }
  .w-calc .welcome .film { max-width: 72rem; }
  .w-calc .ex-grid { grid-template-columns: minmax(0,1fr) !important; gap: 4.8rem !important; }
  .w-calc .ex-col-result { position: static !important; }
}


/* ============================================================
   Site footer, built to MJ's V4 footer artwork. Shared, for the same
   reason the header is: it used to live only in the home page's own
   style block, so any other surface rendered an unstyled footer.
   ============================================================ */
.w-calc .w-foot { background: var(--primary); color: var(--primary-ultra-light); padding: var(--space-xl) var(--section-padding-x) var(--space-l); position: relative; overflow: hidden; display: block; }
.w-calc .w-foot .pattern { position: absolute; inset: 0; opacity: .07; pointer-events: none; }
.w-calc .foot-head { position: relative; text-align: center; font-family: "aviano-didone", Georgia, serif; font-weight: 500; font-variation-settings: normal; font-size: clamp(2.4rem, 2.2vw, 3.2rem); letter-spacing: .06em; color: var(--accent); margin: 0 0 var(--space-xl); }
.w-calc .foot-top { position: relative; display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 9.6rem; align-items: start; }
.w-calc .agents-lead { font-size: 2rem; color: rgba(252,242,232,.9); text-align: center; margin: 0 0 var(--space-m); }
.w-calc .agents { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--space-m); }
.w-calc .agent { border: 1px solid rgba(246,215,187,.45); padding: var(--space-m) var(--space-s); text-align: center; display: grid; align-content: center; gap: 1.6rem; min-height: 20rem; }
.w-calc .agent p { margin: 0; font-size: 2rem; }
.w-calc .agent-name { font-size: 2.4rem; color: var(--white); font-variation-settings: "wght" 500, "wdth" 67.5; }
.w-calc .agent a { color: var(--primary-ultra-light); text-decoration: underline; text-underline-offset: .3rem; white-space: nowrap; }
.w-calc .agent a:hover { color: var(--accent); }
.w-calc .foot-form { background: var(--secondary-ultra-light); padding: var(--space-xl); max-width: 56rem; }
.w-calc .foot-form-lead { font-size: 1.8rem; color: var(--base); margin: 0 0 var(--space-m); max-width: 44ch; }
.w-calc .foot-form .wdz-field { margin-bottom: var(--space-s); }
.w-calc .foot-form .wdz-field input { width: 100%; background: transparent; border: 0; border-bottom: 2px dotted rgba(78,42,10,.5); border-radius: 0; padding: 1rem 0; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-size: 2.2rem; color: var(--primary); }
.w-calc .foot-form .wdz-field input::placeholder { color: rgba(78,42,10,.85); opacity: 1; }
.w-calc .foot-form .wdz-field input:focus-visible { outline: 0; border-bottom-color: var(--primary); }
.w-calc .foot-form .wdz-submit { margin-top: var(--space-m); width: auto; min-width: 24rem; display: inline-block; background: var(--primary); color: var(--accent); border: 0; border-radius: 0; padding: 1.4rem 4.4rem; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-variation-settings: "wght" 400, "wdth" 67.5; text-transform: uppercase; letter-spacing: .16em; font-size: 1.8rem; cursor: pointer; }
.w-calc .foot-form .wdz-submit:hover { background: var(--primary-hover); color: var(--accent); }
.w-calc .foot-base { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); justify-content: space-between; margin-top: var(--space-xl); }
.w-calc .foot-marks { display: flex; align-items: center; gap: var(--space-l); }
.w-calc .foot-marks .lockup { height: 92px; width: auto; }
.w-calc .foot-marks .eca { height: 58px; width: auto; }
.w-calc .foot-marks .social { display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border: 1px solid rgba(246,215,187,.6); border-radius: 100px; color: var(--primary-ultra-light); }
.w-calc .foot-marks .social:hover { color: var(--accent); border-color: var(--accent); }
.w-calc .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-l); font-size: 1.8rem; color: rgba(252,242,232,.85); }
.w-calc .foot-legal a { color: rgba(252,242,232,.85); text-decoration: none; white-space: nowrap; }
.w-calc .foot-legal a:hover { color: var(--accent); text-decoration: underline; }
/* the register panel and the agent cards sit on the site measure */
.w-calc .w-foot .foot-head,
.w-calc .w-foot .foot-top,
.w-calc .w-foot .foot-base { max-width: var(--content-width); margin-left: auto; margin-right: auto; }
@media (max-width: 1200px) {
  .w-calc .w-foot .foot-top { grid-template-columns: minmax(0,1fr); gap: 5.6rem; }
  .w-calc .w-foot .foot-form { max-width: 62rem; }
}
@media (max-width: 900px) {
  .w-calc .w-foot { padding: var(--space-xl) var(--space-m) var(--space-l); }
  .w-calc .foot-head { font-size: 2.6rem; }
  .w-calc .foot-form { order: -1; padding: var(--space-l) var(--space-m); }
  .w-calc .agents { grid-template-columns: minmax(0,1fr); gap: var(--space-s); }
  .w-calc .agent { min-height: 0; padding: var(--space-m) 1.2rem; gap: 1rem; }
  .w-calc .agent p, .w-calc .agent-name { font-size: 1.8rem; }
  .w-calc .agents-lead { font-size: 1.8rem; }
  .w-calc .foot-form .wdz-submit { min-width: 0; width: auto; padding: 1.4rem 3.2rem; }
  .w-calc .foot-base { flex-direction: column; align-items: flex-start; gap: var(--space-m); margin-top: var(--space-l); }
  .w-calc .foot-marks { flex-wrap: wrap; gap: var(--space-m); }
  .w-calc .foot-marks .lockup { height: 68px; }
  .w-calc .foot-marks .eca { height: 46px; }
  .w-calc .foot-legal { gap: 1.2rem var(--space-m); font-size: 1.6rem; }
}

/* ---- walkthrough and film module: plays in place from R2 ---- */
.vid-mod { position: relative; display: block; overflow: hidden; cursor: pointer; background: var(--primary); }
.vid-mod img { display: block; width: 100%; height: auto; }
.vid-mod::after { content: ""; position: absolute; inset: 0; background: rgba(78,42,10,.24); transition: background .2s ease; }
.vid-mod:hover::after { background: rgba(78,42,10,.06); }
.vid-mod .vid-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.vid-mod .vid-play span { width: 9.6rem; height: 9.6rem; border: 1px solid rgba(252,242,232,.9); border-radius: 100px; display: grid; place-items: center; color: var(--primary-ultra-light); font-size: 2.4rem; background: rgba(78,42,10,.35); }
.vid-mod .vid-label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6rem 3.2rem 2.4rem; background: linear-gradient(180deg, rgba(78,42,10,0), rgba(78,42,10,.85)); color: var(--primary-ultra-light); font-size: 2rem; }
.vid-mod.is-playing::after, .vid-mod.is-playing .vid-play, .vid-mod.is-playing .vid-label, .vid-mod.is-playing img { display: none; }
.vid-mod video { display: none; width: 100%; height: auto; background: #000; }
.vid-mod.is-playing video { display: block; }
@media (max-width: 900px) {
  .vid-mod .vid-play span { width: 7.2rem; height: 7.2rem; }
  .vid-mod .vid-label { padding: 4.8rem var(--space-m) 2rem; font-size: 1.8rem; }
}


/* ============================================================
   The three pop-up forms share one frame
   .ap-card          wide, two columns  (appointment)
   .ap-card--slim    single column      (brochure, register interest)
   ============================================================ */
.ap-card--slim { max-width: 62rem; }
.ap-card--slim .ap-body { grid-template-columns: minmax(0,1fr); }
.ap-card--slim .ap-col + .ap-col { border-left: 0; border-top: 1px dotted var(--primary); }

/* the frame reads as a considered object: one plane, a hairline crown */
.ap-card { border-top: 4px solid var(--primary); }
.ap-head .ap-kicker { display: inline-block; background: var(--primary); color: var(--accent); font-size: 1.5rem; letter-spacing: .08em; padding: .6rem 1.4rem; margin-bottom: 1.6rem; }

/* two-up field rows where the pair is short */
.ap-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem; }
@media (max-width: 640px) { .ap-row { grid-template-columns: minmax(0,1fr); gap: 0; } }

/* choice chips, used by register interest */
.ap-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.ap-chip { background: var(--white); border: 1px solid rgba(78,42,10,.25); border-radius: 0; cursor: pointer; padding: 1.2rem 2rem; font-family: "acumin-variable", Arial, sans-serif; font-stretch: 67.5%; font-size: 1.8rem; color: var(--primary); transition: background .2s ease, border-color .2s ease, color .2s ease; min-height: 4.8rem; }
.ap-chip:hover { border-color: var(--primary); background: var(--secondary); }
.ap-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ultra-light); }
.ap-fieldset { border: 0; margin: 0 0 2.4rem; padding: 0; }
.ap-fieldset legend { font-size: 1.8rem; color: var(--primary); padding: 0; margin-bottom: 1rem; }

/* brochure and register do not gate the submit on a selection */
.ap-card--slim .ap-foot { justify-content: flex-end; }
.ap-card--slim .ap-summary { font-size: 1.8rem; color: rgba(78,42,10,.8); }