/* ==========================================================================
   Amplify AI LLC — shared stylesheet
   Rough draft. Colors and type are provisional; structure is the point.

   Palette is pulled from the two brand assets:
     navy   — sampled directly from the arrows logo (#113B63)
     lantern— the town lights across Hanalei Bay in the hero photo
   One rule holds throughout: lantern amber means "click here". Nothing
   decorative is ever amber.
   ========================================================================== */

:root {
  /* --- color ------------------------------------------------------------ */
  --navy:        #113B63;   /* brand navy, sampled from the logo */
  --navy-deep:   #0A2340;   /* hero scrim + CTA band */
  --ink:         #16212B;   /* body copy */
  --mist:        #5B6A79;   /* secondary copy */
  --paper:       #F5F7F9;   /* page background */
  --card:        #FFFFFF;
  --rule:        #DCE3EA;
  --lantern:     #E9A13B;   /* ACTION ONLY */
  --lantern-dim: #C9821F;

  /* --- type ------------------------------------------------------------- */
  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- measure ---------------------------------------------------------- */
  --wide:   1140px;
  --narrow: 62ch;
  --gap:    clamp(4.5rem, 9vw, 7.5rem);
  --radius: 10px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-deep); }

:focus-visible {
  outline: 3px solid var(--lantern);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.6vw, 4.3rem); line-height: 1.04; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.3; font-weight: 500; }

p { margin: 0 0 1.1em; max-width: var(--narrow); }
ul { max-width: var(--narrow); }

.skip {
  position: absolute; left: -9999px;
  background: var(--navy-deep); color: #fff;
  padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   layout scaffolding
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wide)); margin-inline: auto; }

.band { padding-block: var(--gap); }
.band--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.band--card  { background: var(--card); }
.band--night { background: var(--navy-deep); color: #E4EAF1; }
.band--night h2 { color: #fff; }
.band--night p  { color: #C3D0DE; }

/* The horizon rule — a single hairline with a short navy tick at the left.
   It echoes the sea horizon in the hero and marks where one idea ends.
   This is the only recurring ornament on the site. */
.horizon { border: 0; height: 1px; background: var(--rule); position: relative; margin: 0; }
.horizon::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 56px; height: 3px; background: var(--navy);
}
.band--night .horizon { background: rgba(255,255,255,.16); }
.band--night .horizon::before { background: var(--lantern); }

.lede { font-size: 1.2rem; color: var(--mist); max-width: 58ch; }

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,247,249,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.6rem;
}
.masthead__logo { flex: 0 0 auto; }
.masthead__logo img { height: 42px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.55rem; }
.nav a {
  font-size: .95rem; font-weight: 500; color: var(--ink);
  text-decoration: none; padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--navy); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: 8px;
  padding: .5rem .8rem; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--ink);
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--rule);
    padding: .5rem 1.25rem 1.25rem;
  }
  .masthead.is-open .nav { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
  .nav .btn { margin-top: .9rem; text-align: center; }
}

/* --------------------------------------------------------------------------
   the one action colour
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--lantern);
  color: var(--navy-deep);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: .82rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid var(--lantern);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--lantern-dim); border-color: var(--lantern-dim); color: var(--navy-deep); }
.btn--small { font-size: .93rem; padding: .55rem 1.05rem; }

.btn-note { font-size: .92rem; color: var(--mist); margin: .8rem 0 0; }
.band--night .btn-note { color: #9FB2C6; }

/* --------------------------------------------------------------------------
   hero — layered glass

   Three planes, back to front:
     1. .hero__plate--back   the whole photograph (sky, mountains, bay)
     2. .glass               the frosted panel holding the words
     3. .hero__plate--fore   the pier alone, cut out, passing IN FRONT

   The pier crossing the panel is what makes the depth real rather than
   implied. Both plates are the same image at the same object-fit and
   object-position, so they stay in register at every viewport size.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(31rem, 84vh, 46rem);
  overflow: hidden;
  background: var(--navy-deep);
  color: #fff;
}
.hero__plate {
  position: absolute; left: 0; width: 100%;
  top: -9%; height: 118%;
  object-fit: cover; object-position: 50% 40%;
  will-change: transform;
}
.hero__plate--back { z-index: 0; }
.hero__plate--fore { z-index: 3; pointer-events: none; }

.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,17,32,.50) 0%, rgba(6,17,32,.10) 38%, rgba(6,17,32,.50) 100%);
}
/* No width here — .wrap already sets it, and repeating it would silently
   override the container. */
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

