/* ============================================================
   Michael Gencher for Pittwater
   Brand: version 3 (Signal Blue poster system)
   Tokens taken from the Figma DL front_v2, node 143:276
   No em-dashes anywhere in this file, per house rule.
   ============================================================ */

:root {
  --blue: #2f6bff;
  --blue-deep: #1f4fd0;
  --ink: #102436;
  --ink-soft: #17324a;
  --paper: #f8f8f6;
  --gold: #f0b429;
  --slate: #5b6672;

  --paper-48: rgba(248, 248, 246, 0.48);
  --paper-16: rgba(248, 248, 246, 0.16);
  --ink-10: rgba(16, 36, 54, 0.1);
  --ink-55: rgba(16, 36, 54, 0.55);

  --display: "Archivo", "Archivo Black", Impact, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The photograph laid behind the blue fields, on the hero and the blue page
     headers. Set to none while there is no suitable image: the previous file
     was a portrait of Michael, which read as a second face behind the cutout
     rather than as texture. Point this at the real photograph and both the
     hero and the page headers pick it up, no other change needed.
     hero-plate.jpg is hero-bg.jpg cropped to the streetscape alone. The full
     frame is the same photograph the cutout was lifted out of, so using it
     whole put a blurred Michael behind the sharp one wherever the two did not
     line up, and a stray figure on the pages that carry no portrait. */
  --hero-photo: url("../img/hero-plate.jpg");

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
  --nav-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

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

img { max-width: 100%; height: auto; display: block; }
/* The portrait is wrapped in <picture> to offer WebP with a PNG fallback.
   display:contents keeps the picture out of the box tree so every rule that
   targets the img itself goes on working unchanged. */
picture { display: contents; }
a { color: inherit; }

/* ---------- type roles ---------- */

.display {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: "wdth" 85;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin: 0;
}

h1.display { font-size: clamp(2.9rem, 7.6vw, 5.9rem); }
.hero h1.display { max-width: 11ch; }
h2.display { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h3.display { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 0.98; }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.133em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: var(--blue);
}
.on-blue .eyebrow, .on-ink .eyebrow { color: rgba(248, 248, 246, 0.72); }
.hero .eyebrow { color: rgba(248, 248, 246, 0.72); }

.hl {
  /* Painted as a sized gradient rather than a plain background: an inline
     background covers the font content area, which in Archivo is 1.09em and
     taller than the display line box, so it used to overlap the line above.
     Caps sit between 0.19em and 0.88em, so this band clears them either side. */
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% 0.84em;
  background-position: 0 0.12em;
  color: var(--ink);
  padding: 0 0.14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; max-width: 34ch; }

p { max-width: var(--measure); }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--tight { padding: clamp(44px, 6vw, 80px) 0; }

.on-blue { background: var(--blue); color: var(--paper); }
.on-ink { background: var(--ink); color: var(--paper); }
.on-paper { background: var(--paper); color: var(--ink); }

.on-blue p, .on-ink p { color: rgba(248, 248, 246, 0.82); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- nav ---------- */

.nav {
  /* Above Leaflet's controls, which sit at 1000, so the zoom buttons on the
     delivery page do not ride over the lockup once the map scrolls under. */
  position: sticky; top: 0; z-index: 1100;
  background: var(--ink);
  border-bottom: 1px solid rgba(248, 248, 246, 0.1);
}
.nav__in {
  height: var(--nav-h);
  display: flex; align-items: center; gap: 28px;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter);
}
.nav__lockup { height: 34px; width: auto; }
.nav__links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav__links a {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em;
  text-transform: uppercase; text-decoration: none; color: var(--paper);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav__links a:hover, .nav__links a:focus-visible { border-bottom-color: var(--gold); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--blue); }
.nav__cta {
  background: var(--gold); color: var(--ink) !important;
  padding: 10px 16px !important; border-bottom: none !important;
}
.nav__cta:hover { background: var(--paper); }

.nav__toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--paper-16);
  color: var(--paper); font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em;
  text-transform: uppercase; padding: 9px 13px; cursor: pointer;
}
@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--ink); flex-direction: column; align-items: flex-start;
    gap: 0; padding: 8px var(--gutter) 22px; display: none;
    border-bottom: 1px solid rgba(248, 248, 246, 0.1);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 13px 0; width: 100%; }
  .nav__cta { margin-top: 12px; text-align: center; }
}

/* ---------- hero, mirrors the DL front ---------- */

.hero { position: relative; background: var(--blue); color: var(--paper); overflow: hidden; }
/* The streetscape photograph from behind the DL front, laid in the same way:
   multiplied over the Signal Blue field at 70 percent. */
