/* LUQMEDIA — site styles. Brand tokens live in :root. */
:root{
  --bg:#F8F7F3; --card:#FFFFFF; --surface:#EFEDE6; --border:#E2DFDA;
  --ink:#1A1917; --muted:#4A4840; --faint:#7A7870;
  --gold:#C9A84C; --gold-l:#D9BB6E; --gold-dim:rgba(201,168,76,.10);
  --dark:#0D0D0D; --dark-text:#F0EDE6; --dark-muted:rgba(240,237,230,.55); --dark-border:rgba(255,255,255,.08);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1140px; --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--muted);
  font-family:var(--sans); font-size:16px; line-height:1.8;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}

/* ---------- type ---------- */
h1,h2,h3{color:var(--ink); margin:0; text-wrap:balance}
h1{font-family:var(--serif); font-weight:300; font-size:clamp(38px,5.4vw,58px); line-height:1.14; letter-spacing:.005em}
h2{font-family:var(--serif); font-weight:300; font-size:clamp(30px,3.9vw,40px); line-height:1.25}
h3{font-family:var(--sans); font-weight:600; font-size:17px; line-height:1.7}
p{margin:0}
.kicker{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--faint)}
.lead{font-size:clamp(17px,2vw,19px); line-height:1.65; color:var(--muted)}
.small{font-size:14px; line-height:1.75; color:var(--faint)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:rgba(248,247,243,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.nav-in{display:flex; align-items:center; gap:22px; height:66px}
.nav a.mark{display:flex; align-items:center; text-decoration:none; flex-shrink:0}
.nav .mark svg{height:19px; width:auto; display:block}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:26px}
.nav-links a{font-size:13px; text-decoration:none; color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.btn{
  display:inline-block; background:var(--gold); color:var(--dark);
  border:0; border-radius:6px; padding:10px 20px;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--gold-l)}
.btn-lg{border-radius:8px; padding:15px 32px; font-size:15px; font-weight:600}

/* ---------- sections ---------- */
section{padding-block:clamp(64px,9vw,104px)}
.hero{padding-block:clamp(72px,11vw,124px) clamp(52px,7vw,80px)}
.hero-in{max-width:780px; display:flex; flex-direction:column; gap:26px; align-items:flex-start}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:4px}
.textlink{font-size:14px; font-weight:600; color:var(--gold); text-decoration:none; border-bottom:2px solid rgba(201,168,76,.3); padding-bottom:2px}
.textlink:hover{border-bottom-color:var(--gold)}

/* rule strip */
.strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding-block:34px}
.strip-in{display:flex; flex-wrap:wrap; gap:28px 54px; align-items:baseline}
.strip .eyebrow{flex-shrink:0}
.strip p{font-size:15px; color:var(--muted); max-width:62ch}

/* ---------- agencies: split by a hairline, not cards ---------- */
.agencies{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); background:var(--card)}
.agency{padding:clamp(28px,3.4vw,46px); display:flex; flex-direction:column; gap:18px}
.agency + .agency{border-left:1px solid var(--border)}
.agency-name{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1; color:var(--ink); letter-spacing:.14em}
.agency-role{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.agency p{font-size:15px; line-height:1.8}
.metric{margin-top:auto; padding-top:20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:3px}
.metric-k{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.metric-v{font-family:var(--serif); font-weight:400; font-size:22px; color:var(--ink)}

/* ---------- principles: hairline rows ---------- */
.rows{display:flex; flex-direction:column}
.row{display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:24px 48px; padding-block:30px; border-top:1px solid var(--border)}
.row:last-child{border-bottom:1px solid var(--border)}
.row h3{font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.3}
.row p{font-size:15px; max-width:62ch}

/* ---------- about / contact ---------- */
.two{display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:24px 48px}
.two p + p{margin-top:16px}
.contact-list{display:flex; flex-direction:column; gap:14px; margin-top:30px; padding-top:26px; border-top:1px solid var(--border)}
.contact-list div{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; font-size:15px}
.contact-list .k{font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); min-width:82px}

/* ---------- footer ---------- */
.footer{background:var(--dark); color:var(--dark-muted); padding-block:52px 44px}
.footer-in{display:flex; flex-wrap:wrap; gap:32px 48px; align-items:flex-start}
.footer svg{height:20px; width:auto; display:block}
.footer-links{display:flex; flex-wrap:wrap; gap:22px; margin-left:auto}
.footer-links a{font-size:13px; color:var(--dark-text); text-decoration:none; opacity:.8}
.footer-links a:hover{opacity:1; color:var(--gold)}
.footer-legal{width:100%; border-top:1px solid var(--dark-border); padding-top:24px; margin-top:8px; font-size:12px; line-height:1.8}

/* ---------- legal pages ---------- */
.doc{max-width:74ch; padding-block:clamp(52px,7vw,88px)}
.doc h1{font-size:clamp(32px,4.6vw,46px); margin-bottom:10px}
.doc h2{font-size:24px; font-family:var(--sans); font-weight:600; margin-top:44px; margin-bottom:12px; line-height:1.5}
.doc h3{font-size:15px; margin-top:26px; margin-bottom:8px}
.doc p,.doc li{font-size:15.5px; line-height:1.85}
.doc p + p{margin-top:14px}
.doc ul{padding-left:20px; margin:12px 0}
.doc li{margin-bottom:8px}
.doc a{color:var(--gold); font-weight:600}
.doc .meta{font-size:13px; color:var(--faint); padding-bottom:26px; border-bottom:1px solid var(--border); margin-bottom:10px}
.callout{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:22px 24px; margin:22px 0}
.callout p{font-size:14.5px}
.callout strong{color:var(--ink)}
.back{display:inline-block; margin-bottom:26px; font-size:13px; font-weight:600; color:var(--gold); text-decoration:none}


/* ---------- contact toast ---------- */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%,10px);
  background:var(--dark); color:var(--dark-text);
  border:1px solid var(--dark-border); border-radius:8px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  font-family:var(--sans); font-size:13px; font-weight:500; line-height:1.5;
  text-align:center; max-width:calc(100vw - 32px);
  z-index:999; opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

@media (max-width:820px){
  .agencies{grid-template-columns:1fr}
  .agency + .agency{border-left:0; border-top:1px solid var(--border)}
  .row,.two{grid-template-columns:1fr; gap:10px}
  .nav-links{gap:16px}
  .nav-links a:not(.btn){display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}