/* ==========================================================================
   Caravann · "Daylight" (light) · subpage layer
   Loaded AFTER styles.css. Only adds page-level components; it never
   restyles a homepage component. Same two families, same tokens, same ease.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE HERO  (ambient gold bloom, CSS only, no Three.js on subpages)
   -------------------------------------------------------------------------- */
.phero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(36px,5.5vw,66px));
  padding-bottom:clamp(1.6rem,3vw,2.7rem);
  overflow:hidden;
  background:linear-gradient(180deg,#FDFBF6 0%,var(--bg) 52%,var(--bg) 100%);
}
.phero-glow{
  position:absolute;inset:-30% -12% -20%;pointer-events:none;z-index:0;
  background:
    radial-gradient(44% 50% at 76% 24%,rgba(251,187,33,.34),transparent 66%),
    radial-gradient(36% 44% at 14% 6%,rgba(251,187,33,.20),transparent 70%),
    radial-gradient(30% 38% at 96% 78%,rgba(255,104,21,.11),transparent 72%);
  animation:phero-drift 34s var(--ease) infinite alternate;
  will-change:transform;
}
@keyframes phero-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.4%,2.6%,0) scale(1.09)}
}
.phero-in{position:relative;z-index:1}
.phero-copy{max-width:900px}
.phero-rule{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,rgba(251,187,33,.55) 50%,var(--line-2) 82%,transparent);
}
.phero-h1{
  font-family:var(--display);
  font-variation-settings:normal;
  font-weight:600;
  font-size:clamp(2.25rem,5vw,4.05rem);
  line-height:1.0;
  letter-spacing:-.03em;
  margin-bottom:20px;
  max-width:19ch;
}
.phero-h1 em{
  font-style:normal;font-weight:inherit;
  background:linear-gradient(96deg,var(--accent-deep),var(--accent) 46%,var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
.phero-lede{color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem);max-width:60ch}
.phero-lede a{border-bottom:1px solid var(--line-2)}
.phero-lede a:hover{color:var(--accent-deep);border-color:var(--accent)}
.phero-short{
  margin-top:22px;font-family:var(--display);font-style:normal;
  font-variation-settings:normal;
  font-size:clamp(1.15rem,1.9vw,1.6rem);letter-spacing:-.03em;line-height:1.2;
  color:var(--accent-deep);font-weight:500;}
.phero-price{
  margin-top:22px;font-weight:700;font-size:clamp(1.05rem,1.5vw,1.26rem);letter-spacing:-.026em;
}
.phero-price i{font-style:normal;color:var(--accent-deep);margin:0 .35em}
.phero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
/* SECTOR STRIP. government.html shipped <ul class="sector-strip phero-sectors">
   with no .sector-strip rule anywhere in this build, so the four audience items
   rendered as naked full-width list rows directly under the lede, above the fold,
   on the one page a procurement reader opens first. They are pills.
   Left-aligned, not centred: option A's page hero is a left-aligned lockup. */
.sector-strip{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.sector-strip li{
  font-size:.82rem;font-weight:500;color:var(--ink-2);line-height:1.35;
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.62);
}
.phero-sectors{margin-top:26px}

/* ---------- breadcrumb ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-size:.78rem;font-weight:500;color:var(--muted);margin-bottom:20px;
}
.crumbs a{border-bottom:1px solid transparent;padding-bottom:1px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.crumbs a:hover{color:var(--accent-deep);border-color:var(--accent)}
.crumbs .sep{opacity:.45}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}

/* ---------- nav: current page ---------- */
.nav-links a[aria-current="page"]{background:rgba(17,26,59,.06);color:var(--ink)}
.nav-menu-btn.is-current{color:var(--ink)}
.mega-list a[aria-current="page"] .mega-t{color:var(--accent-deep)}

/* --------------------------------------------------------------------------
   PROSE + PULL QUOTE
   -------------------------------------------------------------------------- */
.prose-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.prose{display:flex;flex-direction:column;gap:18px;max-width:65ch}
.prose p{color:var(--ink-2);font-size:1.02rem}
.prose .prose-lead{
  color:var(--ink);font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.25rem,2vw,1.72rem);line-height:1.22;letter-spacing:-.03em;font-weight:700;
}
.prose .link-arrow{align-self:flex-start;margin-top:6px}

