@import url("https://fonts.googleapis.com/css2?family=Prata&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* =============================================================
   DESIGN TOKENS (verbatim from design-reference/tokens.css)
   ============================================================= */

/* ===== tokens/colors.css ===== */
:root{
/* Base — Duster Teal (from the logo mark, #74C2C2) */
--teal-50:#F2FAFA;--teal-100:#E2F3F3;--teal-200:#C6E7E7;--teal-300:#A6D9D9;--teal-400:#8DCECE;--teal-500:#74C2C2;--teal-600:#57A5A6;--teal-700:#438185;--teal-800:#316165;--teal-900:#224347;
/* Base — Ink (slate, from the wordmark + headings) */
--ink-900:#22313F;--ink-800:#2C3E50;--ink-700:#3F5468;--ink-500:#64788B;--ink-400:#8496A7;--ink-300:#B9C6D1;--ink-200:#D8E0E7;--ink-100:#EBF0F3;--ink-50:#F6F8FA;
/* Semantic status */
--green-600:#3E8E5E;--green-100:#E1F2E8;--amber-600:#B07C24;--amber-100:#FAF0DC;--red-600:#C15B4E;--red-100:#F9E7E4;
/* Aliases — surfaces */
--surface-page:#FFFFFF;--surface-mist:#F2FAFA;--surface-card:#FFFFFF;--surface-ink:#22313F;--surface-accent:#74C2C2;
/* Aliases — text */
--text-heading:var(--ink-800);--text-body:var(--ink-700);--text-muted:var(--ink-500);--text-on-accent:#FFFFFF;--text-on-ink:#EBF0F3;--text-accent:var(--teal-700);
/* Aliases — interactive */
--accent:var(--teal-500);--accent-strong:var(--teal-700);--accent-deep:var(--teal-800);--accent-soft:var(--teal-100);--accent-mist:var(--teal-50);
--link:var(--teal-700);--link-hover:var(--teal-800);
/* Aliases — lines & focus */
--border-subtle:var(--ink-200);--border-input:var(--ink-300);--border-accent:var(--teal-300);--focus-ring:0 0 0 3px rgba(116,194,194,.45);
}

/* ===== tokens/typography.css ===== */
:root{
--font-display:"Prata",Georgia,"Times New Roman",serif;
--font-body:"Mulish","Segoe UI",Helvetica,Arial,sans-serif;
/* Body scale */
--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:21px;
/* Display scale (Prata, weight 400 only) */
--display-sm:26px;--display-md:34px;--display-lg:44px;--display-xl:58px;
/* Weights (Mulish) */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
/* Leading & tracking */
--leading-tight:1.15;--leading-snug:1.3;--leading-body:1.65;
--tracking-display:0.01em;--tracking-eyebrow:0.18em;
}

/* ===== tokens/spacing.css ===== */
:root{
/* 4px base scale */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
/* Corner radii — soft but not bubbly */
--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
/* Layout */
--container-max:1100px;--section-pad:96px;
}

/* ===== tokens/effects.css ===== */
:root{
/* Shadows — soft, slate-tinted, never harsh */
--shadow-card:0 2px 6px rgba(34,49,63,.05),0 10px 28px rgba(34,49,63,.07);
--shadow-card-hover:0 4px 10px rgba(34,49,63,.06),0 18px 44px rgba(34,49,63,.12);
--shadow-btn:0 2px 8px rgba(67,129,133,.28);
--shadow-header:0 2px 12px rgba(34,49,63,.08);
/* Motion — calm ease-outs, nothing bouncy */
--ease-out:cubic-bezier(.22,.61,.36,1);
--duration-fast:150ms;
--duration-base:250ms;
--duration-slow:600ms;
}

/* =============================================================
   BASE ELEMENT STYLES
   ============================================================= */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:76px}

body{margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;color:var(--text-heading);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin:0 0 var(--space-4)}
h1{font-size:var(--display-lg)}h2{font-size:var(--display-md)}h3{font-size:var(--display-sm)}h4{font-size:var(--text-xl)}
p{margin:0 0 var(--space-4)}
a{color:var(--link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--link-hover)}
::selection{background:var(--accent-soft);color:var(--ink-800)}

img{max-width:100%;display:block}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* =============================================================
   LAYOUT PRIMITIVES
   ============================================================= */

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

.section{padding:var(--section-pad) 0}
.section--mist{background:var(--surface-mist)}
.section--white{background:var(--surface-page)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =============================================================
   COMPONENT — Button
   ============================================================= */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  border-radius:var(--radius-md);text-decoration:none;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--duration-fast) var(--ease-out),
             transform var(--duration-fast) var(--ease-out),
             box-shadow var(--duration-fast) var(--ease-out);
}
.btn:focus-visible{box-shadow:var(--focus-ring)}

