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

/* ===================== Layout helpers ===================== */
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:var(--section-y) 0; }
.section--tight{ padding:var(--section-y-tight) 0; }
.section--subtle{ background:var(--surface-subtle); }
.section--ink{ background:var(--surface-inverse); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.split{ display:grid; gap:var(--space-16); }
.split--contact{ grid-template-columns:1fr 1.1fr; align-items:start; }
.split--digital{ grid-template-columns:1fr .9fr; align-items:center; }
.split--process{ grid-template-columns:.9fr 1.1fr; align-items:start; }
.work-featured{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--space-6); }
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .split--contact, .split--digital, .split--process, .work-featured{ grid-template-columns:1fr; }
}

/* ===================== Header ===================== */
.site-header{ position:sticky; top:0; z-index:40; background:var(--glass-fill); -webkit-backdrop-filter:var(--blur-glass); backdrop-filter:var(--blur-glass); border-bottom:var(--border-hairline) solid var(--border-subtle); }
.site-header__row{ max-width:var(--container-max); margin:0 auto; padding:var(--space-4) var(--gutter); display:flex; align-items:center; gap:var(--space-8); }
.site-header__logo{ display:flex; text-decoration:none; }
.site-header__logo img{ height:34px; width:auto; display:block; }
.site-nav{ display:flex; gap:var(--space-6); margin-left:auto; }
.site-nav a{ font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-muted); text-decoration:none; padding-bottom:2px; border-bottom:var(--border-emphasis) solid transparent; transition:var(--transition-control); }
.site-nav a:hover{ color:var(--text-strong); }
.site-nav a.is-active{ font-weight:var(--weight-bold); color:var(--text-strong); border-bottom-color:var(--yellow-400); }
.nav-toggle{ display:none; }
@media (max-width:820px){
  .site-header__row{ flex-wrap:wrap; }
  .nav-toggle{ display:inline-flex; margin-left:auto; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--radius-pill); border:var(--border-hairline) solid var(--border-default); background:transparent; cursor:pointer; }
  .site-nav{ display:none; width:100%; margin-left:0; flex-direction:column; gap:var(--space-1); order:3; padding-top:var(--space-3); }
  .site-nav.is-open{ display:flex; }
  .site-header .btn{ order:2; }
}

/* ===================== Footer ===================== */
.site-footer{ background:var(--surface-inverse); color:var(--ink-400); }
.site-footer__top{ max-width:var(--container-max); margin:0 auto; padding:var(--space-16) var(--gutter) var(--space-10); display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-16); flex-wrap:wrap; }
.site-footer img{ height:42px; width:auto; display:block; }
.site-footer__cols{ display:flex; gap:var(--space-20); flex-wrap:wrap; }
.site-footer__col{ display:flex; flex-direction:column; gap:var(--space-3); }
.site-footer__eyebrow{ font-family:var(--font-text); font-size:var(--type-eyebrow-size); font-weight:var(--type-eyebrow-weight); letter-spacing:var(--type-eyebrow-tracking); text-transform:uppercase; color:var(--yellow-400); }
.site-footer__links{ display:flex; gap:var(--space-5); flex-wrap:wrap; }
.site-footer__links a{ font-family:var(--font-text); font-size:var(--text-sm); color:var(--ink-300); text-decoration:none; }
.site-footer__links a:hover{ color:var(--yellow-400); }
.site-footer__contact span{ font-family:var(--font-text); font-size:var(--text-sm); color:var(--ink-300); }
.site-footer__legal{ border-top:var(--border-hairline) solid var(--border-inverse); }
.site-footer__legal div{ max-width:var(--container-max); margin:0 auto; padding:var(--space-5) var(--gutter); font-family:var(--font-text); font-size:var(--text-xs); color:var(--ink-500); }

