/*
  Maison Strategy, Signal House concept
  A lively editorial system built from paper, type, colour and connected signals.
*/
:root {
  --signal-ink:#171511;
  --signal-paper:#f4f0e7;
  --signal-white:#fffdf7;
  --signal-orange:#ff5a36;
  --signal-blue:#4657f2;
  --signal-lime:#c9f25d;
  --signal-pink:#f4a7bf;
  --signal-sand:#ddcfba;
  --navy-900:var(--signal-ink);
  --navy-800:var(--signal-ink);
  --navy-700:#25231e;
  --cream-050:var(--signal-white);
  --cream-100:var(--signal-paper);
  --cream-200:#e8dfd1;
  --cream-300:var(--signal-sand);
  --accent-600:#cf3213;
  --accent-500:var(--signal-orange);
  --accent-400:var(--signal-orange);
  --accent-tint:#ffe1d8;
  --ink:var(--signal-ink);
  --ink-soft:#58544c;
  --ink-mute:#706b62;
  --line:#bdb4a6;
  --line-strong:#938a7c;
  --bg:var(--signal-paper);
  --bg-raised:var(--signal-white);
  --font-display:"Instrument Serif", Georgia, serif;
  --font-body:"DM Sans",sans-serif;
  --radius-sm:0;
  --radius:0;
  --radius-lg:0;
  --shadow-sm:none;
  --shadow-md:12px 12px 0 var(--signal-ink);
  --shadow-lg:20px 20px 0 var(--signal-ink);
  --maxw:1340px;
}

html,body { overflow-x:clip; }
body { background:var(--signal-paper); color:var(--signal-ink); }
body::before { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; letter-spacing:-.035em; }
h1 { line-height:.84; }
h2 { line-height:.92; }
h1 em { font-weight:400; color:var(--signal-orange); }
.eyebrow { font-family:var(--font-body); font-size:.7rem; font-weight:700; letter-spacing:.2em; color:inherit; }
.eyebrow::before { width:8px; height:8px; border-radius:50%; background:var(--signal-orange); opacity:1; }
.lede { color:var(--ink-soft); }
.muted { color:var(--ink-mute); }

/* Header */
.site-header { background:rgba(244,240,231,.91); border-bottom:1px solid var(--signal-ink); backdrop-filter:blur(12px); }
.site-header .container { max-width:none; }
.nav { min-height:82px; }
.brand__mark { width:44px; height:44px; }
.brand__mark circle { fill:var(--signal-orange); }
.brand > span { font-family:var(--font-body); font-weight:700; font-size:1rem; }
.brand small { color:var(--ink-mute); font-size:.56rem; letter-spacing:.18em; }
.nav__links { gap:0; border:1px solid var(--signal-ink); background:var(--signal-white); }
.nav__links li + li { border-left:1px solid var(--signal-ink); }
.nav__links a { padding:.72rem 1rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; }
.nav__links a:hover,.nav__links a[aria-current="page"] { background:var(--signal-lime); color:var(--signal-ink); }
.nav__links a[aria-current="page"]::after { display:none; }

.btn { border-radius:0; min-height:48px; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:700; border:1px solid var(--signal-ink); box-shadow:none; }
.btn--primary { background:var(--signal-orange); color:var(--signal-ink); border-color:var(--signal-ink); }
.btn--primary:hover { background:var(--signal-lime); color:var(--signal-ink); transform:translate(-4px,-4px); box-shadow:4px 4px 0 var(--signal-ink); }
.btn--ghost { background:transparent; border-color:currentColor; }
.btn--ghost:hover { background:var(--signal-ink); color:var(--signal-white); transform:translate(-4px,-4px); box-shadow:4px 4px 0 var(--signal-orange); }
.btn--lg { min-height:58px; }

