/*
Theme Name: NINE Numerology
Theme URI: https://ninenumerology.com
Author: Han Serhan Keser
Description: Custom theme for NINE Numerology Practice — pine/brass editorial design system, home/services/about/method/order/contact templates, and the multi-step reading order flow.
Version: 1.0
Text Domain: nine-numerology
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#F1F2ED;
  --paper-2:#E7E8DE;
  --card:#FBFBF8;
  --ink:#14201D;
  --ink-soft:#4E5B55;
  --pine:#2F4A44;
  --pine-deep:#1D302B;
  --brass:#B9853A;
  --brass-soft:#E4CDA0;
  --line:#CDD1C3;
  --white:#FFFFFF;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 .5em;
  color:var(--pine-deep);
}
p{margin:0 0 1em;color:var(--ink-soft);}
.mono{font-family:var(--mono);}
.container{
  max-width:1120px;
  margin:0 auto;
  padding-left:32px; padding-right:32px;
}
@media(max-width:640px){.container{padding-left:20px; padding-right:20px;}}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(241,242,237,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.wordmark{
  font-family:var(--display);
  font-size:22px; font-weight:700;
  letter-spacing:0.06em;
  color:var(--pine-deep);
  display:flex; flex-direction:column; line-height:1;
}
.wordmark span{
  font-family:var(--mono);
  font-size:9px; font-weight:400;
  letter-spacing:0.18em;
  color:var(--ink-soft);
  margin-top:4px;
}
.main-nav{
  display:flex; align-items:center; gap:36px;
  list-style:none; margin:0; padding:0;
}
.main-nav li{list-style:none;}
.main-nav a{
  font-size:14px; font-weight:500; color:var(--ink-soft);
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .15s, border-color .15s;
}
.main-nav a:hover, .main-nav a.active{
  color:var(--pine-deep); border-color:var(--brass);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--pine-deep); color:var(--paper);}
.btn-primary:hover{background:var(--pine);}
.btn-brass{background:var(--brass); color:var(--pine-deep);}
.btn-brass:hover{background:var(--brass-soft);}
.btn-outline{background:transparent; border-color:var(--pine-deep); color:var(--pine-deep);}
.btn-outline:hover{background:var(--pine-deep); color:var(--paper);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--pine-deep); color:var(--pine-deep);}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none !important;}
.btn-block{width:100%;}

.menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--pine-deep); margin:5px 0;}

@media(max-width:860px){
  .main-nav{
    position:fixed; top:76px; left:0; right:0; height:calc(100vh - 76px);
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:28px 24px; gap:22px; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
    border-top:1px solid var(--line);
  }
  .main-nav.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .main-nav a{font-size:20px;}
  .menu-toggle{display:block;}
  .header-cta{display:none;}
}

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:56px 0 40px;
  margin-top:120px;
  background:var(--paper-2);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr 0.8fr 0.9fr 0.9fr 0.9fr; gap:28px;
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-family:var(--body); font-weight:600; margin-bottom:14px;}
.footer-grid a, .footer-grid p{display:block; font-size:14px; color:var(--ink-soft); margin-bottom:8px;}
.footer-grid a:hover{color:var(--pine-deep);}
.footer-bottom{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--ink-soft); font-family:var(--mono);
}

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brass);}

/* ---------- Hero ---------- */
.hero{
  padding-top:88px; padding-bottom:80px;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr;
  column-gap:64px; row-gap:0; align-items:start;
}
.hero-main{grid-column:1; grid-row:1;}
.hero-side{grid-column:2; grid-row:1 / span 2;}
.hero-traditions{grid-column:1; grid-row:2; margin-top:32px; padding-top:24px; border-top:1px solid var(--line);}
.hero-traditions h3{font-size:16px; margin-bottom:6px;}
.hero-traditions p{font-size:14.5px; line-height:1.65; margin-bottom:18px;}
.hero-traditions a.link{font-size:13px; font-weight:600; color:var(--pine-deep); border-bottom:1px solid var(--brass);}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; grid-template-rows:none; padding-top:56px; padding-bottom:70px; gap:48px;}
  .hero-main, .hero-side, .hero-traditions{grid-column:1; grid-row:auto;}
  .hero-traditions{margin-top:0; padding-top:0; border-top:0;}
}
.hero{--hero-h1:clamp(36px, 5vw, 58px);}
.hero h1{
  font-size:var(--hero-h1);
  line-height:1.05;
}
.hero h1 em{
  font-style:normal; color:var(--brass);
}
.hero-lede{font-size:18px; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}

