/* ============================================================
   Coast 2 Coast — Interior page styles
   Page hero (with the deal-floor motion) · steps · prose ·
   value lists · team portrait frames · contact form.
   Loaded after base.css + home.css (which it reuses).
   ============================================================ */

/* ---------- Interior page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--grad-floor);color:#fff;
  padding:calc(var(--header-h) + 26px) 0 56px}
.page-hero .wrap{position:relative;z-index:4}
.page-hero__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(120% 90% at 78% -20%,rgba(200,162,74,.16),transparent 55%),
  linear-gradient(180deg,rgba(8,26,48,.4) 0%,transparent 34%,transparent 60%,rgba(8,26,48,.55) 100%);}
.page-hero h1{color:#fff;margin-top:14px;max-width:18ch;text-shadow:0 2px 24px rgba(8,26,48,.5)}
.page-hero .lede{color:rgba(255,255,255,.84);margin-top:20px;max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.28rem)}
.breadcrumb{font-family:var(--label);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);display:flex;gap:10px;align-items:center}
.breadcrumb a{transition:color .25s var(--ease)}
.breadcrumb a:hover{color:var(--gold-300)}
.breadcrumb .sep{color:rgba(255,255,255,.3)}

/* ---------- Two-column intro ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.cols2.top{align-items:start}

/* ---------- Prose ---------- */
.prose{max-width:64ch}
.prose p{margin-bottom:18px;color:var(--ink);font-size:1.06rem;line-height:1.72}
.prose p:last-child{margin-bottom:0}

/* ---------- Value cards (gold left-rule) ---------- */
.vstack{display:grid;gap:18px}
.vcard{position:relative;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--gold-500);border-radius:var(--r-md);padding:26px 30px;
  box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.vcard:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.vcard h3{font-size:1.3rem;margin-bottom:8px}
.vcard p{color:var(--muted);font-size:1rem}

/* ---------- Numbered steps ---------- */
.steps{display:grid;gap:18px}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 30px;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:rgba(200,162,74,.35)}
.step__n{width:46px;height:46px;border-radius:50%;background:var(--grad-floor);color:var(--gold-300);
  font-family:var(--display);font-size:1.4rem;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(200,162,74,.3)}
.step h3{font-size:1.25rem;margin-bottom:4px}
.step p{color:var(--muted);font-size:1rem}

/* ---------- Check list ---------- */
.checks{display:grid;gap:14px;margin-top:26px;list-style:none}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;color:var(--ink);font-size:1.04rem}
.checks .mk{width:22px;height:22px;flex:none;border-radius:50%;background:var(--grad-gold);
  display:grid;place-items:center;margin-top:2px}
.checks .mk svg{width:12px;height:12px;color:var(--navy-900)}

/* ---------- Asset-class chips ---------- */
.assets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:50px}
.asset{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:28px;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.asset:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.asset .ic{width:48px;height:48px;border-radius:50%;background:var(--grad-floor);color:var(--gold-300);
  display:grid;place-items:center;font-family:var(--display);font-size:1.3rem;margin-bottom:16px}
.asset h3{font-size:1.2rem;margin-bottom:6px}
.asset p{color:var(--muted);font-size:.98rem}

/* ---------- Team — superhero portrait frames ---------- */
.team{display:flex;flex-direction:column;gap:34px;margin-top:44px;max-width:980px;margin-left:auto;margin-right:auto}
.member{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:center}
.team .member__frame{aspect-ratio:auto;height:345px}
.member:nth-child(even){grid-template-columns:1fr 270px}
.member:nth-child(even) .member__frame{order:2}
.member__text{min-width:0}
.member__frame{position:relative;aspect-ratio:.8;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(170deg,var(--navy-900),var(--navy-700) 60%,#1e3f62);
  border:1px solid rgba(200,162,74,.32);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.member__frame::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 26%,rgba(200,162,74,.16),transparent 58%)}
.member:hover .member__frame{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(227,200,120,.6)}
.member__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%;z-index:1}
.member__ph{position:absolute;inset:0 0 70px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:rgba(255,255,255,.32);text-align:center}
.member__ph .glyph{font-family:var(--display);font-size:3.4rem;color:var(--gold-300);opacity:.32}
.member__ph span{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:.56rem}
.member__plate{position:relative;z-index:2;background:rgba(8,26,48,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(200,162,74,.35);border-radius:var(--r-md);padding:14px 18px}
.member__plate .nm{font-family:var(--display);font-size:1.35rem;color:#fff;line-height:1}
.member__plate .rl{font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:.58rem;color:var(--gold-300);margin-top:6px}
.member__bio{color:var(--muted);font-size:.9rem;line-height:1.6;max-width:none;margin:0;text-align:left}
.member__bio+.member__bio{margin-top:9px}
.member__quote{color:var(--navy-700);background:var(--quote-tint);border-left:3px solid var(--gold-500);border-radius:0 8px 8px 0;font-family:var(--display);font-style:italic;font-size:1.02rem;line-height:1.55;max-width:none;margin:16px 0 0;padding:14px 18px;text-align:left}

/* ---------- Forms ---------- */
.form{display:grid;gap:20px;max-width:560px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:grid;gap:8px}
.field label{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--navy-700)}
.field input,.field textarea,.field select{font-family:var(--body);font-size:1rem;padding:14px 16px;
  border:1.5px solid rgba(12,35,64,.45);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);width:100%}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(12,35,64,.65)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold-500);
  box-shadow:0 0 0 3px var(--gold-glow)}
.form__note{font-size:.86rem;color:var(--muted)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,56px);align-items:start}
.icard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:30px;box-shadow:var(--shadow-sm)}
.icard.accent{border-left:3px solid var(--gold-500)}
.icard h3{font-size:1.4rem;margin-bottom:10px}
.icard .line{margin-top:16px}
.icard .line .k{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--gold-700)}
.icard .line .v{color:var(--muted);font-style:italic}
.formsent{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold-500);
  border-radius:var(--r-md);padding:30px;box-shadow:var(--shadow-sm)}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .cols2,.contact-grid{grid-template-columns:1fr}
  .assets{grid-template-columns:1fr 1fr}
  .member,.member:nth-child(even){grid-template-columns:1fr;gap:22px}
  .member:nth-child(even) .member__frame{order:0}
  .member__frame{max-width:380px;width:100%;margin:0 auto}
  .form .row2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .assets{grid-template-columns:1fr}
  .member__quote{padding:12px 14px;font-size:.97rem}
}