@import url('tokens/colors.css');
@import url('tokens/fonts.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/effects.css');

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body);}
a{color:var(--ink-900);}
img{max-width:100%;display:block;}

.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--space-6);}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--surface-page);border-bottom:1px solid var(--border-default);}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:18px;}
.wordmark{font:var(--text-heading);text-transform:uppercase;letter-spacing:var(--tracking-wordmark);text-decoration:none;}
.nav__links{display:flex;align-items:center;gap:var(--space-5);}
.nav__link{font:var(--text-body-sm);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;}
.nav__link[aria-current="page"]{border-bottom-color:var(--ink-900);}
.nav .nav__toggle{display:none;}

/* ---------- footer ---------- */
.footer{background:var(--surface-inverse);color:var(--text-on-inverse);padding-block:56px;}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:space-between;}
.footer__col{display:flex;flex-direction:column;gap:var(--space-2);font:var(--text-body-sm);}
.footer .wordmark{color:var(--text-on-inverse);}
.footer a{color:var(--text-on-inverse);}
.footer__muted{color:var(--border-on-inverse);}

/* ---------- typography ---------- */
.eyebrow{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary);margin:0 0 var(--space-2);}
h1,h2,h3{margin:0;text-transform:uppercase;letter-spacing:var(--tracking-wordmark);}
h1{font:var(--text-display-xl);}
h2{font:var(--text-display-lg);}
h3{font:var(--text-heading);}
p{margin:0;}
.lede{font:var(--text-body-lg);color:var(--text-secondary);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font:var(--text-body-sm);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  padding:12px var(--space-5);border-radius:var(--radius-pill);border:1px solid var(--ink-900);
  text-decoration:none;cursor:pointer;background:none;color:var(--ink-900);
  transition:background var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);}
.btn:active{transform:scale(.98);}
.btn--primary{background:var(--action-primary);color:var(--action-on-accent);}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--action-on-accent);}
.btn--secondary:hover,.btn--ghost:hover{background:var(--surface-sunken);}
.btn--inverse{background:var(--surface-page);border-color:var(--surface-page);}
.btn--inverse:hover{background:var(--paper-50);}
.btn--sm{padding:8px var(--space-4);}

/* ---------- surfaces ---------- */
.card{background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:var(--space-6);}
.card > * + *{margin-top:var(--space-3);}
.card--sunken{background:var(--surface-sunken);box-shadow:none;}
.tag{display:inline-block;font:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  padding:6px var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-secondary);}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center;padding:var(--space-9) var(--space-6) 80px;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}
.hero h1{margin-bottom:var(--space-5);}
.hero__panel{aspect-ratio:4/5;background:var(--surface-sunken);border:1px solid var(--border-default);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);display:grid;place-items:center;}
.hero__panel img{width:78%;}

.section{padding:80px var(--space-6) var(--space-9);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);}
.services-teaser__grid{max-width:620px;margin-top:var(--space-6);}
.tag-row{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6);}

.band{background:var(--surface-accent);color:var(--text-on-inverse);padding:80px var(--space-6);text-align:center;}
.band__inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);}
.band__quote{font:var(--text-display-md);font-style:italic;text-transform:none;letter-spacing:var(--tracking-tight);}
.band__attr{font:var(--text-body-sm);color:var(--text-on-inverse);opacity:.8;}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--space-8);align-items:center;padding:80px var(--space-6) var(--space-9);}
.about__photo{aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;}
.about__photo img{width:100%;height:100%;object-fit:cover;}
.about__copy{display:flex;flex-direction:column;gap:20px;}

/* ---------- forms ---------- */
.narrow{max-width:640px;margin:0 auto;}
.field{display:flex;flex-direction:column;gap:var(--space-2);}
.field label,.checkbox{font:var(--text-body-sm);}
.field input,.field textarea{font:var(--text-body);padding:12px var(--space-4);
  border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);color:var(--text-primary);
  transition:border-color var(--duration-base) var(--ease-standard);}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--border-strong);}
.field textarea{resize:vertical;}
.form{display:flex;flex-direction:column;gap:var(--space-4);}
.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4);}
.checkbox{display:flex;align-items:center;gap:var(--space-2);}
.form__status{font:var(--text-body-sm);color:var(--feedback-error);}
.thanks{text-align:center;display:flex;flex-direction:column;gap:var(--space-3);}

/* ---------- responsive ---------- */
@media (max-width:768px){
  .hero,.about,.grid-2,.form__row{grid-template-columns:1fr;}
  .hero{padding-top:var(--space-7);}
  h1{font:var(--text-display-lg);}
  h2{font:var(--text-display-md);}
}
@media (max-width:640px){
  .nav .wordmark{font:var(--text-body-lg);letter-spacing:var(--tracking-wordmark);}
  .nav__links{display:none;flex-direction:column;align-items:flex-start;width:100%;padding-bottom:var(--space-4);}
  .nav__inner{flex-wrap:wrap;}
  .nav .nav__toggle{display:inline-flex;}
  .nav[data-open] .nav__links{display:flex;}
}