:root{
    /* Committed dark theme: the site looks like this everywhere, on every device */
    --bg:#1B1715;            /* deep warm ground, brown-black not gray-black */
    --bg-alt:#241F1C;
    --bg-warm:#2B241F;       /* the warmest band, clearly its own surface */
    --card:#39302A;          /* raised on every band, incl. the warm one */
    --ink:#F6F2ED;           /* Smoke, warmed */
    --muted:#C4B8AB;         /* 9.1:1 on --bg */
    --accent:#C35C2C;        /* Burnt Orange, brand kit */
    --accent-hover:#C35C2C;   /* brand orange only: hover is a lift, not a new orange */
    --accent-soft:#4E3227;   /* ember tint for chips and icon wells */
    --line:#5B4B3E;          /* warm hairline, actually visible */
    --dark-surface:#141110;  /* Charcoal, deepest */
    --dark-ink:#F6F2ED;
    --dark-muted:#C4B8AB;
    --dark-line:#463A32;
    --ember:195,92,44;      /* brand orange as rgb, for glows and washes */
    --shadow:0 14px 38px rgba(10,6,4,.5);
    --radius:18px;
  }
  html{color-scheme:dark}
  .skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-family:'Josefin Sans',sans-serif; font-weight:600; text-decoration:none}
  .skip-link:focus{left:0}
  #cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:150; background:var(--dark-surface); border-top:1px solid var(--dark-line); padding:18px 24px}
  #cookie-banner[hidden]{display:none}
  #cookie-banner .inner{max-width:1160px; margin:0 auto; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}
  #cookie-banner p{margin:0; color:var(--dark-muted); font-size:.88rem; max-width:64ch}
  #cookie-banner button{border-width:2px; border-style:solid}
  #cookie-accept{background:var(--accent); color:#FFFFFF; border-color:var(--accent)}
  #cookie-accept:hover{background:var(--accent); border-color:var(--accent); color:#FFFFFF; box-shadow:0 6px 18px rgba(var(--ember),.35)}
  #cookie-decline{background:#F6F2ED; color:#1B1715; border-color:#F6F2ED}
  #cookie-decline:hover{background:#FFFFFF; color:#141110; border-color:#FFFFFF}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif;
    font-size:16px; line-height:1.7;
  }
  h1,h2,h3,h4{font-family:'Josefin Sans','Montserrat',sans-serif; line-height:1.15; margin:0 0 .5em; text-wrap:balance; font-weight:700}
  h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
  h2{font-size:clamp(1.7rem,3vw,2.4rem)}
  h3{font-size:1.25rem}
  p{margin:0 0 1em}
  a{color:var(--accent)}
  img{max-width:100%; display:block}
  .container{max-width:1160px; margin:0 auto; padding:0 24px}
  .eyebrow{font-family:'Josefin Sans',sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--accent); margin-bottom:14px}
  .lead{font-size:1.12rem; color:var(--muted); max-width:62ch}
  section.band{padding:104px 0}
  section.band.alt{background:var(--bg-alt)}
  section.band.warm{background:var(--bg-warm)}
  .center{text-align:center}
  .center .lead{margin-left:auto; margin-right:auto}

  /* Buttons */
  .btn{display:inline-flex; align-items:center; gap:10px; font-family:'Josefin Sans',sans-serif; font-weight:600; letter-spacing:.04em;
    padding:15px 28px 13px; border-radius:999px; text-decoration:none; font-size:.95rem; transition:all .18s ease; border:2px solid transparent; cursor:pointer}
  .btn.primary{background:var(--accent); color:#fff}
  .btn.primary:hover{background:var(--accent); transform:translateY(-2px); box-shadow:0 10px 24px rgba(var(--ember),.35)}
  .btn.ghost{border-color:var(--ink); color:var(--ink); background:transparent}
  .btn.ghost:hover{background:var(--ink); color:var(--bg)}
  .btn.light{border-color:var(--dark-ink); color:var(--dark-ink)}
  .btn.light:hover{background:var(--dark-ink); color:var(--dark-surface)}
  .btn.sm{padding:11px 22px 9px; font-size:.86rem}
  .btn:focus-visible, a:focus-visible, button:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
  .textlink{font-family:'Josefin Sans',sans-serif; font-weight:600; text-decoration:none; border-bottom:2px solid var(--accent); padding-bottom:2px}

  /* ---------- Header ---------- */
  header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
  .navbar{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px}
  .brand{display:flex; align-items:center; text-decoration:none; color:var(--ink)}
  .brand img{height:34px; width:auto}
  .brand .logo-on-light{display:none}
  .brand .logo-on-dark{display:block}
  nav.main{display:flex; align-items:center; gap:6px}
  .navitem{position:relative}
  .navitem > a, .navitem > button{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.05em; color:var(--ink);
    text-decoration:none; padding:12px 16px; border-radius:10px; background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:7px}
  .navitem > a:hover, .navitem > button:hover{background:var(--bg-warm)}
  .caret{width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px)}
  .dropdown{position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; display:flex; gap:36px; opacity:0; visibility:hidden; transition:all .18s ease; text-align:left;
    width:max-content; max-width:min(92vw, 860px)}
  /* Open state is driven entirely by JS (.hovering on pointer, .pinned on click),
     plus :focus-within for keyboard users. Deliberately no :hover here: a CSS hover
     rule cannot be switched off by script, which is what used to leave panels stuck. */
  .navitem.hovering .dropdown, .navitem.pinned .dropdown, .navitem:focus-within .dropdown{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
  /* Invisible strip bridging the 10px gap under the button, so travelling down into
     the panel never crosses a spot that is neither button nor panel. It is only
     hit-testable while the panel is visible. */
  @media (min-width:981px){
    .dropdown::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
  }
  .dropdown .col{min-width:170px}
  .dropdown h5{font-family:'Josefin Sans',sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; font-weight:600}
  .dropdown ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
  .dropdown ul a{color:var(--ink); text-decoration:none; font-size:.94rem}
  .dropdown ul a:hover{color:var(--accent)}
  .dropdown .featured{width:230px; background:var(--bg-alt); border-radius:14px; padding:12px; box-sizing:border-box; overflow:hidden; text-decoration:none; color:var(--ink); display:block}
  .dropdown .featured .thumb{display:block; border-radius:10px; overflow:hidden; position:relative; margin-bottom:10px}
  .dropdown .featured .thumb img{aspect-ratio:16/9; object-fit:cover; object-position:center 35%; width:100%; display:block; border-radius:8px}
  .dropdown .featured strong{font-family:'Josefin Sans',sans-serif; font-size:.95rem; display:block; line-height:1.3}
  .dropdown .featured em{font-style:normal; font-size:.8rem; color:var(--muted)}
  .dropdown .featured.method{background:var(--accent); color:#fff}
  .dropdown .featured.method em{color:#F1F1F1}
  .play-badge{position:absolute; inset:0; display:grid; place-items:center}
  .play-badge span{width:42px; height:42px; border-radius:50%; background:var(--accent); display:grid; place-items:center}
  .play-badge span::after{content:""; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px}
  .nav-cta{margin-left:8px}
  .hamburger{display:none; background:none; border:none; cursor:pointer; padding:10px}
  .hamburger span{display:block; width:24px; height:2.5px; background:var(--ink); margin:5px 0; border-radius:2px}

  /* ---------- Hero ---------- */
  .hero{padding:104px 0 96px}
  .hero-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:72px; align-items:center}
  .hero h1{margin-bottom:20px}
  .hero-stack{line-height:1.02; letter-spacing:-.015em}
  /* home hero: aligned to the site container, with room to breathe */
  #page-home .hero{padding:128px 0 112px; position:relative; overflow:hidden}
  #page-home .hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:radial-gradient(58% 72% at 76% 40%, rgba(var(--ember),.17), transparent 68%),
               radial-gradient(42% 60% at 8% 78%, rgba(var(--ember),.07), transparent 70%)}
  #page-home .hero .container{position:relative; z-index:1}
  #page-home .hero-grid{grid-template-columns:1.05fr 1.25fr; gap:48px}
  /* video bleeds toward the right edge on wide screens, self-limiting so it never overflows */
  #page-home .hero .videoph{margin-right:calc(-1 * max(0px, min(96px, (100vw - 1160px)/2 - 24px)))}
  /* Hero kicker: sized and weighted to read as a title rather than a stray label.
     The nowrap spans keep a narrow column from breaking inside "Fee-Only". */
  #page-home .hero .eyebrow{font-size:clamp(.8rem,1.05vw,.88rem); font-weight:700; letter-spacing:.12em;
    line-height:1.5; margin-bottom:26px; text-wrap:balance}
  #page-home .hero .eyebrow span{white-space:nowrap}
  @media (max-width:760px){
    #page-home .hero .eyebrow{margin-bottom:20px}
  }
  /* Capped so the longer line stays on ONE line inside the 486px column: above this it
     wraps and leaves a short orphan line. Measured slack at the cap is ~16px. */
  #page-home .hero .hero-stack{font-size:clamp(1.7rem,2.7vw,2.25rem); line-height:1.12; margin-bottom:0}
  .hero-stack span{display:block; text-wrap:balance}
  #page-home .hero .hero-sub{margin:18px 0 0; padding-left:14px; border-left:3px solid var(--accent); font-size:clamp(1.02rem,1.3vw,1.15rem); line-height:1.5; color:var(--muted); max-width:34ch}
  .hero-stack span + span{margin-top:.02em}
  .hero .lead{margin-bottom:30px}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
  [hidden]{display:none !important}
  .videoph{position:relative; aspect-ratio:16/9; background:var(--dark-surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--dark-line)}
  .videoph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.45}
  .videoph .vlabel{position:absolute; left:18px; bottom:14px; color:var(--dark-ink); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; font-family:'Josefin Sans',sans-serif; font-weight:600; opacity:.85}
  .videoph .play{position:absolute; inset:0; display:grid; place-items:center}
  .videoph .play b{width:74px; height:74px; border-radius:50%; background:var(--accent); display:grid; place-items:center; transition:transform .18s ease; box-shadow:0 8px 24px rgba(0,0,0,.35)}
  .videoph:hover .play b{transform:scale(1.07)}
  /* Static hero photo: same frame and footprint as .videoph, but a real picture
     rather than a video cover. Used where the film is not shot yet. Swap back to
     .videoph markup when the video lands. */
  .statichero{position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow); border:1px solid var(--dark-line); background:var(--dark-surface)}
  .statichero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:center 22%; display:block; opacity:1}
  .videoph .play b::after{content:""; border-left:22px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:5px}

  /* ---------- Marquee ---------- */
  /* Bottom padding is 55 rather than 64 so the OPTICAL gaps match: the link's own 8px
     padding and half-leading sit below its text, which otherwise makes the bottom
     read 9px deeper than the top. Measured result is 69px at both ends. */
  .seen{padding:64px 0 55px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-warm)}
  /* 47px here renders as a 51px optical gap once the label's line-height is accounted
     for, matching the 51px gap below the logos so the row sits evenly between them. */
  .seen .label{text-align:center; font-family:'Josefin Sans',sans-serif; font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.74rem; color:var(--muted); margin-bottom:47px}
  .marquee{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .marquee .track{display:flex; gap:72px; width:max-content; animation:scroll 30s linear infinite; align-items:center}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes scroll{to{transform:translateX(-50%)}}
  .press{color:#DDD6CC; text-decoration:none; white-space:nowrap; opacity:.95; transition:opacity .15s ease, color .15s ease; display:inline-flex; align-items:center; gap:9px; line-height:1}
  .press:hover{opacity:1; color:#FFFFFF}
  .press-serif{font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:1.5rem; letter-spacing:.01em}
  .press-serif-caps{font-family:Georgia,'Times New Roman',serif; font-weight:600; font-size:1.12rem; letter-spacing:.1em; text-transform:uppercase}
  .press-sans{font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.12rem; letter-spacing:.05em; text-transform:uppercase}
  .press-sans-wide{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:1.05rem; letter-spacing:.28em; text-transform:uppercase}
  .press-lower{font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.35rem; letter-spacing:-.01em}
  .press .dot{width:.9em; height:.9em; border-radius:50%; background:currentColor; flex-shrink:0}
  /* Was 22px above against 64px of band padding below, which left it crowded under the
     logos. The padding also gives it a comfortable tap target on touch. */
  .seen .all-link{display:block; text-align:center; margin-top:38px; padding:8px 0; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.08em; color:var(--accent); text-decoration:none}
  .seen .all-link:hover{text-decoration:underline}
  .seen .seen-note{text-align:center; font-size:.72rem; color:var(--muted); max-width:70ch; margin:10px auto 0}
  @media (prefers-reduced-motion: reduce){
    .marquee .track{animation:none; flex-wrap:wrap; width:auto; justify-content:center}
    html{scroll-behavior:auto}
  }

  /* ---------- Testimonials ---------- */
  .tst-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px}
  .tst-row.three{grid-template-columns:repeat(3,1fr)}
  .tst{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; display:flex; flex-direction:column; gap:14px}
  .tst q{font-family:'EB Garamond',serif; font-style:italic; font-size:1.18rem; line-height:1.55; quotes:"“" "”"}
  .tst .who{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.06em; color:var(--muted); margin-top:auto}
  .tst .stars{color:var(--accent); letter-spacing:3px; font-size:.9rem}
  #tst-modal:not([hidden]){display:flex}
  #tst-modal[hidden]{display:none}
  .gate{max-width:420px}
  /* Brief orange glow when a "Get the Free Worksheet" button brings the form into view. */
  .gate-flash{animation:gate-flash 1.6s ease-out; border-radius:14px}
  @keyframes gate-flash{0%,35%{box-shadow:0 0 0 3px var(--accent), 0 0 28px rgba(195,92,44,.45)} 100%{box-shadow:0 0 0 3px transparent, 0 0 28px transparent}}
  .gate-names{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .micro{font-size:.75rem; color:var(--muted); max-width:72ch; margin:26px auto 0; text-align:center; line-height:1.6}

  /* ---------- Split sections ---------- */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
  .split .photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .split .photo img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.4}

  /* ---------- FAQ two-panel ---------- */
  .faq2{display:grid; grid-template-columns:1fr 1.15fr; gap:44px; margin-top:40px; align-items:start}
  .faq2 .qs{display:flex; flex-direction:column; gap:10px}
  .faq2 .qs button{text-align:left; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:1rem; padding:18px 22px; border-radius:14px;
    border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:all .15s ease; line-height:1.35}
  .faq2 .qs button:hover{border-color:var(--accent)}
  .faq2 .qs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
  .faq2 .apanel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 36px; min-height:280px; position:sticky; top:100px}
  .faq2 .apanel h3{color:var(--accent)}

  /* ---------- Accordion ---------- */
  .acc{display:flex; flex-direction:column; gap:12px; margin-top:8px}
  .acc details{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
  .acc summary{cursor:pointer; padding:18px 22px; font-family:'Josefin Sans',sans-serif; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; line-height:1.35}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary::after{content:"+"; font-size:1.4rem; color:var(--accent); flex-shrink:0; line-height:1}
  .acc details[open] summary::after{content:"–"}
  .acc .body{padding:0 22px 20px; color:var(--muted)}

  /* ---------- Cards & grids ---------- */
  .cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
  .vcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column}
  .vcard:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
  .vcard .thumb{position:relative; aspect-ratio:16/9; background:var(--dark-surface); overflow:hidden}
  .vcard .thumb img{width:100%; height:100%; object-fit:cover; opacity:.85}
  .vcard .pad{padding:20px 22px 24px}
  .vcard h3{font-size:1.06rem; margin-bottom:6px}
  .vcard .meta{font-size:.8rem; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; font-family:'Josefin Sans',sans-serif; font-weight:600}
  .vcard .dur{position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.78); color:#fff; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.78rem; padding:4px 9px 2px; border-radius:7px; letter-spacing:.05em}
  /* Press cards: the outlet is set in the same wordmark treatments the home marquee
     uses, so each one reads as its masthead without shipping anyone's logo artwork. */
  .vcard.pod .thumb{aspect-ratio:1/1}
  .vcard.pod .thumb img{opacity:1}
  .presscard{text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:14px;
    transition:transform .18s ease, border-color .18s ease}
  .presscard:hover{transform:translateY(-3px); border-color:var(--accent)}
  .presscard .press{color:var(--ink); opacity:.95; white-space:normal; cursor:pointer}
  .presscard .press-serif{font-size:1.3rem}
  .presscard .press-serif-caps{font-size:.9rem}
  .presscard .press-sans{font-size:.92rem}
  .presscard .press-sans-wide{font-size:.74rem}
  .presscard .press-lower{font-size:1.15rem}
  .presscard h3{font-size:.95rem; line-height:1.4; margin:0; color:var(--muted); font-weight:600}
  /* Press mentions whose article is gone or doesn't name Brian: listed, not linked. */
  .presscard-static:hover{transform:none; border-color:var(--line)}
  .presscard-static .press{cursor:default}
  .press-grid + .seen-note{text-align:center; font-size:.72rem; color:var(--muted); max-width:70ch; margin:32px auto 0}
  .press-grid{gap:18px}
  .stepcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px}
  .stepcard .num{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.12em; color:var(--accent); text-transform:uppercase; margin-bottom:10px}
  .stepcard p{color:var(--muted); margin:0}
  .delivgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
  .deliv{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px}
  .deliv .ic{width:44px; height:44px; border-radius:12px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:16px; color:var(--accent); font-family:'Josefin Sans',sans-serif; font-weight:700}
  .deliv p{color:var(--muted); font-size:.94rem; margin:0}

  /* ---------- Quote band ---------- */
  .quoteband{background:radial-gradient(70% 120% at 50% 0%, rgba(var(--ember),.13), transparent 62%), var(--dark-surface);
    color:var(--dark-ink); text-align:center; padding:96px 0}
  .quoteband q{font-family:'EB Garamond',serif; font-style:italic; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.5; display:block; max-width:22em; margin:0 auto 22px; quotes:"“" "”"}
  .quoteband .who{font-family:'Josefin Sans',sans-serif; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--dark-muted)}
  .quoteband .stars{color:var(--accent); letter-spacing:4px; margin-bottom:18px}

  /* ---------- After-method paths ---------- */
  .paths{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}

  /* ---------- CTA band ---------- */
  .ctaband{background:var(--accent); color:#fff; border-radius:var(--radius); padding:60px 56px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap}
  .ctaband h2{margin:0}
  /* Tiffany QA: smaller CTA bands, and a centred variant. */
  .ctaband.sm{padding:40px 44px}
  .ctaband.sm h2{font-size:clamp(1.3rem,2.1vw,1.7rem)}
  .ctaband.sm p{font-size:.95rem}
  .ctaband.mid{flex-direction:column; text-align:center; justify-content:center; gap:22px}
  .ctaband.mid p{margin-left:auto; margin-right:auto; max-width:60ch}
  .reg{font-size:.5em; vertical-align:super; line-height:0}

  .ctaband p{color:#FFFFFF; margin:8px 0 0}
  .ctaband .btn{background:#fff; color:var(--accent)}
  .ctaband .btn:hover{background:var(--dark-surface); color:#fff}
  /* Home closing call to action: photo band (sunset chairs on the right, copy on the left). */
  .ctaphoto{position:relative; overflow:hidden; border-radius:var(--radius); color:#fff; min-height:400px; display:flex; align-items:center;
    background:#1c1714 url(/img/site/cta-sunset-chairs.jpg?v=2) right center/cover no-repeat}
  .ctaphoto::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(22,17,14,.94) 0%, rgba(22,17,14,.85) 38%, rgba(22,17,14,.35) 62%, rgba(22,17,14,0) 80%)}
  .ctaphoto-copy{position:relative; padding:60px 56px; max-width:700px}
  .ctaphoto-rule{display:block; width:48px; height:3px; background:var(--accent); margin-bottom:22px}
  .ctaphoto h2{margin:0; color:#fff}
  .ctaphoto-copy > p{color:rgba(255,255,255,.88); margin:14px 0 0; max-width:52ch}
  .ctaphoto-actions{display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap}
  .ctaphoto .btn{background:#fff; color:var(--accent)}
  .ctaphoto .btn:hover{background:var(--accent); color:#fff}
  .ctaphoto-alt{margin:0; padding-left:22px; border-left:1px solid rgba(255,255,255,.3); font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.8)}
  .ctaphoto-alt a{color:#fff; text-decoration:underline}
  @media (max-width: 760px){
    .ctaphoto{min-height:0; background-size:cover; background-position:center}
    .ctaphoto::before{background:linear-gradient(180deg, rgba(20,15,12,.55) 0%, rgba(20,15,12,.85) 55%, rgba(20,15,12,.92) 100%)}
    .ctaphoto-copy{padding:44px 28px}
    .ctaphoto-alt{padding-left:0; border-left:0}
  }

  /* ---------- Fit call ---------- */
  .fit-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
  #page-contact .fit-grid{grid-template-columns:1fr 1fr}
  .map-embed{width:100%; height:380px; background:var(--dark-surface)}
  .map-embed iframe{width:100%; height:100%; border:0; display:block}
  @media (max-width:620px){ .map-embed{height:300px} }
  .sched{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px; position:sticky; top:100px; box-shadow:var(--shadow)}
  .sched .slot{border:1px dashed var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; font-size:.92rem}
  .sched .slot b{font-family:'Josefin Sans',sans-serif}
  .sched .note{font-size:.78rem; color:var(--muted); margin-top:14px}
  #page-fit .sched{position:static; padding:22px 14px 16px}
  /* OnceHub's so.js sizes its own iframe, so this is a min-height for the pre-load
     state rather than a fixed frame. The light 1px border from the pasted snippet is
     dropped here: it reads as a seam against the card. */
  #page-fit .sched-embed{width:100%; min-width:0; min-height:550px; border-radius:12px; overflow:hidden; background:var(--bg)}
  #page-fit .sched-embed iframe{width:100%; max-width:100%; border:0; display:block; border-radius:12px}
  #page-fit .sched-embed.is-fallback{min-height:0; background:none; padding:6px 0 2px; text-align:center}
  #page-fit .sched-embed.is-fallback .btn{width:100%; justify-content:center}
  #page-fit .cal-fb-lead{color:var(--ink); font-size:1rem; margin:0 0 18px}
  @media (max-width:620px){ #page-fit .sched{padding:16px} }
  .expect{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}

  /* ---------- Calculator ---------- */
  .calc-grid{display:grid; grid-template-columns:400px minmax(0,1fr); gap:40px; align-items:start}
  .calc-form{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px}
  .calc-form label{display:block; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:18px 0 6px}
  .calc-form label:first-of-type{margin-top:0}
  .calc-form input{width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; background:var(--bg); color:var(--ink); font-family:'Montserrat',sans-serif; font-size:1rem; font-variant-numeric:tabular-nums}
  .calc-form input:focus{outline:none; border-color:var(--accent)}
  .calc-form details{margin-top:20px; border-top:1px solid var(--line); padding-top:14px}
  .calc-form summary{cursor:pointer; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.85rem; color:var(--accent); list-style:none}
  .calc-form summary::-webkit-details-marker{display:none}
  .stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px}
  .stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px}
  .stat b{display:block; font-family:'Josefin Sans',sans-serif; font-size:1.55rem; line-height:1.1; font-variant-numeric:tabular-nums}
  .stat.hero b{color:var(--accent)}
  .stat span{font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-family:'Josefin Sans',sans-serif; font-weight:600}
  .stat .cap{display:block; font-size:.8rem; color:var(--muted); margin-top:8px; line-height:1.5; font-family:'Montserrat',sans-serif; font-weight:400}
  .stat span{display:block; margin-bottom:6px}
  .chart-sub{font-size:.84rem; color:var(--muted); margin:-6px 0 16px; line-height:1.55; max-width:56ch}
  .chart-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 26px 18px; position:relative}
  .chart-card h3{font-size:1rem; margin-bottom:14px}
  #calc-chart{width:100%; height:auto; display:block}
  #calc-tip{position:absolute; pointer-events:none; background:var(--dark-surface); color:var(--dark-ink); font-size:.8rem; padding:7px 12px; border-radius:9px; white-space:nowrap; transform:translate(-50%,-130%); display:none; font-variant-numeric:tabular-nums; z-index:5}
  .calc-note{font-size:.78rem; color:var(--muted); line-height:1.6; margin-top:16px}
  .calc-table{margin-top:18px}
  .calc-table summary{cursor:pointer; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.85rem; color:var(--accent)}
  @media (max-width: 980px){.calc-grid{grid-template-columns:1fr}.stat-row{grid-template-columns:1fr 1fr}}
  @media (max-width: 620px){.stat-row{grid-template-columns:1fr}}

  /* ---------- Team / Limits ---------- */
  .team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
  .teamcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .teamcard img{width:100%; aspect-ratio:4/4.6; object-fit:cover; object-position:top}
  .teamcard .pad{padding:22px 24px 26px}
  .teamcard h3{margin-bottom:2px}
  .teamcard .role{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:12px}
  .teamcard p{color:var(--muted); font-size:.93rem; margin:0}
  @media (max-width: 980px){.team-grid{grid-template-columns:1fr 1fr}}
  @media (max-width: 620px){.team-grid{grid-template-columns:1fr}}
  .limits-table{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-variant-numeric:tabular-nums}
  .limits-wrap{overflow-x:auto; border-radius:var(--radius); margin-top:18px}
  .limits-table th{font-family:'Josefin Sans',sans-serif; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; text-align:left; color:var(--muted); padding:14px 20px; border-bottom:1px solid var(--line); background:var(--bg-alt)}
  .limits-table td{padding:13px 20px; border-bottom:1px solid var(--line); font-size:.95rem}
  .limits-table tr:last-child td{border-bottom:none}
  .limits-table td:last-child{font-weight:600; white-space:nowrap}
  .platform-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px}

  /* ---------- Clients ---------- */
  .portal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
  .portalcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; display:flex; flex-direction:column; gap:10px; align-items:flex-start}
  .portalcard p{color:var(--muted); font-size:.95rem; margin:0 0 18px}
  .portalcard .btn{margin-top:auto}
  @media (max-width: 980px){.portal-grid{grid-template-columns:1fr 1fr}}
  @media (max-width: 620px){.portal-grid{grid-template-columns:1fr}}

  /* ---------- Blog ---------- */
  .featured-post{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .featured-post .photo{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .featured-post .photo img{aspect-ratio:16/10; object-fit:cover; width:100%}
  .pill{display:inline-block; font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:6px 14px 4px}
  .subscribe-bar{background:var(--dark-surface); color:var(--dark-ink); border-radius:var(--radius); padding:36px 44px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between; margin-top:64px}
  .subscribe-bar h3{margin:0 0 4px}
  .subscribe-bar p{margin:0; color:var(--dark-muted); font-size:.94rem}
  .subscribe-bar form{display:flex; gap:10px; flex-wrap:wrap}
  .subscribe-bar input{background:transparent; border:1.5px solid var(--dark-line); border-radius:999px; padding:13px 22px; color:var(--dark-ink); font-family:'Montserrat',sans-serif; font-size:.92rem; min-width:250px}
  .subscribe-bar input::placeholder{color:var(--dark-muted)}
  .topics{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:44px 0 8px}
  .topics button{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.05em; padding:11px 22px 9px; border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:all .15s ease}
  .topics button:hover{border-color:var(--accent); color:var(--accent)}
  .topics button.on{background:var(--accent); border-color:var(--accent); color:#fff}

  /* ---------- Article ---------- */
  .article-head{max-width:820px; margin:0 auto; text-align:center; padding:72px 0 44px}
  .article-head .meta{color:var(--muted); font-size:.9rem; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:16px}
  .article-hero{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); max-width:980px; margin:0 auto}
  .article-hero img{width:100%; aspect-ratio:21/10; object-fit:cover}
  .article-layout{display:grid; grid-template-columns:64px minmax(0,720px); gap:48px; justify-content:center; padding:64px 0}
  .share-rail{position:sticky; top:110px; align-self:start; display:flex; flex-direction:column; gap:12px}
  .share-rail span{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-family:'Josefin Sans',sans-serif; font-weight:600; text-align:center}
  .share-rail a{width:46px; height:46px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink); background:var(--card); transition:all .15s ease}
  .share-rail a:hover{border-color:var(--accent); color:var(--accent)}
  .article-body{font-size:1.06rem}
  .article-body h2{font-size:1.5rem; margin-top:1.6em}
  .article-body blockquote{font-family:'EB Garamond',serif; font-style:italic; font-size:1.35rem; line-height:1.55; border-left:3px solid var(--accent); margin:1.8em 0; padding:4px 0 4px 28px; color:var(--ink)}
  /* Optional per post (front matter takeaways / faq): a short summary box at the top and a
     question and answer section at the end. */
  .takeaways{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:20px 26px; margin:0 0 32px}
  .takeaways b{font-family:'Josefin Sans',sans-serif; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
  .takeaways ul{margin:10px 0 0; padding-left:1.2em}
  .takeaways li{margin:6px 0}
  .post-faq{margin-top:48px; border-top:1px solid var(--line); padding-top:8px}
  .post-faq .faq-item h3{font-size:1.12rem; margin:1.4em 0 .4em}
  .post-faq .faq-item p{margin:0 0 .8em}
  .authorbox{display:flex; gap:22px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 30px; margin:56px 0 0}
  .authorbox img{width:76px; height:76px; border-radius:50%; object-fit:cover}
  .authorbox .who b{font-family:'Josefin Sans',sans-serif; font-size:1.05rem; display:block}
  .authorbox .who span{color:var(--muted); font-size:.88rem}
  .article-foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:28px}
  .share-inline{display:flex; gap:10px; align-items:center}
  .share-inline a{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; color:var(--ink); background:var(--card)}
  .share-inline a:hover{border-color:var(--accent); color:var(--accent)}

  /* ---------- Footer ---------- */
  footer.site{background:var(--dark-surface); color:var(--dark-ink); margin-top:96px}
  .foot-grid{display:grid; grid-template-columns:1.1fr 1fr 1.3fr; gap:56px; padding-top:72px; padding-bottom:56px}
  footer .badge{width:120px; margin-bottom:20px}
  .foot-tagline{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:-14px 0 30px}
  footer h4{font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dark-muted); margin:0 0 18px; font-weight:600}
  footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
  footer a{color:var(--dark-ink); text-decoration:none; font-size:.94rem}
  footer a:hover{color:var(--accent)}
  footer .contact p{color:var(--dark-muted); font-size:.94rem; margin:0 0 8px}
  .socials{display:flex; gap:12px; margin-top:20px}
  .socials a{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--dark-line); display:grid; place-items:center; color:var(--dark-ink)}
  .socials a:hover{border-color:var(--accent); color:var(--accent)}
  .freebie{background:#2A221D; border:1px solid var(--dark-line); border-radius:var(--radius); padding:24px 26px}
  .freebie .btn{padding:12px 22px; font-size:.85rem}
  .freebie h3{color:#fff; font-size:1.15rem}
  .freebie p{color:var(--dark-muted); font-size:.92rem}
  .foot-bottom{position:relative; padding-top:26px; padding-bottom:34px; font-size:.78rem; color:var(--dark-muted); line-height:1.7}
  .foot-bottom .legal-links{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:14px}
  .foot-bottom a{color:var(--dark-muted); text-decoration:underline; font-size:.78rem}

  /* ---------- Page fade-in ---------- */
  .page{animation:fadein .3s ease}
  @keyframes fadein{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
  @media (prefers-reduced-motion: reduce){.page{animation:none}}

  /* ---------- Responsive ---------- */
  @media (max-width: 980px){
    .hero-grid,.split,.faq2,.fit-grid,.featured-post{grid-template-columns:1fr}
    /* The #page-home rule above outranks the line above it, so the home hero needs its
       own override or it stays two columns on a phone. */
    #page-home .hero-grid{grid-template-columns:1fr; gap:34px}
    #page-home .hero{padding:72px 0 64px}
    .tst-row, .tst-row.three{grid-template-columns:repeat(2,1fr)}
    .cards3,.delivgrid,.paths,.expect{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
    .faq2 .apanel{position:static}
    .sched{position:static}
    .article-layout{grid-template-columns:minmax(0,1fr)}
    .share-rail{flex-direction:row; position:static; order:2}
    nav.main{display:none}
    nav.main.open{display:flex; position:absolute; top:78px; left:0; right:0; background:var(--card); flex-direction:column; align-items:stretch; padding:18px 24px 28px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); gap:2px}
    nav.main.open .dropdown{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; padding:6px 16px 14px; flex-direction:column; gap:18px; display:none}
    nav.main.open .navitem.open .dropdown{display:flex}
    nav.main.open .navitem > a, nav.main.open .navitem > button{width:100%; justify-content:space-between}
    .hamburger{display:block}
    .nav-cta{margin:10px 0 0}
  }
  @media (max-width: 620px){
    .tst-row, .tst-row.three,.cards3,.delivgrid,.paths,.expect,.foot-grid{grid-template-columns:1fr}
    section.band{padding:64px 0}
    .ctaband{padding:44px 32px}
    .subscribe-bar{padding:30px 26px}
  }

  /* ---------- Responsive grid fixes ---------- */
  /* These grids carried grid-template-columns as an inline style, which outranks every
     media query, so they stayed four-up at 375px and scrolled the whole page sideways.
     As classes they collapse like everything else. */
  .cards3.cards4{grid-template-columns:repeat(4,1fr)}
  .cards3.cards2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:980px){
    .cards3.cards4{grid-template-columns:repeat(2,1fr)}
    /* #page-contact .fit-grid outranks the generic 980px reset, so the contact page
       needs its own override or it stays two columns on a phone. */
    #page-contact .fit-grid{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:620px){
    .cards3.cards4, .cards3.cards2{grid-template-columns:1fr}
  }

  /* ---------- Blog (pages built by scripts/build.py) ---------- */
/* Blog post pages (scripts/build.py) */
.article-layout{padding-left:24px; padding-right:24px}
.article-body img{max-width:100%; height:auto; border-radius:12px; margin:1.6em 0}
.article-body iframe{width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:12px; margin:1.6em 0}
.article-body h2,.article-body h3,.article-body h4{margin-top:1.6em}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li{margin-bottom:.4em}
.article-body table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem}
.article-body th,.article-body td{border:1px solid var(--line); padding:10px 14px; text-align:left}
.blog-grid .vcard[hidden]{display:none}
.subscribe-bar{margin-top:0}
.newsletter-form{display:flex; gap:10px; flex-wrap:wrap; align-items:center; max-width:520px}
.newsletter-form{width:100%}
.newsletter-form input[type=email]{flex:1 1 240px; min-width:0}
.newsletter-form .cf-turnstile{flex-basis:100%}
.newsletter-status{flex-basis:100%; margin:0; font-size:.88rem; color:var(--dark-muted); min-height:1.2em}
.blog-search{max-width:560px; margin:22px auto 0}
.blog-search input{width:100%; border:1.5px solid var(--line); border-radius:999px; padding:14px 24px; background:var(--card);
  color:var(--ink); font-family:'Montserrat',sans-serif; font-size:1rem}
.blog-search input:focus{outline:none; border-color:var(--accent)}
.blog-search input::placeholder{color:var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.blog-count{text-align:center; color:var(--muted); font-size:.9rem; margin:22px 0 0; min-height:1.5em}
.blog-grid{margin-top:22px}
.blog-empty{text-align:center; color:var(--muted); margin:40px 0}
.blog-pages{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:44px}
.blog-pages button{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:.9rem; min-width:44px; padding:11px 16px 9px;
  border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer}
.blog-pages button:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.blog-pages button.on{background:var(--accent); border-color:var(--accent); color:#fff}
.blog-pages button:disabled{opacity:.4; cursor:default}

  /* ---------- Letter from Brian (Method and Enough Line pages) ---------- */
  .letter{max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:52px 60px; box-shadow:var(--shadow)}
  .letter p{font-size:1.06rem; line-height:1.8; color:var(--ink); margin:0 0 1.15em}
  .letter h3{font-size:1.15rem; margin:1.9em 0 .7em; color:var(--accent)}
  .letter .sig{margin:30px 0 0}
  .letter .sig .name{display:block; font-family:'EB Garamond',serif; font-style:italic; font-size:1.7rem; line-height:1.2; color:var(--ink)}
  .letter .sig .role{display:block; font-size:.88rem; color:var(--muted); margin-top:4px}
  .letter .ps{border-top:1px solid var(--line); padding-top:22px; margin:30px 0 0; color:var(--muted); font-size:.98rem}
  .letter .ps b{color:var(--ink)}
  @media (max-width:620px){ .letter{padding:32px 22px} .letter p{font-size:1rem} }

  /* ---------- Share buttons (Enough Line) ---------- */
  .share-band .share-card{max-width:880px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:44px 48px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; box-shadow:var(--shadow)}
  .share-band h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 12px}
  .share-band p{color:var(--muted); margin:0}
  .share-btns{display:flex; flex-direction:column; gap:12px}
  .share-btns .btn{justify-content:center; width:100%}
  .share-note{font-size:.8rem; text-align:center; min-height:1.2em; word-break:break-all}
  .share-mini{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; align-items:center}
  .share-mini span{flex-basis:100%; font-size:.85rem; color:var(--muted)}
  .share-mini .btn{padding:9px 18px 7px; font-size:.85rem}
  /* Texting only works on phones and tablets; on a computer Email It becomes the main button. */
  .no-sms [data-share-via="sms"]{display:none !important}
  .no-sms .share-btns .share-form button{background:var(--accent); border-color:var(--accent); color:#fff}
  .share-form{display:flex; flex-direction:column; gap:10px}
  .share-names{display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .share-form input[type=email], .share-form input[type=text]{width:100%; min-width:0; border:1.5px solid var(--line); border-radius:12px; padding:12px 16px;
    background:var(--bg); color:var(--ink); font-family:'Montserrat',sans-serif; font-size:.95rem}
  .share-form input:focus{outline:none; border-color:var(--accent)}
  .share-form .btn{justify-content:center; width:100%}
  .share-status{font-size:.82rem; color:var(--muted); margin:0; min-height:1.2em; text-align:center}
  .share-form-mini{flex-direction:row; flex-wrap:wrap; align-items:center; width:100%}
  .share-form-mini input[type=email]{flex:1 1 220px; width:auto; padding:9px 14px}
  .share-form-mini .btn{width:auto}
  .share-form-mini .cf-turnstile, .share-form-mini .share-status{flex-basis:100%; text-align:left}
  @media (max-width:900px){ .share-band .share-card{grid-template-columns:1fr; padding:30px 22px} }

  /* Enough Line form: consent line under the button */
  .gate-consent{font-size:.76rem; line-height:1.5; color:var(--muted); margin:10px 0 0}
  .gate-consent a{color:var(--muted); text-decoration:underline}

  /* Links to /blog/#newsletter land on the sign-up box, clear of the sticky header */
  #newsletter{scroll-margin-top:110px}
  .newsletter-form .gate-consent{flex-basis:100%; margin-top:0}

  /* ---------- Bonfire Method: facts, comparison, price ---------- */
  .facts{list-style:none; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; padding:0; margin:0 auto 28px}
  .facts li{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 22px; min-width:170px; text-align:center}
  .facts b{display:block; font-family:'Josefin Sans',sans-serif; font-size:1.35rem; color:var(--ink)}
  .facts span{font-size:.85rem; color:var(--muted)}
  .compare-wrap{max-width:860px; margin:36px auto 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}
  .compare{width:100%; border-collapse:collapse; table-layout:fixed}
  .compare th{font-family:'Josefin Sans',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; padding:16px 22px; text-align:left}
  .compare th:first-child{background:var(--bg-alt); color:var(--muted)}
  .compare th:last-child{background:var(--accent); color:#fff}
  .compare td{padding:18px 22px; border-top:1px solid var(--line); font-size:1rem; vertical-align:top}
  .compare td:first-child{background:var(--bg-alt); color:var(--muted)}
  .compare td:last-child{background:var(--card); color:var(--ink); font-weight:600}
  .compare-note{max-width:640px; margin:26px auto 0; color:var(--muted)}
  .feebox{max-width:620px; margin:28px auto 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 36px}
  .feebox .fee{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:3rem; color:var(--accent); line-height:1; margin-bottom:14px}
  .feebox p{color:var(--muted); margin:0}
  .letter-more{margin:4px 0 26px}
  .letter-more summary{cursor:pointer; color:var(--accent); font-family:'Josefin Sans',sans-serif; font-weight:600; letter-spacing:.02em; list-style:none}
  .letter-more summary::-webkit-details-marker{display:none}
  .letter-more summary::after{content:" +"}
  .letter-more[open] summary::after{content:" \2212"}
  .letter-more[open] summary{margin-bottom:10px}
  @media (max-width:620px){
    .facts{flex-direction:column; gap:8px; max-width:360px}
    .facts li{display:flex; align-items:baseline; gap:10px; padding:10px 14px; min-width:0; text-align:left}
    .facts b{font-size:1.05rem; white-space:nowrap}
    .facts span{font-size:.85rem}
    .compare th, .compare td{padding:14px 14px; font-size:.92rem}
  }

  /* ---------- Enough Line: napkin math ---------- */
  .mathcard{max-width:960px; margin:34px auto 0; display:flex; align-items:stretch; justify-content:center; gap:10px; flex-wrap:wrap}
  .mathcard .m{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; min-width:150px; flex:1 1 0; display:flex; flex-direction:column; justify-content:space-between; gap:8px}
  .mathcard .m span{font-size:.82rem; color:var(--muted); line-height:1.35}
  .mathcard .m b{font-family:'Josefin Sans',sans-serif; font-size:1.5rem; color:var(--ink)}
  .mathcard .m.hi{border-color:var(--accent); background:var(--accent-soft)}
  .mathcard .m.hi b{color:var(--accent)}
  .mathcard .op{align-self:center; font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:1.2rem; color:var(--accent); white-space:nowrap}
  .math-note{max-width:640px; margin:22px auto 0; color:var(--muted); font-size:.95rem}
  @media (max-width:760px){
    .mathcard{flex-direction:column; max-width:360px}
    .mathcard .m{flex-direction:row; align-items:baseline; min-width:0}
    .mathcard .m b{font-size:1.2rem; white-space:nowrap}
    .mathcard .op{align-self:center; font-size:1rem}
  }
  .hero-grid .facts{justify-content:flex-start; margin:22px 0 0; flex-wrap:nowrap; gap:10px; max-width:540px}
  .hero-grid .facts li{min-width:0; flex:1 1 0; padding:12px 14px; text-align:left}
  .hero-grid .facts b{font-size:1.15rem}
  @media (max-width:620px){ .hero-grid .facts{flex-direction:column; max-width:360px} }

  /* Napkin math: the two boxes visitors type into */
  .mathcard label.m{cursor:text}
  .mathcard .in{display:flex; align-items:baseline; gap:2px; border-bottom:2px dashed var(--accent); padding-bottom:2px}
  .mathcard .in i{font-style:normal; font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:1.5rem; color:var(--ink)}
  .mathcard .in input{width:100%; min-width:0; background:transparent; border:0; padding:0; color:var(--ink);
    font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:1.5rem}
  .mathcard .in input:focus{outline:none}
  .mathcard label.m:focus-within{border-color:var(--accent)}
  @media (max-width:760px){
    .mathcard .in{flex:0 0 auto; width:12ch}
    .mathcard .in i, .mathcard .in input{font-size:1.2rem}
    .mathcard .in input{text-align:right}
  }

/* "The pile" section (home, Method page, Method landing page): short lines, scannable chips and cards, no paragraphs */
.pile-h{font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.12; max-width:20ch; margin:0 auto 14px}
.pile-sub{font-size:1.2rem; color:var(--muted); margin:0 auto 34px}
.pile-boxes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1040px; margin:0 auto 20px; text-align:left}
.pile-box{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px 14px}
.pile-box-tag{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.pile-more-box{margin:0 auto 44px; color:var(--muted); font-style:italic; text-align:center}
.pile-box ul{list-style:none; margin:0; padding:0}
.pile-box li{position:relative; padding:9px 0 9px 22px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--ink); font-size:1rem}
.pile-box li:last-child{border-bottom:0}
.pile-box li::before{content:""; position:absolute; left:4px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--accent)}
.pile-kicker{font-family:'Josefin Sans',sans-serif; font-weight:600; font-size:1.15rem; margin:0 auto 18px}
.pile-triggers{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:960px; margin:0 auto 48px; text-align:left}
.pile-triggers.four{grid-template-columns:repeat(2,1fr); max-width:820px; margin-bottom:34px}
.pile-card{background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:22px 22px 24px}
.pile-card b{display:block; font-family:'Josefin Sans',sans-serif; font-size:1.25rem; margin-bottom:6px; color:var(--ink)}
.pile-card span{color:var(--muted); font-size:1rem; line-height:1.5}
.pile-q{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:clamp(1.4rem,3vw,1.9rem); line-height:1.3; margin:0 auto 18px}
.pile-q span{color:var(--accent)}
.pile-answer{font-size:1.15rem; margin:0 auto 26px; max-width:40ch}
@media (max-width:760px){ .pile-triggers, .pile-triggers.four{grid-template-columns:1fr} .pile-boxes{grid-template-columns:1fr; gap:14px} }

/* F-pattern reading components (Oct 2026). People scan the left edge and the first words of each line,
   so these keep body text left-aligned, short, and led by bold key words. */
.f-body{max-width:62ch; margin-left:auto; margin-right:auto; text-align:left}
.f-body > p{margin:0 0 14px}
.punch{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.3; color:var(--ink); margin:22px 0}
.center .punch{margin-left:auto; margin-right:auto; max-width:40ch; text-wrap:balance}
.checks{list-style:none; margin:20px 0; padding:0; text-align:left}
.center .checks{max-width:60ch; margin-left:auto; margin-right:auto}
.checks li{position:relative; padding:0 0 0 32px; margin:0 0 14px; line-height:1.55; color:var(--muted)}
.checks li b{color:var(--ink); font-weight:600}
.checks li::before{content:""; position:absolute; left:2px; top:.32em; width:16px; height:16px; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23C35C2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.f-rows{margin:22px 0; padding:0; text-align:left}
.center .f-rows{max-width:62ch; margin-left:auto; margin-right:auto}
.f-rows > div{display:grid; grid-template-columns:minmax(120px,30%) 1fr; gap:18px; padding:14px 0; border-top:1px solid var(--line)}
.f-rows > div:last-child{border-bottom:1px solid var(--line)}
.f-rows dt{font-family:'Josefin Sans',sans-serif; font-weight:700; color:var(--ink)}
.f-rows dd{margin:0; color:var(--muted)}
@media (max-width:640px){ .f-rows > div{grid-template-columns:1fr; gap:4px} }
.acc .body p{margin:0 0 10px}
.acc .body p:last-child{margin-bottom:0}
.contrast{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:860px; margin:8px auto 30px; text-align:left}
.contrast-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px}
.contrast-card.is-goal{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.contrast-tag{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.contrast-card.is-goal .contrast-tag{color:var(--accent)}
.contrast-card ul{list-style:none; margin:0; padding:0}
.contrast-card li{position:relative; padding:8px 0 8px 26px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted)}
.contrast-card li:first-child{border-top:0}
.contrast-card li::before{content:"\2013"; position:absolute; left:4px; color:var(--muted)}
.contrast-card.is-goal li{color:var(--ink)}
.contrast-card.is-goal li::before{content:"\2713"; color:var(--accent); font-weight:700}
@media (max-width:760px){ .contrast{grid-template-columns:1fr} }
.h1-long{font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:30ch}
.h1-long span{display:block}
.center .h1-long{margin-left:auto; margin-right:auto; max-width:none}
.help-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:40px}
.help-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:24px 22px; text-decoration:none; color:var(--ink); transition:transform .15s, border-color .15s}
.help-card:hover{transform:translateY(-3px); border-color:var(--accent)}
.help-tag{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.help-card h3{font-size:1.25rem; margin:0 0 8px}
.help-card p{color:var(--muted); font-size:.95rem; line-height:1.55; margin:0 0 18px; flex:1}
.help-link{font-family:'Josefin Sans',sans-serif; font-weight:600; color:var(--accent); font-size:.92rem}
.help-grid.three{grid-template-columns:repeat(3,1fr); max-width:1000px; margin-left:auto; margin-right:auto}
.help-grid.two{grid-template-columns:repeat(2,1fr); max-width:720px; margin-left:auto; margin-right:auto}
@media (max-width:980px){ .help-grid, .help-grid.three{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .help-grid, .help-grid.three, .help-grid.two{grid-template-columns:1fr} }
.fear-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1040px; margin:40px auto 0; text-align:left}
.fear-card{background:var(--card); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column}
.fear-card h3{font-size:1.35rem; margin:0 0 10px}
.fear-card p{color:var(--muted); margin:0 0 18px; line-height:1.55}
.fear-fix{margin-top:auto; min-height:6.4em; border-top:1px solid var(--line); padding-top:14px; color:var(--ink); font-size:.95rem; line-height:1.5}
.fear-fix b{display:block; margin-bottom:4px; color:var(--accent); font-family:'Josefin Sans',sans-serif; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}
@media (max-width:860px){ .fear-grid{grid-template-columns:1fr} .fear-fix{min-height:0} }
/* The three cards share rows (question, description, fix), so every "The fix" line sits at
   the same height across the row whatever the text length. Older browsers keep the flex layout. */
@supports (grid-template-rows: subgrid){
  .fear-card{display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0}
  .fear-fix{margin-top:0; min-height:0}
}

/* FAQ accordions: easier reading. Bigger question, a divider when open, a narrower and
   brighter answer column, and the first sentence of each answer set as the lead. */
.acc summary{font-size:1.05rem; color:#fff; padding:20px 26px}
.acc details[open] summary{border-bottom:1px solid var(--line)}
.acc .body{padding:18px 26px 24px; font-size:.97rem; line-height:1.7; color:rgba(255,255,255,.78)}
.acc .body p{max-width:68ch; margin:0 0 14px}
.acc .body p:first-child{color:#fff; font-weight:500}
.acc .body b{color:#fff}

/* Keeps phone numbers on one line (added by scripts/build.py). */
.nowrap{white-space:nowrap}

/* Method page: Brian's note set like a letter (serif body, same face as the signature). */
#method-letter .letter p:not(.sig):not(.ps), #el-letter .letter p:not(.sig):not(.ps){font-family:'EB Garamond',Georgia,serif; font-size:1.28rem; line-height:1.65; margin-bottom:1em}
@media (max-width:620px){ #method-letter .letter p:not(.sig):not(.ps), #el-letter .letter p:not(.sig):not(.ps){font-size:1.16rem} }

/* Warning lists (FAQ red flags): orange bullets, not checkmarks. */
.flags{list-style:none; margin:0; padding:0}
.flags li{position:relative; padding-left:24px; margin:0 0 10px; line-height:1.6}
.flags li:last-child{margin-bottom:0}
.flags li::before{content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.acc .body .flags{margin:4px 0 14px}
.flags li b{color:#fff}

/* Hero fact boxes (Enough Line): tight, even, two clean lines each. */
.hero-grid .facts li{padding:14px 16px; display:flex; flex-direction:column; justify-content:center}
.hero-grid .facts b{font-size:1.1rem; line-height:1.2; white-space:nowrap}
.hero-grid .facts span{display:block; margin-top:5px; font-size:.84rem; line-height:1.35}
@media (max-width:620px){ .hero-grid .facts{max-width:none} .hero-grid .facts li{flex-direction:row; align-items:baseline; justify-content:flex-start; gap:12px; text-align:left} .hero-grid .facts b{min-width:112px} .hero-grid .facts span{margin-top:0} }

/* Footer divider spans the content width, lined up with the logo and legal text. */
.foot-bottom::before{content:""; position:absolute; top:0; left:24px; right:24px; border-top:1px solid var(--dark-line)}

/* A page that ends on a shaded section runs straight into the footer (no empty strip). */
main:has(.page > section.band:is(.alt, .warm):last-child) + footer.site{margin-top:0}

/* ---------- Method page: more breathing room (Nov 10) ---------- */
#page-method .hero .facts{gap:18px; margin-bottom:0}
#page-method .hero .facts li{padding:20px 26px; min-width:220px}
#page-method .hero .facts b{margin-bottom:4px}
#real-question .pile-h{margin-bottom:40px}
#real-question .contrast{gap:24px; max-width:900px; margin:0 auto 44px}
#real-question .contrast-card{padding:28px 32px}
#real-question .contrast-tag{margin-bottom:16px}
#real-question .contrast-card li{padding:13px 0 13px 28px; line-height:1.5}
/* Rows pair up across the two cards (each before sits level with its after). */
@supports (grid-template-rows: subgrid){
  #real-question .contrast{grid-template-rows:auto repeat(5, auto); row-gap:0}
  #real-question .contrast-card{display:grid; grid-row:span 6; grid-template-rows:subgrid}
  #real-question .contrast-card ul{display:contents}
  #real-question .contrast-card li{display:flex; align-items:center}
}
@media (max-width:760px){ #real-question .contrast-card{grid-row:auto} #real-question .contrast{grid-template-rows:none} }
/* Deliverable numbers in white so they read on the orange tile. */
.deliv .ic{color:#fff}
/* Fee box subheading under the price. */
.feebox .fee-sub{margin:-4px auto 22px; max-width:34ch; color:var(--muted); font-size:.98rem; line-height:1.5; text-align:center}
.quoteband .eyebrow{margin-bottom:22px}
.letter .ps a b{color:inherit}

/* ---------- Newsletter sign-up card (blog + posts), centered (Nov 10) ---------- */
.subscribe-card{max-width:720px; margin:0 auto; background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:var(--radius); padding:40px 44px 32px; color:var(--dark-ink)}
.subscribe-card h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 10px}
.subscribe-card .sub-lead{color:var(--dark-muted); margin:0 0 24px; font-size:1rem; line-height:1.6}
.subscribe-card .newsletter-form{display:block; max-width:none}
.subscribe-card .sub-row{display:flex; gap:12px; align-items:flex-start}
.subscribe-card input[type=email]{flex:1 1 auto; min-width:0; background:transparent; border:1.5px solid var(--dark-line); border-radius:999px; padding:14px 22px; color:var(--dark-ink); font-family:'Montserrat',sans-serif; font-size:.95rem}
.subscribe-card input[type=email]::placeholder{color:var(--dark-muted)}
.subscribe-card .sub-btn{display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto}
.subscribe-card .sub-btn .btn{padding-left:30px; padding-right:30px}
.subscribe-card .sub-note{font-size:.76rem; color:var(--dark-muted)}
.subscribe-card .cf-turnstile{margin-top:12px}
.subscribe-card .newsletter-status{margin-top:8px}
.subscribe-card .gate-consent{border-top:1px solid var(--dark-line); padding-top:18px; margin:14px 0 0; font-size:.76rem; color:var(--dark-muted); line-height:1.6}
@media (max-width:620px){
  .subscribe-card{padding:30px 22px 24px}
  .subscribe-card .sub-row{flex-direction:column; align-items:stretch}
  .subscribe-card .sub-btn .btn{width:100%; justify-content:center}
}

/* ---------- Blog post: author box + next-step cards (Nov 10) ---------- */
.authorbox{padding:22px 26px; gap:0}
.authorbox img{width:88px; height:88px; border-radius:14px; margin-right:24px}
.authorbox .who{border-left:1px solid var(--line); padding-left:24px}
.authorbox .who small{display:block; font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:4px}
.authorbox .who b{font-size:1.2rem; margin-bottom:4px}
.authorbox .who span{display:block; font-family:'Josefin Sans',sans-serif; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase}
.next-cards{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px}
.next-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; color:var(--ink); text-decoration:none; transition:border-color .15s ease, transform .15s ease}
.next-card:hover{border-color:var(--accent); transform:translateY(-2px)}
.next-card .num{font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px}
.next-card h3{font-size:1.3rem; margin:0 0 8px}
.next-card p{color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 0 16px}
.next-card .next-link{margin-top:auto; color:var(--accent); font-family:'Josefin Sans',sans-serif; font-weight:700; font-size:.92rem}
.next-card:hover .next-link{text-decoration:underline}
@media (max-width:620px){ .next-cards{grid-template-columns:1fr} .authorbox img{width:64px; height:64px; margin-right:16px} .authorbox .who{padding-left:16px} }
.article-body .authorbox img{margin:0 24px 0 0; flex:0 0 auto}
@media (max-width:620px){ .article-body .authorbox img{margin-right:16px} }
/* Newsletter band: tucked under the blog grid, full spacing after a shaded section (posts). */
#newsletter{padding-top:0}
.band.alt + #newsletter{padding-top:96px}
@media (max-width:620px){ .band.alt + #newsletter{padding-top:56px} }

/* Podcast page: Spotify player (Nov 10). */
.pod-player{max-width:760px; margin:34px auto 0}
.pod-player iframe{display:block; width:100%; border:0; border-radius:14px}

/* Enough Line form status: right under the button, readable, so nobody thinks nothing happened. */
.gate-status{margin:12px 0 0; font-size:.95rem; font-weight:600; color:var(--ink); min-height:0}
.gate-status:empty{display:none}
.hero-grid .facts b{white-space:normal; font-size:1.02rem}
.hero-grid .facts li{padding:14px 14px}

/* Enough Line napkin math: instructions above the boxes, a bigger next-step line below (Nov 11). */
#el-math .math-intro{max-width:62ch; margin:14px auto 0; color:var(--ink); font-size:1.05rem; line-height:1.6}
#el-math .math-intro.small{color:var(--muted); font-size:.9rem; margin-top:10px}
#el-math .mathcard{margin-top:34px}
#el-math .math-next{max-width:60ch; margin:30px auto 0; font-size:1.15rem; line-height:1.6; color:var(--muted)}
#el-math .math-next b{color:var(--ink)}
#el-why .pile-h{margin-bottom:40px}
#el-why .punch{max-width:none}

/* ---------- Enough Line bottom (Nov 11) ---------- */
/* Pass it along: two even columns, copy centered against the form. */
.share-band .share-card{grid-template-columns:1fr 1fr; align-items:center; gap:44px; padding:44px 48px}
.share-band .share-card h2{font-size:clamp(1.6rem,2.6vw,2.1rem); margin:6px 0 14px}
.share-band .share-card p{margin:0; line-height:1.6}
.share-band .share-btns .cf-turnstile{margin:0}
.share-band .share-btns .share-status:empty, .share-band .share-note:empty{display:none}
/* Enough Line photo call to action: contained card, copy left on dark, photo right. */
.ctafull{margin-top:72px; padding:0}
.ctafull-card{position:relative; overflow:hidden; border-radius:var(--radius); color:#fff; min-height:440px; display:flex; align-items:center;
  background:#1B1715 url(/img/site/el-cta-woman-reading.jpg) right center / auto 100% no-repeat; box-shadow:var(--shadow)}
.ctafull-card::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, #1B1715 0%, #1B1715 38%, rgba(27,23,21,.85) 46%, rgba(27,23,21,0) 64%)}
.ctafull-copy{position:relative; max-width:500px; padding:56px 0 56px 60px}
.ctafull h2{color:#fff; font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.12; margin:6px 0 16px}
.ctafull p{color:rgba(255,255,255,.86); line-height:1.65; margin:0 0 28px}
@media (max-width:900px){
  .ctafull-card{display:block; min-height:0; background-size:auto 280px; background-position:72% 0}
  .ctafull-card::before{background:linear-gradient(180deg, rgba(27,23,21,0) 0, rgba(27,23,21,0) 170px, #1B1715 280px)}
  .ctafull-copy{padding:278px 26px 40px}
}
/* Clickable resource cards (all pages): turn orange on hover so they read as links. */
a.stepcard{transition:background .15s ease, border-color .15s ease, transform .15s ease}
a.stepcard:not(.presscard):hover{background:var(--accent); border-color:var(--accent); transform:translateY(-2px)}
a.stepcard:not(.presscard):hover h3, a.stepcard:not(.presscard):hover p, a.stepcard:not(.presscard):hover .num{color:#fff}

/* Our Story intro: wider, centered, room under the headline (Nov 11). */
.story-intro{max-width:78ch; margin:30px auto 0; text-align:center}
.story-intro p{margin:0 0 16px; line-height:1.7}
.story-intro p{font-size:1.14rem}

/* Team bio pages: the photo matches the team page card (portrait, full head and shoulders). */
[id^="page-bio-"] .split{grid-template-columns:minmax(0,380px) 1fr; gap:56px}
[id^="page-bio-"] .split .photo img{aspect-ratio:4/4.6; object-position:top; height:auto}
@media (max-width:760px){ [id^="page-bio-"] .split{grid-template-columns:1fr} [id^="page-bio-"] .split .photo{max-width:380px} }

/* Pilots page: three-up strip under the intro (Nov 11). */
.pilot-strip{display:grid; grid-template-columns:repeat(3,1fr); max-width:900px; margin:40px auto 0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 10px}
.pilot-strip > div{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:0 18px}
.pilot-strip > div + div{border-left:1px solid var(--line)}
.pilot-strip svg{color:var(--accent); margin-bottom:4px}
.pilot-strip b{font-family:'Josefin Sans',sans-serif; font-size:1.05rem}
.pilot-strip span{color:var(--muted); font-size:.9rem}
@media (max-width:700px){ .pilot-strip{grid-template-columns:1fr; gap:18px} .pilot-strip > div + div{border-left:0; border-top:1px solid var(--line); padding-top:18px} }

/* Client Login: office details as icon rows (Nov 11). */
.visit-list{margin-top:22px}
.visit-row{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line)}
.visit-row:first-child{border-top:0; padding-top:4px}
.visit-row svg{color:var(--accent); flex:0 0 auto; margin-top:2px}
.visit-row b{display:block; font-family:'Josefin Sans',sans-serif; font-size:1.05rem; margin-bottom:6px}
.visit-row p{margin:0; color:var(--muted); line-height:1.65}
.visit-row a[href^="tel"]{color:var(--muted); text-decoration:none}
.visit-row a[href^="tel"]:hover{color:var(--accent)}

/* Contact page: more room (Nov 11). */
#page-contact .hero{padding-top:110px; padding-bottom:96px}
#page-contact .fit-grid{gap:64px; align-items:start}
#page-contact .sched{padding:34px 34px 30px}
#page-contact .sched .btn{margin-top:4px}
#page-contact .sched .note{margin-top:18px; line-height:1.6}