/* staricon.com — the company site. Dark ground, gold star, Garamond for voice, Unbounded for labels. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#141414; --surface:#1d1d1d; --border:#2e2e2e; --text:#f1ece4; --muted:#bdb6ac; --dim:#8f887f; --accent:#c9b97a; --star:#d9c97c; color-scheme: dark; }
html { font-size:116%; }
html, body { min-height:100%; background:var(--bg); color:var(--text); font-family:"EB Garamond", Georgia, "Times New Roman", serif; overflow-x:clip; }
a { color:inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
.page { min-height:100vh; display:flex; flex-direction:column; max-width:1040px; margin:0 auto; padding-inline:2rem; }
header { position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding-block:1.4rem; border-bottom:1px solid var(--border); background:rgba(18,18,18,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); margin-inline:-2rem; padding-inline:2rem; }
.label, .logo-mark, nav a, .eyebrow, .cta-btn, .cta-link, .footer-copy, .footer-links a, .stat small, .card-link, .badge { font-family:'Unbounded', 'Helvetica Neue', Arial, sans-serif; text-transform:uppercase; }
.logo-mark { font-weight:400; font-size:.98rem; letter-spacing:.24em; color:var(--text); text-decoration:none; }
.logo-mark span { color:var(--star); margin-right:.5em; font-size:1.3em; vertical-align:-.08em; }
nav { display:flex; gap:clamp(.9rem,2.4vw,2.2rem); flex-wrap:nowrap; justify-content:flex-end; white-space:nowrap; min-width:0; }
.logo-mark { flex:none; }
nav a { font-weight:300; font-size:.84rem; letter-spacing:.18em; color:var(--muted); text-decoration:none; transition:color .3s ease; }
nav a:hover, nav a.active { color:var(--text); }
main { display:flex; flex-direction:column; align-items:flex-start; padding-block:5.5rem 4rem; }
h1 { font-weight:400; font-size:clamp(calc(2.5rem + 3px),calc(6.6vw + 3px),calc(5rem + 3px)); line-height:1.06; letter-spacing:-.018em; margin-bottom:2.2rem; text-wrap:balance; }
h1 em, h2 em { font-style:italic; color:var(--accent); }
h2 { font-weight:400; font-size:clamp(1.7rem,3.6vw,2.4rem); line-height:1.15; letter-spacing:-.01em; margin-bottom:1.4rem; text-wrap:balance; }
.divider { width:3rem; height:1px; background:var(--accent); opacity:.6; margin-bottom:2.2rem; }
.lede { font-size:clamp(1.15rem,2.1vw,1.32rem); line-height:1.7; color:var(--muted); max-width:640px; margin-bottom:3rem; }
.lede strong { color:var(--text); font-weight:500; }
.cta-row { display:flex; align-items:center; gap:2.4rem; flex-wrap:wrap; }
.cta-btn { font-weight:300; font-size:.65rem; letter-spacing:.2em; color:var(--bg); background:var(--accent); padding:.95rem 2rem; border:none; cursor:pointer; text-decoration:none; transition:background .25s ease, transform .2s ease; display:inline-block; }
.cta-btn:hover { background:var(--star); transform:translateY(-1px); }
.cta-link { font-weight:200; font-size:.62rem; letter-spacing:.18em; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:2px; transition:color .25s, border-color .25s; }
.cta-link:hover { color:var(--text); border-color:var(--muted); }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-left:1px solid var(--border); margin-bottom:4rem; }
.stat { padding:1.6rem 1.4rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem; }
.stat b { font-weight:400; font-size:clamp(1.9rem,4vw,2.6rem); line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.stat small { font-weight:300; font-size:.58rem; letter-spacing:.16em; color:var(--muted); line-height:1.6; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--border); border-left:1px solid var(--border); margin-bottom:4rem; }
.cell { padding:2rem 1.8rem; border-right:1px solid var(--border); border-bottom:1px solid var(--border); transition:background .3s ease; display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.cell:hover { background:var(--surface); }
.eyebrow { font-size:.55rem; font-weight:200; letter-spacing:.2em; color:var(--accent); }
.cell h3 { font-size:1.35rem; font-weight:500; letter-spacing:-.01em; line-height:1.2; }
.cell p { font-size:1.08rem; line-height:1.65; color:var(--muted); }
.cell .fact { font-size:.95rem; color:var(--text); font-style:italic; }
.card-link { margin-top:auto; padding-top:.6rem; font-weight:300; font-size:.58rem; letter-spacing:.18em; color:var(--accent); text-decoration:none; }
.card-link:hover { color:var(--star); }
.badge { align-self:flex-start; font-weight:300; font-size:.5rem; letter-spacing:.18em; color:var(--bg); background:var(--muted); padding:.3rem .6rem; }
.section { border-top:1px solid var(--border); padding-block:3.2rem 3.6rem; width:100%; }
.section p { max-width:700px; font-size:1.18rem; line-height:1.75; color:var(--muted); margin-bottom:1.3rem; }
.section p strong { color:var(--text); font-weight:500; }
.principles { list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem 2.4rem; max-width:860px; margin-top:1.8rem; }
.principles li { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.principles b { font-weight:500; font-size:1.12rem; color:var(--text); }
.principles span { font-size:1.02rem; line-height:1.6; color:var(--muted); }
.contact-form { width:100%; max-width:640px; display:grid; gap:1rem; }
.contact-form label { display:grid; gap:.45rem; }
.contact-form .label { font-weight:200; font-size:.55rem; letter-spacing:.18em; color:var(--muted); }
.contact-form input, .contact-form textarea, .contact-form select { width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:1rem; font-family:'EB Garamond', Georgia, serif; font-size:1.05rem; outline:none; }
.contact-form textarea { min-height:160px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color:var(--accent); }
.contact-form .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
footer { border-top:1px solid var(--border); padding-block:1.8rem 2.4rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1.4rem; flex-wrap:wrap; }
.footer-copy, .footer-links a { font-size:.55rem; font-weight:200; letter-spacing:.18em; color:var(--muted); text-decoration:none; line-height:2; }
.footer-links { display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:flex-end; }
.footer-links a:hover { color:var(--text); }
.footer-sites { width:100%; display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width:860px) { .grid { grid-template-columns:1fr 1fr; } .stats { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .page { padding-inline:1.1rem; } header { margin-inline:-1.1rem; padding-inline:1.1rem; padding-block:1rem; } nav { gap:.85rem; } nav a { font-size:.84rem; letter-spacing:.12em; } .logo-mark { font-size:.86rem; letter-spacing:.18em; } .grid, .principles { grid-template-columns:1fr; } main { padding-block:3.5rem 3rem; } .cta-row { gap:1.4rem; } }

.page > * { min-width:0; }
footer { margin-top:auto; }
header { position:sticky; }
.menu-btn { display:none; flex:none; width:48px; height:48px; border:1px solid var(--border); background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:7px; }
.menu-btn span { display:block; width:24px; height:1.5px; background:var(--text); transition:transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(8.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-8.5px) rotate(-45deg); }
/* menu: always the button top right, dropdown under it (owner 2026-10-06) */
  header { position:sticky; }
  .menu-btn { display:flex; }
  nav { display:none; position:absolute; top:100%; right:0; left:auto; min-width:280px; flex-direction:column; gap:0; background:var(--surface); border:1px solid var(--border); padding:.4rem 0; }
  nav.open { display:flex; }
  nav a { padding:1.05rem 1.6rem; font-size:.84rem; letter-spacing:.16em; }