/* Sunny's inner pages: the shared opening, texture, reveals and menu.
   Same patterns as the homepage hero, inside the Design values motion ceiling:
   copy appears in reading order, the plate settles 1.03 to 1, sections rise 24px once. */

figure { margin: 0; }

/* ---------- page opening: a full-bleed poster plate with the copy on its calm side ---------- */
.phero { position: relative; min-height: max(560px, min(86vh, 48vw, 860px)); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; isolation: isolate; color: var(--paper); background: var(--teal); }
.phero .art { position: absolute; inset: 0; z-index: -3; }
.phero .art .plate-layer { position: absolute; inset: 0; transform-origin: 65% 65%; }
html.has-art .phero .art .plate-layer { animation: settle 9s var(--ease) both; animation-delay: 240ms; }
@keyframes settle { from { transform: scale(1.03); } to { transform: scale(1); } }
/* a page with its own hero moment drops the settle, so only one thing moves in the picture */
html.has-art .phero.has-moment .art .plate-layer { animation: none; }
.phero .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 75% 60%); }
.phero .scrim { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(14,39,51,.78) 0%, rgba(14,39,51,.62) 47%, rgba(14,39,51,.2) 60%, rgba(14,39,51,0) 72%); }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width: 760px) {
  .phero { min-height: 92vh; }
  .phero .scrim { background: linear-gradient(180deg, rgba(14,39,51,.2) 0%, rgba(14,39,51,.55) 40%, rgba(14,39,51,.82) 100%); }
  .phero .art img { object-position: var(--focus-sm, 70% 60%); }
}

/* nav over the plate */
.phero .nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px var(--gutter); }
.phero .nav .mark img { height: 50px; width: auto; }
.phero .nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 15px; font-weight: 500; }
.phero .nav ul a { text-decoration: none; opacity: .85; transition: opacity .3s var(--ease); }
.phero .nav ul a:hover, .phero .nav ul a[aria-current="page"] { opacity: 1; }
.phero .nav ul a[aria-current="page"] { border-bottom: 2px solid var(--marigold); padding-bottom: 3px; }
.phero .nav .right { display: flex; align-items: center; gap: 12px; }
.btn-ghost { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 999px; white-space: nowrap; border: 1.5px solid rgba(251,243,226,.3); text-decoration: none; color: var(--paper); background: transparent; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn-ghost:hover { background: var(--paper); color: var(--teal); border-color: var(--paper); }
.menu-btn { display: none; }
@media (max-width: 1040px) { .phero .nav ul { display: none; } .menu-btn { display: inline-flex; } }
@media (max-width: 420px) { .phero .nav .estimate-btn { display: none; } }

/* copy */
.phero .copy { align-self: center; padding: clamp(24px, 6vh, 64px) var(--gutter); max-width: 760px; }
.phero .eyebrow { color: var(--marigold); margin-bottom: 20px; }
.phero h1 { color: var(--paper); }
.phero h1 .eyebrow { display: block; font-family: var(--sans); font-variation-settings: normal; line-height: 1.4; max-width: none; }
.phero .sub { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.5; color: rgba(251,243,226,.82); max-width: 540px; margin: 0 0 32px; }
.phero .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 0 0 28px; }
.phero .link { border-color: rgba(251,243,226,.25); }
.phero .link:hover { border-color: var(--paper); }
.phero .proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: rgba(251,243,226,.62); margin: 0; }
.phero .proof .stars { color: var(--marigold); letter-spacing: .08em; font-size: 12px; }
.phero .proof b { font-weight: 500; color: rgba(251,243,226,.85); }
.phero .proof .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
@media (max-width: 760px) { .phero .proof .sep { display: none; } .phero .proof { column-gap: 16px; } }
.phero-foot { padding: 0 var(--gutter) 24px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(251,243,226,.6); }
@media (max-width: 760px) { .phero-foot { display: none; } }

