/* ============================================================================
   Allied Insurance, Personal & Motor (personal.html) -- v2 page-scoped styles.
   Loaded AFTER styles.css: reuses the locked homepage tokens, buttons, nav,
   footer, .rise reveal, .eyebrow and .on-dark grammar. Adds only the page's
   hero-band, the two cover sections, the gold cover cards and the glance band.
   Palette is the shared Allied gold/amber/brown on warm cream + dark; every
   value here is a token or a warm-gold tint that traces to the logo. Flat: no
   shadows anywhere. No green, no mint.
   ========================================================================== */

/* ---------- HERO-BAND (dark warm panel, giant cream headline) ---------- */
.page-hero{
  position:relative; min-height:78svh; display:flex; align-items:flex-end;
  background:var(--brand-dark); color:var(--cream-on-dark); overflow:hidden;
  padding:calc(var(--nav-h) + 56px) 0 clamp(48px,8vh,88px);
}
.page-hero__media{ position:absolute; inset:0; z-index:0; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; object-position:64% 32%; }
.page-hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(28,23,16,.5) 0%, rgba(28,23,16,.12) 32%, rgba(28,23,16,.42) 62%, rgba(28,23,16,.95) 100%),
    linear-gradient(90deg, rgba(28,23,16,.82) 0%, rgba(28,23,16,.34) 48%, rgba(28,23,16,0) 82%);
}
.page-hero__inner{ position:relative; z-index:2; width:100%; }
.page-hero__eyebrow{ margin-bottom:22px; color:var(--gold-bright); }
.page-hero h1{
  font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(42px,6.9vw,108px); max-width:15ch;
}
.page-hero h1 .beat{ display:block; }
.page-hero h1 .beat-2{ color:var(--cream-70); }
.page-hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.page-hero h1 .word .ch{ display:inline-block; will-change:transform; }
.page-hero__sub{
  margin-top:28px; max-width:54ch; color:var(--cream-70);
  font-size:clamp(16px,1.3vw,20px); line-height:1.55;
}
.page-hero__ctas{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- COVER SECTION (Personal / Motor): split text + media ---------- */
.pcover{ padding:clamp(64px,11vh,150px) 0; background:var(--canvas); }
.pcover--surface{ background:var(--surface); }
.pcover__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center;
}
.pcover__eyebrow{ margin-bottom:20px; }
.pcover__h{
  font-weight:500; letter-spacing:-.03em; line-height:1.02; font-size:clamp(30px,4.2vw,62px); max-width:15ch;
}
.pcover__h .accent{ color:var(--amber); }
.pcover__body{ margin-top:24px; max-width:52ch; }
.pcover__body p{ color:var(--ink-70); margin-bottom:15px; }
.pcover__cta{ margin-top:24px; }
.pcover__media{ border-radius:var(--r-card); overflow:hidden; aspect-ratio:5/6; }
.pcover__media img{ width:100%; height:100%; object-fit:cover; }

