/* ============================================================
   Hoxton Retirement Checklist - shared styles
   Design reference: page.hoxtonwealth.com/wealth-planning (the page
   Chloe liked). Real brand fonts, Sentient headings + FT Calhern body,
   served from Ortto's CDN where Hoxton already hosts the licensed files.
   For production, self-host these in assets/fonts/ instead.
   ============================================================ */
/* ---------------------------------------------------------------
   BRAND FONTS

   Sentient      headings   Indian Type Foundry, FREE
                            https://www.fontshare.com/fonts/sentient
                            (Light / Regular / Medium per the guidelines)
   FT Calhern    body       Calhern by Frost Type, COMMERCIAL.
                            Hoxton holds the licence, the files are already
                            in Ortto. Get the webfont files from whoever
                            bought it, or export them from Ortto.

   Each face tries the self-hosted file first and falls back to the copy
   Ortto serves. Self-host for production: the Ortto CDN is a third party,
   and a page opened straight from Finder (file://, a null origin) is very
   likely to be refused the cross-origin font altogether, which is the most
   common reason this renders in the fallback stack locally.

   Drop files into assets/fonts/ using these names and they take over.
   woff2 preferred, otf works.
   --------------------------------------------------------------- */
@font-face{font-family:'Sentient';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Sentient-Regular.woff2') format('woff2'),
      url('fonts/Sentient-Regular.otf') format('opentype'),
      url('https://m.autopilotapp.com/hoxton/fonts/690756.otf') format('opentype')}
@font-face{font-family:'Sentient';font-style:normal;font-weight:300;font-display:swap;
  src:url('fonts/Sentient-Light.woff2') format('woff2'),
      url('fonts/Sentient-Light.otf') format('opentype')}
@font-face{font-family:'Sentient';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/Sentient-Medium.woff2') format('woff2'),
      url('fonts/Sentient-Medium.otf') format('opentype')}

@font-face{font-family:'FT Calhern';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/FTCalhern-Book.woff2') format('woff2'),
      url('fonts/FTCalhern-Book.otf') format('opentype'),
      url('https://m.autopilotapp.com/hoxton/fonts/244864.otf') format('opentype')}
@font-face{font-family:'FT Calhern';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/FTCalhern-Medium.woff2') format('woff2'),
      url('fonts/FTCalhern-Medium.otf') format('opentype')}
@font-face{font-family:'FT Calhern';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/FTCalhern-Semibold.woff2') format('woff2'),
      url('fonts/FTCalhern-Semibold.otf') format('opentype')}

:root{
  --brand:#033839;          /* Deep Green, headings */
  --ink:#033839;            /* body text, Deep Green to match the brand pages */
  --ink-soft:#5B7375;
  --teal:#1AB0C4;           /* Turquoise, CTA */
  --teal-dark:#13A2B8;
  --soft:#F3F8F8;
  --line:#DCE8E8;
  --white:#fff;
  --container:1060px;
  --measure:720px;
  --r:6px;                  /* button radius */
  --r-img:12px;             /* image radius */
  /* Fallbacks chosen to sit close to the real faces rather than default to
     Georgia and Arial. Sentient is a sharp, fairly high-contrast serif, so
     Iowan Old Style and Charter read far closer than Georgia. Calhern is a
     neo-grotesque, so Helvetica Neue and Inter before any system default. */
  --serif:'Sentient','Iowan Old Style','Charter','Bitstream Charter',Palatino,Georgia,serif;
  --sans:'FT Calhern','Helvetica Neue','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5}
img{max-width:100%;display:block}
a{color:var(--teal)}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.measure{max-width:var(--measure);margin-left:auto;margin-right:auto}

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--brand);margin:0}
h1{font-size:40px;line-height:1.18}
h2{font-size:31px;line-height:1.2}
h3{font-size:19px;line-height:1.3;font-family:var(--sans);font-weight:600}
p{margin:0 0 17px}
p:last-child{margin-bottom:0}

.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 15px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 30px;border:0;cursor:pointer;background:var(--teal);color:var(--white);font-family:var(--sans);font-size:15px;font-weight:600;border-radius:var(--r);text-decoration:none;transition:background .15s ease}
.btn:hover{background:var(--teal-dark)}
.btn--full{width:100%}

