/* ============================================================================
   HOUSE OF COLORS — secondary-page components
   Loaded after components.css. Everything here still uses the same tokens.
   ============================================================================ */

/* page header — the compact hero used by every page except the two landing pages */
.phead{
  position:relative;padding-block:calc(var(--s-24) + 2rem) var(--section-y);
  background:var(--ground-dark);color:var(--ink-on-dark-s);overflow:hidden;
}
.phead::before{
  content:"";position:absolute;inset:0;
  background:url('../img/banner-green-1920.webp') center/cover no-repeat;
  opacity:.9;
}
.phead::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right, rgba(20,32,26,.86) 0%, rgba(20,32,26,.55) 55%, rgba(20,32,26,.30) 100%);
}
.phead .wrap{position:relative;z-index:2}
.phead .wrap{position:relative;z-index:1}
.phead h1{color:var(--ink-on-dark);max-width:18ch}
.phead .label{color:var(--sage)}
.phead p{color:var(--ink-on-dark-s);max-width:56ch;margin-top:var(--s-5)}

/* breadcrumb */
.crumb{font-size:var(--t-micro);color:var(--ink-soft);margin-bottom:var(--s-6)}
.crumb a:hover{color:var(--brand)}
.phead .crumb{color:var(--ink-on-dark-s);opacity:.75}
.phead .crumb a:hover{color:var(--sage)}

/* ---------- long-form / legal prose ---------- */
.prose{max-width:72ch}
.prose h2{font-size:var(--t-h3);font-weight:var(--w-medium);margin-top:var(--s-12);margin-bottom:var(--s-4)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--t-h4);font-weight:var(--w-medium);margin-top:var(--s-8);margin-bottom:var(--s-3)}
.prose p,.prose li{color:var(--ink-body);font-size:var(--t-body);line-height:var(--lh-relaxed)}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 var(--s-4);display:grid;gap:var(--s-2)}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--terracotta)}
.prose strong{color:var(--ink);font-weight:var(--w-medium)}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin-block:var(--s-10)}
.prose .updated{font-size:var(--t-micro);color:var(--ink-soft);text-transform:uppercase;letter-spacing:var(--track-label)}

/* legal side-nav */
.legal-layout{display:grid;grid-template-columns:220px 1fr;gap:clamp(2rem, 1rem + 4vw, 5rem);align-items:start}
@media (max-width:860px){.legal-layout{grid-template-columns:1fr}}
.legal-nav{position:sticky;top:96px;display:grid;gap:var(--s-2);font-size:var(--t-small)}
.legal-nav a{padding:.5rem .75rem;border-radius:var(--r-sm);color:var(--ink-soft);transition:all var(--dur) var(--ease)}
.legal-nav a:hover{background:var(--ground-cream);color:var(--ink)}
.legal-nav a[aria-current="page"]{background:var(--brand);color:var(--ink-on-dark)}
@media (max-width:860px){.legal-nav{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;padding-bottom:var(--s-2)}}

/* ---------- team / directors ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.people{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.people{grid-template-columns:1fr}}
.person{background:var(--ground);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.person__ph{aspect-ratio:4/5;background:var(--ground-sand);display:grid;place-items:center;
  border-bottom:1px solid var(--line-soft);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--track-label);color:var(--ink-faint);text-align:center;padding:var(--s-4)}
.person__body{padding:var(--s-5)}
.person h3{font-size:var(--t-h4);font-weight:var(--w-medium)}
.person .role{font-size:var(--t-micro);color:var(--ink-soft);margin-top:2px}

/* ---------- timeline ---------- */
.tl{display:grid;gap:0;margin:0;padding:0;list-style:none}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:var(--gap);padding-block:var(--s-6);border-top:1px solid var(--line-soft)}
.tl li:last-child{border-bottom:1px solid var(--line-soft)}
.tl .yr{font-size:var(--t-h3);font-weight:var(--w-light);color:var(--terracotta);line-height:1}
.tl h3{font-size:var(--t-h4);font-weight:var(--w-medium);margin-bottom:var(--s-2)}
.tl p{font-size:var(--t-small);color:var(--ink-soft);margin:0}
@media (max-width:600px){.tl li{grid-template-columns:1fr;gap:var(--s-2)}}

