/* ═══════════════════════════════════════════════════════════════
   AAA CPA Services
   Tokens transcribed from the design handoff. Two rules carried
   over from it and held throughout:

   · No media queries. Responsiveness is intrinsic — auto-fit grids
     with a meaningful minmax floor, flex-wrap, and clamp() on every
     size. The floor per grid is the number that matters.
   · Source Serif 4 only, including UI chrome. One variable file
     covers 300–600 plus the optical-size axis.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── ground ── */
  --desk:#e9e9ef;            /* behind the page card */
  --card:#f5f4f8;            /* the page card, sidebars, sections */
  --surface:#ffffff;         /* rows, inner cards, inputs */
  --pale:#efeefa;            /* secondary rows, received/closed states */
  --pale-alt:#f0eefa;        /* wireframe fills, object-model cells */
  --tint:#d9d5f2;            /* feature bands, active informational blocks */
  --tint-soft:#e6e3f7;       /* secondary tinted cards, disabled pills */
  --hero-sky:#afb3de;        /* the flat ground the hero image meets */

  /* ── ink ── */
  --ink:#2c2547;             /* headings, dark cards, primary buttons */
  --ink-deep:#14121c;        /* the one near-black CTA fill */
  --body:#241f33;            /* body text */
  --light:#f5f3fb;           /* text on ink */
  --light-2:#f7f6fb;         /* text on ink, buttons */

  /* ── accent ── */
  --accent:#8b7fd4;          /* the logo dot, focus borders, toggle fills */
  --accent-light:#c6bcf5;    /* the private-note indicator */

  /* ── lines ── */
  --border:#d9d5f2;          /* input and outline-button borders */
  --border-quiet:#e0dcf2;    /* hairline dividers inside cards */
  --border-quiet-2:#e6e3f2;
  --muted-violet:#b9b2e4;    /* dashed upload borders */
  --muted-violet-2:#c6c0e8;

  /* ── text on light ──────────────────────────────────────────────
     The handoff carried twelve near-identical opacities from .5 to
     .82. Measured against the grounds they actually sit on, every
     step below .65 fails WCAG AA for small text — and .5 was the
     Circular 230 notice, at 13px. Collapsed to four honest levels,
     all of which clear 4.5:1 even on the tint band, which is the
     lightest ground small text ever lands on. */
  --ink-faint:rgba(36,31,51,.68);   /* 4.69:1 on tint · 5.31 on card  */
  --ink-muted:rgba(36,31,51,.74);   /* 5.4:1  on tint · 6.2  on card  */
  --ink-soft:rgba(36,31,51,.82);    /* 6.7:1  on tint · 7.8  on card  */
  /* the darkest tier is --body, solid */

  /* ── text on ink ── floor raised to .62: .55 measured 4.37:1 on the
     lightened ink row, which is the ground it is actually used on. */
  --l-55:rgba(245,243,251,.62); --l-60:rgba(245,243,251,.64);
  --l-70:rgba(245,243,251,.72);  --l-72:rgba(245,243,251,.74);
  --l-74:rgba(245,243,251,.78); --l-76:rgba(245,243,251,.80);
  --l-78:rgba(245,243,251,.84); --l-82:rgba(245,243,251,.88);
  --l-86:rgba(245,243,251,.92);

  /* ── radii ── */
  --r-section:clamp(14px,1.6vw,20px);
  --r-card:clamp(12px,1.4vw,18px);
  --r-panel:18px;
  --r-row:14px;
  --r-row-sm:10px;
  --r-input:10px;
  --r-pill:999px;

  /* ── shadow ── */
  --sh-card:0 18px 50px rgba(44,37,71,.08);
  --sh-panel:0 20px 60px rgba(44,37,71,.1);
  --sh-phone:0 24px 60px rgba(44,37,71,.14);
  --sh-pill:0 12px 30px rgba(30,24,56,.22);

  /* ── measure and rhythm ── */
  --page-max:1320px;
  --portal-max:1280px;
  --gut:clamp(20px,4vw,56px);      /* the page gutter, and the grid's side track */
  --gap-card:clamp(14px,1.6vw,22px);
  --gap-col:clamp(28px,4vw,72px);
  --pad-card:clamp(24px,2.6vw,34px);

  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}

/* ── reset ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--card);
  color:var(--body);
  font-family:var(--serif);
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  font-optical-sizing:auto;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none;transition:opacity .18s ease}
a:hover{opacity:.72}
::selection{background:var(--tint)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
:where(a,button):focus-visible{opacity:1}

.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:11px 20px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--light-2);font-size:15px;
  transform:translateY(-180%);transition:transform .2s ease;
}
.skip:focus{transform:none;opacity:1}

/* Figures line up wherever they are stacked. Source Serif 4 carries
   a tnum feature; without it the columns drift. */
.tnum,.figure,td.num,.stat{font-variant-numeric:tabular-nums}

