/*
  Maison Strategy, Wix-ready concept
  A polished but achievable student design using familiar sections, soft cards,
  simple grids and restrained motion that can be recreated in Wix Studio.
*/

:root {
  --signal-ink:#14213d;
  --signal-paper:#f7f5f1;
  --signal-white:#ffffff;
  --signal-orange:#ef7657;
  --signal-blue:#4f67d8;
  --signal-lime:#dce8b5;
  --signal-pink:#f2ced7;
  --signal-sand:#eee7dc;
  --navy-900:#101a30;
  --navy-800:#14213d;
  --navy-700:#203253;
  --cream-050:#ffffff;
  --cream-100:#f7f5f1;
  --cream-200:#eee7dc;
  --cream-300:#ddd4c6;
  --accent-600:#3d52bf;
  --accent-500:#4f67d8;
  --accent-400:#7d8ee4;
  --accent-tint:#e8ebfb;
  --ink:#14213d;
  --ink-soft:#566078;
  --ink-mute:#737b8d;
  --line:#ded9d0;
  --line-strong:#c9c1b5;
  --bg:#f7f5f1;
  --bg-raised:#ffffff;
  --font-display:"Instrument Serif",Georgia,serif;
  --font-body:"DM Sans",sans-serif;
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:22px;
  --shadow-sm:0 4px 14px rgba(20,33,61,.06);
  --shadow-md:0 14px 36px rgba(20,33,61,.10);
  --shadow-lg:0 24px 60px rgba(20,33,61,.13);
  --maxw:1180px;
  --section-y:clamp(4.5rem,8vw,7rem);
}

body { background:var(--signal-paper); color:var(--signal-ink); }
body::before { display:none; }
h1,h2,h3,h4 { letter-spacing:-.02em; line-height:1.02; }
h1 { line-height:.96; }
h1 em { color:var(--signal-blue); }
.lede { color:var(--ink-soft); }
.eyebrow { color:var(--signal-blue); letter-spacing:.14em; }
.eyebrow::before { width:22px; height:2px; border-radius:2px; background:var(--signal-orange); }
.section { border-bottom:0; }

/* Familiar Wix-style header */
.site-header {
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 14px rgba(20,33,61,.04);
  backdrop-filter:blur(12px);
}
.site-header .container { max-width:var(--maxw); }
.nav { min-height:76px; }
.brand__mark { width:40px; height:40px; }
.brand__mark circle { fill:var(--signal-orange); }
.brand > span { font-family:var(--font-display); font-size:1.28rem; font-weight:400; }
.brand small { font-size:.55rem; letter-spacing:.16em; }
.nav__links { gap:.25rem; border:0; background:transparent; }
.nav__links li + li { border-left:0; }
.nav__links a { padding:.58rem .82rem; border-radius:8px; font-size:.88rem; letter-spacing:0; text-transform:none; }
.nav__links a:hover,.nav__links a[aria-current="page"] { background:var(--accent-tint); color:var(--signal-blue); }
.btn { min-height:46px; border-radius:10px; border:1px solid transparent; text-transform:none; letter-spacing:0; font-size:.9rem; }
.btn--primary { background:var(--signal-blue); color:white; border-color:var(--signal-blue); box-shadow:0 7px 18px rgba(79,103,216,.23); }
.btn--primary:hover { background:var(--accent-600); color:white; transform:translateY(-2px); box-shadow:0 10px 22px rgba(79,103,216,.26); }
.btn--ghost { background:white; border-color:var(--line-strong); }
.btn--ghost:hover { background:var(--signal-paper); color:var(--signal-ink); transform:translateY(-2px); box-shadow:none; }
.btn--lg { min-height:54px; }

