/* the two Cormorant faces (masthead and headlines) are inlined in each page's head (INLINE_FONTS), not here */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: optional;
  src: url(/assets/fonts/inter-400-subset.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: optional;
  src: url(/assets/fonts/inter-600-subset.woff2) format("woff2"); }
/* the fallbacks, scaled to the web fonts' width and line metrics (make_fonts.py, October 29, 2026) */
/* the 600 fallback is Times New Roman regular, not Bold, so a miss is not a thick serif (John Murdock, November 6, 2026) */
@font-face { font-family: "Cormorant Fallback"; font-weight: 600; font-style: normal;
  src: local("Times New Roman"), local("TimesNewRomanPSMT");
  size-adjust: 97.48%; ascent-override: 94.79%; descent-override: 29.44%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant Fallback"; font-weight: 400; font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
  size-adjust: 87.08%; ascent-override: 106.11%; descent-override: 32.96%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 400; font-style: normal; src: local("Arial"), local("ArialMT");
  size-adjust: 107.24%; ascent-override: 90.33%; descent-override: 22.49%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 600; font-style: normal; src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 101.31%; ascent-override: 95.62%; descent-override: 23.81%; line-gap-override: 0%; }
:root { --paper: #f5f0e7; --ink: #14202c; --navy: #152334; --bronze: #836540; --body: #36414c; --rule: #cfc6b6;
  --bronze-l: #c9a77c; --cream: #f5f0e7; --deep: #ebe3d3;
  --serif: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --sans: "Inter", "Inter Fallback", Arial, sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
p { margin: 0 0 20px; }
h1, h2, h3 { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
.page-w { max-width: 1440px; margin: 0 auto; padding: 0 72px; }
.skip { position: absolute; left: 16px; top: 8px; background: #fff; padding: 8px 14px; transform: translateY(-300%); z-index: 50; }
.skip:focus { transform: none; }
.nw { white-space: nowrap; }

/* the masthead: JETT LAW over LLC between two bronze hairlines; trailing letter-spacing offset so it centers */
/* desktop: 30px over the masthead and 34px to the nav, balanced so JETT LAW and LLC sit centered in their band (John
   Murdock, November 6, 2026; was 20 and 16); the 28px added comes out of the home photo, so the first screen still holds the
   header, nav, photo, headline and both buttons at 1280 x 720 */
/* desktop: 30px over the masthead and 34px to the nav, balanced so JETT LAW and LLC sit centered in their band (John
   Murdock, November 6, 2026; was 20 and 16); the 28px added comes out of the home photo, so the first screen still holds the
   header, nav, photo, headline and both buttons at 1280 x 720 */
.lh { position: relative; padding: 30px 0 34px; }
.lh .page-w { position: relative; }
.masthead { text-align: center; }
.mast-name { display: block; font-family: var(--serif); font-weight: 600; font-style: normal; font-size: 52px; line-height: 52px;
  letter-spacing: 0.3em; padding-left: 0.3em; color: var(--ink); }
.mast-sub { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 14px; height: 14px; }
.mast-sub::before, .mast-sub::after { content: ""; width: 64px; height: 1px; background: var(--bronze); }
.mast-sub span { font-weight: 600; font-size: 11px; line-height: 14px; letter-spacing: 0.4em; padding-left: 0.4em; color: var(--bronze); }
/* RW's crest (the logo without its wordmark, which the masthead already says) as a small mark at the top left, on the
   page margin; out of the flow, so the masthead stays centered on the page. The middle of its drawn shape lines up with
   the middle of the whole masthead (JETT LAW and LLC), 20% larger than the 120 x 49 of d84bcc5, the header height
   unchanged (John Murdock, November 6, 2026, after RW's go-live note) */
.mark { position: absolute; left: 72px; top: 50%; margin-top: -28px; width: 144px; height: 58px; }
.mark img { width: 144px; height: 58px; }
.topbar .mast-s { display: none; }
.topbar { display: none; }

/* the nav: one centered row between an ink rule and a light rule */
.nav { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 12px 0; }
.nav ul { list-style: none; margin: 0; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 44px; }
.nav a { font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a[aria-current] { color: var(--bronze); }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.nav a.tel { color: var(--bronze); }
.nav a.tel:hover { color: var(--ink); }

/* letterbox photos: the full content width, 380px tall; 16:9 on a phone */
.lb { height: 380px; overflow: hidden; background: #d9d1c2; }
.lb picture, .lb img { width: 100%; height: 100%; }
.lb img { object-fit: cover; }

.btn { display: inline-block; background: var(--navy); color: #fff; font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; padding: 17px 30px; border: 0; cursor: pointer; font-family: var(--sans); }
.btn:hover { background: var(--bronze); color: #fff; }
/* the outlined button (John Murdock, November 6, 2026): Book a Consult's height, padding, caps, font and size, a 1px
   navy border, transparent fill, navy text; on the navy footer a cream border and cream text */
.btn-o { display: inline-block; background: transparent; color: var(--navy); font-weight: 600; font-size: 13px; line-height: 20px;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; padding: 16px 29px; border: 1px solid var(--navy);
  font-family: var(--sans); white-space: nowrap; }
.btn-o:hover, .btn-o:focus-visible { background: var(--navy); color: #fff; }
.tlink { font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--bronze);
  text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tlink:hover { color: var(--bronze); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; }
.orn { width: 64px; height: 1px; background: var(--bronze); margin: 0 auto; border: 0; }
.label { font-weight: 600; font-size: 12px; letter-spacing: 0.22em; padding-left: 0.22em; text-transform: uppercase; color: var(--bronze); margin: 0 0 18px; }

/* the home hero: a taller letterbox and a larger headline (round 2, John Murdock, October 30, 2026), 440px with the
   space around the headline tightened so the headline and Book a Consult fit the first screen at 1280 x 900 (Option B) */
.hero { padding: 24px 0 88px; text-align: center; }
/* on desktop the photo is 440px tall, less on a short window: the viewport height minus the header, nav, headline and
   buttons and some air (424px), never under 270px; object-fit cover, centered, keeps the peaks and the lake (John Murdock, November 5, 2026) */
.hero .lb { height: clamp(270px, calc(100vh - 424px), 412px); }
/* desktop: taller, 36.1% of the window width, 520px at 1440 (John Murdock, November 6, 2026, after RW's go-live note) */
@media (min-width: 961px) { .hero .lb { height: clamp(347px, 36.1vw, 520px); } }
/* desktop only: the crop sits lower so Lake Marie shows clearly under the peaks (John Murdock, November 6, 2026); the box
   size is unchanged and phones and tablets keep the photo's own 50% 42% (the inline style, overridden here only) */
@media (min-width: 961px) { .hero .lb img { object-position: 50% 30% !important; } }
.hero h1 { font-size: 64px; line-height: 1.08; max-width: 1100px; margin: 30px auto 26px; }

/* credentials: a full-width navy band, each credential set large in Cormorant under a light bronze label, hairlines
   between; a seal of authority, not a footnote */
.creds { background: var(--navy); color: var(--cream); }
.creds ul { list-style: none; margin: 0; padding: 72px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.creds li { display: flex; flex-direction: column; padding: 6px 32px; text-align: center; border-left: 1px solid rgba(201, 167, 124, 0.45); }
.creds li:first-child { border-left: 0; }
.creds .k { display: block; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.22em; padding-left: 0.22em; text-transform: uppercase; color: var(--bronze-l); margin: 0 0 16px; }
.creds b { display: block; font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1.12; color: var(--cream); text-wrap: balance; }
.creds .v { display: block; font-size: 17px; line-height: 1.45; color: var(--cream); margin-top: auto; padding-top: 12px; }

/* practice areas: three left-aligned columns, each under a large italic bronze numeral; on hover the column takes a
   navy rule along its top and its title a heavier stroke, both drawn without changing any box, so nothing moves */
.sec { padding: 96px 0; text-align: center; }
.sec h2 { font-size: 40px; line-height: 1.15; margin: 0 0 52px; }
.areas { text-align: left; padding: 112px 0 104px; }
.areas h2 { font-size: 48px; margin: 0 0 56px; }
.cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.cols li { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 0 8px; border-top: 1px solid var(--ink); transition: box-shadow 0.2s; }
.cols li:hover { box-shadow: inset 0 3px 0 var(--navy); }
.cols .num { font-family: var(--serif); font-style: italic; font-size: 72px; line-height: 1; color: var(--bronze); margin: 0 0 18px; }
.cols h3 { font-size: 42px; line-height: 1.1; margin: 0 0 18px; transition: -webkit-text-stroke 0.2s; }
.cols li:hover h3 { -webkit-text-stroke: 0.6px var(--ink); }
.cols p { font-size: 18px; margin: 0 0 26px; max-width: 360px; }
.cols li .tlink { margin-top: auto; }

/* approach: two columns, the statement large on the left, the body on the right */
.approach { text-align: left; padding: 0 0 112px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; border-top: 1px solid var(--rule); padding-top: 72px; }
.pull { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1.18; color: var(--ink); margin: 0; text-wrap: balance; }
.approach .body p:not(.label) { font-size: 18px; margin: 0; }
.approach .label { padding-left: 0; }

/* RW: a split band in deep cream, his portrait large on the left, name, title and background on the right */
.rw { background: var(--deep); }
.rw .page-w { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 80px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.rw .portrait { width: 384px; height: 480px; object-fit: cover; }
.rw .name { font-size: 44px; line-height: 48px; padding-left: 0; }
.rw .role { text-align: left; font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); margin: 18px 0 30px; }
.rw .bio { font-size: 19px; max-width: 560px; margin: 0 0 30px; color: var(--ink); }
.rw .orn { margin: 0 0 30px; }
.name { display: block; font-family: var(--serif); font-weight: 600; font-style: normal; font-size: 30px; line-height: 34px; letter-spacing: 0.3em; padding-left: 0.3em; color: var(--ink); margin: 0; }

/* Vedauwoo: the full page width, taller, one cream line over a soft dark band at its foot */
.wide { position: relative; height: 600px; overflow: hidden; background: #3a3f44; }
.wide picture, .wide img { width: 100%; height: 100%; }
.wide img { object-fit: cover; }
.wide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(21, 35, 52, 0.72), rgba(21, 35, 52, 0)); }
.wide p { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 1; margin: 0; padding: 0 24px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1.15; color: var(--cream); text-wrap: balance; }

/* inner pages */
.page-title { text-align: center; padding: 56px 0 40px; }
.page-title h1 { font-size: 52px; line-height: 1.1; }
.col { max-width: 680px; margin: 0 auto; padding: 72px 0 24px; }
.col h2 { font-size: 34px; line-height: 1.2; text-align: center; margin: 0 0 26px; }
.col h2.sub { margin-top: 56px; }
.col .lede { font-size: 21px; color: var(--ink); text-align: center; }
.ruled { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--rule); }
.ruled li { border-bottom: 1px solid var(--rule); padding: 12px 0; font-size: 17px; color: var(--ink); }
.ruled li b { display: block; font-weight: 600; }
.ruled a { text-decoration-color: var(--bronze); text-underline-offset: 5px; }
.center { text-align: center; }
.quote { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.35; color: var(--ink); text-align: center; margin: 48px 0 14px; }
.cite { font-size: 17px; text-align: center; color: var(--body); }
.step-logo { display: block; width: 173px; height: 89px; margin: 12px 0 0; background: #fff; }
.step { text-align: center; margin: 40px 0 8px; font-size: 17px; color: var(--ink); }
.step .step-logo { margin: 0 auto 10px; }
.step a { text-decoration-color: var(--bronze); text-underline-offset: 5px; }
.about-portrait { width: 240px; height: 300px; object-fit: cover; margin: 0 auto 28px; }
.role { text-align: center; color: var(--ink); margin: 0 0 6px; }
.reach { text-align: center; margin: 0 0 40px; font-size: 17px; }
.reach a { text-decoration-color: var(--bronze); text-underline-offset: 5px; }
.reach .dot { margin: 0 10px; color: var(--bronze); }
.close { text-align: center; padding: 64px 0 104px; }
.end-space { height: 96px; }
.close .orn { margin-bottom: 56px; }
.close h2 { font-size: 40px; line-height: 1.15; margin: 0 0 18px; }
.close p { max-width: 560px; margin: 0 auto 30px; }
.legal-page h2 { font-size: 30px; text-align: left; margin: 48px 0 12px; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page .updated { text-align: center; color: var(--body); font-size: 17px; margin: 0 0 40px; }
.legal-page a { text-decoration-color: var(--bronze); text-underline-offset: 5px; }
form.contact { display: grid; gap: 16px; margin: 40px 0 0; }
form.contact label { font-size: 17px; font-weight: 600; color: var(--ink); display: grid; gap: 6px; }
form.contact input, form.contact textarea { font: inherit; font-size: 17px; padding: 12px 13px; border: 1px solid #8c8476; border-radius: 0; background: #fff; color: var(--ink); }
form.contact .notice { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
form.contact label.check { display: flex; align-items: center; gap: 10px; }
form.contact label.check input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--navy); }
form.contact .note { font-size: 17px; line-height: 1.5; color: var(--body); margin: 0; min-height: 3em; }
form.contact .note.sent { color: var(--navy); font-weight: 600; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the footer (John Murdock, November 6, 2026): on desktop three columns (the firm, Practice, Contact) over a bottom bar of
   small muted text; on phones the columns stack, left-aligned, the bar last. No underlines; hover and keyboard focus
   underline and color a link */
.foot { background: var(--navy); color: var(--cream); padding: 64px 0 0; font-size: 16px; line-height: 24px; }
.foot p { margin: 0; }
.foot a { color: var(--cream); text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--bronze-l); text-decoration: underline; text-decoration-color: var(--bronze-l);
  text-decoration-thickness: 1px; text-underline-offset: 5px; }
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding-bottom: 56px; }
.foot-brand { display: flex; align-items: center; gap: 16px; margin-bottom: 16px !important; }
.foot-brand .foot-mark, .foot-brand .foot-mark img { display: block; width: 76px; height: 31px; }
.foot-brand .foot-mark img { filter: brightness(0) invert(1); opacity: 0.92; }
.foot-name { font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.3em; color: var(--bronze-l); }
.foot-h { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bronze-l); margin-bottom: 16px !important; }
.foot-list { list-style: none; margin: 0; padding: 0; }
.foot-list li { margin: 0 0 8px; }
.foot .btn-o { margin-top: 16px; color: var(--cream); border-color: var(--cream); }
.foot .btn-o:hover, .foot .btn-o:focus-visible { color: var(--bronze-l); border-color: var(--bronze-l); text-decoration: none; }
.foot-bar { border-top: 1px solid rgba(201, 167, 124, 0.35); padding: 20px 0 28px; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 24px; font-size: 13px; line-height: 20px; color: #9aa4ae; }
.foot-bar a { color: #9aa4ae; }
.foot-bar a:hover, .foot-bar a:focus-visible { color: var(--cream); text-decoration-color: rgba(154, 164, 174, 0.6); }
/* the credit (John Murdock, November 4, 2026): 13px in #9aa4ae, 6.28:1 on navy, with a 44px tall tap target that doesn't grow the row */
.foot-bar .credit a { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* The phone bar (kept from the live site, John Murdock, November 3, 2026): on phones only, fixed to the bottom and
   shown from the first paint, with no script, so it never slides or moves anything; its height is fixed (50px) and
   the page ends 50px lower so the footer is never hidden under it. Under the open menu (z-index 20). */
/* the hamburger lines exist on phones only (600px and under) */
.menu summary .hb { display: none; }
/* the hero's Call button shows on phones only (600px and under) */
.hero .hero-call { display: none; }
@media (max-width: 600px) { .hero .hero-call { display: block; } }
/* justified body paragraphs (RW's review notes, November 4, 2026): 768px and wider only, with hyphenation (the page is
   lang="en"); left-aligned below 768px; body paragraphs only, never headings, lists or the closing bands */
@media (min-width: 768px) { p.just { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } }
:target, #practice-areas { scroll-margin-top: 24px; }

@media (max-width: 1180px) {
  .creds ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .creds li:nth-child(3) { border-left: 0; }
  .rw .page-w { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
  .rw .portrait { width: 320px; height: 400px; }
}
@media (max-width: 960px) {
  body { font-size: 17px; }
  .page-w { padding: 0 20px; }
    .topbar { display: block; position: relative; z-index: 20; border-bottom: 1px solid var(--rule); }
  .topbar .page-w { display: flex; justify-content: space-between; align-items: center; height: 64px; }
  .topbar .mark-s { display: block; width: 76px; height: 31px; }
  .topbar .mark-s img { width: 76px; height: 31px; }
  .mark { display: none; }
  .lh { padding: 30px 0 26px; border-bottom: 1px solid var(--ink); }
  .mast-name { font-size: 36px; line-height: 36px; }
  .mast-sub { margin-top: 12px; gap: 14px; }
  .mast-sub::before, .mast-sub::after { width: 48px; }
  .nav { display: none; }
  /* the menu (John Murdock, October 30, 2026): open, it covers the whole screen in paper, under the bar with the crest
     and the button, and the page behind it can't scroll; the button reads CLOSE in the same box (both words share one
     grid cell, so its size never changes); a link, Escape or CLOSE closes it (assets/menu.js) */
  .menu summary { position: relative; z-index: 2; display: grid; list-style: none; cursor: pointer; font-weight: 600; font-size: 13px; line-height: 20px; letter-spacing: 0.18em; padding: 9px 14px 9px 16px;
    text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); background: var(--paper); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu summary { width: 92px; justify-items: center; }  /* a fixed box: a late web font can't change its width */
  .menu summary span { grid-area: 1 / 1; text-align: center; white-space: nowrap; }
  .menu summary .m-close, .menu[open] summary .m-open { visibility: hidden; }
  .menu[open] summary .m-close { visibility: visible; }
  .topbar .mark-s { position: relative; z-index: 2; }
  /* the cover fills the screen; the items sit in their own box under the bar (the bar ends at 65px), centered
     with 24px clear above and below; when they are taller than that box (a phone held sideways), the auto margins give
     way and the box scrolls from its top, so nothing ever passes behind the crest or the button */
  .menu nav { position: fixed; inset: 0; z-index: 1; background: var(--paper); text-align: center; }
  .menu .menu-list { position: absolute; top: 65px; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 24px 20px; overflow-y: auto; overscroll-behavior: contain;
    /* a paper fade over the top and bottom 24px (the list's own padding, so a list that fits is never faded): when it
       scrolls, a half-faded item at the edge shows there is more */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  .menu .menu-list a:first-child { margin-top: auto; }
  .menu .menu-list a:last-child { margin-bottom: auto; }
  html:has(.menu[open]), html:has(.menu[open]) body { overflow: hidden; }
  .menu nav a { display: block; padding: 12px 20px; font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
  .menu nav a.tel { color: var(--bronze); }
  .menu nav a.btn { display: inline-block; margin-top: 12px; color: #fff; padding: 15px 26px; }
  .lb { height: auto; aspect-ratio: 16 / 9; }
  .hero { padding: 24px 0 64px; }
  .hero .lb { height: auto; aspect-ratio: 4 / 3; }
  .hero h1 { font-size: 40px; margin: 34px auto 26px; }
  .actions { flex-direction: column; gap: 20px; }
  .creds ul { grid-template-columns: 1fr; row-gap: 0; padding: 32px 0; }
  .creds li { border-left: 0; padding: 26px 0; }
  .creds li + li { border-top: 1px solid rgba(201, 167, 124, 0.45); }
  .creds b { font-size: 30px; }
  .sec { padding: 72px 0; }
  .sec h2, .close h2 { font-size: 32px; margin-bottom: 36px; }
  .areas { padding: 72px 0; }
  .areas h2 { font-size: 36px; margin-bottom: 36px; }
  .cols { grid-template-columns: 1fr; }
  .cols li { padding: 28px 0 36px; }
  .cols .num { font-size: 56px; margin-bottom: 12px; }
  .cols h3 { font-size: 36px; }
  .split { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; }
  .pull { font-size: 34px; }
  .approach { padding-bottom: 72px; }
  .rw .page-w { grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 64px; }
  .rw .portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .rw .name { font-size: 36px; line-height: 40px; }
  .rw .bio { font-size: 18px; }
  .wide { height: auto; aspect-ratio: 4 / 5; }
  .wide p { font-size: 30px; bottom: 40px; }
  .page-title { padding: 34px 0 26px; }
  .page-title h1 { font-size: 36px; }
  .col { padding: 48px 0 16px; }
  .col h2 { font-size: 28px; }
  .col .lede { font-size: 19px; }
  .quote { font-size: 24px; }
  .close { padding: 48px 0 72px; }
  .legal-page h2 { font-size: 26px; }
  .reach .dot { display: none; }
  .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 40px; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .reach span, .reach a { display: block; }
}
/* tablets and half-screen windows (601 to 960px): the hero photo a wide crop, not 4:3 at full width, so the headline
   and both buttons fit the first screen at 768 x 1024, 820 x 1180 and 960 x 800 (John Murdock, October 30, 2026) */
@media (min-width: 601px) and (max-width: 960px) {
  .hero { padding-top: 16px; }
  .hero .lb { height: 360px; aspect-ratio: auto; }
  .hero h1 { margin: 26px auto 22px; }
}
/* phones (600px and under): the first screen at 390 x 664 holds the headline and both buttons (John Murdock, October 30,
   2026), with 32px under the headline and 24px between the buttons (his second change that day); tablets keep the layout above */
@media (max-width: 600px) {
  /* no fixed bar (John Murdock, November 6, 2026, undoing PR #2): the hero holds Book a Consult (filled) and Call
     (outlined), stacked and full width, both inside the first screen at 390 x 664; View practice areas is hidden here
     (the menu has the practice pages) */
  body { padding-bottom: 0; }
  .hero .actions { align-items: stretch; }
  .hero .actions a { display: block; width: 100%; box-sizing: border-box; text-align: center; }
  .hero .actions .hero-areas { display: none; }
  /* one row at the top (John Murdock, November 6, 2026): the crest left, JETT LAW over LLC centered, MENU right */
  .lh { display: none; }
  .topbar { border-bottom: 1px solid var(--ink); }
  .topbar .page-w { position: relative; }
  .topbar .mast-s { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
    text-align: center; white-space: nowrap; pointer-events: none; }
  .mast-s .ms-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 20px;
    letter-spacing: 0.2em; padding-left: 0.2em; color: var(--ink); }
  .mast-s .ms-sub { display: block; margin-top: 4px; font-weight: 600; font-size: 9px; line-height: 12px; letter-spacing: 0.4em;
    padding-left: 0.4em; color: var(--bronze); }
  .hero { padding: 16px 0 64px; }
  .hero .lb { height: 200px; aspect-ratio: auto; }
  .hero h1 { font-size: 34px; line-height: 1.1; margin: 18px auto 32px; }
  .hero .actions { gap: 24px; }
  /* the phone hero, fixed sizes only (John Murdock, November 6, 2026): no viewport units and no script sizing; the bar,
     20px, the photo at 3:2 across the column, 20px, the headline, 20px, Book a Consult (52px), 12px, Call (52px), 24px,
     then the navy credentials */
  .hero { box-sizing: border-box; padding: 20px 0 24px; display: flex; flex-direction: column; }
  .hero > .page-w { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
  .hero .lb { flex: none; position: relative; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .hero h1 { margin: 20px 0; }
  .hero .actions { gap: 12px; }
  .hero .actions .btn { padding-top: 16px; padding-bottom: 16px; }
  .hero .actions .btn-o { padding-top: 15px; padding-bottom: 15px; }
  .hero .lb picture { position: absolute; inset: 0; }
  .hero .lb img { object-position: 56% 30% !important; }
  /* the menu button is a hamburger (three navy lines, 24px, no box, a 44px tap area), centered on the JETT LAW line;
     open, it is an X (John Murdock, November 6, 2026) */
  .menu summary { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; place-items: center; transform: translateY(-8px); margin-right: -10px; }
  .menu summary .m-open, .menu summary .m-close { display: none; }
  .menu summary .hb { display: block; grid-area: 1 / 1; position: relative; width: 24px; height: 16px; }
  .hb i { position: absolute; left: 0; width: 24px; height: 2px; background: var(--navy); transition: transform 0.2s ease, opacity 0.2s ease; }
  .hb i:nth-child(1) { top: 0; } .hb i:nth-child(2) { top: 7px; } .hb i:nth-child(3) { top: 14px; }
  .menu[open] .hb i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu[open] .hb i:nth-child(2) { opacity: 0; }
  .menu[open] .hb i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
/* vertical rhythm on phones (John Murdock, November 6, 2026): every section 56px top and bottom, 24px from a heading to
   its content, 32px between list items and practice rows, 24px above and below a rule; no empty run over 64px */
@media (max-width: 600px) {
  /* the credentials band, tighter on phones (John Murdock, November 6, 2026): 104px top (the fade) and 40px bottom, label to title 8px,
     title to its line 4px, 20px above and below each rule, titles 26px */
  .creds ul { padding: 104px 0 40px; }
  /* its top edge fades from the page's cream to navy over 96px, done before the first label at 104px (John Murdock,
     November 6, 2026) */
  .creds { background: linear-gradient(to bottom, var(--cream) 0, var(--navy) 96px); }
  /* "photo last" (John Murdock, November 6, 2026, a trial on the preview): the headline and both buttons first, then the
     photo edge to edge at 4:5, running past the first screen, the navy credentials straight after it (solid, 40px, no
     fade, since the photo doesn't end on cream); fixed sizes only */
  .hero { padding: 24px 0 0; }
  .hero h1 { order: 1; margin: 0 0 20px; }
  .hero .actions { order: 2; margin-bottom: 28px; }
  .hero .lb { order: 3; width: auto; margin: 0 -20px; aspect-ratio: 4 / 5; }
  .hero .lb img { object-position: 58% 50% !important; }
  .creds { background: var(--navy); }
  .creds ul { padding-top: 40px; }
  .creds li { padding: 20px 0; }
  .creds .k { margin-bottom: 8px; }
  .creds b { font-size: 26px; }
  .creds .v { padding-top: 4px; }
  .creds li:first-child { padding-top: 0; }
  .creds li:last-child { padding-bottom: 0; }
  .sec, .areas, .close { padding: 56px 0; }
  .sec h2, .areas h2, .close h2, .col h2 { margin-bottom: 24px; }
  .cols li { padding: 24px 0 32px; }
  .cols li:last-child { padding-bottom: 0; }
  .approach { padding: 0 0 56px; }
  .split { padding-top: 24px; gap: 24px; }
  .rw .page-w { padding-top: 56px; padding-bottom: 56px; gap: 24px; }
  .page-title { padding: 56px 0 24px; }
  .col { padding: 24px 0 56px; }
  .col h2.sub { margin-top: 56px; }
  .ruled { margin-bottom: 0; }
  .ruled li { padding: 24px 0; }
  .close .orn { margin-bottom: 24px; }
  /* a column followed by the closing band shares one space: the column ends at its content, the band starts 24px down */
  section:has(+ .close) .col { padding-bottom: 0; }
  .close { padding-top: 24px; }
  .col > :last-child, .col > :last-child > :last-child { margin-bottom: 0; }
  .end-space { height: 0; }
  .step { margin: 32px 0 0; }
  .foot { padding-top: 56px; }
  .foot-cols { padding-bottom: 32px; gap: 32px; }
  .legal-page h2 { margin: 32px 0 12px; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .hb i { transition: none; }
}
/* the open menu on a short screen (a phone held sideways): tighter items, so more fit and the next one shows,
   faded, at the bottom edge as a cue that the list scrolls */
@media (max-width: 960px) and (max-height: 500px) {
  .menu .menu-list { gap: 0; }
  .menu nav a { padding: 10px 20px; }
  .menu nav a.btn { margin-top: 8px; }
}
@media (min-width: 961px) { .menu { display: none; } }