/* ── the page ──────────────────────────────────────────────────────
   The handoff renders this as a 1320px card floating on a grey desk.
   That reads as a widget on a wide screen, so the desk is gone and the
   card fills the viewport. Everything inside is unchanged. */
.desk{background:var(--card)}
.page{
  background:var(--card);
  max-width:1800px;margin-inline:auto;
  padding:0 clamp(20px,3vw,52px) clamp(40px,6vw,96px);
}

/* ── type roles ────────────────────────────────────────────────── */
.h1{font-size:clamp(36px,5.2vw,72px);font-weight:400;line-height:1.04;letter-spacing:-.026em;color:var(--ink)}
.h1--hero{font-size:clamp(40px,5.8vw,82px)}
.h2{font-size:clamp(28px,3.4vw,46px);font-weight:400;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.h2--lg{font-size:clamp(32px,4.2vw,58px);line-height:1.05;letter-spacing:-.024em}
.h2--sm{font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.018em}
.h3{font-size:clamp(21px,2vw,27px);font-weight:400;line-height:1.16;letter-spacing:-.014em;color:var(--ink)}
.h3--sm{font-size:clamp(20px,1.9vw,26px)}
.h4{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
.lead{font-size:clamp(17px,1.5vw,20px);font-weight:300;line-height:1.5}
.statement{font-size:clamp(19px,1.85vw,26px);font-weight:300;line-height:1.38;letter-spacing:-.012em;color:var(--ink)}
.eyebrow{display:block;font-size:15px;font-weight:300;color:var(--ink-muted)}
.caps{font-size:14px;font-weight:400;letter-spacing:.02em}
.small{font-size:15px;line-height:1.55;font-weight:300}
.meta{font-size:14px;font-weight:300;line-height:1.5;color:var(--ink-muted)}
.legal{font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-faint)}

.on-ink{color:var(--light)}
.on-ink-body{color:var(--l-74)}

/* ── nav ───────────────────────────────────────────────────────── */
.nav{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,3vw,44px);
  padding:clamp(6px,1vw,14px) clamp(4px,1vw,16px) clamp(20px,3vw,34px);
}
.nav__brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.nav__brand:hover{opacity:1}
.wordmark{font-size:20px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.nav__links{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,2.2vw,32px);font-size:16px;color:var(--body);
}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:400}

/* ── buttons ───────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;border-radius:var(--r-pill);
  padding:12px 26px;font-size:15px;font-weight:400;
  cursor:pointer;text-align:center;
  transition:opacity .18s ease,background-color .18s ease;
}
.btn:hover{opacity:.82}
.btn--ink{background:var(--ink);color:var(--light-2)}
.btn--deep{background:var(--ink-deep);color:var(--light-2);padding:15px 30px;font-size:16px;box-shadow:var(--sh-pill)}
.btn--outline{background:transparent;color:var(--ink);border:1px solid var(--border);padding:11px 25px}
.btn--outline:hover{opacity:1;background:var(--tint-soft)}
.btn--light{background:var(--light);color:var(--ink)}
.btn--sm{padding:10px 20px;font-size:14px}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--tint-soft);color:var(--ink-faint);cursor:not-allowed;box-shadow:none}

/* the circular arrow — Source Serif 4 has no U+2192, so it is drawn */
.arrowlink{display:inline-flex;align-items:center;gap:12px;font-size:15px;color:var(--ink)}
.arrowlink__ring{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-pill);
  border:1px solid var(--border);
  transition:background-color .18s ease,border-color .18s ease;
}
.arrowlink:hover .arrowlink__ring{background:var(--tint);border-color:var(--tint)}
.arrowlink--ink{color:var(--light)}
.arrowlink--ink .arrowlink__ring{border-color:var(--l-55)}
.arrowlink--ink:hover .arrowlink__ring{background:var(--l-55);border-color:transparent}

/* ── sections and grids ────────────────────────────────────────── */
.sec{padding:clamp(46px,6vw,92px) clamp(4px,1.6vw,26px) 0}
.sec--lg{padding-top:clamp(52px,8vw,120px)}
.sec--tight{padding-top:clamp(34px,4.5vw,64px)}
.grid{display:grid;gap:var(--gap-card)}
.grid>*{min-width:0}
/* min() on the track floor stops a 300px minimum forcing a track wider
   than its own container on a narrow phone. */