/* Sizes */
.btn--sm{padding:8px 18px;font-size:13px}
.btn--md{padding:12px 26px;font-size:15px}
.btn--lg{padding:15px 34px;font-size:16px}

/* Variants */
.btn--primary{background:var(--teal-700);color:var(--text-on-accent);border-color:transparent}
.btn--primary:hover{background:var(--teal-800);color:var(--text-on-accent);box-shadow:var(--shadow-btn);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0)}
.btn--primary:focus-visible{box-shadow:var(--focus-ring),var(--shadow-btn)}

.btn--secondary{background:#fff;color:var(--teal-800);border:1px solid var(--teal-300)}
.btn--secondary:hover{background:var(--teal-100);color:var(--teal-800)}

.btn--ghost{background:transparent;color:var(--teal-700);border-color:transparent}
.btn--ghost:hover{background:var(--accent-mist);color:var(--teal-700)}

/* =============================================================
   COMPONENT — Badge
   ============================================================= */

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:12px;font-weight:var(--weight-bold);
  letter-spacing:.04em;padding:5px 14px;border-radius:var(--radius-pill);
  background:var(--teal-100);color:var(--teal-800);
}

/* =============================================================
   COMPONENT — Section heading
   ============================================================= */

.section-heading{max-width:640px}
.section-heading--center{margin:0 auto var(--space-7);text-align:center}
.section-heading--left{margin:0 0 var(--space-7)}

.section-heading__eyebrow{
  font-size:12px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--teal-700);margin:0 0 var(--space-3);
}
.section-heading__title{
  font-family:var(--font-display);font-weight:400;font-size:var(--display-md);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);
  color:var(--text-heading);margin:0;
}
.section-heading__lede{
  font-size:var(--text-lg);line-height:var(--leading-body);
  color:var(--text-muted);margin:var(--space-4) 0 0;
}

/* =============================================================
   COMPONENT — Card
   ============================================================= */

.card{
  background:var(--surface-card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:var(--space-6);
}
.card--pad-lg{padding:var(--space-7)}
.card--hover{transition:transform var(--duration-base) var(--ease-out),
                        box-shadow var(--duration-base) var(--ease-out)}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}

/* =============================================================
   COMPONENT — Service card
   ============================================================= */

.service-card{text-align:center;padding:var(--space-6) var(--space-5)}
.service-card__icon{
  width:64px;height:64px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-mist);color:var(--teal-700);
  font-size:26px;margin-bottom:var(--space-4);
}
.service-card__title{
  font-family:var(--font-display);font-weight:400;font-size:22px;
  color:var(--text-heading);margin:0 0 var(--space-2);line-height:var(--leading-tight);
}
.service-card__body{
  font-size:15px;line-height:var(--leading-body);color:var(--text-muted);margin:0;
}

/* =============================================================
   PHOTOGRAPHY
   ============================================================= */

.photo-card{
  position:relative;overflow:hidden;margin:0;background:var(--teal-100);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
}
.photo-card>img:first-child{width:100%;height:auto}
.photo-card--about{border-radius:var(--radius-lg)}
.photo-card__mark{
  position:absolute;right:var(--space-5);bottom:var(--space-5);
  width:72px;height:72px;display:flex;align-items:center;justify-content:center;
  padding:14px;border:1px solid rgba(255,255,255,.72);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.88);box-shadow:var(--shadow-card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.photo-card__mark img{width:100%;height:100%;object-fit:contain}

/* =============================================================
   HEADER
   ============================================================= */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  transition:box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled{
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-header);
}
.site-header__inner{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  height:76px;gap:var(--space-5);
}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--ink-800)}
.brand:hover{color:var(--ink-800)}
.brand__mark{height:44px;width:auto}
.brand__word{
  font-family:var(--font-display);font-weight:400;font-size:20px;
  letter-spacing:.1em;color:var(--ink-800);text-transform:uppercase;
}

.header-actions{display:flex;align-items:center;gap:var(--space-5)}

.site-nav__links{display:flex;align-items:center;gap:var(--space-6);list-style:none;margin:0;padding:0}
.site-nav__link{font-size:15px;font-weight:var(--weight-semibold);color:var(--ink-700)}
.site-nav__link:hover{color:var(--teal-800)}

.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--border-input);
  border-radius:var(--radius-md);background:#fff;color:var(--ink-800);
  font-size:22px;cursor:pointer;
}
.nav-toggle:focus-visible{box-shadow:var(--focus-ring)}

/* =============================================================
   HERO
   ============================================================= */

