/* ============================================================
   SENA QIAO GROUP — style.css
   Brand-locked per Design Brief v1.2. Do not deviate.
   ============================================================ */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* SQG Brand colors — fixed */
  --ink: #070604;
  --sumi: #1A1610;
  --rice: #EDE4D2;
  --zia: #B85A22;
  --prc-red: #DE2910;
  --prc-gold: #FFDE00;
  --pacific: #1B4FA8;

  /* Fonts */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, sans-serif;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --content: 1120px;

  /* Semantic — DARK FIELD (primary / default) */
  --bg: var(--ink);
  --surface: var(--sumi);
  --border: #2a241b;
  --text: var(--rice);
  --text-muted: #9c917d;
  --text-faint: #66604f;
  --accent: var(--zia);
}

/* LIGHT FIELD (Rice Paper) */
[data-theme="light"] {
  --bg: var(--rice);
  --surface: #e3d8c2;
  --border: #cdbfa5;
  --text: #1A1610;
  --text-muted: #6b6151;
  --text-faint: #9a8f79;
  --accent: var(--zia);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:5rem}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);font-weight:300;color:var(--text);background:var(--bg);transition:background var(--transition),color var(--transition)}
img,svg{display:block;max-width:100%}
ul[role=list]{list-style:none}
a{color:inherit;text-decoration:none;transition:color var(--transition)}
h1,h2,h3{text-wrap:balance;line-height:1.12;font-weight:400}
p{text-wrap:pretty}
::selection{background:color-mix(in oklab, var(--accent) 30%, transparent);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.wrap{max-width:var(--content);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.28em;color:var(--accent);margin-bottom:var(--space-4);font-weight:400}
.eyebrow{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.24em;color:var(--text-muted);margin-bottom:var(--space-6)}

/* ---------- pattern band (auxiliary design element) ---------- */
.pattern-band{
  height:6px;width:100%;
  background:
    linear-gradient(var(--zia),var(--zia)) top/100% 2px no-repeat,
    linear-gradient(var(--pacific),var(--pacific)) bottom/100% 2px no-repeat;
  position:relative;
}
.pattern-band::after{
  content:"";position:absolute;inset:2px 0;
  background-image:repeating-linear-gradient(90deg,
    var(--zia) 0 8px, transparent 8px 16px,
    var(--prc-gold) 16px 22px, transparent 22px 30px,
    var(--prc-red) 30px 34px, transparent 34px 44px,
    var(--pacific) 44px 50px, transparent 50px 60px);
  opacity:.85;
}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.header__inner{display:flex;align-items:center;gap:var(--space-8);padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.brand__mark{display:inline-flex}
.brand__word{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.01em;white-space:nowrap}
.nav{display:flex;gap:var(--space-6);margin-left:auto;font-size:var(--text-sm)}
.nav a{color:var(--text-muted)}
.nav a:hover{color:var(--text)}
.header__actions{display:flex;align-items:center;gap:var(--space-4)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);border:1px solid var(--border);color:var(--text-muted)}
.icon-btn:hover{color:var(--text);border-color:var(--accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:.7rem 1.5rem;background:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;letter-spacing:.01em;transition:transform var(--transition),background var(--transition),box-shadow var(--transition)}
.btn:hover{background:#a24d1c;transform:translateY(-2px);box-shadow:0 8px 24px rgba(184,90,34,.28)}
.btn--sm{padding:.5rem 1.1rem}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn--ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent);box-shadow:none}
.btn--full{width:100%;padding-block:.85rem}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:var(--space-4)}
.hero__inner{padding-block:clamp(var(--space-20),12vw,var(--space-32)) clamp(var(--space-16),10vw,var(--space-24));max-width:900px}
.hero__title{font-family:var(--font-display);font-size:var(--text-3xl);margin-bottom:var(--space-6)}
.hero__title em{color:var(--accent);font-style:italic}
.hero__lead{font-size:var(--text-lg);color:var(--text);max-width:34ch;margin-bottom:var(--space-8)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-bottom:var(--space-10)}
.hero__sub{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.22em;color:var(--text-faint)}

/* ---------- sections ---------- */
.section{padding-block:clamp(var(--space-16),9vw,var(--space-32))}
.section--alt{background:var(--surface);border-block:1px solid var(--border)}
.section__title{font-family:var(--font-display);font-size:var(--text-2xl)}
.section__title--wide{max-width:22ch;margin-bottom:var(--space-12)}
.section__title--tight{margin-bottom:var(--space-4)}
.section__intro{color:var(--text-muted);font-size:var(--text-lg);max-width:56ch;margin-bottom:var(--space-12)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-8),6vw,var(--space-20));align-items:start}
.grid-2 .section__title{font-size:var(--text-xl)}
.prose p{color:var(--text-muted);margin-bottom:var(--space-5);max-width:60ch}
.prose blockquote{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--text);border-left:3px solid var(--accent);padding-left:var(--space-5);margin-block:var(--space-6);max-width:52ch}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-8);transition:border-color var(--transition),transform var(--transition)}
.section--alt .card{background:var(--surface);border-color:color-mix(in oklab,var(--border) 70%,var(--accent) 12%)}
.card:hover{border-color:var(--accent);transform:translateY(-3px)}
.card__num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--accent);display:block;margin-bottom:var(--space-3)}
.card h3{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--space-3)}
.card p{font-size:var(--text-sm);color:var(--text-muted)}

/* ---------- reach ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-16)}
.chips li{font-size:var(--text-sm);padding:.45rem 1.1rem;border:1px solid var(--border);border-radius:999px;color:var(--text)}
.quote-row{border-top:1px solid var(--border);padding-top:var(--space-10)}
.big-quote{font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);max-width:30ch;line-height:1.3}

/* ---------- contact ---------- */
.grid-2--contact{align-items:start}
.contact-direct{margin-top:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.contact-line{display:flex;flex-direction:column;gap:.2rem;padding:var(--space-4) 0;border-top:1px solid var(--border)}
.contact-line:last-child{border-bottom:1px solid var(--border)}
.contact-line__k{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.2em;color:var(--text-faint)}
.contact-line__v{font-size:var(--text-lg);color:var(--text)}
.contact-line:hover .contact-line__v{color:var(--accent)}

.form{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(var(--space-6),4vw,var(--space-10))}
.section--alt .form{background:var(--bg)}
.field{margin-bottom:var(--space-5)}
.field label{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-2)}
.field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:.7rem .85rem;color:var(--text);font-size:var(--text-sm);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.form__status{font-size:var(--text-sm);margin-top:var(--space-3);text-align:center;min-height:1.2em}
.form__status[data-type=success]{color:var(--pacific)}
[data-theme=dark] .form__status[data-type=success]{color:#6fa0e8}
.form__status[data-type=error]{color:var(--prc-red)}
.form__note{font-size:var(--text-xs);color:var(--text-faint);margin-top:var(--space-3);text-align:center}
.form__note a{color:var(--accent)}

/* ---------- footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--border)}
.pattern-band--footer{margin-bottom:0}
.footer__inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-8);padding-block:var(--space-12)}
.footer__tag{font-size:var(--text-sm);color:var(--text-muted);max-width:34ch;margin-top:var(--space-3)}
.footer__brand .brand__word{font-size:var(--text-lg)}
.footer__meta{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);text-align:right}
.footer__meta a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav{display:none}
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .header__inner{gap:var(--space-4)}
  .header__actions .btn{display:none}
  .footer__inner{flex-direction:column}
  .footer__meta{text-align:left}
}