/* ==========================================================================
   Larsen CPA - layout v2 (preview)
   Loaded after assets/style.css. Nothing in style.css changes; this sheet only
   adds the primitives the restructured navigation, home page and primary
   service templates need, and the responsive rules that follow from six
   navigation items.

   Register: established professional firm. Typography and rules carry the
   structure. Cards are authorised for the new layout and are kept inside the
   register: 1px rules, existing tokens, no shadows, no gradients, no radius,
   no transforms.

   New primitives
     .cards / .card / .card--primary / .card--wide
     .card__list .card__price .card__note .card__foot .card__link
     .callout / .callout--dark
     .note-line
     .page-head
     .cred-line

   Colour: only the :root tokens. The on-dark callout reuses the white and
   rgba(255,255,255,*) values already present in style.css (.cta p, .cta .btn,
   footer.site); no new colour is introduced.
   ========================================================================== */

/* --- cards --------------------------------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  align-items:stretch;
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-strong);
  background:var(--paper);
  padding:36px 36px 32px;
}
.card--primary{border-top:2px solid var(--navy)}
.card:hover,.card:focus-within{border-color:var(--navy)}

.card h2{font-size:1.6rem;margin-bottom:14px}
.card h3{font-size:1.3rem;margin-bottom:10px}
.card__body{max-width:64ch}

.card__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.card__list li{font-size:.95rem;color:var(--slate);padding-left:18px;position:relative}
.card__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold);
}

.card__note{
  margin-top:26px;border-top:1px solid var(--line);padding-top:18px;
  font-size:.95rem;color:var(--slate);
}
.card__note p{margin:0}
.card__note p + p{margin-top:9px}
/* the price line outranks the note paragraph rules above */
.card .card__price{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;margin:0 0 9px;
}

.card__foot{margin-top:auto;padding-top:28px}
.card__link{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);
}
.card__link:hover{text-decoration:underline;text-underline-offset:4px}

/* wide variant: the smaller supporting section on the home page */
.card--wide{padding:32px 36px}
.card__inner{
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:44px;align-items:end;
}
.card__inner .card__foot{margin-top:0;padding-top:0;padding-bottom:4px}
.card__inner h2{margin-bottom:14px}

/* --- price notice -------------------------------------------------------- */
.callout{
  border:1px solid var(--line-strong);
  border-top:2px solid var(--gold);
  background:var(--paper);
  padding:28px 30px;
}
.callout p{font-size:.95rem;color:var(--slate);margin:0}
.callout p + p{margin-top:9px}
/* label and price outrank the paragraph rule above */
.callout > .callout__label{
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);margin:0 0 12px;
}
.callout > .callout__price{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.26;letter-spacing:-.012em;
  margin:0 0 12px;
}