/* ---------- Calculator Card ---------- */
.calc-card{
  background:var(--card);
  border:1px solid var(--line);
  padding:36px;
  position:relative;
}
.calc-card::before{
  content:''; position:absolute; top:-1px; left:-1px; right:-1px; height:3px;
  background:linear-gradient(90deg, var(--brass), var(--pine));
}
.calc-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:16px;
}
.calc-input-row{display:flex; gap:10px; margin-bottom:6px;}
.calc-input-row input[type="date"]{
  flex:1; font-family:var(--mono); font-size:15px; padding:13px 14px;
  border:1px solid var(--line); background:var(--white); color:var(--ink);
  border-radius:2px;
}
.calc-hint{font-size:12px; color:var(--ink-soft); margin-bottom:0;}
.calc-result{
  margin-top:26px; padding-top:26px; border-top:1px dashed var(--line);
  min-height:118px;
}
.reduction-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:14px; color:var(--ink-soft); margin-bottom:16px;
  min-height:22px;
}
.reduction-row .arrow{color:var(--brass);}
.reduction-row .digit-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px;
  border:1px solid var(--line); background:var(--white); font-size:13px;
}
.core-number{
  display:flex; align-items:baseline; gap:16px;
}
.core-number .num{
  font-family:var(--mono); font-weight:600; font-size:64px; line-height:1; color:var(--pine-deep);
}
.core-number .desc{font-size:13px; color:var(--ink-soft); max-width:26ch;}
.core-number .desc strong{color:var(--pine-deep); font-family:var(--body);}

/* ---------- Section basics ---------- */
section{padding-top:64px; padding-bottom:64px;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(28px,3.4vw,40px);}

/* ---------- Cards grid (teasers) ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:860px){.grid-3{grid-template-columns:1fr;}}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:760px; margin:0 auto;}
@media(max-width:700px){.grid-2{grid-template-columns:1fr;}}
.service-card{
  border:1px solid var(--line); background:var(--card); padding:32px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.service-card .idx{font-family:var(--mono); font-size:12px; color:var(--brass);}
.service-card h3{font-size:20px; margin-bottom:2px;}
.service-card .price{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:14px; color:var(--pine-deep);
}
.service-card a.link{font-size:13px; color:var(--pine-deep); font-weight:600; border-bottom:1px solid var(--brass);}

/* ---------- Process steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
@media(max-width:860px){.steps{grid-template-columns:1fr; gap:32px;}}
.step .num{font-family:var(--mono); font-size:13px; color:var(--brass); margin-bottom:10px;}
.step h3{font-size:18px;}
.step p{font-size:14.5px;}

/* ---------- Testimonials ---------- */
.testi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media(max-width:860px){.testi-row{grid-template-columns:1fr;}}
.testi{background:var(--card); border:1px solid var(--line); padding:28px; font-size:14.5px;}
.testi p{color:var(--ink); margin-bottom:16px; font-style:italic;}
.testi .who{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--pine-deep); color:var(--paper);
  padding:64px 0; text-align:center;
}
.cta-banner h2{color:var(--paper); margin-bottom:10px;}
.cta-banner p{color:#B9C4BF; margin-bottom:26px;}

/* ---------- Page header (interior pages) ---------- */
.page-head{padding-top:64px; padding-bottom:20px;}
.page-head .eyebrow{margin-bottom:14px;}
.page-head h1{font-size:clamp(32px,4.2vw,48px);}
.page-head p{max-width:60ch; font-size:17px;}

/* ---------- Services page list ---------- */
.services-list{display:flex; flex-direction:column;}
.service-row{
  display:grid; grid-template-columns:60px 1.4fr 1fr auto; gap:24px; align-items:center;
  padding:32px 0; border-top:1px solid var(--line);
}
.services-list .service-row:last-child{border-bottom:1px solid var(--line);}
.service-row .idx{font-family:var(--mono); color:var(--brass); font-size:14px;}
.service-row h3{font-size:21px; margin-bottom:6px;}
.service-row .meta{font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);}
.service-row .price-block{text-align:right; font-family:var(--mono);}
.service-row .price-block .amount{font-size:22px; color:var(--pine-deep); display:block;}
.service-row .price-block .dur{font-size:12px; color:var(--ink-soft);}
@media(max-width:760px){
  .service-row{grid-template-columns:1fr; text-align:left; gap:10px;}
  .service-row .price-block{text-align:left;}
}

