/* ============================================================
   HAWKHILL — site components (Direction B)
   Loaded after base.css on every page.
   ============================================================ */

/* ---- shared section rhythm ---- */
.s{ padding:clamp(64px,9vw,128px) 0; }
.s-tight{ padding:clamp(48px,6vw,84px) 0; }
.panel{ background:var(--navy-panel); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }

/* ---- HERO: full-bleed image with navy scrim (home) ---- */
.hero{ position:relative; min-height:clamp(560px,82vh,820px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--rule); }
.hero image-slot{ position:absolute; inset:0; width:100%; height:100%; --is-bg:var(--navy-deep); }
.hero .scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,21,38,.94) 0%, rgba(10,21,38,.82) 38%, rgba(10,21,38,.30) 72%, rgba(10,21,38,.55) 100%),
    linear-gradient(0deg, rgba(10,21,38,.85) 0%, rgba(10,21,38,0) 40%); }
.hero .wrap{ z-index:3; padding-top:clamp(60px,10vw,120px); padding-bottom:clamp(48px,6vw,80px); width:100%; }
.hero .eyebrow{ margin-bottom:26px; }
.hero h1{ font-size:clamp(46px,7.6vw,104px); max-width:16ch; }
.hero h1 em{ color:var(--gold); font-style:italic; font-weight:600; }
.hero .lede{ margin-top:26px; }
.hero-cta{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:34px; }
.hero-meta{ position:absolute; top:clamp(24px,4vw,44px); right:var(--gutter); z-index:3; text-align:right; }
.hero-meta .meta{ display:block; line-height:1.9; color:var(--cream); text-shadow:0 1px 10px rgba(8,14,26,.7); }
@media(max-width:760px){ .hero-meta{ display:none; } }

/* ---- PAGE HERO: compact interior header ---- */
.phero{ position:relative; overflow:hidden; border-bottom:1px solid var(--rule); padding:clamp(64px,11vw,150px) 0 clamp(46px,6vw,84px); }
.phero.img image-slot{ position:absolute; inset:0; width:100%; height:100%; --is-bg:var(--navy-deep); }
.phero.img .scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,21,38,.95) 0%, rgba(10,21,38,.78) 45%, rgba(10,21,38,.45) 100%); }
.phero .wrap{ position:relative; z-index:3; }
.phero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(40px,6.2vw,86px); line-height:1.0; letter-spacing:-.015em; margin:20px 0 0; max-width:18ch; }
.phero h1 em{ color:var(--gold); font-style:italic; font-weight:600; }
.phero .lede{ margin-top:26px; }
.crumb{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.crumb a{ color:var(--muted); } .crumb a:hover{ color:var(--gold); }
.crumb .sep{ color:var(--muted-deep); margin:0 .6em; }

/* ---- credential bar (gold) ---- */
.bar{ background:var(--gold); color:var(--navy); }
.bar-inner{ max-width:var(--maxw); margin:0 auto; padding:18px var(--gutter); display:flex; align-items:center; gap:14px 40px; flex-wrap:wrap; justify-content:center; }
.bar-inner span{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; display:inline-flex; align-items:center; gap:14px; }
.bar-inner span::before{ content:"\25C6"; font-size:9px; opacity:.55; }
.bar-inner span:first-child::before{ display:none; }

/* ---- capability cards grid ---- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.card{ background:var(--navy); padding:clamp(28px,3vw,42px); display:flex; flex-direction:column; min-height:248px; transition:background .3s; }
.card:hover{ background:var(--navy-panel); }
.card .idx{ font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.1em; margin-bottom:26px; }
.card h3{ font-family:var(--serif); font-weight:700; font-size:clamp(23px,2.4vw,29px); margin:0 0 12px; line-height:1.08; }
.card p{ font-weight:300; color:var(--cream-dim); font-size:15.5px; margin:0 0 18px; }
.card .tags{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:auto; }
@media(max-width:860px){ .cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cards{ grid-template-columns:1fr; } }

/* ---- split: image + content pane ---- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
.split .media image-slot{ width:100%; height:100%; min-height:420px; }
.split .pane{ padding:clamp(40px,5vw,76px); display:flex; flex-direction:column; justify-content:center; }
.split.alt{ background:var(--navy-panel); }
.split.flip .media{ order:2; }
.adv-row{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:22px 0; border-top:1px solid var(--hair); align-items:baseline; }
.adv-row:last-child{ border-bottom:1px solid var(--hair); }
.adv-row .w{ font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(20px,2.4vw,27px); color:var(--gold); }
.adv-row .t{ font-weight:300; color:var(--cream-dim); font-size:15.5px; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; } .split .media, .split.flip .media{ order:-1; } .split .media image-slot{ min-height:300px; } }
@media(max-width:520px){ .adv-row{ grid-template-columns:1fr; gap:4px; } }

/* ---- who we serve grid ---- */
.serve-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.serve{ background:var(--navy); padding:clamp(26px,2.6vw,38px); }
.serve .role{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.serve h4{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.2vw,25px); margin:0 0 10px; line-height:1.1; }
.serve p{ font-weight:300; color:var(--cream-dim); margin:0; font-size:15px; }
@media(max-width:860px){ .serve-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .serve-grid{ grid-template-columns:1fr; } }

/* ---- portfolio image cards ---- */
.pf{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); }
.pf-card{ position:relative; overflow:hidden; border:1px solid var(--hair); }
.pf-card image-slot{ width:100%; height:clamp(300px,34vw,420px); }
.pf-card .ov{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(0deg, rgba(10,21,38,.92) 0%, rgba(10,21,38,.25) 55%, rgba(10,21,38,.05) 100%); }
.pf-card .cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:clamp(24px,3vw,38px); }
.pf-card .cap .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.pf-card .cap h4{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,3vw,38px); margin:10px 0 8px; }
.pf-card .cap p{ font-weight:300; color:var(--cream-dim); margin:0; max-width:40ch; font-size:15.5px; }
@media(max-width:640px){ .pf{ grid-template-columns:1fr; } }