/* Hero */
.hero { min-height:calc(100svh - 82px); padding:0; border-bottom:1px solid var(--signal-ink); background:var(--signal-paper); }
.hero .container { max-width:none; padding:0; }
.hero__grid { min-height:calc(100svh - 82px); grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr); gap:0; }
.hero__copy { padding:clamp(4rem,8vw,8rem) max(var(--gutter),calc((100vw - 1340px)/2 + var(--gutter))); padding-right:clamp(2rem,6vw,6rem); display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.hero__copy::after { content:"01 / SIGNAL"; position:absolute; right:1.4rem; top:1.4rem; font:700 .65rem/1 var(--font-body); letter-spacing:.18em; writing-mode:vertical-rl; }
.hero__copy h1 { max-width:9ch; font-size:clamp(4.5rem,8.2vw,9.6rem); margin-top:1.4rem; }
.hero__lede { max-width:52ch; margin-top:2.2rem; font-size:clamp(1.08rem,1.3vw,1.35rem); }
.hero__cta { margin-top:2.2rem; }
.hero__reassure { border-top:1px solid var(--signal-ink); padding-top:1rem; margin-top:1.4rem; max-width:52ch; }
.hero__art { min-height:680px; height:100%; display:grid; place-items:center; padding:clamp(2rem,5vw,5rem); background:var(--signal-blue); border-left:1px solid var(--signal-ink); overflow:hidden; position:relative; }
.hero__art::before { content:"CLARITY\A BUILDS\A TRUST"; white-space:pre; position:absolute; left:1.2rem; top:1.2rem; font:700 .67rem/1.5 var(--font-body); letter-spacing:.15em; color:white; }
.hero__art::after { content:""; position:absolute; width:56%; aspect-ratio:1; border:1px solid rgba(255,255,255,.4); border-radius:50%; right:-20%; bottom:-10%; animation:orbit 12s linear infinite; }
.hero__art svg { position:relative; z-index:2; width:min(100%,570px); transform:rotate(-4deg); filter:drop-shadow(18px 18px 0 rgba(23,21,17,.7)); animation:float-card 6s ease-in-out infinite; }
.hero__art svg rect { fill:var(--signal-lime); stroke:var(--signal-ink); rx:0; }
.hero__art svg g { stroke:var(--signal-ink); }
.hero__art svg circle { fill:var(--signal-orange); }
.hero__art svg circle:nth-of-type(2n) { fill:var(--signal-ink); }
@keyframes float-card { 50% { transform:rotate(1deg) translateY(-12px); } }
@keyframes orbit { to { transform:rotate(360deg); } }

.signal-strip { overflow:hidden; border-bottom:1px solid var(--signal-ink); background:var(--signal-lime); padding:.8rem 0; font:700 .72rem/1 var(--font-body); letter-spacing:.15em; white-space:nowrap; }
.signal-strip > div { width:max-content; animation:ticker 24s linear infinite; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* Global section language */
.section { border-bottom:1px solid var(--signal-ink); position:relative; }
.section-head { max-width:780px; }
.section-head h2 { max-width:13ch; }
.section-head.center h2 { margin-inline:auto; }
.section-head p { color:var(--ink-soft); }
.bg-cream-2 { background:var(--signal-sand); }
.bg-white { background:var(--signal-white); }
.bg-navy { background:var(--signal-lime); color:var(--signal-ink); --ink:var(--signal-ink); --ink-soft:#494e31; --ink-mute:#5d633d; --line:rgba(23,21,17,.35); --line-strong:rgba(23,21,17,.7); --accent:var(--signal-orange); }
.bg-navy h2,.bg-navy h3 { color:var(--signal-ink); }

/* Problem */
.hero + .signal-strip + .section { background:var(--signal-orange); }
.hero + .signal-strip + .section .section-head { background:var(--signal-white); padding:clamp(1.7rem,4vw,3.2rem); border:1px solid var(--signal-ink); box-shadow:12px 12px 0 var(--signal-ink); }
.checklist { gap:0; border-top:1px solid var(--signal-ink); }
.checklist li { padding:1.25rem .3rem; border-bottom:1px solid var(--signal-ink); }
.checklist svg { color:var(--signal-ink); }

/* Home services */
#services { background:var(--signal-white); }
#services .cols-4 { grid-template-columns:repeat(12,1fr); gap:1px; background:var(--signal-ink); border:1px solid var(--signal-ink); }
#services .card { grid-column:span 6; min-height:330px; display:flex; flex-direction:column; border:0; background:var(--signal-paper); padding:clamp(1.5rem,3vw,2.5rem); }
#services .card:nth-child(2) { background:var(--signal-pink); }
#services .card:nth-child(3) { background:var(--signal-lime); }
#services .card:nth-child(4) { background:var(--signal-blue); color:white; }
#services .card:nth-child(4) h3,#services .card:nth-child(4) p,#services .card:nth-child(4) .textlink { color:inherit; }
#services .card:hover { transform:none; filter:brightness(.96); }
#services .card h3 { margin-top:auto; font-size:clamp(2.2rem,4vw,4.5rem); max-width:8ch; }
#services .card__icon { width:54px; height:54px; border:1px solid currentColor; border-radius:50%; background:transparent; }
#services .card__meta { margin-top:1.5rem; }

/* Process */
.process { border:1px solid var(--signal-ink); background:var(--signal-ink); gap:1px; }
.pstep { background:var(--signal-lime); min-height:330px; padding:1.5rem; }
.pstep:nth-child(even) { background:var(--signal-white); }
.pstep__num { width:48px; height:48px; background:var(--signal-orange); color:var(--signal-ink); border:1px solid var(--signal-ink); }
.pstep__line { background:var(--signal-ink); }
.pstep p { color:#4f523d; }

/* Team */
.team-section { background:var(--signal-white); }
.team-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,8vw,8rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.team-intro h2 { max-width:12ch; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--signal-ink); }
.person-card { display:block; border-right:1px solid var(--signal-ink); background:var(--signal-paper); transition:transform .3s ease,box-shadow .3s ease; }
.person-card:last-child { border-right:0; }
.person-card:hover { z-index:2; transform:translate(-7px,-7px); box-shadow:7px 7px 0 var(--signal-ink); }
.person-card__visual { position:relative; aspect-ratio:4/4.7; overflow:hidden; display:grid; place-items:center; border-bottom:1px solid var(--signal-ink); }
.person-card__visual::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(23,21,17,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(23,21,17,.13) 1px,transparent 1px); background-size:44px 44px; }
.person-card__initials { position:relative; z-index:2; font:400 clamp(6rem,10vw,10rem)/1 var(--font-display); letter-spacing:-.08em; }
.person-card__index { position:absolute; left:1.1rem; top:1rem; z-index:3; font:700 .65rem/1 var(--font-body); letter-spacing:.18em; }
.person-card__visual svg { position:absolute; inset:7%; width:86%; height:86%; stroke:currentColor; stroke-width:1.2; opacity:.38; }
.person-card__visual circle { fill:currentColor; }
.person-card--khoa .person-card__visual { background:var(--signal-orange); color:var(--signal-ink); }
.person-card--slot-two .person-card__visual { background:var(--signal-blue); color:white; }
.person-card--slot-three .person-card__visual { background:var(--signal-pink); color:var(--signal-ink); }
.person-card__body { min-height:125px; display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; padding:1.2rem; }
.person-card__body h3 { font-size:clamp(1.8rem,3vw,2.8rem); margin-top:.15rem; }
.person-card__role { font:700 .62rem/1 var(--font-body); text-transform:uppercase; letter-spacing:.14em; color:var(--ink-mute); }
.person-card--empty { cursor:default; }
.person-card--empty:hover { z-index:auto; transform:none; box-shadow:none; }
.person-card--empty .person-card__initials { font-family:var(--font-body); font-size:clamp(4rem,7vw,7rem); font-weight:300; letter-spacing:0; opacity:.42; }
.person-card__body--empty > div { width:100%; }
.placeholder-line { display:block; width:68%; height:18px; background:rgba(23,21,17,.11); }
.placeholder-line--short { width:28%; height:7px; margin-bottom:1rem; }
.linkedin-pill { display:flex; align-items:center; gap:.3rem; font:700 .66rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; }
.linkedin-pill svg { width:16px; height:16px; }
.team-note { margin-top:1.4rem; padding-left:1rem; border-left:8px solid var(--signal-orange); color:var(--ink-mute); }

/* Ecosystem exhibition */
.ecosystem-section { background:var(--signal-ink); color:var(--signal-white); --ink:var(--signal-white); --ink-soft:#c9c2b8; --ink-mute:#aaa397; --line:rgba(255,255,255,.2); }
.ecosystem-head { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,8vw,8rem); align-items:end; margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.ecosystem-head h2 { color:var(--signal-white); max-width:12ch; }
.ecosystem-head .lede { color:#c9c2b8; }
.disclosure { margin-top:1.2rem; padding:1rem; border:1px solid rgba(255,255,255,.35); font-size:.75rem; color:#b9b2a7; }
.project-mosaic { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--signal-white); border:1px solid var(--signal-white); }
.ecosystem-card { min-height:300px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:1.2rem; overflow:hidden; transition:transform .3s ease; }
.ecosystem-card--wide { grid-column:span 2; }
.ecosystem-card:hover { z-index:3; transform:translate(-6px,-6px); box-shadow:6px 6px 0 var(--signal-white); }
.ecosystem-card__num { font:700 .62rem/1 var(--font-body); letter-spacing:.18em; }
.ecosystem-card h3 { color:inherit; font-size:clamp(2.2rem,4vw,4rem); }
.ecosystem-card div > span { font:700 .62rem/1 var(--font-body); letter-spacing:.13em; text-transform:uppercase; }
.ecosystem-card > b { position:absolute; right:1.2rem; bottom:1.2rem; font-size:1.2rem; }
.project-glyph { position:absolute; right:4%; top:8%; font:400 clamp(8rem,13vw,14rem)/1 var(--font-display); opacity:.13; transform:rotate(7deg); }
.tone-cobalt { background:var(--signal-blue); color:white; }
.tone-blue { background:var(--signal-lime); color:var(--signal-ink); }
.tone-ink { background:#28251f; color:var(--signal-white); }
.tone-sand { background:var(--signal-pink); color:var(--signal-ink); }
.tone-cream { background:var(--signal-orange); color:var(--signal-ink); }

/* Reframe and CTA */
.reframe { border:1px solid var(--signal-ink); border-radius:0; }
.reframe__col--old { background:var(--signal-paper); }
.reframe__col--new { background:var(--signal-blue); color:white; }
.reframe__col--new h4 { color:var(--signal-lime); }
.cta-band { border:1px solid var(--signal-ink); border-radius:0; background:var(--signal-orange); color:var(--signal-ink); box-shadow:12px 12px 0 var(--signal-ink); }
.cta-band h2 { color:var(--signal-ink); }
.cta-band::after { content:"M"; position:absolute; right:-.04em; bottom:-.38em; font:400 24rem/1 var(--font-display); color:rgba(23,21,17,.08); }
.cta-band .btn--primary { background:var(--signal-lime); }

/* Interior pages */
.page-hero { min-height:72svh; display:flex; align-items:end; background:var(--signal-blue); color:white; border-bottom:1px solid var(--signal-ink); position:relative; overflow:hidden; }
.page-hero::after { content:""; position:absolute; width:38vw; height:38vw; border-radius:50%; background:var(--signal-orange); right:-10vw; top:-14vw; mix-blend-mode:multiply; }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { color:white; max-width:10ch; font-size:clamp(4.5rem,9vw,9rem); }
.page-hero .lede { color:#e4e3ff; max-width:52ch; }
.value { border-top:1px solid var(--signal-ink); padding-top:1.5rem; }
.pkg { border:1px solid var(--signal-ink); border-radius:0; background:var(--signal-white); box-shadow:none; }
.pkg:nth-child(1) { background:var(--signal-pink); }
.pkg:nth-child(3) { background:var(--signal-lime); }
.pkg--featured { background:var(--signal-blue); color:white; transform:translateY(-14px); box-shadow:10px 10px 0 var(--signal-ink); }
.pkg--featured h2,.pkg--featured h3,.pkg--featured p,.pkg--featured li,.pkg--featured .pkg__price b { color:inherit; }
.acc__item { border-left:0; border-right:0; border-color:var(--signal-ink); }
.acc__q { font-family:var(--font-display); font-size:clamp(1.4rem,2.5vw,2.1rem); }
.vstep__num { background:var(--signal-orange); color:var(--signal-ink); border:1px solid var(--signal-ink); }
.form-card { border:1px solid var(--signal-ink); border-radius:0; box-shadow:12px 12px 0 var(--signal-ink); background:var(--signal-white); }
input,select,textarea { border-radius:0; border-color:var(--signal-ink); background:var(--signal-paper); }
input:focus,select:focus,textarea:focus { border-color:var(--signal-blue); box-shadow:0 0 0 3px rgba(70,87,242,.18); }
.contact-card { border-radius:0; border-color:var(--signal-ink); }

/* Footer */
.site-footer { background:var(--signal-ink); color:var(--signal-white); border-top:0; }
.site-footer a:hover { color:var(--signal-lime); }
.footer__bottom { border-color:rgba(255,255,255,.2); }

@media (max-width:960px) {
  .hero { min-height:auto; }
  .hero__grid { min-height:auto; grid-template-columns:1fr; }
  .hero__copy { min-height:720px; padding:6rem var(--gutter); }
  .hero__art { min-height:540px; border-left:0; border-top:1px solid var(--signal-ink); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .person-card:nth-child(2) { border-right:0; }
  .person-card:last-child { grid-column:1 / -1; width:50%; border-top:1px solid var(--signal-ink); border-right:1px solid var(--signal-ink); }
  .project-mosaic { grid-template-columns:repeat(2,1fr); }
  .process { background:transparent; }
}

@media (max-width:860px) {
  .nav__menu { background:var(--signal-paper); border-left:1px solid var(--signal-ink); }
  .nav__links { border:0; background:transparent; width:100%; }
  .nav__links li + li { border-left:0; border-top:1px solid var(--signal-ink); }
  .nav__links a { font:400 2.6rem/1 var(--font-display); text-transform:none; letter-spacing:-.03em; }
  .nav__close { border-radius:0; border-color:var(--signal-ink); }
}

@media (max-width:640px) {
  .nav { min-height:70px; }
  .brand small { display:none; }
  .brand > span { white-space:nowrap; font-size:.9rem; }
  .nav > .nav__actions > .btn { display:none; }
  .nav > .nav__actions { margin-left:auto !important; }
  .hero__copy { order:1; min-height:670px; padding:4.5rem var(--gutter); }
  .hero__art { order:2; min-height:420px; padding:2rem; }
  .hero__copy h1 { font-size:clamp(4rem,18vw,5.8rem); }
  .hero__cta { display:grid; grid-template-columns:1fr; }
  .hero__cta .btn { width:100%; }
  .hero__copy::after { display:none; }
  .section { padding-block:4.8rem; }
  #services .cols-4 { grid-template-columns:1fr; }
  #services .card { grid-column:auto; min-height:310px; }
  .team-intro,.ecosystem-head { grid-template-columns:1fr; gap:1.4rem; }
  .team-grid { grid-template-columns:1fr; }
  .person-card,.person-card:nth-child(2),.person-card:last-child { width:100%; grid-column:auto; border-right:0; border-top:1px solid var(--signal-ink); }
  .person-card:first-child { border-top:0; }
  .person-card__visual { aspect-ratio:4/3.7; }
  .project-mosaic { grid-template-columns:1fr; }
  .ecosystem-card,.ecosystem-card--wide { grid-column:auto; min-height:245px; }
  .page-hero { min-height:70svh; }
  .page-hero h1 { font-size:clamp(4rem,17vw,6rem); }
  .pkg--featured { transform:none; }
  .cta-band { box-shadow:7px 7px 0 var(--signal-ink); }
}

@media (prefers-reduced-motion:reduce) {
  .hero__art svg,.hero__art::after,.signal-strip > div { animation:none !important; }
}