@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/shape.css");
@import url("tokens/motion.css");
@import url("base.css");

html{overflow-x:hidden;max-width:100%}
img,svg{max-width:100%}

:root{--sticky-offset:var(--topbar-h)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
#services,#how-we-work,#contact{scroll-margin-top:calc(var(--sticky-offset) + var(--space-3))}

.icon{width:1em;height:1em;flex:none}
.icon-arrow{width:18px;height:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-text);font-weight:var(--weight-semibold);font-size:var(--text-sm);
  border-radius:var(--control-radius);height:var(--control-h-md);padding:0 var(--control-px);
  border:var(--border-w) solid transparent;background:transparent;color:var(--text);
  cursor:pointer;white-space:nowrap;transition:var(--transition-color);text-decoration:none}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985);opacity:.88}
.btn-sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--text-xs)}
.btn-lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--text-body)}
.btn-primary{background:var(--accent);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-sunken);border-color:var(--border-strong)}
.btn .icon-arrow{transition:transform var(--dur-fast) var(--ease-out)}
.btn:hover .icon-arrow{transform:translateX(3px)}

.card{background:var(--surface);border:var(--border-w) solid var(--border);border-radius:var(--card-radius)}
.card-filled{background:var(--surface-sunken);border-color:transparent}

.utility-bar{background:var(--ink-900);color:var(--ink-300);font-size:var(--text-xs);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-2) var(--gutter);min-height:36px}

.site-header{position:sticky;top:0;z-index:20;background:rgba(250,248,244,.88);backdrop-filter:blur(10px);
  border-bottom:var(--border-w) solid var(--ink-900);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding:0 var(--gutter);min-height:var(--topbar-h)}
.site-header .logo{height:26px;display:block}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-7);
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}
.site-nav a{color:inherit}
.site-nav a:hover{color:var(--accent-text)}
.header-actions{display:flex;align-items:center;gap:var(--space-5)}

.hero{padding-top:clamp(var(--space-8),8vw,7.5rem)}
.hero:has(.hero-notebook){display:grid;grid-template-columns:1fr 380px;gap:var(--space-9)}
.hero-main{padding-bottom:var(--space-9)}
.hero:has(.hero-notebook) .hero-main{border-right:var(--border-w) solid var(--ink-200);padding-right:var(--space-9)}
.hero-main h1{font-size:var(--text-display-xl);line-height:var(--lh-display-xl);letter-spacing:var(--ls-display-xl);
  margin-top:var(--space-6);max-width:24ch}
.hero:has(.hero-notebook) .hero-main h1{max-width:12ch}
.hero-main .lead{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--text-secondary);
  max-width:44ch;margin-top:var(--space-6)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

.services-strip{border-top:var(--border-w) solid var(--ink-900);
  display:grid;grid-template-columns:repeat(5,1fr)}
.service-item{padding:var(--space-6) var(--space-5);border-right:var(--border-w) solid var(--ink-200)}
.service-item:last-child{border-right:none}
.service-num{font-family:var(--font-display);font-size:var(--text-h3);color:var(--highlight)}
.service-title{font-family:var(--font-display);font-size:var(--text-h3);margin-top:var(--space-2);font-weight:var(--weight-medium)}
.service-desc{font-size:var(--text-xs);color:var(--text-secondary);margin-top:var(--space-2)}

.section-dark{margin-top:var(--space-8);background:var(--ink-950);color:var(--paper);
  background-image:url(../assets/pattern-grid.svg);background-size:80px}
.section-dark .rx-eyebrow{color:var(--ink-400)}
.section-pad{padding:var(--section-y) var(--gutter)}
.split-64{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9)}
.section-dark h2{font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);margin-top:var(--space-4)}
.section-dark .lead{color:var(--ink-300);font-size:var(--text-sm);margin-top:var(--space-6);max-width:42ch}
.commitment-list{display:grid;gap:var(--space-6);align-content:center}
.commitment-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);align-items:baseline;
  padding:var(--space-6) 0;border-top:var(--border-w) solid var(--ink-800)}
.commitment-row:last-child{border-bottom:var(--border-w) solid var(--ink-800)}
.commitment-title{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-medium)}
.commitment-note{font-size:var(--text-xs);color:var(--ink-400)}

.cta-row{border-top:var(--border-w) solid var(--ink-900);padding-top:var(--space-6);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.cta-row h2{font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:14ch}
.cta-copy{display:grid;gap:var(--space-5);justify-items:start}
.cta-copy p{color:var(--text-secondary);font-size:var(--text-sm);max-width:36ch}

.contact-form-wrap{margin-top:var(--space-8);max-width:480px}
.form-alert{padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);margin-bottom:var(--space-5)}
.form-alert-error{background:var(--danger-soft);color:var(--danger)}
.form-alert-success{background:var(--success-soft);color:var(--success)}
.form-row{display:grid;gap:var(--space-2);margin-bottom:var(--space-5)}
.form-row label{font-family:var(--font-text);font-size:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;font-weight:var(--weight-semibold);color:var(--text-muted)}
.form-row input,.form-row textarea{border:var(--border-w) solid var(--border);border-radius:var(--control-radius);
  padding:0 var(--control-px);height:var(--control-h-md);background:var(--surface);font:inherit;color:var(--text)}
.form-row textarea{height:auto;min-height:120px;padding:var(--space-3) var(--control-px);resize:vertical}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-bottom:var(--space-5)}

.site-footer{border-top:var(--border-w) solid var(--ink-200);padding:var(--space-8) var(--gutter) var(--space-6)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-6);font-size:var(--text-sm)}
.footer-brand{display:grid;gap:var(--space-4);align-content:start}
.footer-brand .logo{height:26px;justify-self:start}
.footer-brand p{color:var(--text-secondary);max-width:34ch}
.footer-col{display:grid;gap:var(--space-3);align-content:start;color:var(--text-secondary)}
.footer-col span{display:block}
.footer-col a{color:inherit}
.footer-col a:hover{color:var(--accent-text)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  margin-top:var(--space-8);padding-top:var(--space-4);border-top:var(--border-w) solid var(--ink-100);
  font-size:var(--text-xs);color:var(--text-muted)}
.footer-bottom a{color:inherit}

@media (max-width:960px){
  .hero:has(.hero-notebook){grid-template-columns:1fr}
  .hero:has(.hero-notebook) .hero-main{border-right:none;padding-right:0;border-bottom:var(--border-w) solid var(--ink-200);padding-bottom:var(--space-7)}
  .hero:has(.hero-notebook) .hero-notebook{padding-top:var(--space-7)}
  .split-64{grid-template-columns:1fr}
  .services-strip{grid-template-columns:repeat(2,1fr)}
  .service-item:nth-child(2n){border-right:none}
}

@media (max-width:800px){
  :root{--sticky-offset:142px}
  .site-header{flex-wrap:wrap;padding-block:var(--space-3)}
  .site-nav{order:3;flex-basis:100%;gap:var(--space-5) var(--space-6);padding-top:var(--space-3);
    border-top:var(--border-w) solid var(--ink-100);margin-top:var(--space-3)}
  .utility-bar{flex-wrap:wrap;justify-content:center;text-align:center}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:var(--space-6)}
  .footer-brand{grid-column:1/-1}
  .cta-row{align-items:flex-start}
}

@media (max-width:640px){
  .services-strip{grid-template-columns:1fr}
  .service-item{border-right:none;border-bottom:var(--border-w) solid var(--ink-200)}
  .service-item:last-child{border-bottom:none}
  .footer-grid{grid-template-columns:1fr}
  .commitment-row{grid-template-columns:1fr}
}