/* ===================== Buttons ===================== */
.btn{ font-family:var(--font-text); font-weight:var(--weight-bold); letter-spacing:-.01em; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); border-radius:var(--radius-control); border:var(--border-hairline) solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:var(--transition-control); }
.btn:active{ transform:scale(var(--press-scale)); }
.btn[disabled]{ opacity:.38; pointer-events:none; }
.btn--sm{ font-size:var(--text-sm); padding:0 var(--space-4); height:36px; }
.btn--md{ font-size:var(--text-sm); padding:0 var(--space-6); height:44px; }
.btn--lg{ font-size:var(--text-md); padding:0 var(--space-8); height:54px; }
.btn--block{ width:100%; }
.btn--primary{ background:var(--surface-brand); color:var(--text-on-brand); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brand-hover); box-shadow:var(--shadow-brand); }
.btn--dark{ background:var(--surface-inverse); color:var(--text-inverse); }
.btn--dark:hover{ background:var(--ink-700); }
.btn--outline{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.btn--outline:hover{ background:var(--ink-900); color:var(--text-inverse); }
.btn--ghost{ background:transparent; color:var(--text-strong); }
.btn--ghost:hover{ background:var(--surface-inset); }
.btn--onDark{ background:var(--white); color:var(--ink-900); }
.btn--onDark:hover{ background:var(--yellow-400); }
.btn svg{ width:18px; height:18px; }

/* ===================== Card ===================== */
.card{ border-radius:var(--radius-card); padding:var(--space-6); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.card--default{ background:var(--surface-card); border:var(--border-hairline) solid var(--border-subtle); box-shadow:var(--shadow-sm); }
.card--flat{ background:var(--surface-subtle); border:var(--border-hairline) solid transparent; }
.card--outline{ background:var(--surface-card); border:var(--border-emphasis) solid var(--ink-900); }
.card--interactive{ cursor:pointer; }
.card--interactive:hover{ transform:translateY(var(--lift-y)); box-shadow:var(--shadow-md); border-color:var(--border-brand); }

/* ===================== Section heading ===================== */
.section-heading{ display:flex; flex-direction:column; gap:var(--space-4); align-items:flex-start; text-align:left; max-width:48rem; }
.section-heading--center{ align-items:center; text-align:center; max-width:var(--container-narrow); margin-inline:auto; }
.section-heading__eyebrow{ font-family:var(--font-text); font-size:var(--type-eyebrow-size); font-weight:var(--type-eyebrow-weight); letter-spacing:var(--type-eyebrow-tracking); text-transform:uppercase; color:var(--yellow-600); }
.section-heading--dark .section-heading__eyebrow{ color:var(--yellow-400); }
.section-heading__title{ font-family:var(--font-display); font-size:var(--display-lg); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter); line-height:var(--leading-tight); color:var(--text-strong); margin:0; }
.section-heading--dark .section-heading__title{ color:var(--white); }
.section-heading__lead{ font-family:var(--font-text); font-size:var(--text-lg); line-height:var(--leading-relaxed); color:var(--text-body); margin:0; }
.section-heading--dark .section-heading__lead{ color:var(--ink-300); }
.section-heading__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-6); flex-wrap:wrap; }

/* ===================== Hero ===================== */
.hero{ position:relative; overflow:hidden; background:var(--surface-inverse); }
.hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero__row{ position:relative; max-width:var(--container-max); margin:0 auto; padding:var(--space-24) var(--gutter); display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-12); align-items:center; }
.hero__copy{ display:flex; flex-direction:column; gap:var(--space-6); align-items:flex-start; }
.hero__title{ font-family:var(--font-display); font-size:var(--display-2xl); font-weight:800; letter-spacing:var(--tracking-tighter); line-height:var(--leading-tight); color:var(--white); margin:0; max-width:16ch; }
.hero__title em{ font-style:normal; color:var(--yellow-400); }
.hero__lead{ font-family:var(--font-text); font-size:var(--text-xl); line-height:var(--leading-normal); color:rgba(255,255,255,.82); margin:0; max-width:42ch; }
.hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; padding-top:var(--space-2); }
.hero__stats{ display:flex; gap:var(--space-16); padding-top:var(--space-8); flex-wrap:wrap; }
.hero__image{ width:100%; filter:drop-shadow(0 40px 60px rgba(0,0,0,.5)); }
.hero--no-image .hero__row{ grid-template-columns:1fr; max-width:52rem; }
@media (max-width:900px){
  .hero__row{ grid-template-columns:1fr; padding:var(--space-16) var(--gutter); }
  .hero__image{ order:-1; max-width:320px; }
}

