/* ==========================================================================
   One10 design system
   Loaded on pages using a One10 custom template, and on the custom footer.
   Deliberately separate from style.css, which only patches Astra.
   ========================================================================== */

.one10{
  --teal:#1A6C7A;
  --teal-dark:#14555F;
  --terra:#D45C38;
  --navy:#153243;
  --ink:#2F3D42;
  --muted:#5F757D;
  --wash:#F3F9FB;
  --line:#DCE8EC;
  --white:#fff;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --shell:1120px;
  --gap:clamp(28px,5vw,64px);

  font-family:var(--sans);
  color:var(--ink);
  font-size:17px;
  line-height:1.65;
}
.one10 *{box-sizing:border-box;}
.one10 .shell{max-width:var(--shell);margin:0 auto;padding-inline:clamp(20px,5vw,32px);}
.one10 h1,.one10 h2,.one10 h3,.one10 h4{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  margin:0;letter-spacing:-.012em;text-wrap:balance;line-height:1.2;
  /* The Mountain template forces lowercase headings globally. Undo it. */
  text-transform:none;
}
.one10 p{margin:0 0 1.1em;}
.one10 a{color:var(--teal);}
.one10 .eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);margin-bottom:14px;
}

/* ---------- page hero ---------- */
.one10 .phero{position:relative;isolation:isolate;padding:clamp(72px,12vw,132px) 0 clamp(56px,9vw,96px);color:#fff;}
.one10 .phero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);background-size:cover;background-position:center 72%;
}
.one10 .phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,32,44,.40),rgba(21,50,67,.60) 55%,rgba(26,108,122,.66));
}
.one10 .phero h1{color:#fff;font-size:clamp(32px,5.4vw,54px);}
.one10 .phero .lede{color:rgba(255,255,255,.92);max-width:46ch;margin-top:16px;font-size:clamp(16px,1.9vw,19px);}
.one10 .phero .eyebrow{color:rgba(255,255,255,.8);}

/* ---------- generic section ---------- */
.one10 .sec{padding:var(--gap) 0;}
.one10 .sec.wash{background:var(--wash);}
.one10 .sec h2{font-size:clamp(24px,3.2vw,34px);margin-bottom:10px;}
.one10 .sec .sub{color:var(--muted);max-width:60ch;margin-bottom:clamp(22px,3vw,34px);}

/* ---------- cards / grid ---------- */
.one10 .grid{display:grid;gap:clamp(16px,2.4vw,24px);}
.one10 .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.one10 .g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr));}
.one10 .card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,28px);
  box-shadow:0 1px 2px rgba(21,50,67,.04),0 14px 32px -22px rgba(21,50,67,.30);
}
.one10 .card h3{font-size:20px;margin-bottom:8px;}
.one10 .card p{color:var(--muted);font-size:15.5px;margin-bottom:0;}

/* ---------- buttons ---------- */
.one10 .btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:650;font-size:15px;letter-spacing:.01em;
  padding:13px 24px;border-radius:8px;text-decoration:none;white-space:nowrap;
  transition:filter .18s ease,transform .18s ease,background-color .18s ease;
}
.one10 .btn-primary{background:var(--terra);color:#fff;}
.one10 .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#fff;}
.one10 .btn-quiet{border:1.5px solid var(--teal);color:var(--teal);background:transparent;}
.one10 .btn-quiet:hover{background:var(--teal);color:#fff;}
.one10 .btn-ondark{border:1.5px solid rgba(255,255,255,.75);color:#fff;}
.one10 .btn-ondark:hover{background:#fff;color:var(--navy);}
.one10 .btn:focus-visible{outline:2px solid var(--terra);outline-offset:3px;}

/* ---------- contact ---------- */
.one10 .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:start;}
@media(max-width:860px){.one10 .contact-grid{grid-template-columns:1fr;}}
.one10 .detail{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.one10 .detail:last-child{border-bottom:0;}
.one10 .detail .k{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:3px;}
.one10 .detail .v{font-size:17px;color:var(--navy);font-weight:600;}
.one10 .detail .v a{color:var(--navy);text-decoration:none;}
.one10 .detail .v a:hover{color:var(--teal);}
.one10 .detail .note{font-size:14px;color:var(--muted);margin-top:3px;}
.one10 .ico{
  flex:none;width:38px;height:38px;border-radius:9px;background:var(--wash);
  display:grid;place-items:center;color:var(--teal);
}
.one10 .ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;}

.one10 .mapwrap{border-radius:12px;overflow:hidden;border:1px solid var(--line);line-height:0;box-shadow:0 14px 32px -22px rgba(21,50,67,.4);}
.one10 .mapwrap iframe{width:100%;height:340px;border:0;display:block;}

/* SureForms sitting inside our card */
.one10 .formcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:clamp(20px,3vw,30px);
  box-shadow:0 1px 2px rgba(21,50,67,.04),0 14px 32px -22px rgba(21,50,67,.30);}
.one10 .formcard .srfm-form-container{background:transparent!important;padding:0!important;}
.one10 .formcard .srfm-submit-btn,
.one10 .formcard button[type=submit]{background:var(--terra)!important;border-radius:8px!important;}

/* ---------- forms page ---------- */
.one10 .doc{display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;}
/* Keep the button on the same line as the text on every card, not just the short ones. */
.one10 .doc > div:first-child{flex:1 1 320px;min-width:0;}
.one10 .doc > .btn{flex:0 0 auto;}
.one10 .doc h3{font-size:18px;margin-bottom:3px;}
.one10 .doc p{margin:0;color:var(--muted);font-size:14.5px;}
.one10 .doclist{display:grid;gap:14px;}

.one10 .callout{
  border-left:3px solid var(--terra);background:var(--wash);
  border-radius:0 10px 10px 0;padding:20px 24px;
}
.one10 .callout p:last-child{margin-bottom:0;}

/* ---------- footer ---------- */
.one10-footer{
  background:var(--navy,#153243);color:rgba(255,255,255,.72);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:15px;line-height:1.7;
  padding:clamp(44px,6vw,68px) 0 26px;
}
.one10-footer .shell{max-width:1120px;margin:0 auto;padding-inline:clamp(20px,5vw,32px);}
.one10-footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,48px);
  padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.14);}