/* header */
.site-header{padding:26px 0}
.site-header .container{display:flex;justify-content:center}
.site-header img{width:184px}
/* Text wordmark used only until assets/images/hoxton-wealth-logo.png is in
   place. Drop the real file in and this never renders. */
.wordmark{font-family:var(--sans);font-size:23px;color:var(--brand);letter-spacing:-.01em;line-height:1}
.wordmark b{font-weight:600}

/* hero */
.hero{padding:26px 0 64px}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero .sub{font-size:20px;line-height:1.25;color:var(--ink);margin:22px 0 0;max-width:46ch}
.portrait img{width:100%;border-radius:var(--r-img);object-fit:cover;object-position:top center}
.portrait--tall img{aspect-ratio:4/5}

.byline{display:flex;align-items:center;gap:13px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.byline img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:0 0 50px}
.byline b{display:block;color:var(--brand);font-size:15px}
.byline span{color:var(--ink-soft);font-size:13px}

/* form card */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-img);padding:30px 30px 26px}
.card--onsoft{background:var(--white)}
.card h3{margin-bottom:6px}
.card__note{font-size:14.5px;color:var(--ink-soft);margin:0 0 20px;line-height:1.5}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--brand);margin-bottom:6px}
.field input,.field select{width:100%;height:50px;padding:0 14px;border:1px solid #C9D9D7;border-radius:var(--r);background:var(--white);font-family:inherit;font-size:15.5px;color:var(--ink)}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%235B7375' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}
.field input:focus,.field select:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}
.consent{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin:15px 0 0}
.error{color:#B3261E;font-size:12px;margin-top:6px;display:none}
.error.show{display:block}
.done{display:none;text-align:center;padding:4px 0}
.done.show{display:block}
.done p{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px}

/* sections */
.section{padding:70px 0}
.section--soft{background:var(--soft)}
.section__head{text-align:center;margin-bottom:40px}
.section__head p{color:var(--ink-soft);font-size:16px;margin-top:14px;max-width:60ch;margin-left:auto;margin-right:auto}
.strip{background:var(--soft);padding:48px 0}
.strip p{font-size:17px;color:var(--ink);margin-bottom:15px}

/* checklist rows */
.checks ul{margin:0;padding:0;max-width:700px;margin-left:auto;margin-right:auto}
.checks li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
.checks li:last-child{border-bottom:0}
.checks svg{flex:0 0 19px;margin-top:4px}

/* numbered items */
.items{display:grid;grid-template-columns:1fr 1fr;gap:30px 44px;max-width:880px;margin:0 auto}
.item{display:flex;gap:16px}
.item__num{flex:0 0 34px;height:34px;border-radius:50%;border:1.5px solid var(--teal);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-top:1px;font-family:var(--sans)}
.item p{font-size:15px;color:var(--ink-soft);margin:6px 0 0;line-height:1.5}
.tease{max-width:700px;margin:36px auto 0;text-align:center;font-size:15px;color:var(--ink-soft);line-height:1.6}

/* about */
.about{display:grid;grid-template-columns:.75fr 1.25fr;gap:54px;align-items:center}
.about p{font-size:16px;margin-bottom:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:880px;margin:0 auto}
.step__num{width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;margin-bottom:14px}
.step p{font-size:15px;color:var(--ink-soft);margin:6px 0 0;line-height:1.5}

/* faq */
.faq{max-width:700px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:19px 0;font-size:17px;color:var(--brand);font-family:var(--serif);display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-size:21px;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;padding:0 0 20px;margin:0}

/* footer */
.site-footer{border-top:1px solid var(--line);padding:36px 0 54px;margin-top:10px}
.site-footer p{font-size:12px;line-height:1.6;color:var(--ink-soft);margin-bottom:12px}

@media (max-width:900px){
  h1{font-size:30px}
  h2{font-size:24px}
  .hero{padding:10px 0 40px}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .portrait{order:-1;max-width:360px;margin:0 auto}
  .section{padding:48px 0}
  .items{grid-template-columns:1fr;gap:24px;max-width:460px}
  .about{grid-template-columns:1fr;gap:26px}
  .about .portrait{max-width:300px}
  .steps{grid-template-columns:1fr;gap:26px;max-width:420px}
  .card{padding:24px 20px 22px}
  .site-header img{width:156px}
}