.pull{
  position:relative;margin:0;padding:30px 0 0 30px;
  border-left:1px solid var(--line-2);
}
.pull::before{
  content:"";position:absolute;left:-1px;top:30px;width:3px;height:64px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--ember));
}
.pull blockquote{
  margin:0;font-family:var(--display);font-style:normal;
  font-variation-settings:normal;font-weight:500;
  font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.16;letter-spacing:-.03em;
}
.pull figcaption{margin-top:18px;font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:.02em}

/* --------------------------------------------------------------------------
   SERVICE GRID (the full list inside an area)
   -------------------------------------------------------------------------- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:12px}
.svc{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;border:1px solid var(--line);border-radius:1.15rem;
  background:var(--surface);
  box-shadow:0 18px 44px -36px rgba(17,26,59,.55);
  transition:transform .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.svc:hover{
  transform:translateY(-3px);
  border-color:rgba(251,187,33,.55);
  box-shadow:0 22px 48px -32px rgba(17,26,59,.45),0 0 42px -26px var(--accent-glow);
}
.svc-n{
  font-family:var(--display);font-variation-settings:normal;
  font-size:.82rem;font-weight:700;color:var(--accent-deep);letter-spacing:-.03em;padding-top:.24em;
  flex:none;white-space:nowrap;   /* 2026-10-09 Khaled: 07 and 08 broke onto two lines on /workshop */
}
.svc-t{font-size:.98rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}

/* --------------------------------------------------------------------------
   PATH CROSS-LINK GRID (reuses .pcard + its cursor spotlight)
   -------------------------------------------------------------------------- */
.xpaths{display:grid;grid-template-columns:1fr;gap:18px}
.xpaths .pcard .bezel-in{gap:13px}

/* --------------------------------------------------------------------------
   CASE CARDS on subpages
   -------------------------------------------------------------------------- */
.case-title a{border-bottom:1px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.case-title a:hover{color:var(--accent-deep);border-color:var(--accent)}
/* R-47 · .case-actions moved to styles.css. It lived only here, and index.html
   does not load pages.css, so the homepage rendered those buttons unstyled
   while /work rendered them correctly. One definition now. */

.case-meta{
  margin-top:30px;display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);max-width:840px;
}
.case-meta li{display:grid;grid-template-columns:1fr;gap:3px;padding:13px 0;border-bottom:1px solid var(--line)}
.ch-k{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.ch-v{font-size:.95rem;color:var(--ink-2)}

/* --------------------------------------------------------------------------
   ON-PAGE CONTENTS  ·  R-46
   A ruled horizontal band, not a left rail. The left gutter belongs to the
   scroll-progress track he asked us to keep and nudge left at [23:39]; R-43
   measured its clearance from the copy column at 11px at 1280px, so a second
   vertical object there would undo that revision the week it shipped.
   Counters, not <li> markers, because the numerals are the rhythm of the band
   and a default list marker sits outside the box. Every track is minmax(0,1fr)
   or flex-wrap, so nothing here can push the page past the viewport at 390px.
   -------------------------------------------------------------------------- */
.toc-band{
  border-block:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));
}
.toc{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 28px;
  padding-block:clamp(14px,1.8vw,20px);
}
.toc-k{
  flex:0 0 auto;margin:0;
  font-family:var(--body);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--accent-ink);
}
.toc-list{
  flex:1 1 20ch;min-width:0;margin:0;padding:0;list-style:none;
  counter-reset:toc;
  display:flex;flex-wrap:wrap;gap:8px 22px;
}
.toc-list li{counter-increment:toc;min-width:0}
.toc-list a{
  display:inline-flex;align-items:baseline;gap:7px;
  font-size:.86rem;font-weight:600;color:var(--ink-2);
  padding:3px 0;border-bottom:1px solid transparent;
}
.toc-list a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--display);font-variation-settings:normal;
  font-size:.74rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.toc-list a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.toc-list a:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:5px}

/* the band is furniture attached to the masthead, so the section under it does
   not restart the full 11rem rhythm: that put a screen of dead cream between the
   contents and the first thing they point at. */
.toc-band + .section{padding-top:clamp(2rem,3.6vw,3.3rem)}

@media (max-width:640px){
  .toc{gap:8px 0}
  .toc-list{flex:1 1 100%;flex-direction:column;gap:0}
  .toc-list li + li{border-top:1px solid var(--line)}
  .toc-list a{width:100%;padding:11px 0}
}