/* ---------- About page ---------- */
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start;}
@media(max-width:860px){.about-grid{grid-template-columns:1fr; gap:36px;}}
.method-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; align-items:start;}
@media(max-width:860px){.method-grid{grid-template-columns:1fr; gap:36px;}}
.portrait{
  aspect-ratio:4/5; background:var(--pine-deep);
  position:relative; overflow:hidden; border:1px solid var(--line);
}
.credentials{margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.credential{display:flex; gap:14px; font-size:14px;}
.credential .n{font-family:var(--mono); color:var(--brass); min-width:22px;}

/* ---------- Booking flow ---------- */
.booking-shell{
  display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start;
}
@media(max-width:900px){.booking-shell{grid-template-columns:1fr;}}
.progress-rail{display:flex; align-items:center; gap:0; margin-bottom:44px;}
.progress-step{
  display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft);
}
.progress-step .dot{
  width:26px; height:26px; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-soft);
}
.progress-step.active .dot{border-color:var(--pine-deep); background:var(--pine-deep); color:var(--paper);}
.progress-step.done .dot{border-color:var(--brass); background:var(--brass); color:var(--pine-deep);}
.progress-step.active{color:var(--pine-deep);}
.progress-line{flex:1; height:1px; background:var(--line); margin:0 10px; min-width:16px;}

.panel{
  background:var(--card); border:1px solid var(--line); padding:40px;
}
@media(max-width:600px){.panel{padding:26px 20px;}}
.panel h2{font-size:24px;}
.field-row{margin-bottom:20px;}
.field-row label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;
}
.field-row input, .field-row select, .field-row textarea{
  width:100%; font-family:var(--body); font-size:15px; padding:12px 14px;
  border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:2px;
}
.field-row textarea{resize:vertical; min-height:96px;}
.field-two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){.field-two{grid-template-columns:1fr;}}

