
:root{
  --paper:#f3efe7;
  --paper2:#ebe4d8;
  --ink:#173128;
  --ink2:#28483d;
  --muted:#69736d;
  --copper:#a75f35;
  --copper2:#c88961;
  --line:rgba(23,49,40,.16);
  --white:#fffdf8;
  --error:#8c3d2b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea,select{font:inherit}
.site-nav{height:88px;padding:0 5.5vw;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.wordmark{font-size:18px;letter-spacing:.25em;text-decoration:none}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14px}
.nav-links a{text-decoration:none}
.nav-cta{border:1px solid var(--line);padding:11px 17px;border-radius:999px}
.hero{min-height:calc(100vh - 88px);padding:7vh 5.5vw 10vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:5vw;align-items:center}
h1,h2,h3{font-weight:400;letter-spacing:-.045em}
h1{font-size:clamp(58px,7.2vw,112px);line-height:.94;margin:0;max-width:900px}
.hero-copy{font-size:clamp(18px,1.7vw,26px);line-height:1.45;max-width:650px;margin:32px 0 0;color:#2e4039}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;text-decoration:none;border:0;cursor:pointer}
.primary-btn{margin-top:42px;background:var(--copper);color:white;padding:17px 24px;min-width:176px;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.primary-btn:hover{background:#8f4f2f}
.primary-btn .arr{font-size:19px;line-height:1}
.secondary-btn{background:transparent;border-bottom:1px solid currentColor;padding:8px 0}
.hero-art{min-height:540px;position:relative}
.hero-art svg{width:100%;height:100%;position:absolute;inset:0}
.micro{position:absolute;right:4%;bottom:9%;font-size:11px;line-height:1.8;text-transform:uppercase;letter-spacing:.25em;color:var(--copper)}
.dark-band{background:var(--ink);color:var(--white);padding:12vh 5.5vw;position:relative;overflow:hidden}
.dark-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:center}
.dark-band h2{font-size:clamp(48px,5vw,78px);line-height:1.02;margin:0 0 26px}
.dark-band p{font-size:clamp(18px,1.5vw,23px);line-height:1.6;max-width:560px;color:rgba(255,255,255,.82)}
.path-art{min-height:360px}
.path-art svg{width:100%;height:100%}
.thought{padding:13vh 5.5vw}
.thought-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:8vw}
.kicker{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--copper);margin-bottom:22px}
.thought h2{font-size:clamp(46px,5vw,74px);line-height:1.02;margin:0}
.thought-copy{font-size:clamp(18px,1.45vw,23px);line-height:1.62;max-width:650px}
.thought-copy p:first-child{margin-top:0}
.entry{margin:0 5.5vw 5vw;background:#e7ddd0;padding:7vw;display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:end}
.entry h2{font-size:clamp(42px,4.8vw,70px);line-height:1.04;margin:0}
.entry p{font-size:18px;line-height:1.55;max-width:520px}
.site-footer{padding:30px 5.5vw 42px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}
.site-footer .wordmark{font-size:15px;color:var(--ink)}
/* diagnostic */
.diag-body{min-height:100vh;background:var(--paper)}
.diag-shell{max-width:980px;margin:0 auto;padding:4vh 24px 72px}
.diag-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8vh}
.back{text-decoration:none;color:var(--muted);font-size:13px}
.progress-wrap{height:2px;background:rgba(23,49,40,.12);margin-bottom:45px}
.progress{height:100%;background:var(--copper);width:0;transition:width .35s ease}
.step{display:none}
.step.active{display:block}
.step-label{text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--copper);margin-bottom:18px}
.step h1{font-size:clamp(42px,5.7vw,68px);line-height:1.02;max-width:820px;margin:0 0 18px}
.helper{font-size:17px;line-height:1.55;color:#4f5c56;max-width:750px;margin-bottom:36px}
.field{margin:28px 0}
.field label,.legend{display:block;font-size:18px;line-height:1.45;margin-bottom:12px}
.small-help{font-size:13px;color:var(--muted);margin-top:-5px;margin-bottom:10px}
input[type=text],input[type=email],input[type=number],textarea,select{
  width:100%;border:0;border-bottom:1px solid rgba(23,49,40,.28);background:transparent;padding:14px 2px;color:var(--ink);outline:none;border-radius:0
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{border-bottom-color:var(--copper)}
.options{display:grid;gap:10px}
.option{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);padding:14px 16px;background:rgba(255,255,255,.28);cursor:pointer}
.option input{margin-top:3px;accent-color:var(--copper)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale label{border:1px solid var(--line);padding:13px 8px;text-align:center;cursor:pointer;background:rgba(255,255,255,.3);font-size:13px}
.scale input{display:block;margin:0 auto 7px;accent-color:var(--copper)}
.actions{display:flex;justify-content:space-between;gap:16px;margin-top:45px}
.next,.prev,.submit-btn{border:0;padding:15px 22px;cursor:pointer}
.next,.submit-btn{background:var(--ink);color:white}
.prev{background:transparent;color:var(--muted);padding-left:0}
.error{color:var(--error);font-size:13px;margin-top:10px;display:none}
.report{background:var(--white);padding:44px;margin-top:20px;border:1px solid var(--line)}
.report h2{font-size:42px;margin:0 0 12px}
.report h3{font-size:26px;margin:34px 0 10px}
.report p,.report li{line-height:1.6}
.report-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.report-actions button{border:1px solid var(--line);background:transparent;padding:11px 15px;cursor:pointer}
.admin-note{background:#ede4d8;border-left:3px solid var(--copper);padding:18px;margin:22px 0;font-size:14px;line-height:1.55}
.hidden{display:none!important}
@media(max-width:900px){
 .hero,.dark-grid,.thought-grid,.entry{grid-template-columns:1fr}
 .hero{padding-top:7vh}
 .hero-art{min-height:380px}
 .dark-grid{gap:45px}
 .entry{margin:0;padding:12vw 6vw}
 .nav-links a:not(.nav-cta){display:none}
}
@media(max-width:600px){
 .site-nav{height:70px;padding:0 6vw}
 .wordmark{font-size:15px}
 .hero{padding:7vh 6vw 11vh}
 h1{font-size:clamp(54px,15vw,78px)}
 .hero-art{min-height:300px}
 .dark-band,.thought{padding-left:6vw;padding-right:6vw}
 .site-footer{padding-left:6vw;padding-right:6vw;flex-direction:column}
 .diag-shell{padding-left:18px;padding-right:18px}
 .diag-top{margin-bottom:6vh}
 .scale{grid-template-columns:1fr}
 .scale label{display:flex;align-items:center;gap:10px;text-align:left}
 .scale input{display:inline;margin:0}
 .report{padding:28px 22px}
}

.credibility{padding:13vh 5.5vw;background:#f7f3ec}
.credibility-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:8vw}
.credibility h2,.privacy-strip h2{font-size:clamp(46px,5vw,74px);line-height:1.02;margin:0}
.credibility-copy{font-size:clamp(17px,1.35vw,21px);line-height:1.65;max-width:720px}
.credibility-copy p:first-child{margin-top:0}
.proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.proof-row strong{display:block;font-size:34px;font-weight:400;letter-spacing:-.03em;color:var(--copper)}
.proof-row span{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.08em}
.privacy-strip{margin:0 5.5vw 5vw;padding:6vw;background:var(--ink);color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:center}
.privacy-strip .kicker{color:var(--copper2)}
.privacy-strip p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.82);max-width:570px}
.privacy-strip .secondary-btn{margin-top:12px}
@media(max-width:900px){
 .credibility-grid,.privacy-strip{grid-template-columns:1fr}
 .proof-row{grid-template-columns:1fr}
 .privacy-strip{margin:0;padding:12vw 6vw}
}

.routes{padding:13vh 5.5vw;background:var(--paper)}
.routes-intro{max-width:820px;margin-bottom:60px}
.routes-intro h2{font-size:clamp(48px,5vw,76px);line-height:1.02;margin:0 0 24px}
.routes-intro p{font-size:clamp(18px,1.4vw,22px);line-height:1.6;max-width:720px}
.route-list{border-top:1px solid var(--line)}
.route-card{display:grid;grid-template-columns:60px 1fr 40px;gap:20px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .2s ease,background .2s ease}
.route-card:hover{padding-left:18px;padding-right:18px;background:rgba(255,255,255,.35)}
.route-no{font-size:11px;letter-spacing:.15em;color:var(--copper)}
.route-card h3{font-size:clamp(27px,2.5vw,40px);margin:0 0 7px;letter-spacing:-.03em}
.route-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.route-arrow{font-size:24px;color:var(--copper);text-align:right}
.route-notice{background:#e9dfd3;border-left:3px solid var(--copper);padding:17px 18px;margin:25px 0;font-size:14px;line-height:1.55}
@media(max-width:600px){
 .routes{padding:11vh 6vw}
 .route-card{grid-template-columns:35px 1fr 24px;gap:10px}
 .route-card p{font-size:14px}
}

/* V4 hero refinement */
.hero{
  min-height:calc(100svh - 88px);
  grid-template-columns:minmax(500px,.95fr) minmax(420px,1.05fr);
  gap:3vw;
  padding-top:5vh;
  padding-bottom:8vh;
}
.hero > div:first-child{max-width:760px}
.hero h1{
  font-size:clamp(58px,6.25vw,96px);
  max-width:760px;
  text-wrap:balance;
}
.hero-copy{
  max-width:590px;
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.52;
  margin-top:30px;
}
.hero-principle{
  margin-top:22px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:var(--copper);
}
.hero .primary-btn{margin-top:28px}
.hero-art{
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.highthorne-mark{
  position:static!important;
  width:min(100%,720px)!important;
  height:auto!important;
  overflow:visible;
}
.thorn-field path{
  stroke:var(--copper);
  stroke-width:1.25;
  opacity:.72;
  stroke-linecap:round;
}
.clear-path{
  stroke:var(--copper);
  stroke-width:3;
  stroke-linecap:round;
}
.path-point{fill:var(--copper)}
@media(min-width:1500px){
  .hero{max-width:1720px;margin:0 auto;padding-left:5vw;padding-right:5vw}
  .site-nav{max-width:1900px;margin:0 auto}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:25px;min-height:auto;padding-top:7vh}
  .hero h1{font-size:clamp(54px,13vw,82px)}
  .hero-art{min-height:260px;margin-top:-10px}
  .highthorne-mark{max-width:620px}
}

/* V5 brand and content refinement */
.site-nav .wordmark{font-size:22px;letter-spacing:.27em}
.credibility-copy,.dark-band p,.routes-intro p,.route-card p,.privacy-strip p,.entry p{
  
}
.dark-band p,.routes-intro p,.privacy-strip p,.entry p{font-size:clamp(19px,1.45vw,23px)}
.route-card p{font-size:17px;line-height:1.55;max-width:720px;color:#55645e}
.dark-link{display:inline-flex;gap:18px;align-items:center;margin-top:24px;color:var(--white);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:7px;font-size:14px}
.credibility-copy{font-size:19px;line-height:1.68}
.credibility-copy h3{font-size:34px;margin:42px 0 12px}
.credibility-close{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);font-size:21px}
@media(max-width:600px){.site-nav .wordmark{font-size:18px}.route-card p{font-size:16px}}

/* V6 spacing and legibility corrections */
.site-nav .wordmark{
  font-size:30px !important;
  letter-spacing:.25em !important;
  font-weight:600;
}
.site-nav{
  padding-top:20px !important;
  padding-bottom:20px !important;
}
.kicker{
  color:#d89568 !important;
  font-weight:700 !important;
  letter-spacing:.22em;
}
.dark-band .kicker,
.privacy-strip .kicker{
  color:#efa477 !important;
}
.dark-band{
  padding-top:72px !important;
  padding-bottom:72px !important;
  min-height:0 !important;
}
.dark-grid{
  min-height:0 !important;
  align-items:center !important;
}
.routes,
.credibility,
.privacy-strip{
  padding-top:72px !important;
  padding-bottom:72px !important;
}
.routes-intro{
  margin-bottom:42px !important;
}
.route-card{
  padding-top:26px !important;
  padding-bottom:26px !important;
}
.credibility-grid{
  gap:64px !important;
}
.final-cta{
  margin-top:56px !important;
  margin-bottom:56px !important;
  padding-top:72px !important;
  padding-bottom:72px !important;
}
@media(max-width:900px){
  .site-nav .wordmark{font-size:23px !important}
  .dark-band,.routes,.credibility,.privacy-strip{padding-top:52px !important;padding-bottom:52px !important}
}

/* V7 hero spacing only */
.hero{
  min-height:auto !important;
  padding-top:90px !important;
  padding-bottom:90px !important;
  align-items:center !important;
}
.hero-art{
  min-height:390px !important;
}
@media(min-width:1200px){
  .hero{
    padding-top:105px !important;
    padding-bottom:105px !important;
  }
}
@media(max-width:900px){
  .hero{
    padding-top:60px !important;
    padding-bottom:60px !important;
  }
  .hero-art{min-height:250px !important;}
}

/* V8 proposition-led hero */
.hero-message{max-width:790px}
.hero-kicker{margin-bottom:24px}
.hero h1{
  font-size:clamp(56px,5.7vw,88px) !important;
  line-height:.99 !important;
  max-width:820px !important;
}
.hero-copy{
  max-width:660px !important;
  margin-top:30px !important;
}
.hero-situations{
  max-width:680px;
  margin:18px 0 0;
  
  font-size:18px;
  line-height:1.55;
  color:#55645e;
}
.hero-invite{
  max-width:660px;
  margin:18px 0 0;
  
  font-size:19px;
  line-height:1.5;
  color:var(--green);
}
.hero .primary-btn{margin-top:26px !important}
.dark-band .kicker{
  font-size:12px;
  line-height:1.5;
  max-width:520px;
}
.dark-band p + p{margin-top:14px}
@media(max-width:900px){
  .hero h1{font-size:clamp(50px,12vw,74px) !important}
  .hero-situations,.hero-invite{font-size:17px}
}

/* V9 hero headline correction */
.hero{
  grid-template-columns:minmax(760px,1.2fr) minmax(360px,.8fr) !important;
}
.hero-message{
  max-width:980px !important;
}
.hero h1{
  max-width:none !important;
  font-size:clamp(54px,4.8vw,80px) !important;
  line-height:1.02 !important;
}
.hero h1 span{
  display:block;
  white-space:nowrap;
}
@media(max-width:1100px){
  .hero{
    grid-template-columns:1fr !important;
  }
  .hero h1 span{
    white-space:normal;
  }
}

/* V10: force the hero headline into two clean desktop lines without page overflow */
html, body{
  overflow-x:hidden;
}

.hero{
  grid-template-columns:minmax(720px,1.45fr) minmax(300px,.55fr) !important;
  column-gap:48px !important;
}

.hero-message{
  max-width:none !important;
  min-width:0 !important;
}

.hero h1{
  font-size:clamp(52px,4.35vw,70px) !important;
  line-height:1.02 !important;
  letter-spacing:-0.035em !important;
  max-width:none !important;
}

.hero h1 span{
  display:block !important;
  white-space:nowrap !important;
}

.hero-art{
  min-width:0 !important;
}

@media(max-width:1180px){
  .hero{
    grid-template-columns:1fr !important;
  }
  .hero h1{
    font-size:clamp(50px,7vw,68px) !important;
  }
  .hero h1 span{
    white-space:normal !important;
  }
  .hero-art{
    max-width:620px;
  }
}

/* V11: unified Highthorne typography system */
:root{
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html, body{
  font-family:var(--font-sans);
}

h1,h2,h3,h4,h5,h6,
.hero h1,
.route-card h3,
.privacy-page h1,
.privacy-content h2,
.credibility-copy,
.dark-band p,
.routes-intro p,
.route-card p,
.privacy-strip p,
.entry p,
.hero-situations,
.hero-invite{
  font-family:var(--font-serif) !important;
}

.site-nav,
.wordmark,
.nav-links,
.kicker,
.primary-btn,
.secondary-btn,
.dark-link,
label,
input,
textarea,
select,
button,
.progress,
.step-label,
.route-label,
.form-help,
.privacy-meta,
footer{
  font-family:var(--font-sans) !important;
}

body{
  font-family:var(--font-sans) !important;
}

p{
  font-family:var(--font-serif);
}

.hero-copy{
  font-family:var(--font-serif) !important;
}

.wordmark{
  font-family:var(--font-serif) !important;
  font-weight:600;
}

input, textarea, select{
  font-family:var(--font-sans) !important;
}

/* V18: tighter first-screen composition only */
.hero{
  min-height:66svh !important;
  padding-top:34px !important;
  padding-bottom:44px !important;
  align-items:center !important;
}

.hero-art{
  min-height:320px !important;
}

@media(min-width:1200px){
  .hero{
    min-height:68svh !important;
    padding-top:38px !important;
    padding-bottom:46px !important;
  }
}

@media(max-width:900px){
  .hero{
    min-height:auto !important;
    padding-top:34px !important;
    padding-bottom:42px !important;
  }
}

/* V19: spacing + cleaner hero mark. Typography intentionally unchanged. */
.hero{
  min-height:auto !important;
  padding-top:42px !important;
  padding-bottom:46px !important;
  align-items:center !important;
}

.hero-art{
  min-height:250px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}

.highthorne-mark{
  width:min(100%,620px) !important;
  height:auto !important;
}

.clear-path{
  stroke:#B96839 !important;
  stroke-width:2.6 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.thorn{
  stroke:#C88961 !important;
  stroke-width:1.5 !important;
  stroke-linecap:round !important;
}

.path-point{
  fill:#B96839 !important;
}

@media(min-width:1200px){
  .hero{
    padding-top:46px !important;
    padding-bottom:50px !important;
  }
}

@media(max-width:900px){
  .hero{
    padding-top:32px !important;
    padding-bottom:38px !important;
  }
  .hero-art{
    min-height:190px !important;
  }
}

/* V20: stronger hero device + rebalance first two sections. Copy unchanged. */
.hero{
  min-height:76svh !important;
  padding-top:48px !important;
  padding-bottom:34px !important;
  grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr) !important;
  gap:4vw !important;
}

.hero-art{
  min-height:340px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.highthorne-mark{
  width:min(100%,720px) !important;
  height:auto !important;
}

.guide-path{
  stroke:rgba(23,49,40,.22) !important;
  stroke-width:1.3 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.clear-path{
  stroke:#B96839 !important;
  stroke-width:3.1 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.knot-loop{
  stroke:#C88961 !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  fill:none !important;
  opacity:.95 !important;
}

.thorn{
  stroke:#C88961 !important;
  stroke-width:1.45 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.path-point{
  fill:#B96839 !important;
}

/* Let the hero lead. The next section should support it rather than compete with it. */
.dark-band{
  padding-top:9vh !important;
  padding-bottom:9vh !important;
}

.dark-grid{
  gap:6vw !important;
}

.dark-band h2{
  font-size:clamp(42px,4.3vw,66px) !important;
}

.dark-band p{
  max-width:520px !important;
  font-size:clamp(17px,1.35vw,21px) !important;
}

.path-art{
  min-height:300px !important;
  opacity:.9 !important;
}

@media(min-width:1200px){
  .hero{
    min-height:78svh !important;
    padding-top:52px !important;
    padding-bottom:36px !important;
  }
}

@media(max-width:900px){
  .hero{
    min-height:auto !important;
    padding-top:36px !important;
    padding-bottom:36px !important;
    grid-template-columns:1fr !important;
  }
  .hero-art{
    min-height:220px !important;
  }
  .highthorne-mark{
    width:min(100%,580px) !important;
  }
}

/* V21: restrained hero device + reliable reload-to-top. Typography/copy unchanged. */
.hero{
  min-height:74svh !important;
  padding-top:42px !important;
  padding-bottom:34px !important;
}

.hero-art{
  min-height:310px !important;
}

.highthorne-mark{
  width:min(100%,700px) !important;
  height:auto !important;
}

.branch{
  stroke:#C88961 !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.thorn{
  stroke:#C88961 !important;
  stroke-width:1.45 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.clear-path{
  stroke:#B96839 !important;
  stroke-width:3.0 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.guide-path{
  stroke:rgba(23,49,40,.20) !important;
  stroke-width:1.2 !important;
  stroke-linecap:round !important;
  fill:none !important;
}

.path-point{
  fill:#B96839 !important;
}

/* V22: approved hawthorn creative direction. Copy and typography unchanged. */
.hero{
  min-height:68svh !important;
  padding-top:34px !important;
  padding-bottom:38px !important;
  grid-template-columns:minmax(0,1fr) minmax(500px,1fr) !important;
  gap:3.5vw !important;
  align-items:center !important;
}

.hero-art{
  min-height:390px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  transform:none !important;
}

.hawthorn-hero{
  display:block;
  width:116%;
  max-width:850px;
  height:auto;
  margin-left:-8%;
  mix-blend-mode:multiply;
  opacity:.98;
}

/* Keep the green section as support, not the visual hero. */
.dark-band{
  padding-top:8vh !important;
  padding-bottom:8vh !important;
}

.dark-band h2{
  font-size:clamp(42px,4.2vw,64px) !important;
}

.path-art{
  min-height:280px !important;
}

@media(min-width:1500px){
  .hero{
    min-height:70svh !important;
    grid-template-columns:minmax(0,.95fr) minmax(560px,1.05fr) !important;
  }
  .hawthorn-hero{
    width:122%;
    max-width:940px;
    margin-left:-12%;
  }
}

@media(max-width:1050px){
  .hero{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    padding-top:34px !important;
    padding-bottom:34px !important;
  }
  .hero-art{
    min-height:250px !important;
    margin-top:6px;
  }
  .hawthorn-hero{
    width:min(100%,760px);
    margin-left:0;
  }
}

@media(max-width:650px){
  .hero-art{
    min-height:190px !important;
  }
  .hawthorn-hero{
    width:112%;
    margin-left:-6%;
  }
}

/* V23: integrate hawthorn artwork and prevent text overlap */
.hero{
  padding-top:22px !important;
  padding-bottom:30px !important;
  grid-template-columns:minmax(0,1.03fr) minmax(440px,.97fr) !important;
  gap:5.5vw !important;
  overflow:hidden !important;
}

.hero-message{
  position:relative !important;
  z-index:2 !important;
}

.hero-art{
  min-height:330px !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
}

.hawthorn-hero{
  display:block !important;
  width:100% !important;
  max-width:760px !important;
  height:auto !important;
  margin:0 !important;
  opacity:.98 !important;
  mix-blend-mode:multiply !important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, black 9%, black 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
}

/* Slightly tighter art box so the image feels part of the page, not a panel */
@media(min-width:1500px){
  .hero{
    padding-top:24px !important;
    padding-bottom:32px !important;
    grid-template-columns:minmax(0,1.05fr) minmax(500px,.95fr) !important;
    gap:5vw !important;
  }
  .hawthorn-hero{
    max-width:820px !important;
  }
}

@media(max-width:1100px){
  .hero{
    grid-template-columns:1fr !important;
    gap:28px !important;
    padding-top:24px !important;
    padding-bottom:32px !important;
  }
  .hero-art{
    min-height:230px !important;
  }
  .hawthorn-hero{
    width:min(100%,720px) !important;
    margin:0 auto !important;
  }
}

/* V24: agreed hero layout changes only */
.hero{
  transform:translateY(-105px);
  margin-bottom:-105px;
}

.hawthorn-hero{
  width:110% !important;
  max-width:835px !important;
}

@media(min-width:1500px){
  .hawthorn-hero{
    width:112% !important;
    max-width:900px !important;
  }
}

@media(max-width:1100px){
  .hero{
    transform:none;
    margin-bottom:0;
  }
  .hawthorn-hero{
    width:100% !important;
    max-width:760px !important;
  }
}

/* V25: approved hero proposition + four-role typography system */
.hero-kicker{
  font-family:var(--font-sans) !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

.hero h1{
  font-family:var(--font-serif) !important;
  font-weight:400 !important;
}
.hero h1 span + span{
  margin-top:.12em !important;
}

.hero-reassurance{
  margin:24px 0 0 !important;
  max-width:720px !important;
  font-family:var(--font-serif) !important;
  font-size:clamp(22px,1.75vw,29px) !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  color:var(--ink) !important;
}

.hero-copy,
.hero-situations,
.hero-invite{
  max-width:670px !important;
  font-family:var(--font-serif) !important;
  font-size:18px !important;
  line-height:1.55 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

.hero-copy{
  margin-top:28px !important;
  color:#2e4039 !important;
}
.hero-situations{
  margin-top:16px !important;
  color:#66716c !important;
}
.hero-invite{
  margin-top:18px !important;
  color:var(--ink) !important;
  font-weight:600 !important;
}

.hero .primary-btn{
  margin-top:26px !important;
  font-family:var(--font-sans) !important;
}

@media(max-width:900px){
  .hero-reassurance{font-size:22px !important;}
  .hero-copy,
  .hero-situations,
  .hero-invite{font-size:17px !important;}
}

/* V26: responsive layout correction. No copy, colour or brand redesign. */

/* The previous hero was deliberately pulled upward by 105px (V24), which
   caused the masthead and hero content to collide as the viewport changed. */
.hero{
  transform:none !important;
  margin-bottom:0 !important;
  width:100%;
  min-width:0;
  grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr) !important;
  gap:clamp(28px,4vw,68px) !important;
  padding:clamp(28px,4vw,52px) 5.5vw clamp(42px,5vw,68px) !important;
  min-height:auto !important;
  overflow:hidden !important;
}

.hero-message,
.hero-art{
  min-width:0 !important;
}

.hero h1{
  font-size:clamp(48px,4.35vw,70px) !important;
  line-height:1.02 !important;
  max-width:100% !important;
}

/* Do not force long lines at widths where they no longer fit. */
.hero h1 span{
  white-space:normal !important;
}

.hero-art{
  min-height:clamp(270px,26vw,390px) !important;
  width:100%;
  margin:0 !important;
}

.hawthorn-hero{
  width:min(110%,835px) !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 auto !important;
}

/* Keep the intended two-line desktop headline only when there is genuinely
   enough horizontal room for it. */
@media(min-width:1360px){
  .hero h1 span{
    white-space:nowrap !important;
  }
  .hawthorn-hero{
    max-width:835px !important;
  }
}

/* Intermediate laptop / narrow desktop layout. */
@media(max-width:1180px){
  .site-nav{
    padding-left:4.5vw !important;
    padding-right:4.5vw !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:24px !important;
    padding-left:4.5vw !important;
    padding-right:4.5vw !important;
  }

  .hero-message{
    max-width:900px !important;
  }

  .hero h1{
    font-size:clamp(50px,6.2vw,68px) !important;
  }

  .hero-art{
    min-height:230px !important;
    max-width:820px;
    justify-self:center;
  }

  .hawthorn-hero{
    width:min(100%,760px) !important;
    max-width:760px !important;
  }
}

/* Tablet: recompose sections instead of squeezing desktop columns. */
@media(max-width:900px){
  .site-nav{
    height:78px;
    padding:14px 6vw !important;
  }

  .site-nav .wordmark{
    font-size:22px !important;
    letter-spacing:.22em !important;
  }

  .nav-links{
    gap:14px;
  }

  .hero{
    padding:30px 6vw 48px !important;
  }

  .hero h1{
    font-size:clamp(46px,8.5vw,64px) !important;
  }

  .hero-reassurance{
    font-size:clamp(21px,3.4vw,25px) !important;
  }

  .hero-copy,
  .hero-situations,
  .hero-invite{
    max-width:720px !important;
  }

  .hero-art{
    width:100%;
    min-height:210px !important;
    margin-top:4px !important;
  }

  .dark-grid,
  .credibility-grid,
  .privacy-strip,
  .entry{
    grid-template-columns:1fr !important;
  }

  .dark-grid,
  .credibility-grid{
    gap:40px !important;
  }

  .path-art{
    min-height:220px !important;
  }
}

/* Phone: scale type and spacing deliberately. */
@media(max-width:650px){
  .site-nav{
    height:70px;
    padding:12px 5vw !important;
  }

  .site-nav .wordmark{
    font-size:17px !important;
    letter-spacing:.18em !important;
  }

  .nav-cta{
    padding:9px 13px;
    font-size:12px;
  }

  .hero{
    padding:24px 5vw 38px !important;
    gap:18px !important;
  }

  .hero-kicker{
    font-size:10px !important;
    line-height:1.5;
    margin-bottom:16px;
  }

  .hero h1{
    font-size:clamp(40px,11.5vw,54px) !important;
    line-height:1.01 !important;
  }

  .hero-reassurance{
    margin-top:18px !important;
    font-size:20px !important;
  }

  .hero-copy,
  .hero-situations,
  .hero-invite{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .hero-copy{
    margin-top:22px !important;
  }

  .hero-art{
    min-height:150px !important;
  }

  .hawthorn-hero{
    width:108% !important;
    max-width:none !important;
  }

  .dark-band,
  .routes,
  .credibility,
  .privacy-strip{
    padding-left:5vw !important;
    padding-right:5vw !important;
  }

  .dark-band h2,
  .routes-intro h2,
  .credibility h2,
  .privacy-strip h2,
  .entry h2{
    font-size:clamp(38px,10vw,50px) !important;
  }

  .route-card{
    grid-template-columns:28px minmax(0,1fr) 20px;
    gap:9px;
  }

  .route-card h3{
    font-size:clamp(25px,7vw,32px);
  }

  .entry{
    margin:0 !important;
    padding:12vw 5vw !important;
  }
}

@media(max-width:430px){
  .site-nav .wordmark{
    font-size:15px !important;
    letter-spacing:.14em !important;
  }

  .nav-cta{
    padding:8px 11px;
  }

  .hero h1{
    font-size:clamp(37px,11vw,47px) !important;
  }

  .primary-btn{
    min-width:0;
    padding:15px 20px;
  }
}


/* V29: typography spacing correction and explicit privacy line breaks */
.credibility h2{line-height:1.09 !important;}
.privacy-strip h2{line-height:1.08 !important;}
.privacy-strip h2 .privacy-line{display:block;white-space:nowrap;}

@media(max-width:900px){
  .credibility h2{
    line-height:1.12 !important;
    font-size:clamp(42px,8.2vw,58px) !important;
  }
  .privacy-strip h2{
    line-height:1.08 !important;
    font-size:clamp(40px,7.6vw,54px) !important;
  }
}

@media(max-width:650px){
  .credibility h2{
    line-height:1.13 !important;
    font-size:clamp(38px,9vw,50px) !important;
  }
  .privacy-strip h2{
    line-height:1.08 !important;
    font-size:clamp(34px,8.4vw,46px) !important;
  }
}

@media(max-width:430px){
  .privacy-strip h2 .privacy-line{white-space:normal;}
}