/* --------------------------------------------------------------------------
   CASE MASTHEAD  ·  R-50
   NOTHING RENDERS WIDER THAN ITS SOURCE. Four photographs are doing every image
   slot across the work area, and the weakest of them, case-hero-ucb.webp at
   764x552, was being blown up to roughly 1242px across a 16:7.4 full-bleed
   masthead on its own case page. That is a 1.6x upscale on the one photo in the
   set that cannot take it, on the page a prospect reads most closely.
   The rule is now arithmetic rather than eyeball: every masthead declares its
   source width as --src-w and is capped there.
     --src-w   the source file's intrinsic pixel width, from the <img> itself
     --fig-ar  the frame's aspect ratio
   Sources 1360px and wider clear the cap at every viewport, so they are
   unchanged. The 764px source gets .is-native instead: its own 764/552 ratio,
   the 120% parallax overscan dropped to 100% (a 20% overscan is a 20% upscale
   when the width is already at the limit), no data-parallax attribute on the
   img, and a figcaption so a plate narrower than the column reads as a decision.
   -------------------------------------------------------------------------- */
.casehero-media{padding-top:clamp(1.25rem,2.4vw,2rem)}
.casehero-fig{--radius:2.2rem;--src-w:1500;max-width:calc(var(--src-w) * 1px);margin-inline:auto}
.casehero-fig .parallax-frame{aspect-ratio:var(--fig-ar,16/7.4);overflow:hidden}
.casehero-fig .parallax-frame img{width:100%;height:120%;object-fit:cover}
.casehero-fig.is-native .parallax-frame img{height:100%}
.casehero-fig figcaption{
  padding:14px 20px 16px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);
}

/* Situation / Approach / Outcome */
.sao{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.2rem);row-gap:clamp(1.25rem,2.5vw,2rem)}
.sao-block{display:flex;flex-direction:column;gap:16px;max-width:70ch}
.sao-block p{color:var(--ink-2);font-size:1.03rem}
.sao-h{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.05;
  padding-bottom:14px;border-bottom:1px solid var(--line);position:relative;
}
.sao-h::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;background:var(--accent);border-radius:2px}
.sao-fig{--radius:1.6rem;margin-top:8px}
.sao-fig figcaption,.short-fig figcaption,.vsfig figcaption,.approach-fig figcaption{
  padding:16px 20px 18px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line);
}
.short-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:8px}
.short-fig{--radius:1.8rem}

.artifact{margin-top:22px;--radius:1.6rem}
.artifact .bezel-in{
  padding:clamp(22px,2.6vw,32px);display:grid;grid-template-columns:1fr;gap:20px;align-items:center;
  background:linear-gradient(120deg,#FFFDF7,#FBF3E2);
}
.artifact-h{font-family:var(--body);font-size:1.2rem;font-weight:700;letter-spacing:-.026em;margin:6px 0 8px}
.artifact p{color:var(--ink-2);font-size:.95rem;max-width:52ch}

/* --------------------------------------------------------------------------
   APPROACH block on /work
   -------------------------------------------------------------------------- */
.approach-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:center}
.approach-fig{--radius:1.8rem}
.approach-fig img{width:100%}

/* --------------------------------------------------------------------------
   VISUAL STRATEGY gallery
   -------------------------------------------------------------------------- */
.vsgrid{display:grid;grid-template-columns:1fr;gap:18px}
.vsfig{--radius:1.8rem;margin:0}
.vsfig .parallax-frame{aspect-ratio:4/3;overflow:hidden}
.vsfig .parallax-frame img{width:100%;height:120%;object-fit:cover}
.vsfig img{width:100%}

/* --------------------------------------------------------------------------
   REST-STOP BAYS on area pages (current bay flagged)
   -------------------------------------------------------------------------- */
.stall.is-current .stall-num{color:var(--ember)}
.stall-body-in .link-arrow{margin-top:18px;display:inline-flex}
/* R-25 · .stall-here / .stall-here-dot became .area-here / .area-here-dot in
   styles.css when the vertical bays became accordion rows. */

/* --------------------------------------------------------------------------
   KEY / VALUE PANEL (government, workshop logistics)
   -------------------------------------------------------------------------- */
.kv{--radius:1.9rem}
.kv .bezel-in{padding:clamp(22px,3vw,38px)}
.kv .gov-list li:last-child{border-bottom:0;padding-bottom:0}

/* --------------------------------------------------------------------------
   AI STEPS on its own page
   -------------------------------------------------------------------------- */
.ai-steps-page{display:grid;grid-template-columns:1fr;gap:14px}
.ai-steps-page li:first-child{grid-column:auto}

/* --------------------------------------------------------------------------
   TEAM BIOS
   -------------------------------------------------------------------------- */
