/* halo-type-system.css — v10 typography & rhythm system (experimental copy).
   Loads LAST on every page. Brand stays: HALO yellow, Poppins headings, Arial body, 1240px column.
   What it fixes (audit, 1440px, before):
     h3 used 16 sizes, paragraphs 13 sizes, section padding 14 combos, heading→content gap 16 combos.
   Rule of thumb: every text element maps to ONE tier below; every gap is a multiple of 8px. */

:root{
  /* Type tiers (fluid; value at 1440px in comments) */
  --t-display: clamp(48px, 6.3vw, 100px);  /* 91  page title (h1)            */
  --t-h2:      clamp(32px, 4.3vw, 62px);   /* 62  section title              */
  --t-h3:      clamp(26px, 2.6vw, 38px);   /* 38  step / sub-section title   */
  --t-h4:      clamp(20px, 1.8vw, 26px);   /* 26  card / list-item title     */
  --t-lead:    clamp(18px, 1.55vw, 22px);  /* 22  intro under a title        */
  --t-body:    16px;                       /*     running text               */
  --t-small:   14px;                       /*     card text, notes           */
  --t-caption: 12px;                       /*     disclaimers, credits       */
  --t-label:   12px;                       /*     eyebrow (uppercase)        */

  /* Spacing: 8px grid */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px;
  --s-section: clamp(72px, 8.3vw, 120px);  /* 120 every section, top = bottom */
  --s-hero-top: clamp(64px, 6.7vw, 96px);  /* 96  first section on a page    */

  --measure: 65ch;        /* comfortable reading line */
  --measure-lead: 46ch;
  --ink: #0a0a0a; --ink-2: #4b4f53; --ink-3: #6b6f73;
}