.g-260{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.g-280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g-300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g-320{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g-340{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.gap-col{gap:var(--gap-col)}

/* `grid-column: span 2` inside an auto-fit grid is a trap: once the grid
   collapses to one track the item still demands two, so the browser adds
   an implicit second column and the page scrolls sideways. A container
   query fixes it against the grid's OWN width — not the viewport — so the
   no-media-query rule still holds. Browsers without support get today's
   behaviour, which is what the prototype already does. */
.grid--spanning{container-type:inline-size}
.span-2{grid-column:span 2}
@container (width < 640px){
  .span-2{grid-column:auto}
}
.items-start{align-items:start}
.items-center{align-items:center}

/* ── cards ─────────────────────────────────────────────────────── */
.card{
  position:relative;min-width:0;
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(48px,7vw,96px);
  padding:var(--pad-card);border-radius:var(--r-card);
  min-height:300px;
}
.card--tint{background:linear-gradient(160deg,#d9d5f2 0%,#e6e3f7 68%);overflow:hidden}
.card--ink{background:var(--ink)}
.card--soft{background:var(--tint-soft)}
.card--surface{background:var(--surface)}
.card--flat{min-height:0;gap:12px;justify-content:flex-start}
.card__art{
  position:absolute;right:clamp(-16px,-1.4vw,0px);bottom:clamp(-4px,-.4vw,0px);
  width:clamp(240px,54%,450px);height:auto;pointer-events:none;
}
.card>*{position:relative}

/* ── numbered list (service lines) ─────────────────────────────── */
.numlist{display:grid;gap:clamp(18px,2vw,26px)}
.numlist__row{display:flex;gap:clamp(14px,2vw,26px);align-items:baseline}
.numlist__n{min-width:2ch;font-size:15px;font-weight:300;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.numlist__t{font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.012em;color:var(--ink)}
.numlist__d{font-size:15px;font-weight:300;line-height:1.55;margin-top:6px;max-width:62ch;color:var(--ink-soft)}

/* ── hero ──────────────────────────────────────────────────────── */
.hero{position:relative;border-radius:var(--r-section);overflow:hidden;background:var(--hero-sky)}
.hero__img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(240,238,251,.88) 0%,rgba(235,232,249,.62) 28%,rgba(226,222,246,.18) 50%,rgba(214,209,240,0) 68%);
}
.hero__body{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(48px,6vw,92px) clamp(20px,5vw,72px) 33%;
}
.hero__corners{
  position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);bottom:clamp(18px,2vw,28px);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:rgba(250,249,255,.92);text-shadow:0 1px 8px rgba(30,24,56,.45);
}

/* ── page hero band (inner pages) ──────────────────────────────── */
.band{
  border-radius:var(--r-section);background:var(--tint);
  padding:clamp(32px,4.4vw,64px) clamp(22px,3vw,48px);
}
.band--soft{background:var(--tint-soft)}

/* ── closing section ───────────────────────────────────────────── */
.close{
  position:relative;overflow:hidden;border-radius:var(--r-section);
  min-height:clamp(460px,50vw,640px);display:flex;align-items:center;
}
.close__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.close__scrim{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(233,231,247,.94) 0%,rgba(230,227,246,.86) 34%,rgba(222,218,242,.42) 58%,rgba(214,209,240,0) 78%);
}
.close__body{position:relative;padding:clamp(30px,4vw,62px);max-width:640px}

/* ── forms ─────────────────────────────────────────────────────── */
.field{display:grid;gap:8px}
.field__label{font-size:15px;font-weight:400;color:var(--ink)}
.input,.select,.textarea{
  width:100%;padding:13px 15px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-input);
  font-size:16px;font-weight:300;color:var(--body);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.input::placeholder,.textarea::placeholder{color:var(--ink-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--muted-violet)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--ink);
}
.textarea{min-height:140px;resize:vertical;line-height:1.55}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%232c2547' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.status{font-size:15px;font-weight:300;color:var(--ink-muted);min-height:1.5em}

/* ── prose (legal pages) ───────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{margin:clamp(32px,4vw,52px) 0 12px}
.prose h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:28px 0 8px;color:var(--ink)}
.prose p{margin:0 0 1em;line-height:1.7}
.prose ul{margin:0 0 1em;display:grid;gap:.5em}
.prose li{padding-left:22px;position:relative;line-height:1.7}
.prose li::before{content:'';position:absolute;left:0;top:.75em;width:9px;height:1px;background:var(--muted-violet)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose strong{font-weight:600;color:var(--ink)}

/* ── footer ────────────────────────────────────────────────────── */
.foot{padding:clamp(56px,8vw,120px) clamp(4px,1.6vw,26px) 0}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(26px,3.4vw,48px)}
.foot__h{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:14px}
.foot__list{display:grid;gap:9px;font-size:15px;font-weight:300;color:var(--ink-soft)}
.foot__rule{height:1px;background:var(--border-quiet);margin:clamp(30px,4vw,52px) 0 clamp(18px,2.4vw,28px)}
.foot__legal{font-size:13px;font-weight:300;line-height:1.6;color:var(--ink-faint);max-width:92ch}
.foot__base{
  display:flex;flex-wrap:wrap;gap:10px clamp(16px,2vw,28px);
  margin-top:clamp(16px,2vw,24px);font-size:13px;font-weight:300;color:var(--ink-faint);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}