/* ---- markets coverage ---- */
.mk-panel{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:start; }
.mk-cities{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.mk-chip{ font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--cream); border:1px solid var(--rule); padding:10px 16px; }
.mk-chip.soft{ color:var(--muted); border-color:var(--hair); }
.mk-block h4{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.4vw,27px); margin:0; }
.mk-block h4 em{ color:var(--gold); font-style:italic; }
.mk-note{ font-family:var(--body); font-style:italic; font-weight:300; color:var(--muted); margin-top:18px; font-size:15px; max-width:44ch; }
@media(max-width:760px){ .mk-panel{ grid-template-columns:1fr; } }

/* ---- about block ---- */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch; border:1px solid var(--hair); }
.about image-slot{ width:100%; height:100%; min-height:440px; }
.about .pane{ padding:clamp(40px,5vw,72px); display:flex; flex-direction:column; justify-content:center; background:var(--navy-panel); }
.about .big{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.4vw,42px); line-height:1.14; letter-spacing:-.01em; margin:18px 0 24px; text-wrap:pretty; }
.about .big em{ color:var(--gold); }
@media(max-width:860px){ .about{ grid-template-columns:1fr; } .about image-slot{ min-height:300px; } }

/* ---- careers grid ---- */
.careers{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; }
@media(max-width:760px){ .careers{ grid-template-columns:1fr; } }

/* ---- CTA band (gold) ---- */
.cta-band{ background:var(--gold); color:var(--navy); }
.cta-inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(56px,8vw,108px) var(--gutter);
  display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(34px,5vw,70px); align-items:center; }
