/* VAIY - service and about pages.
   These pages load brand.css, then home.css (for the shared components:
   .svc, .det, .spec, .fn, .faq, .diag, .next, .creds), then this file,
   which adds only what those two do not already provide. */

/* page hero ----------------------------------------------------------- */
.phero{ padding:clamp(46px,6vw,84px) 0 clamp(38px,4.5vw,60px); }
.phero h1{ max-width:20ch; }
.phero .lede{ margin-top:26px; font-size:18.5px; max-width:58ch; }
.phero .lede + .lede{ margin-top:16px; }
.phero-ctas{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; margin-top:clamp(30px,3.5vw,44px); }
.phero-ctas .note{ font-size:12.5px; color:var(--mute); line-height:1.5; flex:1 1 100%; }

/* breadcrumb ---------------------------------------------------------- */
.crumb{ font-size:13px; color:var(--mute); padding:20px 0 0; }
.crumb a{ color:var(--mute); text-decoration:none; }
.crumb a:hover{ color:var(--blue); }
.crumb span{ margin:0 7px; opacity:.6; }

/* body prose ---------------------------------------------------------- */
.prose{ max-width:70ch; }
.prose p{ margin:0 0 17px; font-size:16.5px; line-height:1.68; color:var(--mute); }
.prose p strong{ color:var(--ink); font-weight:700; }
.prose p:last-child{ margin-bottom:0; }
.prose h3{ font-size:clamp(19px,2.1vw,23px); margin:34px 0 12px; letter-spacing:-.025em; }

/* the agenda - a day, hour by hour, without pretending to a timetable -- */
.agenda{ list-style:none; margin:clamp(34px,4vw,52px) 0 0; padding:0; border-top:1px solid var(--line); counter-reset:ag; }
.agenda li{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:26px 0; border-bottom:1px solid var(--line); position:relative;
}
@media (min-width:800px){ .agenda li{ grid-template-columns:92px minmax(0,1fr); gap:44px; align-items:start; } }
.agenda .no{
  counter-increment:ag; font-family:var(--display); font-size:12.5px; font-weight:700;
  color:var(--blue); letter-spacing:.08em; padding-top:5px;
}
.agenda h3{ font-size:clamp(18px,2vw,22px); letter-spacing:-.025em; line-height:1.25; margin:0 0 9px; }
.agenda p{ margin:0; font-size:16px; line-height:1.6; color:var(--mute); max-width:60ch; }

/* two-column feature block -------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr; gap:38px; align-items:start; }
@media (min-width:940px){ .split{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:74px; } }
.split.even{ grid-template-columns:1fr; }
@media (min-width:940px){ .split.even{ grid-template-columns:1fr 1fr; gap:70px; } }

/* takeaway list - what they walk out with ----------------------------- */
.take{ list-style:none; margin:30px 0 0; padding:0; }
.take li{
  position:relative; padding:0 0 0 32px; margin:0 0 18px;
  font-size:16.5px; line-height:1.6; color:var(--mute); max-width:58ch;
}
.take li:last-child{ margin-bottom:0; }
.take li strong{ color:var(--ink); font-weight:700; }
.take li::before{
  content:''; position:absolute; left:0; top:9px; width:15px; height:8px;
  border-left:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg);
}

/* caution block - where not to use it --------------------------------- */
.caution{
  background:var(--inv-bg); color:var(--inv-ink);
  padding:clamp(34px,4vw,54px); margin:clamp(44px,5vw,70px) 0 0;
}
.caution .kicker{ color:#8FA1FF; }
.caution .kicker::before{ background:#8FA1FF; }
.caution h2{ color:var(--inv-ink); max-width:22ch; }
.caution h2 em{ color:#8FA1FF; }
.caution p{ margin:22px 0 0; font-size:16.5px; line-height:1.65; color:var(--inv-soft); max-width:64ch; }
.caution ul{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:1px; background:rgba(247,246,243,.14); }
@media (min-width:800px){ .caution ul{ grid-template-columns:repeat(2,1fr); } }
.caution li{ background:var(--inv-bg); padding:24px 26px; font-size:15.5px; line-height:1.58; color:var(--inv-soft); }
.caution li b{ display:block; color:var(--inv-ink); font-weight:700; margin-bottom:7px; font-family:var(--display); font-size:16px; letter-spacing:-.02em; }

/* closing call to action ---------------------------------------------- */
.endcta{ background:var(--panel); border-top:1px solid var(--line); padding:clamp(56px,7vw,96px) 0; }
.endcta h2{ max-width:18ch; }
.endcta p{ margin:24px 0 0; font-size:17px; line-height:1.6; color:var(--mute); max-width:56ch; }
.endcta .row-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* related pages ------------------------------------------------------- */
.related{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:clamp(44px,5vw,66px) 0 0; }
@media (min-width:760px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related a{
  background:var(--bg); padding:28px 26px 32px; text-decoration:none; color:var(--ink);
  transition:background .2s ease; display:block;
}
.related a:hover{ background:var(--panel); }
.related .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); font-weight:700; }
.related h3{ margin:14px 0 0; font-size:19px; letter-spacing:-.022em; line-height:1.25; }
.related p{ margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--mute); }

/* about page ---------------------------------------------------------- */
.bio{ display:grid; grid-template-columns:1fr; gap:44px; align-items:start; }
@media (min-width:960px){ .bio{ grid-template-columns:.75fr 1.25fr; gap:76px; } }
.bio-img{ display:grid; gap:18px; align-content:start; }
@media (min-width:960px){ .bio-img{ position:sticky; top:100px; } }
.bio p{ font-size:16.5px; line-height:1.68; color:var(--mute); max-width:60ch; margin:0 0 17px; }
.bio p strong{ color:var(--ink); font-weight:700; }

/* hero: copy left, collage right ---------------------------------------
   Full-bleed art works on the home page because hero.png is wide. Here the
   artwork sits beside the copy instead, which fills the hero and keeps the
   collage at a size where it reads as artwork rather than as a stamp. */
.phero-grid{ display:grid; grid-template-columns:1fr; gap:38px; align-items:center; }
@media (min-width:1000px){
  .phero-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:64px; }
}
.phero-art{ display:block; }
.phero-art img{ display:block; width:100%; height:auto; max-width:620px; margin-left:auto; }
@media (max-width:999px){
  .phero-art img{ max-width:440px; margin:0 auto; }
}