.hero{background:var(--surface-mist)}
.hero__inner{
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-8);
  align-items:center;padding:88px 24px 96px;
}
.hero__eyebrow{
  font-size:13px;font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--teal-700);margin:0 0 var(--space-4);
}
.hero__title{font-size:var(--display-xl);margin:0 0 20px;line-height:var(--leading-tight)}
.hero__lede{font-size:var(--text-xl);color:var(--text-muted);max-width:44ch;margin:0 0 var(--space-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__note{font-size:14px;color:var(--ink-500);margin:22px 0 0}
.hero__note a{color:var(--ink-500);font-weight:var(--weight-semibold)}
.hero__note a:hover{color:var(--teal-800)}

/* =============================================================
   SERVICES
   ============================================================= */

.services__row-1{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.services__row-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);
  max-width:66%;margin:var(--space-5) auto 0}

/* =============================================================
   ABOUT
   ============================================================= */

.about__inner{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-8);align-items:center}
.about__body{font-size:17px;max-width:56ch}
.about__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-2)}

/* =============================================================
   CALL TO ACTION
   ============================================================= */

.contact__inner{max-width:920px;margin:0 auto}
.call-card{
  display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:var(--space-5);
  padding:var(--space-7);background:var(--surface-mist);border:1px solid var(--teal-100);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
}
.call-card__icon{
  width:72px;height:72px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--teal-100);color:var(--teal-800);font-size:30px;
}
.call-card__eyebrow{
  margin:0 0 2px;font-size:12px;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--teal-700);
}
.call-card__number{
  display:inline-block;font-family:var(--font-display);font-size:var(--display-md);
  line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--ink-800);
}
.call-card__number:hover{color:var(--teal-800)}
.call-card__note{margin:6px 0 0;font-size:14px;color:var(--text-muted)}

/* =============================================================
   FOOTER
   ============================================================= */

.site-footer{background:var(--surface-ink);color:var(--text-on-ink);padding:56px 0 40px}
.site-footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.site-footer__word{
  font-family:var(--font-display);font-weight:400;font-size:22px;
  letter-spacing:.12em;color:#fff;margin:0 0 10px;text-transform:uppercase;
}
.site-footer__tagline{font-size:14px;color:var(--ink-400);max-width:34ch;margin:0}
.site-footer__contact{display:flex;flex-direction:column;gap:var(--space-2);font-size:15px}
.site-footer__contact a{color:var(--teal-300);font-weight:var(--weight-semibold)}
.site-footer__contact a:hover{color:var(--teal-200)}
.site-footer__contact i{margin-right:var(--space-2)}
.site-footer__bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  font-size:13px;color:var(--ink-400);
}

/* =============================================================
   SCROLL FADE-UP (IntersectionObserver)
   ============================================================= */

.fade-up{opacity:0;transform:translateY(20px);
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out)}
.fade-up.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{opacity:1;transform:none;transition:none}
  .btn,.card--hover{transition:none}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width:900px){
  :root{--section-pad:64px}

  /* Header: collapse text links behind a disclosure toggle;
     brand + call CTA stay visible in the header row */
  .nav-toggle{display:inline-flex}
  .site-nav__links{
    position:absolute;top:76px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:var(--shadow-header);
    padding:var(--space-2) var(--space-5) var(--space-4);
    display:none;
  }
  .site-nav__links.is-open{display:flex}
  .site-nav__link{display:block;padding:var(--space-4) 0;border-bottom:1px solid var(--border-subtle)}
  .site-nav__links li:last-child .site-nav__link{border-bottom:0}

  /* Hero: single column, photo below text */
  .hero__inner{grid-template-columns:1fr;gap:var(--space-6);padding:64px 24px 72px}
  .hero__title{font-size:var(--display-lg)}

  /* Services: 2-up, drop the desktop 66% constraint */
  .services__row-1{grid-template-columns:repeat(2,1fr)}
  .services__row-2{grid-template-columns:repeat(2,1fr);max-width:none;margin-top:var(--space-5)}

  /* About: single column, panel above text */
  .about__inner{grid-template-columns:1fr;gap:var(--space-6)}
  .about__media{order:-1}

  .call-card{grid-template-columns:64px 1fr;padding:var(--space-6)}
  .call-card__icon{width:64px;height:64px}
  .call-card__button{grid-column:1 / -1;width:100%}
}

@media (max-width:560px){
  /* Header: tighten so brand + CTA + toggle fit on one 76px row */
  .brand__word{font-size:18px;white-space:nowrap}
  .site-header__inner{gap:var(--space-3)}
  .header-actions{gap:var(--space-3)}
  .header-actions .btn{padding:8px 12px}

  .hero__title{font-size:var(--display-md)}
  /* Services: 1-up */
  .services__row-1,.services__row-2{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
  .call-card{grid-template-columns:1fr;text-align:center}
  .call-card__icon{margin:0 auto}
  .call-card__number{font-size:var(--display-sm)}
  .site-footer__top{gap:var(--space-6)}
}

@media (max-width:420px){
  /* Mark-only brand — the lockup won't fit beside the CTA and toggle */
  .brand__word{display:none}
}