/* dark variant (Motor): the warm dark panel, cream copy, gold cards pop on it */
.pcover--dark{
  background:radial-gradient(120% 90% at 16% 0%, #241c11 0%, var(--brand-dark) 58%);
  color:var(--cream-on-dark);
}
.pcover--dark .pcover__h{ color:var(--cream-on-dark); }
.pcover--dark .pcover__body p{ color:var(--cream-70); }
.pcover--dark .pcover__media{ aspect-ratio:5/6; }

/* Motor DOM order is media,text -> keep media left on desktop */
.pcover--flip .pcover__grid{ grid-template-columns:.95fr 1.05fr; }

/* ---------- GOLD COVER CARDS (echo the homepage al-card gold gradient) ---------- */
.pcards{
  margin-top:clamp(40px,6vh,74px); display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.pcards--four{ grid-template-columns:repeat(4,1fr); }
.pcard{
  border-radius:var(--r-card); padding:26px 24px 24px; color:var(--ink);
  display:flex; flex-direction:column; min-height:196px; position:relative; overflow:hidden;
}
.pcard__ic{ width:42px; height:42px; color:rgba(28,23,16,.86); }
.pcard__ic svg{ width:100%; height:100%; }
.pcard__name{ margin-top:auto; padding-top:22px; font-size:clamp(18px,1.55vw,23px); font-weight:500; letter-spacing:-.02em; line-height:1.08; }
.pcard__gist{ margin-top:9px; font-size:14.5px; line-height:1.45; color:rgba(28,23,16,.72); }
.pcard:nth-child(4n+1){ background:linear-gradient(150deg,#f0cd8c,#d4a24e); }
.pcard:nth-child(4n+2){ background:linear-gradient(150deg,#f5e3b0,#e0a53f); }
.pcard:nth-child(4n+3){ background:linear-gradient(150deg,#e6bb6b,#c0862f); }
.pcard:nth-child(4n+4){ background:linear-gradient(150deg,#f3daa0,#d69b3e); }

/* ---------- GLANCE band (light): the full real cover list, two columns ---------- */
.glance{ padding:clamp(64px,10vh,140px) 0; background:var(--canvas); border-top:1px solid var(--line); }
.glance__head{ margin-bottom:clamp(32px,5vh,54px); }
.glance__eyebrow{ margin-bottom:18px; }
.glance h2{ font-weight:500; letter-spacing:-.03em; line-height:1.03; font-size:clamp(28px,3.7vw,54px); max-width:18ch; }
.glance__sub{ margin-top:20px; max-width:50ch; color:var(--ink-70); }
.glance__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); }
.glance__group h3{ font-size:13px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); margin-bottom:20px; }
.glance__list{ list-style:none; display:grid; gap:0; }
.glance__list li{
  display:flex; gap:14px; align-items:flex-start; font-size:clamp(16px,1.2vw,18px); color:var(--ink);
  border-top:1px solid var(--line); padding:14px 0;
}
.glance__list li:last-child{ border-bottom:1px solid var(--line); }
.glance__tick{ color:var(--amber); flex:0 0 auto; margin-top:3px; width:19px; height:19px; }
.glance__tick svg{ width:100%; height:100%; }
.glance__cta{ margin-top:clamp(34px,5vh,56px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .pcover__grid,
  .pcover--flip .pcover__grid{ grid-template-columns:1fr; gap:36px; }
  .pcover__media,
  .pcover--dark .pcover__media{ aspect-ratio:16/11; order:-1; }
  .pcards{ grid-template-columns:repeat(2,1fr); }
  .pcards--four{ grid-template-columns:repeat(2,1fr); }
  .glance__cols{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:560px){
  .page-hero{ min-height:72svh; }
  .pcards, .pcards--four{ grid-template-columns:1fr; }
}

.page-hero /* 204 Lottie: the animated cover-line glyph beside a section eyebrow.
   Colour follows the eyebrow (amber on light, gold-bright on dark) via currentColor. */
.pcover__glyph{ display:inline-block; width:20px; height:20px; margin-right:11px;
  vertical-align:middle; line-height:0; }
.pcover__glyph .cover-lottie{ width:100%; height:100%; }

/* 085 Hover Zoom: the two cover photos scale inside their clipped frame */
.pcover__media{ position:relative; }
.pcover__media img{ transition:transform 1.1s cubic-bezier(.16,1,.3,1); will-change:transform; }
.pcover__media:hover img{ transform:scale(1.05); }

/* 105 Motion Tiles: the card icon lifts on hover (the icon is not a .rise
   element, so this survives the reveal, unlike a transform on the card itself).
   The lottie cards additionally play their glyph on hover via data-lottie-host. */
.pcard__ic{ transition:transform .5s cubic-bezier(.16,1,.3,1), color .4s ease; }
.pcard:hover .pcard__ic{ transform:scale(1.09); }
.pcard .cover-lottie{ width:100%; height:100%; }

@media (prefers-reduced-motion:reduce){
  .pcover__media img, .pcard__ic{ transition:none; }
  .pcover__media:hover img, .pcard:hover .pcard__ic{ transform:none; }
}