/* ===================== Stat block ===================== */
.stat{ display:flex; flex-direction:column; gap:var(--space-1); }
.stat__value{ font-family:var(--font-display); font-size:var(--display-md); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter); line-height:1; color:var(--text-strong); }
.stat--dark .stat__value{ color:var(--yellow-400); }
.stat__value sup{ color:var(--yellow-500); font-size:.6em; top:-.3em; }
.stat__label{ font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text-muted); }
.stat--dark .stat__label{ color:var(--ink-400); }

/* ===================== Service card ===================== */
.service-card{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-8); }
.service-card__icon{ width:52px; height:52px; border-radius:var(--radius-md); display:grid; place-items:center; background:var(--surface-brand-soft); color:var(--yellow-700); }
.service-card__icon svg{ width:26px; height:26px; }
.service-card__title{ font-family:var(--font-display); font-size:var(--display-sm); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:var(--text-strong); margin:0; }
.service-card__desc{ font-family:var(--font-text); font-size:var(--text-sm); line-height:var(--leading-relaxed); color:var(--text-body); margin:0; }
.service-card__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.service-card__list li{ display:flex; gap:var(--space-2); align-items:center; font-family:var(--font-text); font-size:var(--text-sm); color:var(--text-muted); }
.service-card__list li::before{ content:''; width:5px; height:5px; border-radius:var(--radius-pill); background:var(--yellow-400); flex:0 0 auto; }

/* ===================== Work card ===================== */
.work-card{ position:relative; overflow:hidden; border-radius:var(--radius-media); background:var(--surface-inset); display:block; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor:pointer; }
.work-card:hover{ transform:translateY(var(--lift-y)); box-shadow:var(--shadow-lg); }
.work-card img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.work-card:hover img{ transform:scale(1.04); }
.work-card__scrim{ position:absolute; inset:0; background:var(--protection-scrim); }
.work-card__body{ position:absolute; inset:auto var(--space-6) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.work-card__client{ font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:var(--white); margin:0; }
.work-card__title{ font-family:var(--font-text); font-size:var(--text-sm); color:rgba(255,255,255,.78); margin:0; }
.work-card--4-3{ aspect-ratio:4/3; }
.work-card--4-5{ aspect-ratio:4/5; }
.work-card--3-4{ aspect-ratio:3/4; }
.work-card--1-1{ aspect-ratio:1/1; }

/* ===================== Testimonial card ===================== */
.testimonial{ padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-6); }
.testimonial__mark{ font-family:var(--font-display); font-size:56px; line-height:.7; font-weight:var(--weight-extrabold); color:var(--yellow-400); }
.testimonial__quote{ font-family:var(--font-text); font-size:var(--text-lg); font-weight:var(--weight-medium); line-height:var(--leading-normal); color:var(--text-strong); margin:0; }
.testimonial__foot{ display:flex; flex-direction:column; gap:2px; margin-top:auto; }
.testimonial__author{ font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-strong); }
.testimonial__role{ font-family:var(--font-text); font-size:var(--text-xs); color:var(--text-muted); }