.cta-inner .eyebrow{ color:var(--navy); }
.cta-inner .eyebrow .dot{ background:var(--navy); }
.cta-inner h2{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,5.2vw,66px); line-height:1.02; letter-spacing:-.015em; margin:14px 0 0; }
.cta-inner h2 em{ font-style:italic; }
.cta-side{ text-align:right; }
.cta-side .meta{ color:rgba(13,26,48,.6); }
.cta-phone{ font-family:var(--serif); font-weight:700; font-size:clamp(26px,3.2vw,40px); line-height:1.05; display:block; color:var(--navy); margin-top:8px; white-space:nowrap; }
.cta-mail{ font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); border-bottom:1px solid rgba(13,26,48,.4); padding-bottom:2px; display:inline-block; margin-top:16px; }
@media(max-width:760px){ .cta-inner{ grid-template-columns:1fr; } .cta-side{ text-align:left; } }

/* ============================================================
   INTERIOR-PAGE HELPERS
   ============================================================ */

/* section intro (eyebrow + kicker + optional lede) */
.intro{ max-width:760px; }
.intro .kicker{ margin-top:18px; }
.intro .lede{ margin-top:22px; }

/* numbered process steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.step{ background:var(--navy); padding:clamp(28px,3vw,40px); }
.step .n{ font-family:var(--serif); font-weight:700; font-size:clamp(34px,4vw,52px); color:var(--gold); line-height:1; }
.step h4{ font-family:var(--serif); font-weight:700; font-size:clamp(19px,2vw,23px); margin:18px 0 10px; }
.step p{ font-weight:300; color:var(--cream-dim); font-size:15px; margin:0; }
@media(max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* stat row */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(24px,3vw,40px) clamp(20px,2.5vw,36px); border-left:1px solid var(--hair); }
.stat:first-child{ border-left:0; }
.stat .n{ font-family:var(--serif); font-weight:700; font-size:clamp(32px,4vw,52px); line-height:1; }
.stat .n .u{ color:var(--gold); font-size:.55em; vertical-align:super; }
.stat .l{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
@media(max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } .stat{ border-top:1px solid var(--hair); } .stat:nth-child(-n+2){ border-top:0; } .stat:nth-child(odd){ border-left:0; } }

/* value cards (about) */
.values{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.value{ background:var(--navy); padding:clamp(30px,3.4vw,48px); }
.value .role{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.value h4{ font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.6vw,30px); margin:0 0 12px; }
.value p{ font-weight:300; color:var(--cream-dim); margin:0; }
@media(max-width:640px){ .values{ grid-template-columns:1fr; } }

/* leadership cards */
.leaders{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); }
.leader image-slot{ width:100%; height:clamp(260px,30vw,340px); }
.leader h4{ font-family:var(--serif); font-weight:700; font-size:clamp(21px,2.3vw,26px); margin:20px 0 4px; }
.leader .ttl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.leader p{ font-weight:300; color:var(--cream-dim); font-size:15px; margin:12px 0 0; }
@media(max-width:760px){ .leaders{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .leaders{ grid-template-columns:1fr; } }

/* simple prose two-column */
.prose2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:start; }
.prose2 p{ font-weight:300; color:var(--cream-dim); margin:0 0 18px; }
.prose2 p:last-child{ margin-bottom:0; }
@media(max-width:760px){ .prose2{ grid-template-columns:1fr; } }

/* feature list with gold check/dash */
.flist{ list-style:none; margin:0; padding:0; }
.flist li{ font-family:var(--body); font-weight:300; font-size:16.5px; color:var(--cream); padding:13px 0; padding-left:1.6em; text-indent:-1.6em; align-items:baseline; border-bottom:1px solid var(--hair); }
.flist li::before{ content:"\25C6"; color:var(--gold); font-size:.62em; font-weight:400; display:inline-block; width:1.6em; text-indent:0; }
.flist li b{ font-weight:500; color:var(--cream); }

/* inline divider label */
.label-rule{ display:flex; align-items:center; gap:18px; margin:0 0 30px; }
.label-rule .line{ height:1px; background:var(--rule); flex:1; }