/* reading-order entrance for the opening copy */
.ap { opacity: 0; transform: translateY(6px); filter: blur(2px); animation: ap .7s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes ap { to { opacity: 1; transform: none; filter: blur(0); } }
.a1 { --d: 60ms; } .a2 { --d: 120ms; } .a3 { --d: 180ms; } .a4 { --d: 240ms; } .a5 { --d: 300ms; } .a6 { --d: 360ms; }

/* ---------- full-bleed plate between sections ---------- */
.bleed { position: relative; overflow: hidden; isolation: isolate; }
.bleed img { display: block; width: 100%; height: clamp(320px, 56vw, 720px); object-fit: cover; object-position: var(--focus, 50% 55%); }
.bleed .grain { z-index: 1; opacity: .22; }
.bleed figcaption { position: absolute; left: var(--gutter); bottom: 20px; z-index: 2; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(251,243,226,.75); }

/* ---------- picture moments (js/moments.js): lit panes over an aligned dark plate ---------- */
img.win { opacity: 0; transition: opacity .45s var(--ease); }
img.win.on { opacity: 1; }
.bleed img.win { position: absolute; inset: 0; height: 100%; z-index: 0; }
.batt-dot { position: absolute; z-index: 1; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 10px 4px rgba(244,180,26,.55); opacity: 0; transform: scale(.6); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.batt-dot.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { img.win, .batt-dot { transition: none; } }

/* ---------- the sunset (js/moments.js): a drawn sun sinks behind the skyline as you scroll the opening ----------
   Each page sets on its .phero: --sun-l, --sun-t, --sun-w (the disc's box as % of the plate), --sun-c (colour)
   and --sun-clip (a polygon traced along the sunless plate's skyline). */
.sunbox { position: absolute; pointer-events: none; clip-path: var(--sun-clip); }
.sundisc { position: absolute; left: var(--sun-l); top: var(--sun-t); width: var(--sun-w); aspect-ratio: 1; border-radius: 50%; background: var(--sun-c, #F3AE25);
  transform: translateY(calc(var(--set, 0) * 105%)); will-change: transform; }
/* rise mode: rests --sun-rest below where it was painted and climbs into place as you scroll */
.sunbox.rise .sundisc { transform: translateY(calc((1 - var(--set, 0)) * var(--sun-rest, 25%))); transition: transform .35s var(--ease); }
@media (prefers-reduced-motion: reduce) { .sunbox.rise .sundisc { transition: none; } }

/* ---------- texture on the teal closing band ---------- */
#go { position: relative; isolation: isolate; overflow: hidden; }
#go .grain { opacity: .25; }

/* ---------- section reveals: one 24px rise, once ---------- */
html.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.d2 { transition-delay: .08s; } html.js .rv.d3 { transition-delay: .16s; } html.js .rv.d4 { transition-delay: .24s; }

/* ---------- full-height menu panel, as on the homepage ---------- */
.panel { position: fixed; inset: 0; z-index: 40; background: rgba(28,72,90,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--paper); display: grid; align-content: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.panel.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.panel a { display: block; font-size: 32px; font-weight: 500; text-decoration: none; padding: 10px 0; opacity: 0; transform: translateY(24px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.panel.open a { opacity: 1; transform: none; }
.panel.open a:nth-child(2) { transition-delay: 60ms; } .panel.open a:nth-child(3) { transition-delay: 120ms; } .panel.open a:nth-child(4) { transition-delay: 180ms; }
.panel.open a:nth-child(5) { transition-delay: 240ms; } .panel.open a:nth-child(6) { transition-delay: 300ms; } .panel.open a:nth-child(n+7) { transition-delay: 340ms; }
.panel a[aria-current="page"] { color: var(--marigold); }
.panel .close { position: absolute; top: 24px; right: var(--gutter); }
.panel .tel { font-size: 18px; margin-top: 24px; opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  html.has-art .phero .art .plate-layer { animation: none; }
  .ap { animation: none; opacity: 1; transform: none; filter: none; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .panel, .panel a { transition: opacity .2s linear; transform: none; }
}