.pick-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(max-width:520px){.pick-grid{grid-template-columns:1fr;}}
.pick-card{
  border:1px solid var(--line); background:var(--white); padding:18px; cursor:pointer;
  transition:border-color .12s, background .12s;
}
.pick-card:hover{border-color:var(--pine-deep);}
.pick-card.selected{border-color:var(--brass); background:#FBF3E4;}
.pick-card h4{font-size:15px; margin-bottom:4px; color:var(--pine-deep); font-family:var(--body); font-weight:600;}
.pick-card .meta{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}

.slot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
@media(max-width:600px){.slot-grid{grid-template-columns:repeat(3,1fr);}}
.slot{
  border:1px solid var(--line); background:var(--white); padding:10px 4px; text-align:center;
  font-family:var(--mono); font-size:12.5px; cursor:pointer; color:var(--ink-soft);
}
.slot:hover{border-color:var(--pine-deep); color:var(--pine-deep);}
.slot.selected{background:var(--pine-deep); color:var(--paper); border-color:var(--pine-deep);}
.slot.unavailable{opacity:.35; text-decoration:line-through; cursor:not-allowed; pointer-events:none;}

.summary-panel{
  background:var(--pine-deep); color:var(--paper); padding:32px; position:sticky; top:96px;
}
.summary-panel h4{color:var(--paper); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-family:var(--mono); font-weight:400; margin-bottom:20px;}
.summary-line{display:flex; justify-content:space-between; font-size:14px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.14);}
.summary-line span:first-child{color:#AEBBB6;}
.summary-total{display:flex; justify-content:space-between; padding-top:16px; margin-top:6px; font-family:var(--mono); font-size:19px;}

.step-actions{display:flex; justify-content:space-between; margin-top:32px; gap:12px;}

.card-fields{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card-fields .full{grid-column:1/-1;}

.confirm-box{text-align:center; padding:40px 0;}
.confirm-box .ref{
  font-family:var(--mono); font-size:34px; color:var(--pine-deep); margin:18px 0; letter-spacing:.04em;
}

/* ---------- FAQ ---------- */
.faq-item{border-top:1px solid var(--line); padding:22px 0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-family:var(--body); font-weight:600; font-size:16px; color:var(--pine-deep);
}
.faq-q .plus{font-family:var(--mono); font-size:18px; color:var(--brass); transition:transform .18s;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .2s ease;}
.faq-a p{padding-top:14px; font-size:14.5px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.info-block{margin-bottom:28px;}
.info-block h4{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;}
.info-block p{margin-bottom:2px;}

.form-note{font-size:13px; color:var(--ink-soft); margin-top:10px;}
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--pine-deep); color:var(--paper); padding:14px 22px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- Contact Form 7 styling ---------- */
.wpcf7-form p{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:20px;
}
.wpcf7-form label{display:block; margin-bottom:8px;}
.wpcf7-form p br{display:block; content:""; margin-bottom:8px;}
.wpcf7-form-control-wrap{display:block;}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
  width:100%; font-family:var(--body); font-size:15px; font-weight:400; letter-spacing:normal;
  text-transform:none; padding:12px 14px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); border-radius:2px;
  transition:border-color .15s ease;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus{
  outline:none; border-color:var(--brass);
}
.wpcf7-form textarea{resize:vertical; min-height:110px;}
.wpcf7-form input.wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-weight:600; font-size:14px; letter-spacing:normal; text-transform:none;
  width:auto; padding:12px 26px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; background:var(--pine-deep); color:var(--paper);
  transition:background .15s ease;
}
.wpcf7-form input.wpcf7-submit:hover{background:var(--pine);}
.wpcf7-form input.wpcf7-submit:disabled{opacity:.6; cursor:default;}
.wpcf7-spinner{filter:grayscale(1); opacity:.7;}