.bios{display:grid;grid-template-columns:1fr;gap:18px}
.bio{--radius:1.9rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.bio:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.bio > .bezel-in{
  padding:clamp(22px,2.8vw,36px);
  display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,34px);align-items:start;
}
.bio-lead > .bezel-in{background:linear-gradient(152deg,#FFFDF7 0%,#FCF6E7 58%,#F8EFDC 100%)}
.bio-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.bio-side .portrait{--radius:1.5rem;width:100%;max-width:190px}
.bio-side .portrait img{width:100%;aspect-ratio:1/1;object-fit:cover}
.bio-side .link-arrow{font-size:.84rem}
.bio-role{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:var(--accent-deep);margin-bottom:10px;
}
.bio-name{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.45rem,2.2vw,1.95rem);font-weight:700;letter-spacing:-.03em;line-height:1.04;
}
.bio-tag{
  margin:8px 0 20px;font-family:var(--display);font-style:normal;
  font-variation-settings:normal;font-size:1.05rem;letter-spacing:-.03em;color:var(--accent-deep);font-weight:500;}
.bio-body p{color:var(--ink-2);font-size:.99rem;max-width:68ch}
.bio-body p + p{margin-top:14px}

/* --------------------------------------------------------------------------
   PRO BONO inline (about page)
   -------------------------------------------------------------------------- */
.probono-inline{margin-top:22px;background:transparent;border-top:0}
.probono-inline .probono-in{padding-inline:0}

/* --------------------------------------------------------------------------
   NEWSLETTER as its own section
   -------------------------------------------------------------------------- */
.newsletter-page{padding-block:clamp(2.4rem,4.8vw,4.2rem)}

/* --------------------------------------------------------------------------
   CLOSING CTA
   -------------------------------------------------------------------------- */
/* R-41 · the closing section now carries the two-option .gs component on every
   subpage. The .unsure card it replaced is gone from the whole build. */
.endcta-sec{padding-top:clamp(1.8rem,3.6vw,3rem)}

/* --------------------------------------------------------------------------
   BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .vsgrid{grid-template-columns:repeat(2,1fr)}
  .ai-steps-page{grid-template-columns:repeat(2,1fr)}
  .ai-steps-page li:last-child{grid-column:1/-1}
  .case-meta li{grid-template-columns:210px 1fr;gap:20px;align-items:baseline}
  .artifact .bezel-in{grid-template-columns:1fr auto;gap:28px}
}

@media (min-width:900px){
  .prose-grid{grid-template-columns:1.06fr .94fr;gap:clamp(2.5rem,5vw,5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
  .pull{padding-top:6px;position:sticky;top:132px}
  /* minmax(0,1fr), not 1fr. A bare 1fr track floors at the child's min-content
     width, and the nowrap button inside each card pushed the third column past
     the shell at ~900px, which put a horizontal scrollbar on the page. Found on
     /workshop during R-31 verification, when that page became the only
     home the workshop has. */
  .xpaths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xpaths.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sao{grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2.6vw,2.6rem);align-items:start}
  .sao-block{max-width:none}
  .approach-grid{grid-template-columns:1.02fr .98fr}
  .bios{max-width:1120px}
  .bio > .bezel-in{grid-template-columns:210px 1fr}
  .bio-lead > .bezel-in{grid-template-columns:260px 1fr}
  .bio-lead .bio-side .portrait{max-width:240px}
  .vsgrid{grid-template-columns:repeat(2,1fr)}
  .vsfig-lg{grid-column:span 2}
  .vsfig-lg .parallax-frame{aspect-ratio:16/8}
}

@media (min-width:1000px){
  .svc-grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1100px){
  .ai-steps-page{grid-template-columns:repeat(5,1fr)}
  .ai-steps-page li:last-child{grid-column:auto}
}

@media (max-width:899px){
  .phero-h1{max-width:none}
  .pull{position:relative}   /* 2026-10-09: static let the gold accent bar escape to the section corner on phones */
}