/* Homepage hero */
.hero { min-height:auto; padding:clamp(4.5rem,8vw,7rem) 0; border-bottom:0; background:var(--signal-paper); }
.hero .container { max-width:var(--maxw); padding-inline:var(--gutter); }
.hero__grid { min-height:auto; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.hero__copy { padding:0; display:block; overflow:visible; }
.hero__copy::after { display:none; }
.hero__copy h1 { max-width:10ch; margin-top:1.3rem; font-size:clamp(4rem,7vw,6.8rem); }
.hero__lede { margin-top:1.5rem; max-width:48ch; }
.hero__reassure { border-top:0; padding-top:0; }
.hero__art {
  min-height:520px;
  height:auto;
  padding:clamp(2rem,5vw,4rem);
  border:0;
  border-radius:28px;
  background:#dfe4fb;
  box-shadow:var(--shadow-md);
}
.hero__art::before { content:"A simple system for clear communication"; left:1.5rem; top:1.4rem; max-width:19ch; color:var(--signal-ink); letter-spacing:.08em; line-height:1.4; }
.hero__art::after { width:240px; right:-80px; bottom:-80px; border-color:rgba(79,103,216,.25); animation:none; }
.hero__art svg { width:min(88%,500px); transform:none; filter:none; animation:none; }
.hero__art svg rect { fill:white; stroke:var(--signal-blue); rx:22px; }
.hero__art svg g { stroke:var(--signal-blue); }
.hero__art svg circle,.hero__art svg circle:nth-of-type(2n) { fill:var(--signal-orange); }

.signal-strip { padding:.9rem 0; border-block:1px solid var(--line); background:#dce8b5; color:var(--signal-ink); letter-spacing:.1em; }
.signal-strip > div { width:max-content; animation:none; }

/* Ideal client, placed early because fit is a primary trust signal */
.audience-section { padding:clamp(3rem,6vw,5rem) 0; background:white; }
.audience-head { display:grid; grid-template-columns:.65fr 1.15fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:start; margin-bottom:2rem; }
.audience-head h2 { max-width:13ch; font-size:clamp(2.5rem,4vw,4rem); }
.audience-head p { color:var(--ink-soft); max-width:43ch; }
.audience-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.audience-card { min-height:220px; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:1.35rem; border:1px solid var(--line); border-radius:18px; background:var(--signal-paper); }
.audience-card:nth-child(2) { background:var(--accent-tint); }
.audience-card:nth-child(3) { background:#eef3da; }
.audience-card__num { font-size:.72rem; font-weight:700; letter-spacing:.14em; color:var(--signal-blue); }
.audience-card h3 { font-size:clamp(2rem,3vw,3rem); }
.audience-card p { margin-top:.65rem; color:var(--ink-soft); }

/* Content sections */
.section-head { max-width:680px; }
.section-head h2,.section-head.center h2 { max-width:16ch; }
.audience-section + .section { background:#fff; }
.audience-section + .section .section-head { padding:0; border:0; box-shadow:none; background:transparent; }
.checklist { gap:.8rem; border-top:0; }
.checklist li { padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--signal-paper); }
.checklist svg { color:var(--signal-blue); }

/* Conventional service card grid */
#services { background:#f7f5f1; }
#services .cols-4 { grid-template-columns:repeat(2,1fr); gap:1.25rem; border:0; background:transparent; }
#services .card,#services .card:nth-child(2),#services .card:nth-child(3),#services .card:nth-child(4) {
  grid-column:auto;
  min-height:270px;
  padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--line);
  border-radius:20px;
  background:white;
  color:var(--signal-ink);
  box-shadow:var(--shadow-sm);
}
#services .card:nth-child(2) { background:#f8e8ec; }
#services .card:nth-child(3) { background:#eef3da; }
#services .card:nth-child(4) { background:#e8ebfb; }
#services .card:nth-child(4) h3,#services .card:nth-child(4) p,#services .card:nth-child(4) .textlink { color:inherit; }
#services .card:hover { transform:translateY(-4px); filter:none; box-shadow:var(--shadow-md); }
#services .card h3 { margin-top:auto; max-width:none; font-size:clamp(2rem,3vw,3rem); }
#services .card__icon { width:50px; height:50px; border:0; border-radius:12px; background:white; color:var(--signal-blue); }
.pricing-preview { display:grid; grid-template-columns:1.1fr 1.7fr; gap:clamp(2rem,5vw,5rem); align-items:start; margin-top:1.25rem; padding:clamp(1.5rem,3vw,2.3rem); border:1px solid var(--line); border-radius:20px; background:var(--navy-800); color:white; }
.pricing-preview h3 { margin-top:.8rem; color:white; font-size:clamp(2rem,3vw,3.2rem); max-width:12ch; }
.pricing-preview p { margin-top:.7rem; color:#cbd2df; max-width:38ch; }
.pricing-preview__items { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.15); }
.pricing-preview__items > div { min-height:150px; display:flex; flex-direction:column; padding:1rem; background:var(--navy-700); }
.pricing-preview__items span { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#aeb7c8; }
.pricing-preview__items strong { margin-top:auto; font-size:1.15rem; color:white; }
.pricing-preview__items small { margin-top:.4rem; color:#cbd2df; line-height:1.4; }
.pricing-preview > .textlink { grid-column:2; color:#b8c2f2; }

/* Process cards */
.bg-navy {
  background:var(--navy-800);
  color:white;
  --ink:white;
  --ink-soft:#cdd3df;
  --ink-mute:#aeb7c8;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --accent:#9eacec;
}
.bg-navy h2,.bg-navy h3,.bg-navy h4 { color:white; }
.process { gap:1rem; border:0; background:transparent; }
.pstep,.pstep:nth-child(even) { min-height:280px; padding:1.4rem; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#203253; }
.pstep__num { border:0; background:var(--signal-orange); color:white; }
.pstep__line { display:none; }
.pstep p { color:#ccd3df; }

/* Founders */
.team-section { background:white; }
.team-intro { grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); margin-bottom:3rem; }
.team-intro h2 { max-width:15ch; }
.team-grid { grid-template-columns:repeat(12,1fr); gap:1.25rem; border:0; }
.person-card,.person-card:last-child {
  width:auto;
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:white;
  box-shadow:var(--shadow-sm);
}
.person-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.person-card__visual { aspect-ratio:4/3.7; border-bottom:1px solid var(--line); }
.person-card__visual::before { background-size:52px 52px; opacity:.5; }
.person-card__visual svg { inset:10%; width:80%; height:80%; opacity:.22; }
.person-card__initials { font-size:clamp(4.5rem,8vw,7rem); }
.person-card--khoa .person-card__visual { background:#f0a28e; }
.person-card--alex .person-card__visual { background:#9ca9ea; color:white; }
.person-card--joanna .person-card__visual { background:#f2ced7; }
.person-card--khoa { grid-column:span 6; display:grid; grid-template-columns:.95fr 1.05fr; }
.person-card--alex,.person-card--joanna { grid-column:span 3; }
.person-card--khoa .person-card__visual { min-height:410px; aspect-ratio:auto; border-right:1px solid var(--line); border-bottom:0; }
.person-card__body { min-height:120px; padding:1.25rem; }
.person-card__body h3 { font-size:clamp(1.8rem,2.5vw,2.4rem); }
.person-card:not(.person-card--khoa) .person-card__body { align-items:flex-start; flex-direction:column; }
.person-card__body--lead { align-items:stretch; flex-direction:column; }
.person-card__bio { margin-top:1rem; color:var(--ink-soft); line-height:1.55; }
.person-card__body--lead .linkedin-pill { margin-top:auto; }
.person-card__role { color:var(--ink-mute); }
.linkedin-pill { color:var(--signal-blue); }
.team-note { padding:1rem 1.2rem; border-left:4px solid var(--signal-orange); border-radius:0 10px 10px 0; background:var(--signal-paper); }

/* Reference project gallery */
.ecosystem-section { background:#14213d; color:white; --ink:white; --ink-soft:#cbd2df; --ink-mute:#aeb7c8; }
.ecosystem-head { grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); }
.ecosystem-head h2 { max-width:15ch; }
.ecosystem-head .lede { color:#cbd2df; }
.disclosure { padding:.9rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:10px; color:#cbd2df; background:rgba(255,255,255,.05); }
.project-mosaic { grid-template-columns:repeat(5,1fr); gap:1rem; border:0; background:transparent; }
.ecosystem-card,.ecosystem-card--wide { min-height:220px; grid-column:auto; padding:1.1rem; border-radius:16px; box-shadow:none; }
.ecosystem-card:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(0,0,0,.18); }
.ecosystem-card h3 { font-size:clamp(1.7rem,2.5vw,2.5rem); }
.project-glyph { font-size:7rem; }
.tone-cobalt { background:#4f67d8; }
.tone-blue { background:#dce8b5; }
.tone-ink { background:#283754; }
.tone-sand { background:#f2ced7; }
.tone-cream { background:#ef7657; }

.reframe { border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-sm); }
.reframe__col--old { background:#eee7dc; }
.reframe__col--new { background:#4f67d8; }
.reframe__col--new h4 { color:white; }
.cta-band {
  --ink:var(--signal-ink);
  --ink-soft:#46516a;
  --ink-mute:#566078;
  --line:rgba(20,33,61,.18);
  --line-strong:rgba(20,33,61,.34);
  border:0;
  border-radius:26px;
  background:#e8ebfb;
  color:var(--signal-ink);
  box-shadow:none;
}
.cta-band h2 { color:var(--signal-ink); }
.cta-band::after { display:none; }
.cta-band .btn--primary { background:var(--signal-blue); color:white; }
.cta-band .btn--ghost { background:white; border-color:var(--line-strong); color:var(--signal-ink); }
.cta-band .btn--ghost:hover { background:var(--signal-paper); color:var(--signal-ink); }
.cta-contact { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1.2rem; margin-top:1.2rem; font-size:.78rem; color:var(--ink-soft); }
.cta-contact a { color:var(--accent-600); text-decoration:underline; text-underline-offset:3px; }
.cta-contact span { color:var(--ink-soft); }

/* Interior pages */
.page-hero {
  min-height:55svh;
  align-items:center;
  padding-block:clamp(5rem,9vw,8rem);
  border-bottom:0;
  background:#e8ebfb;
  color:var(--signal-ink);
}
.page-hero::after { width:260px; height:260px; right:6vw; top:-90px; background:#f2ced7; mix-blend-mode:normal; opacity:.7; }
.page-hero h1 { max-width:12ch; color:var(--signal-ink); font-size:clamp(4rem,7vw,6.8rem); }
.page-hero .lede { color:var(--ink-soft); }
.value { border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow-sm); }
.value__k { color:var(--signal-blue); }
.pkg,.pkg:nth-child(1),.pkg:nth-child(3) { border:1px solid var(--line); border-radius:20px; background:white; box-shadow:var(--shadow-sm); }
.pkg--featured { transform:none; border:2px solid var(--signal-blue); background:#eef0fc; color:var(--signal-ink); box-shadow:var(--shadow-md); }
.pkg--featured h2,.pkg--featured h3,.pkg--featured p,.pkg--featured li,.pkg--featured .pkg__price b { color:inherit; }
.pkg--featured::before { border-radius:999px; }
.acc__q { font-family:var(--font-body); font-size:1.1rem; font-weight:600; }
.vstep__dot { border:0; background:var(--signal-blue); color:white; }
.tag { border-color:rgba(255,255,255,.25); }
.form.card { padding:clamp(1.5rem,4vw,2.6rem); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-md); }
.field input,.field select,.field textarea,input,select,textarea { border-radius:10px; border-color:var(--line-strong); background:white; }
.field input:focus,.field select:focus,.field textarea:focus,input:focus,select:focus,textarea:focus { border-color:var(--signal-blue); box-shadow:0 0 0 4px rgba(79,103,216,.13); }
.cmethod { border-radius:14px; }
.cmethod__ic { border-radius:10px; }

/* Footer */
.site-footer { background:#101a30; color:white; }
.site-footer a:hover { color:#aab6ef; }
.footer__brand { font-family:var(--font-display); font-weight:400; }
.footer__socials a { border-radius:10px; }

@media (max-width:1050px) {
  .project-mosaic { grid-template-columns:repeat(3,1fr); }
}

@media (max-width:960px) {
  .hero__grid { grid-template-columns:1fr; }
  .hero__copy { min-height:auto; padding:0; }
  .hero__art { min-height:450px; border:0; }
  .audience-head { grid-template-columns:1fr 1.5fr; }
  .audience-head > p { grid-column:2; }
  .pricing-preview { grid-template-columns:1fr; }
  .pricing-preview > .textlink { grid-column:1; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .person-card--khoa { grid-column:1 / -1; }
  .person-card--alex,.person-card--joanna { grid-column:auto; }
  .person-card:nth-child(2),.person-card:last-child { width:auto; max-width:none; border:1px solid var(--line); }
}

@media (max-width:860px) {
  .nav__menu { background:white; border-left:1px solid var(--line); }
  .nav__links { width:100%; }
  .nav__links li + li { border-top:0; }
  .nav__links a { font:500 1.1rem/1.2 var(--font-body); letter-spacing:0; text-transform:none; }
  .nav__close { border-radius:10px; border-color:var(--line); }
  .team-intro,.ecosystem-head { grid-template-columns:1fr; gap:1.25rem; }
  .project-mosaic { grid-template-columns:repeat(2,1fr); }
  .section--tight .grid:has(#booking-form) { grid-template-columns:1fr !important; }
}

@media (max-width:640px) {
  .nav { min-height:70px; }
  .hero { padding:4rem 0; }
  .hero__copy { order:1; min-height:auto; padding:0; }
  .hero__art { order:2; min-height:360px; padding:1.5rem; }
  .hero__copy h1 { font-size:clamp(3.7rem,16vw,5rem); }
  .section { padding-block:4.5rem; }
  .audience-head,.audience-grid { grid-template-columns:1fr; }
  .audience-head > p { grid-column:auto; }
  .audience-card { min-height:190px; }
  #services .cols-4 { grid-template-columns:1fr; }
  #services .card { min-height:250px; }
  .pricing-preview__items { grid-template-columns:1fr; }
  .pricing-preview__items > div { min-height:120px; }
  .team-grid { grid-template-columns:1fr; }
  .person-card,.person-card:nth-child(2),.person-card:last-child {
    width:100%;
    max-width:none;
    grid-column:auto;
    border:1px solid var(--line);
    border-radius:18px;
  }
  .person-card__visual { aspect-ratio:4/3.2; }
  .person-card--khoa { display:block; }
  .person-card--khoa .person-card__visual { min-height:auto; aspect-ratio:4/3.2; border-right:0; border-bottom:1px solid var(--line); }
  .project-mosaic { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .ecosystem-card,.ecosystem-card--wide { min-height:185px; padding:.85rem; }
  .ecosystem-card h3 { font-size:clamp(1.4rem,7vw,1.9rem); }
  .ecosystem-card div > span { font-size:.55rem; }
  .project-glyph { font-size:5rem; }
  .page-hero { min-height:auto; padding-block:5rem; }
  .page-hero h1 { font-size:clamp(3.7rem,16vw,5rem); }
  .cta-band { border-radius:20px; }
}

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