/* ===================== CTA banner ===================== */
.cta-banner{ border-radius:var(--radius-2xl); padding:var(--space-16) var(--space-12); background:var(--gradient-brand); display:flex; flex-wrap:wrap; gap:var(--space-8); align-items:center; justify-content:space-between; }
.cta-banner--ink{ background:var(--gradient-ink); }
.cta-banner__copy{ display:flex; flex-direction:column; gap:var(--space-3); max-width:34rem; }
.cta-banner__title{ font-family:var(--font-display); font-size:var(--display-md); font-weight:var(--weight-extrabold); letter-spacing:var(--tracking-tighter); line-height:var(--leading-tight); color:var(--ink-900); margin:0; }
.cta-banner--ink .cta-banner__title{ color:var(--white); }
.cta-banner__lead{ font-family:var(--font-text); font-size:var(--text-lg); color:rgba(20,20,23,.72); margin:0; }
.cta-banner--ink .cta-banner__lead{ color:var(--ink-300); }
.cta-banner__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ===================== Forms ===================== */
.field{ display:flex; flex-direction:column; gap:var(--space-2); }
.field__label{ font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-strong); letter-spacing:-.01em; }
.field__label .req{ color:var(--yellow-600); }
.field__hint{ font-family:var(--font-text); font-size:var(--text-xs); color:var(--text-muted); }
.field__error{ font-family:var(--font-text); font-size:var(--text-xs); color:var(--red-500); }
.field--span2{ grid-column:1 / -1; }
.input, .textarea, .select select{ font-family:var(--font-text); font-size:var(--text-md); font-weight:var(--weight-medium); color:var(--text-strong); background:var(--surface-card); width:100%; border:var(--border-hairline) solid var(--border-default); border-radius:var(--radius-field); outline:none; transition:var(--transition-control); }
.input, .select select{ padding:0 var(--space-4); height:48px; }
.textarea{ padding:var(--space-3) var(--space-4); resize:vertical; line-height:var(--leading-normal); }
.input:focus, .textarea:focus, .select select:focus{ border-color:var(--ink-900); box-shadow:0 0 0 3px var(--yellow-200); }
.input.is-invalid, .textarea.is-invalid, .select select.is-invalid{ border-color:var(--red-500); }
.select{ position:relative; display:block; }
.select select{ appearance:none; padding-right:40px; }
.select::after{ content:'▾'; position:absolute; right:var(--space-4); top:50%; transform:translateY(-50%); pointer-events:none; color:var(--text-muted); font-size:12px; }
.checkbox{ display:inline-flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; }
.checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox__box{ width:22px; height:22px; flex:0 0 auto; margin-top:1px; border-radius:var(--radius-xs); display:grid; place-items:center; background:var(--surface-card); border:var(--border-emphasis) solid var(--border-default); color:var(--ink-900); font-size:13px; font-weight:800; line-height:1; transition:var(--transition-control); }
.checkbox input:checked ~ .checkbox__box{ background:var(--surface-brand); border-color:var(--yellow-400); }
.checkbox__box::after{ content:''; }
.checkbox input:checked ~ .checkbox__box::after{ content:'✓'; }
.checkbox__label{ font-family:var(--font-text); font-size:var(--text-sm); color:var(--text-body); line-height:var(--leading-normal); }

/* ===================== Badge / Tag ===================== */
.badge{ display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 10px; border-radius:var(--radius-pill); font-family:var(--font-text); font-size:var(--text-2xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.badge--brand{ background:var(--surface-brand); color:var(--text-on-brand); }
.badge--soft{ background:var(--surface-brand-soft); color:var(--yellow-700); }
.tag{ display:inline-flex; align-items:center; gap:var(--space-2); height:32px; padding:0 var(--space-4); border-radius:var(--radius-pill); font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-semibold); border:var(--border-hairline) solid var(--border-subtle); background:transparent; color:var(--text-body); cursor:pointer; transition:var(--transition-control); }
.tag:hover{ background:var(--surface-inset); }
.tag.is-active{ border-color:transparent; background:var(--surface-inverse); color:var(--text-inverse); }

/* ===================== Accordion ===================== */
.accordion-item{ border-top:var(--border-hairline) solid var(--border-subtle); }
.accordion-item:last-child{ border-bottom:var(--border-hairline) solid var(--border-subtle); }
.accordion-item__trigger{ all:unset; cursor:pointer; display:flex; width:100%; gap:var(--space-4); align-items:center; justify-content:space-between; padding:var(--space-6) 0; font-family:var(--font-display); font-size:var(--text-xl); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); color:var(--text-strong); box-sizing:border-box; }
.accordion-item__icon{ transition:transform var(--dur-base) var(--ease-out); color:var(--yellow-600); flex:0 0 auto; }
.accordion-item.is-open .accordion-item__icon{ transform:rotate(45deg); }
.accordion-item__panel{ overflow:hidden; max-height:0; opacity:0; transition:max-height var(--dur-slow) var(--ease-emphasis), opacity var(--dur-base) var(--ease-out); }
.accordion-item.is-open .accordion-item__panel{ max-height:320px; opacity:1; }
.accordion-item__panel p{ font-family:var(--font-text); font-size:var(--text-md); line-height:var(--leading-relaxed); color:var(--text-body); margin:0; padding-bottom:var(--space-6); max-width:42rem; }

