/* ═══════════════════════════════════════════════════════════════
   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:#dcd3f2;        /* 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. Raised one step on
     2026-09-09: with the body at weight 300 the lighter tones read as
     faint on a Windows screen, and the weight went up with them. */
  --ink-faint:rgba(36,31,51,.72);   /* 5.25:1 on tint · 6.04 on card  */
  --ink-muted:rgba(36,31,51,.80);   /* 6.60:1 on tint · 7.86 on card  */
  --ink-soft:rgba(36,31,51,.88);    /* 8.27:1 on tint · 10.22 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:400;
  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,button,summary{-webkit-tap-highlight-color:transparent}
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);
  /* every screen-size decision below queries this width, not the viewport */
  container:page/inline-size;
}

/* ── type roles ────────────────────────────────────────────────── */
.h1{font-size:clamp(36px,5.2vw,72px);font-weight:500;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:500;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:500;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:400;line-height:1.5}
.statement{font-size:clamp(19px,1.85vw,26px);font-weight:400;line-height:1.38;letter-spacing:-.012em;color:var(--ink)}
.eyebrow{display:block;font-size:15px;font-weight:400;color:var(--ink-muted)}
.caps{font-size:14px;font-weight:400;letter-spacing:.02em}
.small{font-size:15px;line-height:1.55;font-weight:400}
.meta{font-size:14px;font-weight:400;line-height:1.5;color:var(--ink-muted)}
.legal{font-size:14px;font-weight:400;line-height:1.6;color:var(--ink-faint)}

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

/* ── 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:500}
/* the links and the portal pill sit in a native <details>: open on a
   laptop, a menu on a phone or tablet (see the phone block at the end) */
.nav__menu{display:block}
.nav__toggle{display:none}
.nav__panel{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}

/* ── 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:500;
  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)}
/* --border is the tint colour, so on the tint band the outline vanished */
.band .btn--outline,.close .btn--outline{border-color:rgba(44,37,71,.28)}
.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--tall{gap:clamp(56px,9vw,120px)}
.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}
/* the <picture> wrapper around the art must not become its containing block */
.card>picture{display:contents}
/* a narrow card cannot hold the art behind the text: put it in flow, after the
   copy. Sits after the base rule on purpose: equal specificity, last one wins. */
@container (width < 640px){
  .card__art{position:static;order:3;align-self:flex-end;width:clamp(200px,60%,320px);margin:0}
}

/* ── 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:400;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:400;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);
}
/* ── ratios that follow the screen ──────────────────────────────────
   The hero image's own ratio (2752:1536) suits a laptop; on a phone or a
   tablet held upright it is a strip under the copy. Below 1000px of page
   width — every tablet in portrait, and the 1024px landscape iPad — the
   image covers the whole hero and the hero takes its height from the
   device's screen (svh), so the field is a real part of the first view
   however tall the screen is. Queried against the page's width, so the
   no-media-query rule holds; a browser without container queries keeps
   the laptop layout. */
@container page (width < 1000px){
  .hero{min-height:clamp(640px,92svh,860px)}
  .hero__img{top:0;height:100%;object-fit:cover;object-position:50% 100%}
}


/* ── 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:400;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:400;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:400;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:14px;font-weight:400;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:14px;font-weight:400;color:var(--ink-faint);
}

/* ── phones and tablets ───────────────────────────────────────────
   The handoff is a laptop mockup. Below 1000px of page width the nav
   becomes a menu; below 800px the closing band stacks its copy over a
   veil at the top with the vault beneath; below 600px cards drop their
   300px minimum, the footer runs two columns and the hero's corner
   labels go. All container queries against the page width. */
@container page (width < 1000px){
  /* The <details> takes a full-width, zero-height row of its own under the
     brand; the menu button is anchored up into the brand row and the panel
     hangs below. Both are positioned against the details, so it does not
     matter whether the browser makes the details or its content box the
     containing block — Chrome does the latter, which once left the panel a
     44px sliver at the right edge. */
  .nav{row-gap:0;position:relative;z-index:60;padding-bottom:clamp(14px,2.4vw,24px)}
  .nav__menu{flex:1 1 100%;position:relative}
  .nav__toggle{
    position:absolute;right:-6px;bottom:calc(100% - 7px);
    display:grid;place-content:center;gap:5px;
    width:44px;height:44px;border-radius:var(--r-pill);
    cursor:pointer;list-style:none;
  }
  .nav__toggle::-webkit-details-marker{display:none}
  .nav__toggle span{
    display:block;width:20px;height:1.5px;background:var(--ink);
    transition:transform .32s cubic-bezier(.22,1,.36,1);
  }
  .nav__menu[open] .nav__toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .nav__menu[open] .nav__toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .nav__panel{
    position:absolute;left:0;right:0;top:10px;
    display:grid;gap:0;padding:8px 10px 16px;
    background:var(--surface);border-radius:var(--r-card);box-shadow:var(--sh-panel);
  }
  .nav__links{display:grid;gap:0;font-size:19px}
  .nav__links a{display:block;padding:13px 10px;border-bottom:1px solid var(--border-quiet)}
  .nav__links a:last-child{border-bottom:0}
  .nav__panel .btn{margin:14px 10px 0;justify-self:start}
  /* without the script the menu stays open: keep it in flow, not floating */
  html:not(.js) .nav__toggle{display:none}
  html:not(.js) .nav__panel{position:static;box-shadow:none;background:transparent;padding:0}
}
@container page (width < 800px){
  .close{min-height:clamp(560px,78svh,720px);align-items:flex-start}
  .close__img{object-position:50% 100%}
  .close__scrim{background:linear-gradient(180deg,rgba(233,231,247,.96) 0%,rgba(231,228,246,.94) 46%,rgba(224,220,243,.58) 68%,rgba(214,209,240,0) 88%)}
  .close__body{padding:clamp(26px,5vw,40px) clamp(22px,4vw,32px)}
}
@container page (width < 600px){
  .card,.card--tall{min-height:0;gap:clamp(22px,6vw,36px)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,36px) 16px}
  .foot__grid>:first-child,.foot__grid>:last-child{grid-column:1/-1}
  .hero__corners{display:none}
}

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