.callout--dark{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  border-top-color:var(--gold);
  max-width:58ch;
  margin-bottom:30px;
}
.callout--dark > .callout__label{color:rgba(255,255,255,.72)}
.callout--dark > .callout__price{color:#fff}
.callout--dark p{font-size:.95rem;color:rgba(255,255,255,.85)}

/* --- one line under a rule ---------------------------------------------- */
.note-line{
  margin-top:30px;border-top:1px solid var(--line);padding-top:20px;
  color:var(--slate);font-size:.98rem;max-width:72ch;
}
section.alt .note-line{border-top-color:var(--line-strong)}

/* --- page head: intro beside the page aside ------------------------------ */
.page-head{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:60px;align-items:start;
}
.page-head h1{margin-bottom:24px}
.page-head .lede{max-width:56ch}

/* --- credibility line ---------------------------------------------------- */
.cred-line{border-top:1px solid var(--line-strong);padding-top:26px}
.cred-line p{
  font-family:var(--serif);color:var(--navy);font-size:1.12rem;line-height:1.5;
  max-width:72ch;margin:0;
}

/* --- responsive ---------------------------------------------------------- */
/* Six navigation items need 1105px beside the logo to hold one line, so the
   masthead stacks from 1160px down and the nav never wraps under the logo. */
@media (max-width:1160px){
  .masthead .wrap{flex-direction:column;align-items:flex-start;gap:16px}
  nav.main{gap:22px}
}

/* Hit area only: the nav and footer links stay 23px tall so the masthead
   geometry is unchanged, and the transparent overlay brings the target to
   roughly 35x31px. No visual change. */
nav.main a,footer.site ul a{position:relative}
nav.main a::after,footer.site ul a::after{
  content:"";position:absolute;left:-6px;right:-6px;top:-4px;bottom:-4px;
}

@media (max-width:900px){
  /* Home service cards: three across on desktop, stacked in one column on
     tablet and phone widths (same single styling, so they still read as a set). */
  .cards{grid-template-columns:1fr;gap:24px}
  .card{padding:30px 28px 26px}
  .card--wide{padding:28px}
  .card__inner{grid-template-columns:1fr;gap:26px;align-items:start}
  .card__inner .card__foot{padding-bottom:0}
  .page-head{grid-template-columns:1fr;gap:34px}
  .callout{padding:26px 28px}
}

@media (max-width:520px),(max-width:960px) and (max-height:500px){
  .card{padding:26px 22px 22px}
  .card--wide{padding:26px 22px}
  .callout{padding:22px}
  .cred-line p{font-size:1.04rem}
  nav.main{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;width:100%}
}

/* ==========================================================================
   Build additions (copy lane, 2026-09-24). Loaded as part of style-v2.css.
   Only the utilities the seven built pages need on top of the design sheet.
   ========================================================================== */

/* single column page head: pages whose intro takes the full measure */
.page-head--full{grid-template-columns:minmax(0,70ch)}

/* three-across checklist: the "How I work" block on About */
ul.checks--three{grid-template-columns:repeat(3,1fr);gap:14px 40px}
ul.checks--three li{font-size:.97rem;line-height:1.6}

/* direct-details list inside a card: tighter than the standalone panel */
dl.detail--tight dt{padding-top:18px}
dl.detail--tight dt:first-of-type{padding-top:0}
dl.detail--tight dd{margin:7px 0 18px;font-size:1.08rem}
dl.detail--tight + .quiet{border-top:1px solid var(--line);padding-top:18px;margin-top:4px}

@media (max-width:900px){
  ul.checks--three{grid-template-columns:1fr}
}

/* --- form select (added for the contact service field) ------------------- */
.field select{
  font-family:var(--sans);font-size:1.02rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid rgba(10,46,92,.48);border-radius:0;
  padding:12px 2px;transition:border-color .15s;
}
.field select:hover{border-bottom-color:var(--navy)}
.field select:focus{outline:0;border-color:var(--navy);box-shadow:0 1px 0 0 var(--navy)}

/* ==========================================================================
   Phone pass (2026-09-30).

   Scope: 390px phones. Every rule that changes layout, type or spacing lives
   inside the phone block (portrait and landscape) at the end of this section, so the
   desktop and tablet rendering is byte-for-byte what it was. Nothing above
   520px is touched.

   Two markup utilities support the phone-only copy reductions:
     .m-hide  visible everywhere, hidden on the phone
     .m-only  hidden everywhere, shown on the phone
   Both are no-ops above 520px, so the full desktop copy still renders (and
   still sits in the DOM for search and for desktop readers).
   ========================================================================== */

/* Collapsed navigation control: hidden on desktop and tablet, shown on the
   phone by the media query below. Same 1px-rule / navy register as the
   masthead; no new colour, no radius, no shadow. */
.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:11px;
  min-height:46px;padding:0 20px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);background:transparent;
  border:1px solid var(--line-strong);cursor:pointer;
}
.nav-toggle:hover{border-color:var(--navy)}
.nav-toggle::after{
  content:"";width:8px;height:8px;margin-top:-4px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .15s, margin .15s;
}
.masthead.nav-open .nav-toggle::after{transform:rotate(225deg);margin-top:4px}

/* phone-only copy utilities (no effect above the phone breakpoint) */
.m-only{display:none}