.hero__texture {
  position: absolute; inset: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: left bottom;
  mix-blend-mode: multiply; opacity: 0.7; pointer-events: none;
  filter: blur(3px); transform: scale(1.05);
}
.pagehead--tex { position: relative; overflow: hidden; }
.pagehead--tex > .wrap { position: relative; z-index: 2; }
.pagehead--tex::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-photo);
  background-size: cover; background-position: left bottom;
  mix-blend-mode: multiply; opacity: 0.5; pointer-events: none;
  filter: blur(4px); transform: scale(1.06);
}
.hero__in {
  position: relative; z-index: 2;
  max-width: 1240px; margin: 0 auto; padding: clamp(52px, 7vw, 96px) 0 0 var(--gutter);
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 24px; align-items: end;
  min-height: min(76vh, 700px);
}
.hero__copy { padding-bottom: clamp(52px, 7vw, 96px); }
.hero h1 { margin: 0 0 22px; }
.hero__sub { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--paper) !important; margin: 0 0 34px; max-width: 40ch; }

.tagline {
  display: inline-block;
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 85;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.96;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  margin-bottom: 38px;
}

.hero__figure { position: relative; align-self: end; }
.hero__glow {
  position: absolute; left: 6%; bottom: 0; width: 78%; height: 92%;
  background: radial-gradient(ellipse at center, rgba(16, 36, 54, 0.42) 0%, rgba(16, 36, 54, 0) 68%);
  transform: rotate(8deg); mix-blend-mode: multiply; pointer-events: none;
}
/* Sits inside its column. It used to be 112% wide with a -12% right margin,
   which pushed the figure past the container; with the hero clipping overflow
   his shoulder was cut off at any width where the bleed exceeded the viewport. */
.hero__portrait { position: relative; width: 100%; max-width: none; margin-left: auto; margin-right: 0; }

@media (max-width: 860px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 44px; }
  .hero__copy { padding-bottom: 8px; order: 1; }
  .hero__figure { order: 2; margin: 0 calc(var(--gutter) * -1) 0; }
  .hero__portrait { max-width: 100%; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em; text-transform: uppercase;
  padding: 15px 24px; border: 1px solid transparent; cursor: pointer;
}
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--paper); }
.btn--ghost { border-color: rgba(248, 248, 246, 0.45); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(248, 248, 246, 0.1); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--blue); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- page header ---------- */

.pagehead { padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 76px); }
.pagehead--figure { padding-bottom: 0; overflow: hidden; }
.pagehead--figure .lede { margin-bottom: clamp(44px, 6vw, 76px); }
.pagehead--figure img { display: block; margin-left: auto; }
.pagehead h1 { margin-bottom: 20px; }
.pagehead .lede { color: rgba(248, 248, 246, 0.82); max-width: 46ch; }

/* ---------- statement block ---------- */

.statement { border-top: 2px solid var(--ink); padding-top: 26px; }
.on-ink .statement, .on-blue .statement { border-top-color: rgba(248, 248, 246, 0.35); }
.statement p + p { margin-top: 1.1em; }
.pullquote {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 85;
  text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.92;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem); color: var(--blue);
  margin-top: 1.5em; max-width: none;
}
.on-ink .pullquote, .on-blue .pullquote { color: var(--gold) !important; }

/* ---------- priority list ---------- */

.plist { list-style: none; margin: 0; padding: 0; }
.plist li { border-top: 1px solid var(--ink-10); padding: 22px 0; display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
.plist li:last-child { border-bottom: 1px solid var(--ink-10); }
.on-ink .plist li, .on-blue .plist li { border-color: rgba(248, 248, 246, 0.2); }
.plist .num {
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 85;
  font-size: 1.35rem; color: var(--gold); line-height: 1; padding-top: 3px;
}
.plist h3 { margin: 0 0 8px; }
.plist p { margin: 0; max-width: 58ch; font-size: 0.97rem; }

.plist--compact li { padding: 15px 0; grid-template-columns: 54px 1fr; }
.plist--compact h3 { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }

@media (min-width: 900px) {
  .plist--two { columns: 2; column-gap: 68px; }
  .plist--two li { break-inside: avoid; }
}

/* ---------- map ---------- */

.mapsec { background: var(--blue); color: var(--paper); }
.maplayout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0; border: 1px solid rgba(248, 248, 246, 0.28); }
#pittwater-map { height: clamp(440px, 66vh, 720px); background: #dfe4ea; }
.leaflet-container { font-family: var(--body); }

/* The OSM and CARTO credits are a licence condition, so they stay. Toned down
   so they read as a credit line rather than competing with the map. */
.leaflet-control-attribution {
  background: rgba(248, 248, 246, 0.72) !important;
  font-size: 10px; line-height: 1.4; padding: 2px 6px;
  color: var(--slate);
}
.leaflet-control-attribution a { color: var(--slate); text-decoration: none; }
.leaflet-control-attribution a:hover { text-decoration: underline; }