/* ---------- services ---------- */
.svc{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5) var(--gap);
  padding-block:var(--s-8);border-top:1px solid var(--line-soft);align-items:start}
.svc:last-child{border-bottom:1px solid var(--line-soft)}
.svc__n{font-size:var(--t-h3);font-weight:var(--w-light);color:var(--terracotta);line-height:1;min-width:2.5rem}
.svc h3{font-size:var(--t-h3);font-weight:var(--w-regular);margin-bottom:var(--s-3)}
.svc p{color:var(--ink-body);max-width:62ch}
.svc ul{margin:var(--s-4) 0 0;padding-left:1.1rem;display:grid;gap:var(--s-2);font-size:var(--t-small);color:var(--ink-soft)}
@media (max-width:600px){.svc{grid-template-columns:1fr}}

/* ---------- contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.ccard{background:var(--ground);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:var(--s-6);display:grid;gap:var(--s-3);align-content:start}
.ccard .label{color:var(--terracotta)}
.ccard a{color:var(--ink);font-size:var(--t-lead)}
.ccard a:hover{color:var(--brand)}
.ccard .note{font-size:var(--t-micro);color:var(--ink-soft)}

.mapframe{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:16/7;
  background:var(--ground-sand);display:grid;place-items:center;text-align:center;padding:var(--s-6);
  font-size:var(--t-small);color:var(--ink-soft)}

/* ---------- FAQ accordion ---------- */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding-block:var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  font-size:var(--t-h4);font-weight:var(--w-medium);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--t-h3);font-weight:var(--w-light);color:var(--terracotta);transition:transform var(--dur) var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:var(--s-6);color:var(--ink-body);max-width:70ch;margin:0}

/* ---------- thank-you / 404 ---------- */
.centre-page{min-height:74svh;display:grid;place-items:center;text-align:center;padding-block:var(--s-24)}
.centre-page .inner{max-width:52ch}
.centre-page .mark{width:56px;margin:0 auto var(--s-6)}

/* ---------- form success/error states ---------- */
.formmsg{padding:var(--s-4) var(--s-5);border-radius:var(--r-sm);font-size:var(--t-small);margin:0}
.formmsg--ok{background:rgba(147,182,139,.22);color:#25402A;border:1px solid var(--sage)}
.formmsg--err{background:rgba(179,123,100,.16);color:#6E4234;border:1px solid var(--terracotta)}

/* ---------- footer nav gets more columns on the full site ---------- */
.ftr__grid--wide{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
@media (max-width:1000px){.ftr__grid--wide{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:700px){.ftr__grid--wide{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ftr__grid--wide{grid-template-columns:1fr}}

/* pages that are not the hero-led landing pages need a solid header from the start */
body.has-solid-header{padding-top:0}
body.has-solid-header .hdr{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line-soft)}
body.has-solid-header .hdr__logo{color:var(--ink)}
body.has-solid-header .hdr__nav a{color:var(--ink-body)}

/* media embed slot — used until the client supplies the tour / walkthrough */
.mediaslot{aspect-ratio:16/9;border-radius:var(--r-md);background:var(--ground-sand);
  border:1px dashed var(--line);display:grid;place-items:center;text-align:center;padding:var(--s-6);
  font-size:var(--t-small);color:var(--ink-soft);line-height:1.6}
.mediaslot small{color:var(--ink-faint)}

/* director portraits are cut-outs on a cream ground — contain, don't crop faces */
.person__ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person__ph:has(img){padding:0;background:var(--ground-cream)}

/* footer social link */
.ftr .social{display:inline-flex;align-items:center;gap:.45rem}
.ftr .social svg{flex:0 0 auto;opacity:.85}
.ftr .social:hover svg{opacity:1}