@media(max-width:760px){.one10-footer .fgrid{grid-template-columns:1fr;}}
.one10-footer img.flogo{height:38px;width:auto;margin-bottom:16px;}
.one10-footer h4{color:#fff;font-size:12px;letter-spacing:.15em;text-transform:uppercase;margin:0 0 12px;font-weight:700;}
.one10-footer a{color:rgba(255,255,255,.86);text-decoration:none;}
.one10-footer a:hover{color:#fff;text-decoration:underline;}
.one10-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.one10-footer .addr{font-style:normal;}
.one10-footer .crisis{
  margin-top:26px;background:rgba(212,92,56,.14);border:1px solid rgba(212,92,56,.5);
  border-radius:9px;padding:14px 18px;color:rgba(255,255,255,.9);font-size:14.5px;
}
.one10-footer .crisis b{color:#fff;}
.one10-footer .legal{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  margin-top:22px;font-size:13px;color:rgba(255,255,255,.55);}
.one10-footer .disclosure{margin-top:16px;font-size:13px;color:rgba(255,255,255,.55);max-width:70ch;}

@media(prefers-reduced-motion:reduce){.one10 *{transition:none!important;}}

/* ==========================================================================
   Components added for Home, About, Rates and the Articles index
   ========================================================================== */

.one10 .phero.tall{padding:clamp(96px,17vw,190px) 0 clamp(80px,13vw,150px);}
.one10 .phero.tall h1{font-size:clamp(34px,6vw,62px);line-height:1.08;}

/* self-selection pills */
.one10 .pills{display:grid;gap:11px;max-width:560px;margin:0 auto;text-align:left;}
.one10 .pill{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:15px 22px;text-decoration:none;color:var(--ink);font-size:16px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.one10 .pill:hover{border-color:var(--teal);transform:translateY(-1px);
  box-shadow:0 12px 26px -18px rgba(21,50,67,.5);}
.one10 .pill .arrow{color:var(--teal);font-weight:700;flex:none;}

.one10 .card .quote{
  font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--navy);margin-bottom:8px;
}

/* numbered steps: a real sequence, so the numbers carry meaning */
.one10 .steps .step{
  font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.16em;
  color:var(--terra);margin-bottom:10px;
}

/* the Luke 17 split band */
.one10 .split{position:relative;isolation:isolate;padding:clamp(52px,8vw,96px) 0;}
.one10 .split::before{content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--hero-img);background-size:cover;background-position:center 65%;}
.one10 .split::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(11,32,44,.80),rgba(11,32,44,.42));}
.one10 .splitcard{max-width:560px;color:#fff;}
.one10 .splitcard h2,.one10 .splitcard p{color:#fff;}
.one10 .splitcard .eyebrow{color:rgba(255,255,255,.85);}
.one10 .splitcard .btn-quiet{border-color:rgba(255,255,255,.75);color:#fff;}
.one10 .splitcard .btn-quiet:hover{background:#fff;color:var(--navy);}

/* about */
/* Headshot column is capped. At full column width the portrait read as a
   poster rather than a photo of a person you might call. */
.one10 .about-grid{display:grid;grid-template-columns:minmax(0,290px) 1fr;
  gap:clamp(26px,4vw,54px);align-items:start;}
@media(max-width:820px){.one10 .about-grid{grid-template-columns:1fr;justify-items:center;text-align:left;}}
.one10 .portrait{width:100%;max-width:290px;aspect-ratio:4/5;object-fit:cover;
  object-position:center 22%;border-radius:12px;display:block;}
.one10 .portrait.placeholder{
  display:grid;place-items:center;text-align:center;padding:20px;
  border:1px dashed var(--teal);background:linear-gradient(160deg,var(--wash),#fff);
  color:var(--muted);font-size:14px;
}

/* rates */
.one10 .card.price{text-align:center;}
.one10 .card.price .amt{
  font-family:var(--serif);font-size:44px;font-weight:600;color:var(--teal);line-height:1;margin:0 0 10px;
}
.one10 .qa{padding:20px 0;border-top:1px solid var(--line);}
.one10 .qa:first-of-type{border-top:0;}
.one10 .qa h3{font-size:19px;margin-bottom:7px;}
.one10 .qa p{color:var(--muted);margin-bottom:0;}

/* article cards */
.one10 .card.post{display:flex;flex-direction:column;}
.one10 .card.post h3{font-size:19px;line-height:1.3;margin-bottom:9px;}
.one10 .card.post h3 a{color:var(--navy);text-decoration:none;}
.one10 .card.post h3 a:hover{color:var(--teal);}
.one10 .card.post .postmeta{font-size:13px;color:var(--muted);margin:12px 0 0;}
.one10 .readon{margin-top:14px;font-weight:650;font-size:14.5px;text-decoration:none;color:var(--teal);}
.one10 .readon:hover{text-decoration:underline;}
.one10 .pager{margin-top:34px;}
.one10 .pager .page-numbers{
  display:inline-block;padding:8px 13px;margin-right:6px;border:1px solid var(--line);
  border-radius:7px;text-decoration:none;color:var(--ink);
}
.one10 .pager .page-numbers.current{background:var(--teal);border-color:var(--teal);color:#fff;}

/* ==========================================================================
   About: integrated intro
   Kyle's photo is the image on this page, so there is no competing hero.
   ========================================================================== */
.one10 .intro{
  background:linear-gradient(180deg,var(--wash) 0%,var(--wash) 62%,#fff 62%,#fff 100%);
  /* Top padding clears the sticky header. Without it the portrait and the
     eyebrow slide underneath it. */
  padding:clamp(104px,11vw,150px) 0 clamp(34px,5vw,58px);
  border-bottom:1px solid var(--line);
}
.one10 .intro-grid{
  display:grid;grid-template-columns:1fr minmax(0,330px);
  gap:clamp(28px,5vw,60px);align-items:center;
}
.one10 .intro h1{font-size:clamp(32px,5vw,50px);margin:6px 0 14px;}
.one10 .lede-dark{color:var(--muted);font-size:clamp(16.5px,1.8vw,19px);max-width:46ch;margin-bottom:22px;}

/* key facts, so the practical answers are above the fold */
.one10 .facts{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:11px;}
.one10 .facts li{
  font-size:15.5px;color:var(--ink);padding-left:15px;border-left:2px solid var(--teal);line-height:1.5;
}
.one10 .facts span{
  display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:2px;
}
.one10 .introcta{display:flex;gap:10px;flex-wrap:wrap;margin:0;}

/* portrait with a quiet offset panel behind it, so it reads as designed
   rather than dropped in */
.one10 .intro-photo{margin:0;position:relative;}
.one10 .intro-photo::before{
  content:"";position:absolute;inset:16px -16px -16px 16px;
  background:var(--teal);opacity:.10;border-radius:14px;z-index:0;
}
.one10 .intro-photo .portrait{
  position:relative;z-index:1;width:100%;max-width:330px;aspect-ratio:4/5;
  object-fit:cover;object-position:center 20%;border-radius:14px;display:block;
  box-shadow:0 18px 44px -26px rgba(21,50,67,.55);
}

/* Phones: information about him first, then the photo. */
@media(max-width:820px){
  .one10 .intro-grid{grid-template-columns:1fr;gap:30px;}
  .one10 .intro-copy{order:1;}
  .one10 .intro-photo{order:2;justify-self:start;max-width:300px;}
  .one10 .intro-photo::before{inset:12px -12px -12px 12px;}
  .one10 .intro{background:var(--wash);}
}

/* The sticky header is translucent so it can sit over the dark hero photos.
   This page has a light intro instead, so give the bar a solid ground.
   Literal hex, not var(--navy): the token lives on .one10, and the header
   sits outside that scope. */
body:has(.one10 .intro) #ast-desktop-header .ast-main-header-wrap,
body:has(.one10 .intro) .ast-mobile-header-wrap{
  background-color:#153243;
}