.mappanel { background: var(--ink); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.mappanel__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}
.mappanel h3 { margin: 0 0 14px; color: var(--paper); }
.mappanel p { color: rgba(248, 248, 246, 0.82); font-size: 0.97rem; max-width: none; }
.mappanel__hint { color: var(--paper-48) !important; font-size: 0.9rem !important; }
.mappanel__nav { margin-top: auto; padding-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.mappanel__nav button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em; text-transform: uppercase;
  background: none; border: 1px solid rgba(248, 248, 246, 0.3); color: var(--paper);
  padding: 10px 14px; cursor: pointer;
}
.mappanel__nav button:hover { border-color: var(--gold); color: var(--gold); }

@media (max-width: 900px) {
  .maplayout { grid-template-columns: 1fr; }
  #pittwater-map { height: 58vh; min-height: 380px; }
}

.pin {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--paper);
  color: var(--paper); display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-variation-settings: "wdth" 85;
  font-size: 13px; line-height: 1;
  box-shadow: 0 3px 10px rgba(16, 36, 54, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.pin:hover { transform: scale(1.12); }
.pin.is-active { background: var(--gold); color: var(--ink); border-color: var(--ink); transform: scale(1.18); }

.maplegend {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px;
}
.maplegend button {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(248, 248, 246, 0.1); border: 1px solid rgba(248, 248, 246, 0.3);
  color: var(--paper); padding: 9px 13px; cursor: pointer;
}
.maplegend button:hover, .maplegend button.is-active { background: var(--gold); border-color: var(--gold); color: var(--ink); }

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; }
.card { background: var(--paper); color: var(--ink); padding: clamp(24px, 3vw, 34px); }
.card h3 { margin: 0 0 12px; }
.card p { margin: 0; font-size: 0.96rem; color: inherit; }
.card--blue, .card--blue p { color: var(--paper); }
.card--gold { background: var(--gold); color: var(--ink); }
.card--gold p { color: var(--ink); }
.card--blue { background: var(--blue); }

/* ---------- plan page ---------- */

/* Full bleed photograph between panels, matching the printed piece where each
   spread closes on an image. */
.planshot { margin: 0; }
.planshot img {
  width: 100%; height: clamp(280px, 42vw, 560px);
  /* The band is wider than the 3:2 source, so cover trims top and bottom.
     Held above centre to keep headroom above him rather than cropping his head. */
  object-fit: cover; object-position: center 35%;
  display: block;
}

/* Homepage teaser for the printed plan. */
.planteaser { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .planteaser { grid-template-columns: 1fr 1fr; } }
.planteaser__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.planteaser__shots img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- contact ---------- */

.field { display: block; margin-bottom: 20px; }
.field span {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--ink-55);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid rgba(16, 36, 54, 0.28); padding: 13px 14px;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field textarea { min-height: 150px; resize: vertical; }

/* First and last name sit side by side once there is room for them. */
.fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 560px) { .fieldrow { grid-template-columns: 1fr; } }

.req { color: var(--blue); font-weight: 500; }
.reqnote {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em;
  text-transform: uppercase; color: var(--ink-55); margin: 0 0 20px;
}
.field--error input, .field--error textarea, .field--error select { border-color: #c2371f; }
.field--error span { color: #c2371f; }
.field--error .req { color: #c2371f; }

/* Honeypot. Off canvas rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Visible to screen readers only. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.contactlist { list-style: none; margin: 0; padding: 0; }
.contactlist li { border-top: 1px solid rgba(248, 248, 246, 0.2); padding: 16px 0; }
.contactlist .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.133em; text-transform: uppercase;
  color: var(--paper-48); display: block; margin-bottom: 5px;
}
.contactlist a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(240, 180, 41, 0.4); }
.contactlist a:hover { border-bottom-color: var(--gold); }

/* ---------- footer ---------- */

.foot { background: var(--ink); color: var(--paper); padding: clamp(48px, 6vw, 76px) 0 34px; }
.foot__top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 36px; }
@media (max-width: 800px) { .foot__top { grid-template-columns: 1fr; } }
.foot__lockup { height: 46px; width: auto; margin-bottom: 20px; }
.foot h4 {
  font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.133em;
  text-transform: uppercase; color: var(--paper-48); margin: 0 0 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot a { color: var(--paper); text-decoration: none; font-size: 0.95rem; }
.foot a:hover { color: var(--gold); }
.foot__auth {
  margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(248, 248, 246, 0.16);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
/* 72px rather than 48: the NSW mark carries a "New South Wales" wordmark under
   the logotype, which is an illegible smudge at the smaller size. */
.foot__auth img { width: 72px; height: auto; }
.foot__auth p { font-size: 0.78rem; line-height: 1.5; color: var(--paper-48) !important; margin: 0; max-width: 70ch; }

/* ---------- accessibility ---------- */

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip {
  position: absolute; left: -9999px; background: var(--gold); color: var(--ink);
  padding: 12px 18px; font-family: var(--mono); font-size: 11px; z-index: 1000;
}
.skip:focus { left: 12px; top: 12px; }