/* --- the glass ---------------------------------------------------------- */
.glass {
  position: relative;
  border-radius: 22px;
  padding: clamp(1.8rem, 4.4vw, 3.4rem);
  background: linear-gradient(148deg,
      rgba(255,255,255,.17) 0%,
      rgba(255,255,255,.05) 42%,
      rgba(12,38,68,.16) 100%);
  background-color: rgba(9,30,56,.30);
  -webkit-backdrop-filter: blur(13px) saturate(165%);
  backdrop-filter: blur(13px) saturate(165%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 34px 70px rgba(3,10,20,.45),
    inset 0 1px 0 rgba(255,255,255,.28);
}
/* Older browsers get an opaque panel rather than unreadable text. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass { background-color: rgba(10,35,64,.80); }
}

.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg,
      rgba(6,20,38,.46) 0%, rgba(6,20,38,.30) 38%, rgba(6,20,38,0) 72%);
}
.glass > * { position: relative; z-index: 1; }

.hero .glass { max-width: 64rem; min-height: clamp(19rem, 42vh, 25rem); }
.glass__content { max-width: 34rem; }

/* EDIT 01: headshot sits in the right column of the hero panel.
   Stacks under the copy on narrow screens. */
.hero .glass {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center;
}
@media (min-width: 820px) {
  .hero .glass { grid-template-columns: minmax(0, 1fr) clamp(13rem, 24vw, 18rem); }
}
.hero__portrait { margin: 0; justify-self: start; width: min(100%, 11rem); }
@media (min-width: 820px) {
  .hero__portrait { justify-self: center; width: min(100%, 18rem); }
}
.hero__portrait img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 40px rgba(3,10,20,.45);
}