.wpcf7-not-valid-tip{
  font-family:var(--body); font-size:12.5px; text-transform:none; letter-spacing:normal;
  color:#B23A3A; margin-top:6px;
}
input.wpcf7-not-valid, textarea.wpcf7-not-valid{border-color:#B23A3A;}
.wpcf7-response-output{
  font-family:var(--body); font-size:14px; text-transform:none; letter-spacing:normal;
  border-radius:2px; padding:12px 14px; margin-top:16px; border:1px solid var(--line); color:var(--ink-soft);
}
.wpcf7-mail-sent-ok{border-color:var(--brass); color:var(--pine-deep); background:var(--brass-soft);}
.wpcf7-validation-errors, .wpcf7-acceptance-missing{border-color:#B23A3A; color:#B23A3A;}

/* ---------- Number dial (home hero) ---------- */
.nine-dial-card{
  background:var(--card, #FBFBF8);
  border:1px solid var(--line, #CDD1C3);
  border-top:3px solid var(--brass, #B9853A);
  padding:28px 20px 22px;
  margin-top:20px;
  text-align:center;
}
.nine-dial-svg{width:100%; max-width:340px; height:auto; display:block; margin:0 auto;}
.nine-dial-num{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:52px; font-weight:600; fill:var(--pine-deep, #1D302B);
}
.nine-dial-num.is-master{font-size:42px;}
.nine-dial-sub{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:2px; fill:var(--ink-soft, #4E5B55);
}
.nine-dial-node circle{
  fill:var(--card, #FBFBF8); stroke:var(--line, #CDD1C3); stroke-width:1;
  transition:fill .2s ease, stroke .2s ease;
}
.nine-dial-node text{
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:17px; font-weight:500; fill:var(--ink-soft, #4E5B55);
  text-anchor:middle; transition:fill .2s ease;
}
.nine-dial-node.is-active circle{fill:var(--pine-deep, #1D302B); stroke:var(--brass, #B9853A); stroke-width:2.5;}
.nine-dial-node.is-active text{fill:var(--paper, #F1F2ED);}
.nine-dial-caption{
  margin:14px 0 0;
  font-family:var(--mono, 'IBM Plex Mono', monospace);
  font-size:11px; letter-spacing:3px; color:var(--ink-soft, #4E5B55);
}
@media (prefers-reduced-motion: reduce){
  .nine-dial-node circle, .nine-dial-node text{transition:none;}
}

/* ---------- Hero: headline level with the top of the calculator card (desktop, two columns) ----------
   The headline's top letters sit on the same line as the card's top edge, and the small eyebrow line
   hangs above that line (in the hero's top padding) instead of pushing the headline down.
   - The headline box is trimmed to its cap-height so its letters start exactly at the top of the row,
     in any font and at any width. The card's "TRY IT" label is trimmed the same way so the card's top
     padding reads evenly (1px border + 36px padding = 37px to the capitals).
   - Eyebrow: taken out of the flow and placed 18.4px above the headline's top.
   - Browsers without text-box-trim use the fallback margin, which pulls the headline up by roughly
     its own built-in space above the capitals (about 17% of its font size). */
@media (min-width: 901px){
  .hero-main{position:relative;}
  .hero-main .eyebrow{position:absolute; left:0; bottom:100%; margin-bottom:18.4px; white-space:nowrap;}
  .hero-main h1{margin-top:calc(var(--hero-h1) * -0.17);}
  @supports (text-box-trim: trim-start){
    .hero-main h1{
      margin-top:0;
      text-box-trim:trim-start;
      text-box-edge:cap alphabetic;
    }
    .hero .calc-label{
      text-box-trim:trim-start;
      text-box-edge:cap alphabetic;
    }
  }
}

/* ---------- Hero: close the gap under the dial card (desktop, two columns) ----------
   The left text column is usually taller than the right column. Two things bring the bottoms together:
   1. The text block may run 32px into the gutter between the columns (still 32px clear of the cards),
      so a few lines move up.
   2. The right column stretches to the full height of the left column and the dial card takes up
      the remaining height, keeping the dial centred in it, so the card ends level with the text. */
@media (min-width: 901px){
  .hero-traditions{margin-right:-32px;}
  .hero-side{align-self:stretch; display:flex; flex-direction:column;}
  .hero-side .nine-dial-card{flex:1 1 auto; display:flex; flex-direction:column;}
  .hero-side .nine-dial-svg{margin:auto;}
}

/* ---------- Footer: no empty band under the call-to-action banner ----------
   Pages that end with the dark "Ready to see..." banner (Home, Services) let it sit directly on
   the footer. Pages that end with ordinary content keep the footer's normal 120px top margin. */
main:has(> .cta-banner:last-child) + .site-footer{margin-top:0;}