/* ===================== Alert ===================== */
.alert[hidden]{ display:none; }
.alert{ display:flex; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); }
.alert--success{ background:var(--green-50); }
.alert--success .alert__icon{ color:var(--green-500); }
.alert__icon{ margin-top:1px; flex:0 0 auto; }
.alert__body{ display:flex; flex-direction:column; gap:2px; flex:1; }
.alert__title{ font-family:var(--font-text); font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text-strong); }
.alert__text{ font-family:var(--font-text); font-size:var(--text-sm); line-height:var(--leading-normal); color:var(--text-body); }
.alert__dismiss{ all:unset; cursor:pointer; color:var(--text-muted); line-height:1; }

/* ===================== Modal ===================== */
.modal-scrim{ position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:var(--space-6); background:var(--overlay-scrim); backdrop-filter:blur(6px); }
.modal-scrim.is-open{ display:grid; }
.modal{ width:100%; max-width:640px; background:var(--surface-card); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:var(--space-8); display:flex; flex-direction:column; gap:var(--space-5); max-height:85vh; overflow:auto; }
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); }
.modal__title{ font-family:var(--font-display); font-size:var(--display-sm); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); color:var(--text-strong); margin:0; }
.modal__close{ all:unset; cursor:pointer; width:36px; height:36px; border-radius:var(--radius-pill); display:grid; place-items:center; color:var(--text-muted); }
.modal__close:hover{ background:var(--surface-inset); }
.modal img{ width:100%; border-radius:var(--radius-md); max-height:280px; object-fit:cover; }
.modal__foot{ display:flex; gap:var(--space-3); justify-content:flex-end; }

/* ===================== Portfolio masonry ===================== */
.masonry{ column-count:3; column-gap:var(--space-6); }
.masonry__item{ break-inside:avoid; margin-bottom:var(--space-6); }
@media (max-width:900px){ .masonry{ column-count:2; } }
@media (max-width:600px){ .masonry{ column-count:1; } }

/* ===================== Process steps ===================== */
.step{ display:flex; gap:var(--space-5); align-items:flex-start; }
.step__num{ font-family:var(--font-display); font-size:var(--display-sm); font-weight:800; letter-spacing:var(--tracking-tighter); color:var(--yellow-400); line-height:1; }
.step h5{ margin:0 0 2px; }
.step p{ margin:0; font-size:var(--text-sm); color:var(--text-body); }

/* ===================== Contact page ===================== */
.contact-item{ display:flex; gap:var(--space-3); align-items:center; }
.contact-item__icon{ width:40px; height:40px; border-radius:var(--radius-pill); background:var(--surface-brand-soft); color:var(--yellow-700); display:grid; place-items:center; flex:0 0 auto; }
.contact-item__text{ font-size:var(--text-md); color:var(--text-body); font-weight:600; }

/* ===================== Icon utility ===================== */
.icon{ display:inline-flex; flex:0 0 auto; }
.icon svg{ display:block; }