/* ---------- 1. Type tiers ---------- */
/* one heading family everywhere (some case files forced Arial on h3 / big quotes) */
body main h1, body main h2, body main h3, body > section h2, body > section h3, body .bigquote, body .sectiontitle{font-family:Poppins,Arial,sans-serif!important}
body .bigquote{font-size:var(--t-h2)!important;line-height:1.15!important;letter-spacing:-.045em!important}
body main h1, body.case-page .hero h1{font-size:var(--t-display)!important;line-height:1.06!important;letter-spacing:-.05em!important}
body main h2, body > section h2, body .sectiontitle, body .sec-title{font-size:var(--t-h2)!important;line-height:1.1!important;letter-spacing:-.045em!important}
body main h2 .grey, body .sectiontitle .grey{color:#a3a3a3}

/* h3 default = card title; larger steps/sub-sections promoted to --t-h3 */
body main h3{font-family:Poppins,Arial,sans-serif;font-size:var(--t-h4)!important;line-height:1.3!important;letter-spacing:-.025em!important;font-weight:500}
body .step > h3, body .zone > h3, body .framework-card > h3, body .identity-intro > h3,
body h3.vision-medium, body .shiftpanel h3, body.method-page .step h3{font-size:var(--t-h3)!important;line-height:1.18!important;letter-spacing:-.035em!important}
/* accordion / list titles (index services) were Arial with display tracking */
body .service-item summary strong{font:500 var(--t-h4)/1.3 Poppins,Arial,sans-serif!important;letter-spacing:-.025em!important}
/* tiny uppercase "h3"s inside diagrams act as labels */
body .diagram h3, body .box h3{font:700 var(--t-label)/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase}
/* intentional art type (giant statement words) is left untouched: .message-board-main h3, p.quote, .box p */

/* paragraphs */
body main p, body > section p{font-size:var(--t-body)!important;line-height:1.7!important;color:var(--ink-2)}
/* lead = short intro right under a page/hero title */
body .lead, body .intro, body main > .hero .wrap > p, body .hero-right .lead{font-size:var(--t-lead)!important;line-height:1.55!important;color:#555!important;max-width:var(--measure-lead)!important}
/* longer explanatory paragraphs under a section title: one step above body, normal measure */
body .smalllead, body .vision-lead, body .statement, body .sec-intro{font-size:18px!important;line-height:1.65!important;color:var(--ink-2)!important;max-width:60ch!important}
body .step p, body .zone p, body .zone-card p, body .card p, body .method-card p, body .perspective p,
body .result p, body .decision-note, body p.note, body .article p, body li{font-size:var(--t-small)!important;line-height:1.65!important}
body .disclaimer, body .diagram-disclaimer, body .venn-caption, body .credit, body .zone-note, body .footnote,
body main small{font-size:var(--t-caption)!important;line-height:1.5!important;color:var(--ink-3)!important}
body p.quote{font-size:var(--t-h2)!important;line-height:1.15!important}
body .box p{font-size:var(--t-h3)!important;line-height:1.25!important}

/* labels / eyebrows: one style everywhere */
body main .eyebrow, body > section .eyebrow{font:700 var(--t-label)/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#525252!important}
/* one label per section head: drop the secondary right-hand label */
body .sectionhead .eyebrow.muted{display:none!important}
body .sectionhead{justify-content:flex-start!important}

/* ---------- 2. Reading measure ---------- */
body main p, body > section p{max-width:var(--measure)}
body main .card p, body main .step p{max-width:none}

/* ---------- 3. Vertical rhythm (8px grid) ---------- */
body main .eyebrow, body .sectionhead{margin:0 0 var(--s-3)!important}
body main h1{margin:0 0 var(--s-3)!important}
body main h2, body .sectiontitle, body .sec-title{margin:0 0 var(--s-3)!important}
body main h3{margin:0 0 var(--s-1)!important}
body main p, body > section p{margin:0 0 var(--s-2)!important}
body main p:last-child, body > section p:last-child{margin-bottom:0!important}
/* head block → content */
body .sectionintro, body .sec-head{margin-bottom:var(--s-6)!important}
body h2.sectiontitle + p, body h2.sectiontitle + .smalllead{margin-bottom:var(--s-6)!important}

/* section padding: one value, top = bottom */
body main > section, body main > .section, body.method-page > section, body.method-page main > .section,
body.case-page main > section{padding-top:var(--s-section)!important;padding-bottom:var(--s-section)!important}
/* first block on a page */
body main > section:first-child:not(:has(.halo-motion)), body .pagehero, body .insights-top, body.method-page main > .hero{padding-top:var(--s-hero-top)!important;padding-bottom:var(--s-8)!important}
body.case-page main > section.hero{padding-top:var(--s-6)!important}

/* ---------- 4. Scroll comfort ---------- */
/* anchors land below the sticky 80px header */
:where(h1,h2,h3,section,[id]){scroll-margin-top:96px}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}

/* reveal: faster and shorter so text never lags behind the reader */
body .reveal{transition:opacity .35s ease-out, transform .35s ease-out!important;transform:translateY(10px)}
body .reveal.show{transform:none}
@media (prefers-reduced-motion: reduce){body .reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* reading progress on long case-study pages (CSS scroll-driven; no JS, no scroll listener) */
@supports (animation-timeline: scroll()){
  body.case-page::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:#FCB632;transform-origin:0 50%;transform:scaleX(0);z-index:60;animation:halo-progress linear both;animation-timeline:scroll(root)}
  @keyframes halo-progress{to{transform:scaleX(1)}}
}

/* visible keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid #FCB632;outline-offset:3px;border-radius:4px}

/* ---------- 5. Mobile ---------- */
@media (max-width: 800px){
  :root{--s-section:48px;--s-hero-top:40px}
  body main h3{font-size:20px!important}
  /* stacked heads and leads: one step tighter on small screens */
  body .sectionintro, body .sec-head, body h2.sectiontitle + p, body h2.sectiontitle + .smalllead,
  body main > .section .sectionintro:has(+ .method-cards){margin-bottom:var(--s-4)!important}
  /* home hero: orbs sit in the flow on mobile, so drop the desktop space reserved for them */
  body main > section.hero{min-height:0!important}
  body main > section.hero > .wrap{min-height:0!important;padding-bottom:0!important}
  /* the section padding already ends the section: drop trailing margins of its last block */
  body main section > :last-child, body main section > .wrap > :last-child, body main section > .wrap > :last-child > :last-child{margin-bottom:0!important}
  html body.method-page main .perspective, html body.method-page main .step{padding-bottom:var(--s-4)!important}
}

/* ---------- 6. Case-study hero facts (Hanwha format, shared by every case page) ---------- */
/* Client / Year / Role / Sector in equal columns under a hairline; 3 or 4 items both fill the row */
body .case-meta{display:flex!important;gap:0!important;margin:var(--s-6) 0 0!important;padding:var(--s-3) 0 0!important;border-top:1px solid #e3e3e1!important;max-width:620px;text-transform:none!important;letter-spacing:normal!important}
body .case-meta .meta-item{flex:1 1 0;min-width:0;padding:0 var(--s-2)!important;border-right:1px solid #e7e7e7!important}
body .case-meta .meta-item:first-child{padding-left:0!important}
body .case-meta .meta-item:last-child{border-right:0!important;padding-right:0!important}
body .case-meta .meta-item strong{display:block;font:700 var(--t-caption)/1.5 Arial,Helvetica,sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase;color:#8a8a8a!important;margin-bottom:var(--s-2)!important}
body .case-meta .meta-item span{display:block;font:400 var(--t-small)/1.55 Arial,Helvetica,sans-serif!important;color:#393839!important;text-transform:none!important;letter-spacing:normal!important}
body .case-meta .meta-year{flex:.55 1 0}
body .case-meta .meta-role{flex:1.7 1 0}
body .case-meta-note{margin-top:var(--s-2)!important;font-size:var(--t-caption)!important;line-height:1.5!important;color:var(--ink-3)!important}
@media (max-width:800px){
  body .case-meta{display:grid!important;grid-template-columns:1fr 1fr!important;row-gap:var(--s-3)!important;max-width:none}
  body .case-meta .meta-item:nth-child(odd){padding-left:0!important}
  body .case-meta .meta-item:nth-child(even){border-right:0!important;padding-right:0!important}
}

/* ---------- 7. Case-study hero: one composition for every case page (Hanwha format) ---------- */
/* eyebrow "Client / Project · Year" → title → lead → facts row  |  one 4:3 image on the right */
body.case-page main section.hero{padding:var(--s-6) 0 var(--s-section)!important;min-height:0!important}
body.case-page .hero-grid, body.case-page main > .wrap > section.hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;column-gap:clamp(40px,5vw,72px)!important;row-gap:var(--s-6)!important;align-items:center!important}
body.case-page section.hero .eyebrow{margin-top:0!important}
body.case-page section.hero h1{margin-top:0!important}
body.case-page .heroimage, body.case-page .visual.real-cover, body.case-page .saju-hero-art{width:100%!important;min-height:0!important;aspect-ratio:4/3;overflow:hidden;margin:0!important;padding:0!important}
body.case-page .heroimage > img, body.case-page .visual.real-cover img, body.case-page .saju-hero-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center;display:block}
body.case-page .saju-hero-art img{object-position:center top}
/* DOBANO hero is a product card (title strip + cut-out photo): keep it whole, same 4:3 box */
body.case-page .heroimage.dobano-hero{aspect-ratio:auto}
@media (max-width:800px){
  body.case-page .hero-grid, body.case-page main > .wrap > section.hero{grid-template-columns:1fr!important}
}

/* ---------- 8. Home "The Gap": stacked header (eyebrow → title → text → link), no left/right split ---------- */
body main > .section .gaplayout{display:block!important}
body .gaplayout h2{max-width:760px}
body .gap-summary{max-width:60ch!important;margin-top:var(--s-3)}
body .gap-summary .sub{font-size:18px!important;line-height:1.65!important;color:var(--ink-2)!important;max-width:60ch!important;margin:0 0 var(--s-3)!important}

/* ---------- 9. Home "The Method": stacked like The Gap (eyebrow → title → text → button) ---------- */
body main > .section .sectionintro:has(+ .method-cards){display:block!important;margin-bottom:var(--s-6)!important}
body .method-summary{max-width:60ch!important;margin-top:var(--s-3)}
body .method-summary p{max-width:60ch!important;font-size:18px!important;line-height:1.65!important;color:var(--ink-2)!important;margin:0 0 var(--s-3)!important}

/* ---------- 10. Method approach / process cards: label + title + one line only, height follows content ---------- */
body.method-page .perspective, body.method-page .step{min-height:0!important;height:auto!important;padding-bottom:var(--s-6)!important}

/* ---------- 11. Method page: alternate section backgrounds (same grey as home .soft) ---------- */
/* hero white → approach grey → process white → difference grey → yellow CTA. Colour separates sections, so no hairlines. */
body.method-page main > .section{border-top:0!important}
body.method-page main > .section:nth-of-type(even){background:#f5f5f4;box-shadow:0 0 0 100vmax #f5f5f4;clip-path:inset(0 -100vmax)}
body.method-page main > .section:nth-of-type(even) .perspective:not(:last-child){background:#fff!important}

/* ---------- 12. Controls: one size per kind, everywhere ---------- */
/* action buttons (solid, ghost, CTA, form submit) = same as the top-menu button */
body main .button, body > section .button, body form button, body form .button{font-size:13px!important;font-weight:700!important;line-height:1.4!important}
/* filter chips (Cases, Insights) */
body .filterbar .filter, body .insights-filters button{font-size:14px!important;font-weight:400!important}
/* inline text links with ↗ */
body main .textlink{font-size:14px!important}
/* forms: labels 14, fields 16 (16px+ stops iOS zoom-on-focus) */
body label.field, body form label{font-size:14px!important;line-height:1.5!important}
body input, body select, body textarea{font-size:16px!important;line-height:1.5!important}

/* ---------- 13. Cases cards: image fills the card column, tags read as small labels ---------- */
body .grid .card .art{width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:4/3}
body .grid .card .art img{width:100%!important;height:100%!important}
body .card .tag{font-size:var(--t-label)!important;letter-spacing:.1em!important;line-height:1.4!important}

/* ---------- 14. Clients & partners: fixed 6-column logo grid; a 7th+ logo starts a new aligned row ---------- */
body .brandstrip .logos{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-4) var(--s-6);align-items:center;justify-items:center}
@media (max-width:800px){body .brandstrip .logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* optical balance: heavy bold wordmarks read larger at the same height */
body .logo-item img[src*="client-sajugpt"]{height:22px!important}
/* Hanwha Intelligence PNG has wide transparent padding: enlarge so its mark matches the others */
body .logo-item img[src*="client-intelligence"]{height:52px!important}

/* ---------- 15. Home hero diagram: intent and perception meet, shared understanding appears ---------- */
/* Uses the individual `translate` property so the orbs' own transform (centering) is untouched.
   1) start apart, no overlap, no centre label  2) glide inward ~3s  3) label fades in as the overlap forms
   4) gentle breathing (orbs stay overlapped). Reduced motion: final state, no animation. */
.hero .halo-motion{--orb-travel:110px}
@media (max-width:800px){.hero .halo-motion{--orb-travel:56px}}
@media (prefers-reduced-motion: no-preference){
  .hero .halo-orb-a, .hero .halo-label-a{animation:halo-in-a 3.2s cubic-bezier(.22,.61,.36,1) .3s both, halo-breathe-a 6s ease-in-out 3.5s infinite alternate}
  .hero .halo-orb-b, .hero .halo-label-b{animation:halo-in-b 3.2s cubic-bezier(.22,.61,.36,1) .3s both, halo-breathe-b 6s ease-in-out 3.5s infinite alternate}
  /* labels travel less than the orbs so they never start outside the screen */
  .hero .halo-orb-label{--orb-travel:48px}
  @media (max-width:1180px){.hero .halo-orb-label{--orb-travel:24px}}
  @media (max-width:800px){.hero .halo-orb-label{--orb-travel:0px}}
  .hero .halo-aligned{animation:halo-shared-in 1.2s ease-out 1s both}
}
@keyframes halo-in-a{from{translate:calc(-1 * var(--orb-travel)) 0}to{translate:0 0}}
@keyframes halo-in-b{from{translate:var(--orb-travel) 0}to{translate:0 0}}
@keyframes halo-breathe-a{from{translate:0 0}to{translate:-10px 0}}
@keyframes halo-breathe-b{from{translate:0 0}to{translate:10px 0}}
@keyframes halo-shared-in{from{filter:opacity(0) blur(6px);scale:.92}to{filter:opacity(1) blur(0);scale:1}}