@media (max-width:767px){
  .phero{padding-top:calc(var(--header-h) + 30px)}
  .phero-cta{gap:12px}
  .phero-cta .btn{width:100%;justify-content:space-between}
  .casehero-fig:not(.is-native) .parallax-frame{aspect-ratio:4/3}
  .bio-side{flex-direction:row;align-items:center;gap:16px}
  .bio-side .portrait{max-width:104px;flex:0 0 104px}
  .short-links{gap:14px;flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .phero-glow{animation:none;transform:none}
}

/* --------------------------------------------------------------------------
   THE NAVIGATION SYSTEM FIGURE · per-node affordance
   The drawing ships its own .has-active / .is-active styling; these are the two
   things a static file cannot carry: the pointer affordance and a visible focus
   ring, since pages.js promotes every .cns-node to a real keyboard-reachable
   link into its own condition article.
   -------------------------------------------------------------------------- */
.cns-system .cns-node[role="link"]{cursor:pointer}
.cns-system .cns-node[role="link"]:focus-visible{outline:2px solid var(--accent-deep);outline-offset:4px;border-radius:6px}
.cns-system .cns-node[role="link"]:hover .cns-label{font-weight:600}

/* Area revisions: explanatory placeholders and editable gradient text. */
.area-how{margin-top:clamp(28px,4vw,48px);max-width:65ch;display:grid;gap:18px;min-width:0}
.area-how p,.area-how li{color:var(--ink-2);font-size:1.02rem}
.area-how ul{list-style:disc;padding-left:1.25em;display:grid;gap:8px}
.path-def{display:block;color:var(--muted);font-size:.85rem;font-weight:400;line-height:1.5;letter-spacing:normal;text-transform:none;max-width:60ch;overflow-wrap:anywhere}
.path-mention{display:inline-block;vertical-align:top;max-width:100%}
.phero-h1 .area-heading-gradient{
  font-style:normal;font-weight:inherit;
  background:linear-gradient(96deg,var(--accent-deep),var(--accent) 46%,var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
}
/* This section is the listing masthead as well as its native accordion. */
.areas-listing #areas{padding-top:calc(var(--header-h) + clamp(30px,5vw,72px))}

/* Keep the existing contents numerals visible as editable text. */
.area-detail-page .toc-list a::before{content:none}
.area-detail-page .toc-num{
  font-family:var(--display);font-variation-settings:normal;
  font-size:.74rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.area-heading-gradient[contenteditable="true"]{caret-color:var(--ink)}

/* 2026-10-09 Khaled: Facilitation "Our approach" carries his working-session photo.
   Heading and text in the left column, photo and quote in the right; one column on phones. */
.approach-photo-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.approach-photo-side{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem)}
.approach-photo{--radius:1.8rem;margin:0}
.approach-photo .bezel-in{padding:0}
.approach-photo img{display:block;width:100%;height:auto}
@media (min-width:900px){
  .approach-photo-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2.5rem,5vw,5rem)}
  .approach-photo-side .pull{position:relative;top:auto}
}

/* 2026-10-09 Khaled: Workshop "Plan your workshop" checklist under the lede. */
.plan-ask{color:var(--ink);font-weight:600;margin-bottom:12px}
.plan-ticks li{font-size:.98rem}

/* 2026-10-09 Khaled: Contact page newsletter card carries his van photo.
   Photo on top on phones; from 900px the photo fills the left and copy plus form stack on the right. */
.news-has-photo .bezel-in{grid-template-areas:"photo" "copy" "form"}
.news-has-photo .news-photo{grid-area:photo;margin:0;position:relative;aspect-ratio:16/10;border-radius:1.2rem;overflow:hidden;background:var(--bg-2)}
.news-has-photo .news-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:12% 62%}
.news-has-photo .news-copy{grid-area:copy}
.news-has-photo .news-form,.news-has-photo .news-done{grid-area:form}
@media (min-width:900px){
  .news-has-photo .bezel-in{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-areas:"photo copy" "photo form";row-gap:clamp(1.25rem,2.2vw,1.75rem)}
  .news-has-photo .news-photo{aspect-ratio:auto;min-height:280px;align-self:stretch}
}

/* 2026-10-10 Khaled: Strategy, Culture and Change & Communications approach sections carry his graphics.
   Same grid as Facilitation; with no quote under it, the graphic centres on the text column. */
@media (min-width:900px){
  .approach-figure-only{align-items:center}
}

/* 2026-10-10 Khaled: the expanded "full note" is a quote too. It opens and closes with the same gold
   marks as the quote above it (pseudo-elements, so the editor can never delete or double them). */
.voice-more-body p:first-child::before,
.voice-more-body p:last-child::after{
  display:inline-block;font-family:var(--display);line-height:0;color:var(--accent);
  font-size:2.1em;vertical-align:-.36em;
}
.voice-more-body p:first-child::before{content:"\201C";margin-right:.08em}
.voice-more-body p:last-child::after{content:"\201D";margin-left:.06em}