.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .45em; }
.hero__sub {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  color: #DEE8F3; max-width: 40ch; margin-bottom: 1.9rem;
}
.hero .btn-note { color: #C0D2E5; }
.hero__place {
  margin: 1.3rem 0 0; font-size: .93rem; color: #AFC3D8; max-width: none;
}
.hero__credit {
  position: absolute; right: 1rem; bottom: .5rem; z-index: 4;
  max-width: 40ch; text-align: right;
  font-size: .72rem; color: rgba(255,255,255,.55); margin: 0;
}

/* --------------------------------------------------------------------------
   services
   -------------------------------------------------------------------------- */
.services {
  list-style: none; padding: 0; margin: 2.5rem 0 0; max-width: none;
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}
.services li { background: var(--card); padding: 1.9rem 1.7rem; }
.services h3 { margin-bottom: .4rem; }
.services p { font-size: .98rem; color: var(--mist); margin: 0; }

/* --------------------------------------------------------------------------
   how it works — genuinely a sequence, so it is numbered
   -------------------------------------------------------------------------- */
.steps { list-style: none; padding: 0; margin: 2.5rem 0 0; max-width: none;
  display: grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.steps li { position: relative; padding-top: 1.6rem; border-top: 3px solid var(--navy); }
.steps__n {
  font-family: var(--display); font-size: .95rem; color: var(--navy);
  display: block; margin-bottom: .45rem;
}
.steps h3 { margin-bottom: .35rem; }
.steps p { color: var(--mist); font-size: .98rem; margin: 0; }

/* --------------------------------------------------------------------------
   testimonials
   -------------------------------------------------------------------------- */
.quotes {
  margin: 2.5rem 0 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.quote {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.8rem 1.7rem; margin: 0;
}
.quote blockquote { margin: 0 0 1.3rem; }
.quote p {
  font-family: var(--display); font-size: 1.15rem; line-height: 1.5;
  color: var(--navy-deep); margin: 0;
}
.quote figcaption { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.avatar {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: .88rem;
}
.quote cite { font-style: normal; font-weight: 600; display: block; color: var(--ink); }
.quote .role { color: var(--mist); display: block; }

/* --------------------------------------------------------------------------
   about
   -------------------------------------------------------------------------- */
.about {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 820px) {
  .about { grid-template-columns: 20rem minmax(0, 1fr); }
}
.about__photo { margin: 0; }
.about__photo img { border-radius: var(--radius); width: 100%; }
.about__photo figcaption { font-size: .82rem; color: var(--mist); margin-top: .6rem; }
.creds {
  margin: 1.6rem 0 1.8rem; padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--navy); background: var(--card);
  font-size: .98rem;
}
.creds p { margin: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: 2.5rem; max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 600; position: relative; color: var(--navy-deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .4rem; top: 50%;
  transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--navy);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > *:not(summary) { margin-bottom: 1.3rem; }
.faq p { color: var(--mist); }

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
/* The closing band repeats the hero treatment once, as a bookend. Twice is a
   rhyme; a third time would be wallpaper. */
.closer {
  position: relative; overflow: hidden;
  background: var(--navy-deep); color: #E4EAF1;
  padding-block: clamp(4rem, 8vw, 6rem);
}
.closer__plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
}
.closer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,17,32,.62), rgba(6,17,32,.48));
}
.closer .wrap { position: relative; z-index: 2; }
.closer h2 { color: #fff; }
.closer p { color: #CBD8E6; max-width: 46ch; }
.closer .glass__content { max-width: 40rem; }
.closer .btn { margin-top: .8rem; }
.closer .btn-note { color: #AFC3D8; }

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.foot {
  background: var(--navy-deep); color: #B9C8D8;
  padding-block: 3.5rem 2.2rem; font-size: .95rem;
}
.foot a { color: #DCE7F2; }
.foot__grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.foot h2 { font-size: 1rem; font-family: var(--body); font-weight: 600; color: #fff; margin-bottom: .7rem; }
.foot p, .foot ul { max-width: none; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .4rem; }
.foot__mark { height: 40px; width: auto; margin-bottom: 1.4rem; }
.foot__base {
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  font-size: .86rem; color: #8FA3B8;
}
.foot__base p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   page 2 — AI in Hawaiʻi
   -------------------------------------------------------------------------- */
.pagehead { background: var(--card); border-bottom: 1px solid var(--rule); }
.pagehead .wrap { padding-block: clamp(3rem, 7vw, 5rem); }

/* Deliberately unlike .quote so an industry example can never be mistaken
   for a testimonial at a glance: square corners, left rule, no card. */
.notice {
  background: #FFF6E6; border: 1px solid #EBCF9B;
  border-radius: var(--radius); padding: 1.1rem 1.3rem;
  margin: 1.8rem 0 0; font-size: .97rem;
}
.notice p { margin: 0; max-width: none; }

.examples { margin: 2.5rem 0 0; display: grid; gap: 0; }
.example {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 2rem 1.5rem;
  border-left: 3px solid var(--navy);
  margin-bottom: 0;
}
.example:last-child { border-bottom: 1px solid var(--rule); }
.example h3 { margin-bottom: .3rem; }
.example .sector { font-size: .9rem; color: var(--mist); margin-bottom: .8rem; }
.example .src { font-size: .9rem; margin: 0; }

.reading { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 46rem; }
.reading li { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.reading .meta { display: block; font-size: .88rem; color: var(--mist); }

/* --------------------------------------------------------------------------
   DRAFT ONLY — placeholder highlighting.
   Everything wrapped in .ph is invented and needs replacing with real
   content. Delete this block and the toggle button before launch.
   -------------------------------------------------------------------------- */
.ph { /* no positioning here — it would override component rules */ }
body.show-ph .ph {
  background: rgba(233,161,59,.16);
  box-shadow: 0 0 0 1px rgba(201,130,31,.45);
  border-radius: 3px;
}
body.show-ph .band--night .ph { background: rgba(233,161,59,.24); }

.ph-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 300;
  background: var(--navy-deep); color: #fff; border: 0;
  font-family: var(--body); font-size: .85rem; font-weight: 600;
  padding: .65rem 1rem; border-radius: 999px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(6,17,32,.3);
}

/* Links inside the closing glass band sit on a dark plate, so the default
   navy link colour would be unreadable there. */
.closer a:not(.btn) { color: #DCE7F2; }
.closer a:not(.btn):hover { color: #fff; }

/* ==========================================================================
   2nd draft additions
   ========================================================================== */

/* EDIT 02: the headline is now a full sentence, so it runs smaller and wider */
.hero h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); line-height: 1.08; max-width: 24ch; }
.hero .glass__content { max-width: 38rem; }

/* EDIT 08: dark sections. The stars live in their own .layer--stars
   element so they can drift independently (EDIT 12). */
.band--stars {
  position: relative;
  background-color: var(--navy-deep);
  background-image: radial-gradient(ellipse at 70% 0%, rgba(60,100,150,.28), transparent 60%);
}
.band--night h3 { color: #fff; }
.band--night .lede { color: #AFC3D8; }
.band--night a:not(.btn) { color: #DCE7F2; }
.band--night a:not(.btn):hover { color: #fff; }

.band--night .steps li { border-top-color: rgba(175,195,216,.45); }
.band--night .steps__n { color: #9FB8D2; }
.band--night .steps p { color: #C3D0DE; }

.band--night .about__photo figcaption { color: #9FB2C6; }
.band--night .creds {
  background: rgba(255,255,255,.06);
  border-left-color: #9FB8D2;
}

/* page 2 examples on the dark band */
.band--night .example { border-top-color: rgba(255,255,255,.14); border-left-color: #9FB8D2; }
.band--night .example:last-child { border-bottom-color: rgba(255,255,255,.14); }
.band--night .example .sector { color: #9FB2C6; }

/* Amber is reserved for actions, so the horizon tick on dark bands is blue-grey */
.band--night .horizon::before { background: #9FB8D2; }

/* ==========================================================================
   3rd draft additions
   ========================================================================== */
:root { --bubble: 18px; }

/* ---- EDIT 12: layered sections -------------------------------------------- */
.has-layers { position: relative; overflow: hidden; isolation: isolate; }
.has-layers > .wrap { position: relative; z-index: 1; }
.layer {
  position: absolute; z-index: 0; pointer-events: none;
  will-change: translate;
}
.layer img { display: block; width: 100%; height: auto; }

.layer--stars {
  inset: -30% 0;
  background-image: url("images/stars.svg"), url("images/stars.svg");
  background-size: 520px 520px, 340px 340px;
  background-position: 0 0, 173px 91px;
  opacity: .45;
}

/* EDIT 15: logo mark behind What we do */
.layer--mark {
  width: min(62rem, 78%); height: auto;
  right: -8%; top: 12%;
  opacity: .06;
}

/* EDIT 13: line drawings behind How it works */
.layer--chart {
  width: min(52rem, 60%);
  right: -4%; top: 4%;
  opacity: .13;
}
.layer--scene {
  width: min(56rem, 66%);
  left: -3%; bottom: -2%;
  opacity: .11;
}
@media (max-width: 699px) {
  .layer--chart { width: 95%; right: -20%; top: 2%; }
  .layer--scene { width: 120%; left: -10%; }
  .layer--mark  { width: 130%; right: -40%; top: 4%; }
}

/* Closing band plate gets headroom so it can drift without showing an edge */
.closer__plate { top: -15%; height: 130%; will-change: translate; }

/* ---- EDIT 10: bubbles ----------------------------------------------------- */
/* What we do: four separate cards instead of one ruled grid */
.services {
  gap: 1.25rem; background: none; border: 0;
  border-radius: 0; overflow: visible;
}
.services li {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  border-radius: var(--bubble);
  box-shadow: 0 8px 24px rgba(10,35,64,.06);
}

/* How it works: each step is a frosted card on the dark band */
.steps { gap: 1.5rem; }
.band--night .steps li,
.steps li {
  border-top: 0;
  padding: 1.9rem 1.7rem;
  background: rgba(10,35,64,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--bubble);
  box-shadow: 0 14px 34px rgba(3,10,20,.30), inset 0 1px 0 rgba(255,255,255,.10);
}

.quote { border-radius: var(--bubble); box-shadow: 0 8px 24px rgba(10,35,64,.06); }

/* the grow-on-hover itself */
.lift {
  transition:
    scale .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease,
    translate .35s cubic-bezier(.2,.7,.2,1),
    opacity .4s ease var(--rd, 0ms),
    transform .5s cubic-bezier(.2,.7,.2,1) var(--rd, 0ms);
}
.btn {
  transition: background .15s ease, border-color .15s ease,
              scale .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.hero .glass { transition: scale .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lift:hover {
    scale: 1.04; position: relative; z-index: 2;
    box-shadow: 0 22px 48px rgba(10,35,64,.18);
  }
  .band--night .lift:hover { box-shadow: 0 26px 56px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); }
  .btn:hover { scale: 1.06; box-shadow: 0 10px 26px rgba(233,161,59,.35); }
  .hero .glass:hover {
    scale: 1.018;
    box-shadow: 0 44px 90px rgba(3,10,20,.55), inset 0 1px 0 rgba(255,255,255,.32);
  }
}

/* ---- EDIT 16: scroll reveal ----------------------------------------------- */
/* Only applied by effects.js, so without the script everything is visible. */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition:
    opacity .4s ease var(--rd, 0ms),
    transform .5s cubic-bezier(.2,.7,.2,1) var(--rd, 0ms),
    scale .35s cubic-bezier(.2,.7,.2,1),
    translate .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   4th draft additions
   ========================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- EDIT 23: frosted header ---------------------------------------------- */
.masthead {
  background: rgba(245,247,249,.62);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(10,35,64,.08);
  box-shadow: 0 6px 24px rgba(10,35,64,.06);
}

/* ---- EDIT 31: 3D logo ----------------------------------------------------- */
.masthead__logo img {
  height: 44px; width: auto;
  filter: drop-shadow(0 1px 1px rgba(10,35,64,.28)) drop-shadow(0 3px 6px rgba(10,35,64,.12));
}
.layer--mark { opacity: .07; }

/* ---- EDIT 24: hover lift (rise + spreading shadow, small growth) --------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lift:hover {
    scale: 1.02;
    translate: 0 -6px;
    box-shadow: 0 26px 50px -12px rgba(10,35,64,.28), 0 8px 18px -8px rgba(10,35,64,.14);
  }
  .band--night .lift:hover {
    box-shadow: 0 30px 60px -14px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  }
}

/* ---- EDIT 26: button fill sweep ------------------------------------------ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  transition: border-color .3s ease, scale .25s cubic-bezier(.2,.7,.2,1),
              translate .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lantern-dim);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn:hover { background: var(--lantern); border-color: var(--lantern-dim); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .btn::before { transition: none; } }
/* EDIT 25: magnetic pull uses the translate property, set by effects.js */
.btn.is-magnet { transition: translate .18s ease-out, scale .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .3s ease; }

/* ---- EDIT 28: faint colour wash on the light sections --------------------- */
#services {
  background-image:
    radial-gradient(60% 55% at 8% 12%, rgba(159,195,232,.22), transparent 70%),
    radial-gradient(50% 45% at 92% 88%, rgba(233,161,59,.07), transparent 70%);
}
#testimonials {
  background-image:
    radial-gradient(55% 60% at 90% 10%, rgba(159,195,232,.20), transparent 70%),
    radial-gradient(45% 50% at 5% 95%, rgba(17,59,99,.06), transparent 70%);
}
#faq {
  background-image:
    radial-gradient(50% 55% at 12% 90%, rgba(159,195,232,.20), transparent 70%),
    radial-gradient(40% 45% at 95% 5%, rgba(233,161,59,.05), transparent 70%);
}
.quote { background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---- EDIT 29: shimmer on "amplify" ----------------------------------------- */
.shine {
  background-image: linear-gradient(100deg, #fff 0%, #9FC3E8 30%, #fff 50%, #9FC3E8 70%, #fff 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shine 6s ease-in-out infinite;
}
@keyframes shine {
  0%, 100% { background-position: 100% 0; }
  50%      { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; background-position: 40% 0; }
}

/* ---- EDIT 18: message form in the closing band ---------------------------- */
.closer__glass { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 880px) {
  .closer__glass { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); max-width: 68rem; }
}
.closer__email { font-size: .98rem; color: #C3D0DE; }
.closer__email a { color: #fff; overflow-wrap: anywhere; }

.consult { display: grid; gap: 1rem; }
.consult .field { display: grid; gap: .4rem; }
.consult label { font-size: .92rem; font-weight: 600; color: #E4EAF1; }
.consult input, .consult textarea {
  font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  padding: .75rem .9rem;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.consult textarea { resize: vertical; min-height: 7.5rem; }
.consult input:focus, .consult textarea:focus {
  outline: none; border-color: #9FC3E8; background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 3px rgba(159,195,232,.25);
}
.consult .btn { justify-self: start; cursor: pointer; }
.consult .btn[disabled] { opacity: .7; cursor: progress; }
.consult__note { margin: 0; font-size: .9rem; color: #AFC3D8; }
.consult__status { margin: 0; font-size: .95rem; color: #fff; min-height: 1.2em; }
.consult__status.is-error { color: #F7C1A0; }
.consult .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consult__done { padding: 1.4rem 1.5rem; border-radius: 16px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); }
.consult__done h3 { color: #fff; margin: 0 0 .4rem; }
.consult__done p { margin: 0; color: #C3D0DE; }
.masthead__logo img { height: 52px; }
@media (max-width: 699px) { .masthead__logo img { height: 44px; } }

/* ==========================================================================
   5th draft additions
   ========================================================================== */
/* ---- EDIT 32: testimonials ------------------------------------------------ */
@media (min-width: 980px) {
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.quote { display: flex; flex-direction: column; }
.quote blockquote { flex: 1 1 auto; }
.quote p { font-size: 1.08rem; }
.quote figcaption { padding-top: 1rem; border-top: 1px solid var(--rule); }
.quote cite { font-weight: 600; color: var(--navy-deep); }
.avatar--mark {
  background: linear-gradient(160deg, #fff, #EAF1F8);
  border: 1px solid var(--rule);
  box-shadow: 0 2px 6px rgba(10,35,64,.08);
}
.avatar--mark img { width: 68%; height: auto; }

.edge {
  margin: 2.5rem 0 0;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--bubble);
  text-align: center;
  color: #fff;
  background-color: var(--navy-deep);
  background-image:
    url("images/stars.svg"),
    radial-gradient(70% 120% at 50% 0%, rgba(60,100,150,.45), transparent 70%);
  background-size: 340px 340px, 100% 100%;
  box-shadow: 0 18px 40px -16px rgba(10,35,64,.45);
}
.edge blockquote { margin: 0; }
.edge p {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.05; margin: 0; color: #fff;
}
.edge figcaption {
  margin-top: 1rem; font-size: .95rem; letter-spacing: .04em;
  color: #AFC3D8;
}
.edge figcaption::before { content: "— "; }