@media (max-width:520px),(max-width:960px) and (max-height:500px){

  /* --- navigation: one disclosure instead of seven links ---------------- */
  .nav-toggle{display:inline-flex}
  .masthead .wrap{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .masthead{padding:16px 0 14px}
  .masthead .logo{display:inline-flex;align-items:center;min-height:44px}
  .masthead .logo img{height:30px}
  .hero h1{max-width:none}
  .topbar .wrap{padding-top:8px;padding-bottom:8px}
  nav.main{display:none}
  .masthead.nav-open nav.main{
    display:grid;grid-template-columns:1fr;gap:0;width:100%;
    margin-top:4px;border-top:1px solid var(--line-strong);
  }
  .masthead.nav-open nav.main a{
    display:flex;align-items:center;min-height:48px;padding:2px 0;
    border-bottom:1px solid var(--line);font-size:.76rem;
  }
  .masthead.nav-open nav.main a[aria-current="page"]{
    border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--gold);padding-left:12px;
  }
  /* the desktop hit-area overlay would overlap the row above in a list */
  .masthead.nav-open nav.main a::after{display:none}

  /* --- type: a phone scale, not the desktop one ------------------------ */
  body{font-size:16.5px;line-height:1.6}
  h1{font-size:1.7rem;line-height:1.2;letter-spacing:-.006em}
  h2{font-size:1.34rem}
  h3{font-size:1.15rem;line-height:1.28}
  .lede{font-size:1.03rem;line-height:1.55}
  .eyebrow{margin-bottom:.8rem}
  .wrap{padding:0 20px}
  p{margin-bottom:.95em}
  .mb12{margin-bottom:10px}.mb22{margin-bottom:16px}.mb26{margin-bottom:18px}
  .mt26{margin-top:18px}.mt46{margin-top:30px}

  /* --- vertical rhythm: same order, less scroll ------------------------ */
  section{padding:40px 0}
  section.tight{padding:30px 0}
  section.pt0{padding-top:0}
  .hero{padding:28px 0 30px}
  .hero h1{margin-bottom:18px}
  .hero .lede{margin-bottom:0}
  .sec-head{margin-bottom:26px}
  .sec-head h2{margin-bottom:10px}
  .page-head{gap:24px}
  .page-head h1{margin-bottom:16px}
  .cta{padding:42px 0}
  .cta h2{margin-bottom:12px}
  .cta p{margin-bottom:22px}
  .band-static{padding:42px 0}
  .band img{height:168px}
  .band .over p{font-size:1.02rem}
  .cred-line{padding-top:20px}
  .cred-line p{font-size:1rem;line-height:1.5}
  .note-line{margin-top:22px;padding-top:16px;font-size:.94rem}
  .alt .lede{font-size:1rem}

  /* --- lists: shorter, still complete ---------------------------------- */
  ol.services > li{padding:22px 0 22px 40px}
  ol.services > li::before{top:22px;font-size:.92rem}
  ol.services h3{margin-bottom:6px}
  ol.services p{font-size:.99rem}
  ol.steps{gap:22px}
  ol.steps li{padding-top:18px}
  ol.steps .n{margin-bottom:9px}
  ol.steps h3{font-size:1.13rem;margin-bottom:7px}
  ol.steps p{font-size:.98rem}
  .qa{padding:20px 0}
  .qa h3{font-size:1.08rem;margin-bottom:7px}
  .qa p{font-size:.96rem}
  ul.checks li{font-size:.95rem}
  ul.checks--three li{font-size:.96rem}
  .prose h2{margin:30px 0 10px}
  .prose p{font-size:1rem}
  .svc-grid{gap:24px}
  .svc-grid p,.svc-grid ul li{font-size:.95rem}
  .creds{padding-top:22px}
  .creds h2{margin-bottom:16px}
  .creds dl{grid-template-columns:1fr;gap:0}
  .creds dt{padding-top:16px}
  .creds dd{margin:6px 0 0}
  .creds dl .span{margin:0}
  dl.detail--tight dd{font-size:1.06rem;margin:6px 0 16px}
  dl.detail--tight dt{padding-top:16px}

  /* --- buttons and inline links: thumb-sized --------------------------- */
  .btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-size:.7rem}
  .btn-row{gap:10px}
  .card__link{padding:12px 0;display:inline-flex;align-items:center;min-height:44px}

  /* --- cards: stacked and scannable ------------------------------------ */
  .card{padding:22px 20px}
  .card h2{font-size:1.26rem;margin-bottom:10px}
  .card__body{font-size:1rem}
  /* the per-card service lists repeat the service page they link to */
  .card__list,.card .sub-label{display:none}
  .card__foot{padding-top:14px}
  .callout{padding:20px}
  .callout > .callout__price{font-size:1.35rem}

  /* --- form ------------------------------------------------------------ */
  .form{grid-template-columns:1fr;gap:20px}
  .field textarea{min-height:132px}
  .form .note{padding-top:16px}

  /* --- footer: shorter, links still 44px ------------------------------- */
  footer.site{padding:44px 0 26px}
  footer.site .cols{gap:22px}
  footer.site img{height:30px;margin-bottom:14px}
  footer.site .about{font-size:.87rem;max-width:none}
  footer.site h2.fh{margin-bottom:8px}
  footer.site ul{gap:0}
  footer.site ul.pages{grid-template-columns:1fr 1fr;gap:0 16px}
  footer.site ul a{display:flex;align-items:center;min-height:44px;padding:2px 0;font-size:.9rem}
  footer.site ul a::after{display:none}
  footer.site .licence{margin-top:24px;padding-top:16px;font-size:.74rem}
  footer.site .photo-credit{font-size:.7rem;margin-top:14px}

  /* --- phone-only copy -------------------------------------------------- */
  .m-hide{display:none}
  .m-only{display:inline}
}