/* =====================================================
   TOKENS & BASE
===================================================== */
:root{
  /* layout */
  --page-max:1920px;              /* artboard */
  --inner-w:1536px;               /* inner stage (Figma) */

  /* breakpoints */
  --bp-xl:1400px;                 /* big desktop tuning */
  --bp-lg:1100px;                 /* small desktop / tablet landscape */
  --bp-md:900px;                  /* phones + tablet portrait (PRIMARY) */
  --bp-sm:600px;                  /* compact phones */
  --bp-xs:420px;                  /* tiny phones */

  /* colors */
  --ink:#111;
  --ink-85:rgba(0,0,0,.85);
  --ink-75:rgba(0,0,0,.75);
  --gold:#BA9C6A;
  --gold-2:#E0D5AF;
  --brand:#96713F;

  /* misc */
  --nav-h:160px;
  --radius:14px;

  /* components */
  --ts-content-w:1048px;          /* testimonials centered width */

  /* splits / reasons */
  --split-img-w:770px;            /* default image width for split rows */
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.wrap,.container,.topbar .inner,.hero,.hero .inner,.member-strip{
  width:min(100%, var(--inner-w)); margin:0 auto;
}
.container{ padding-inline:clamp(16px,3vw,24px) }

/* =====================================================
   HEADER
===================================================== */
.topbar{
  position:sticky; top:0; z-index:1000; background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.topbar .inner{
  padding:12px clamp(16px,4vw,24px) 20px;
  display:grid; grid-template-columns:316px 1fr; grid-template-rows:auto auto;
  column-gap:clamp(16px,2.5vw,28px); row-gap:4px; align-items:center;
  padding-right:clamp(36px,5vw,100px);
}
.brand{ grid-column:1/2; grid-row:1/span 2; display:flex; align-items:center }
.brand img{ width:316px; max-height:110px; height:auto; object-fit:contain }

.quick-contact{
  grid-column:2/-1; grid-row:1/2; justify-self:end; display:flex; gap:18px; align-items:center;
  font:700 20px/1 "Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#1B1B1B; white-space:nowrap;
}
.quick-contact a{ text-decoration:none; border-bottom:1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.quick-contact a:hover,
.quick-contact a:focus-visible{ text-decoration:underline; text-underline-offset:2px; border-bottom-color:currentColor }

nav.primary{
  grid-column:2/-1; grid-row:2/3; justify-self:end; display:flex; gap:24px; align-items:center; padding-bottom:2px;
}
nav.primary a{ font-size:19.2px; line-height:1; color:#000 }
nav.primary .btn{
  background:#BD9250; color:#fff; padding:9px 25px; border-radius:40px; font-size:17.3px; border:0;
}
nav.primary .btn:hover{ filter:brightness(.95) }

.nav-toggle{ display:none; border:0; background:transparent; width:42px; height:42px; justify-self:end; cursor:pointer }
.nav-toggle .bar{ width:22px; height:2px; background:#111; margin:5px auto; transition:transform .25s,opacity .25s }
.topbar.open .nav-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.topbar.open .nav-toggle .bar:nth-child(2){ opacity:0 }
.topbar.open .nav-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* header responsive */
@media (max-width:1100px){
  .topbar .inner{ grid-template-columns:260px 1fr }
  .brand img{ max-height:90px }
  .quick-contact{ font-size:18px; gap:14px }
  nav.primary{ gap:18px }
}
@media (max-width:1024px){ .brand img{ height:64px } .quick-contact{ font-size:16px } }
@media (max-width:900px){
  .topbar .inner{ grid-template-columns:auto auto; grid-template-rows:auto; row-gap:0; padding:8px 16px }
  .quick-contact{ display:none }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center }
  nav.primary{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-top:1px solid rgba(0,0,0,.06);
    padding:12px 16px 16px; flex-direction:column; gap:12px; align-items:flex-start;
  }
  nav.primary a{ padding:8px 2px; font-size:17px }
  nav.primary .btn{ width:100%; text-align:center; border-radius:10px; padding:11px 16px }
  .topbar.open nav.primary{ display:flex }
}

/* =====================================================
   HERO (1536px inner stage)
===================================================== */
.hero{ position:relative; min-height:734px; padding:0 !important; background:none !important; isolation:isolate }
.hero .inner{ position:relative; height:734px; padding:0 !important }

/* 1536×725 photo + gradient */
.hero .inner::before{
  content:""; position:absolute; inset:0 0 auto 0; height:725px;
  background:url("storage/2025/09/homebanner.png") center/cover no-repeat; z-index:-2;
}
.hero .inner::after{
  content:""; position:absolute; inset:0 0 auto 0; height:725px;
  background:linear-gradient(191deg, rgba(122,125,135,0) 7%, rgba(122,125,135,0) 30%, rgba(122,125,135,0) 44%, rgba(30,34,53,.68) 71%, #212539 100%);
  z-index:-1;
}

/* content aligned to Figma */
.hero .grid{
  position:absolute; left:113px; top:144px;
  display:grid; grid-template-columns:728px 515px; column-gap:83px; align-items:start;
}
.copy{ color:#fff; max-width:732px }
.headline{ margin:0 0 18px; padding-top:15px; border-bottom:1px solid rgba(255,255,255,.2) }
.headline span{ display:block; max-width:616px; font-weight:700; font-size:48px; line-height:55px; text-shadow:1px 1px 3px rgba(0,0,0,.3) }
.sub{ max-width:616px; margin-top:22px; font-size:24px; line-height:32px; color:#fff }
.bullets{ margin-top:36px; display:flex; gap:20px; flex-wrap:nowrap; color:#fff; font-weight:700; font-size:18px; line-height:28.8px }
.bullets span::before{ content:"● "; margin-right:2px }

/* hero card (nudged up like comp) */
.card{
  width:515px; height:616px; transform:translateY(-83px);
  background:rgba(255,255,255,.98); color:#1B1B1B; border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.18); padding:10px 61px 22px;
}
.card h3{ margin:6px 0; text-align:center; font:700 clamp(22px,2.2vw,36px)/1.2 "Open Sans"; color:#1B1B1B }
.card .micro{ margin:4px auto 12px; text-align:center; font-size:12px; color:#000 }
.input,.textarea{
  width:100%; border:1px solid #DCDCDC; border-radius:10px; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03); padding:12px; font-size:14px; height:42px;
}
.field {
  display: block;
  margin-bottom: 5px; /* adjust spacing as needed */
}
.textarea{ height:129px; resize:vertical }
.cta{
  width:100%; height:45px; margin-top:16px; border-radius:12px; border:1px solid #A7885E;
  background:var(--gold); color:#fff; font-size:15px; cursor:pointer;
}
.cta:hover{ filter:brightness(.96) }

.hero .notch{
  position:absolute; left:calc(50% - 96.5px); top:659px; width:193px; height:64.07px;
  background:#fff; border-radius:0 0 120px 120px; box-shadow:0 -1px 0 rgba(0,0,0,.06) inset; z-index:1;
}

/* hero responsive */
@media (max-width:1200px){
  .hero,.hero .inner{ height:auto }
  .hero .grid{ position:static; grid-template-columns:1fr; gap:32px; padding:24px }
  .bullets{ gap:18px; flex-wrap:wrap }
  .card{ width:min(519px,100%); height:auto; transform:none }
}

/* =====================================================
   MEMBER STRIP
===================================================== */
.member-strip{
  margin:12px auto 0; padding:12px 0;
  display:grid; grid-template-columns:auto 201px 201px; align-items:center; justify-content:center; column-gap:16px;
}
.member-strip .label{ text-align:center; font-weight:700; font-size:28px; line-height:33.6px; color:var(--ink-85) }
.member-strip .logo{ width:201px; height:124px; display:flex; align-items:center; justify-content:center; border-left:1px solid rgba(0,0,0,.05); overflow:hidden }
.member-strip .logo img{ width:150px; height:auto; max-height:94px }
@media (max-width:900px){
  .member-strip{ grid-template-columns:1fr; row-gap:10px; justify-content:stretch }
  .member-strip .logo{ border-left:none; border-top:1px solid rgba(0,0,0,.05); height:auto; padding-top:12px }
}

/* =====================================================
   GENERIC SECTIONS
===================================================== */
section{ padding:clamp(0px,6vw,0px) 0 }
.eyebrow{ color:var(--brand); font-weight:700; font-size:19.2px; line-height:27.43px }
.kicker{ font-weight:700; font-size:clamp(26px,3.2vw,40px); line-height:1.2; color:var(--ink-85) }
.title36{ font-weight:700; font-size:clamp(22px,2.4vw,36px); line-height:1.15; color:var(--ink-85) }
.hrbar{ width:50px; height:15px; background:var(--gold-2) }

/* Legal Services */
.sec-legal{ padding-top:12px; padding-bottom:28px }
.sec-legal .grid{ display:grid; grid-template-columns:minmax(0,898px) 1fr; gap:clamp(16px,3vw,40px); align-items:start }
.sec-legal .img{ width:100%; border-radius:6px }
.sec-legal .body{ max-width:536px; font-size:18px; line-height:24px; color:var(--ink-75); margin-top:18px }
.ctas{ display:flex; gap:18px; flex-wrap:wrap; margin-top:20px }
.pill{
  display:inline-flex; align-items:center; justify-content:center; height:53.42px; padding:0 28px;
  border-radius:60px; outline:3px solid #111; outline-offset:-3px; font-weight:700; font-size:19.2px;
}
@media (max-width:1100px){
  .sec-legal .grid{ grid-template-columns:1fr }
}

/* 4-up Feature Cards */
.feature-quad{ border-top:1px solid rgba(10,10,10,.11); padding:0 }
.feature-quad .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.feature-quad .item{
  padding:70px 30px; border-left:1px solid rgba(0,0,0,.07); border-right:1px solid rgba(0,0,0,.07);
  display:flex; flex-direction:column; align-items:center; gap:25px; text-align:center;
}
.feature-quad h4{ margin:0; font-size:24px; line-height:28.8px; color:var(--ink-85) }
.feature-quad p{ margin:0; font-size:16px; line-height:22.86px; color:var(--ink-75); max-width:36ch }
.feature-quad .link{ font-weight:700; font-size:16px; line-height:22.86px; color:var(--ink-85); border-bottom:3px solid var(--brand); display:inline-block; padding-bottom:6px }
@media (max-width:900px){ .feature-quad .grid{ grid-template-columns:1fr 1fr } }
@media (max-width:600px){ .feature-quad .grid{ grid-template-columns:1fr } }

/* =====================================================
   REASONS + SPLITS
===================================================== */
.reasons{ padding:0 }
.reasons .container{ width:var(--inner-w); margin:0 auto; padding-inline:0 }
.reasons .grid{
  display:grid;
  grid-template-columns:640px var(--split-img-w); /* text | quote panel */
  gap:130px; align-items:start;
}
.reasons .left{ padding-top:30px; max-width:640px }
.reasons .left .title36{ font-size:40px; line-height:48px; margin-top:8px }
.reasons .left .hrbar{ width:50px; height:15px; background:var(--gold-2); margin-top:12px }
.reasons .left .body{ margin-top:12px; font-size:19.2px; line-height:27.43px; color:var(--ink-75) }

.reasons .right{
  position:relative; width:var(--split-img-w); height:395.7px;
  background:#163055 url("storage/2025/09/Backgroundreason.png") center/cover no-repeat;
  border-radius:6px; overflow:hidden;
}
.reasons .right::before{
  content:""; position:absolute; left:64px; top:122px; width:176px; height:135px; background:rgba(255,255,255,.10);
}
.reasons .quote{
  position:absolute; left:152px; top:132px; max-width:492px; color:#fff;
  font-family:"Playfair Display",serif; font-style:italic; font-weight:400;
  font-size:58.2px; line-height:66.98px;
}

.split{
  width:var(--inner-w); margin:0 auto; padding:0;
  display:grid; align-items:center; gap:48px;
}
.split--img-left  { grid-template-columns:var(--split-img-w) 1fr; }
.split--img-right { grid-template-columns:1fr var(--split-img-w); }
.split > img{ width:100%; height:auto; max-width:var(--split-img-w); border-radius:6px; display:block }
.split .copy{ max-width:540px }
.split .copy .title{ font-size:40px; line-height:48px; font-weight:700; color:var(--ink-85) }
.split .copy .hrbar{ width:50px; height:15px; background:var(--gold-2); margin-top:10px }
.split .copy .body{ margin-top:16px; font-size:19.2px; line-height:27.43px; color:var(--ink-75) }
.pill-outline{
  display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 24px;
  border:2px solid var(--brand); border-radius:999px; background:transparent;
  color:var(--ink-85); font:700 18px/1 "Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin-top:18px;
}
@media (max-width:1100px){
  .reasons .grid{ grid-template-columns:1fr; row-gap:24px }
  .reasons .left{ padding-top:8px }
  .reasons .right{ width:100%; height:340px }
  .reasons .quote{ left:24px; top:96px; right:24px; font-size:36px; line-height:1.15 }
  .split,.split--img-left,.split--img-right{ grid-template-columns:1fr }
  .split > img{ order:-1; max-width:100% } /* image on top */
}

/* =====================================================
   TESTIMONIALS (center content, fixed arrows)
===================================================== */
.ts-slider{ position:relative }
.ts-rail{ position:relative; border-top:1px solid rgba(0,0,0,.05); border-bottom:1px solid rgba(0,0,0,.05); overflow:hidden }
.ts-track{ display:flex; will-change:transform; transition:transform .5s ease; padding:0; margin:0; list-style:none }
.ts-slide{ min-width:100% }
.ts-slide-inner{
  display:grid; grid-template-columns:228px 1fr; align-items:start; gap:50px;
  width:min(100%, var(--ts-content-w)); margin:0 auto; padding:75px 24px;
}
.ts-avatar img{ width:228px; height:200px; object-fit:cover; background:rgba(0,0,0,.05) }
.ts-copy{ max-width:649px }
.ts-text{ color:var(--ink-75); font-size:19.2px; line-height:27.43px; min-height:188px }
.ts-author{ margin-top:18px; padding-top:12px; width:max-content; border-top:1px solid rgba(0,0,0,.10); color:var(--brand); font-weight:700; font-size:16px; line-height:22.86px }

.ts-prev,.ts-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:37px; border:none; background:transparent; cursor:pointer;
  font-size:32px; line-height:1; color:rgba(0,0,0,.6)
}
.ts-prev{ left:-10px } .ts-next{ right:-10px }
.ts-prev:focus-visible,.ts-next:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }

.ts-dots{ display:flex; gap:8px; justify-content:center; margin-top:14px;margin-bottom: 14px; }
.ts-dot{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.25); border:none; cursor:pointer }
.ts-dot[aria-selected="true"]{ background:var(--brand) }

@media (max-width:900px){
  :root{ --ts-content-w:760px }
  .ts-slide-inner{ grid-template-columns:160px 1fr; gap:24px; padding:32px 16px }
  .ts-avatar img{ width:160px; height:140px }
  .ts-text{ min-height:auto }
  .ts-prev{ left:2px } .ts-next{ right:2px }
}
@media (max-width:600px){
  .ts-prev,.ts-next{ display:none }         /* cleaner on compact phones */
  .ts-slide-inner{ gap:18px; padding:24px 14px }
  .ts-dots{ gap:10px }
}

/* =====================================================
   CONTACT — Figma-accurate (934×785 at x=192, y=87)
===================================================== */

/* background band + 1536 inner column for precise offset */
section.contact-bg{
  display:grid; grid-template-columns:1fr min(100%, var(--inner-w)) 1fr;
  background:url("storage/2025/09/contact-bg.png") center/cover no-repeat;
  padding:0; position:relative;
}

/* white card */
section.contact-bg .shell{
  grid-column:2; position:relative;
  width:934px; height:725px;
  margin:87px 0 96px 192px;         /* x=192, y=87 inside the 1536 column */
  background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:10px 10px 50px rgba(0,0,0,.20);
}

/* header inside card */
section.contact-bg .head{
  width:801px; margin:30px auto 0; padding-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,.10); text-align:center;
}
section.contact-bg .head h2{ margin:0; font:700 36px/43.2px "Open Sans"; color:var(--ink-85) }
section.contact-bg .head p{ margin:10px auto 0; max-width:801px; color:rgba(0,0,0,.70); font:400 19.2px/27.43px "Open Sans" }

/* form panel (795×525) with inner grid offset x=96, y=20 */
section.contact-bg .form-area{
  position:relative; width:795px; height:525px; margin:0 auto;
  background:#FAF8F8; border-top:2px solid #F0F0F0;

  display:grid; grid-template-columns:262px 262px; column-gap:75px; row-gap:0px;
  justify-content:start; align-content:start;
  padding:20px 0 28px 96px;          /* x=96, y=20 */
}

/* labels & inputs */
section.contact-bg .label,
section.contact-bg label{ display:block; margin:0 0 4px; color:rgba(0,0,0,.75); font:400 19.2px/27.43px "Open Sans" }
section.contact-bg .input,
section.contact-bg input[type="text"],
section.contact-bg input[type="email"],
section.contact-bg input[type="tel"]{
  width:262px; height:49.41px; background:#fff; border:1px solid #F0F0F0; border-radius:4px;
  padding:10px 12px; font-size:16px; box-shadow:none;
}

/* textarea 599×187 spans both cols */
section.contact-bg .textarea,
section.contact-bg textarea{
  grid-column:1 / span 2; width:599px; height:187px;
  background:#fff; border:1px solid #F0F0F0; border-radius:4px; padding:12px; resize:vertical;
}

/* button (239×57) left-aligned under textarea */
section.contact-bg .btn-row{ grid-column:1 / span 2 }
section.contact-bg .btn-send,
section.contact-bg input[type="submit"],
section.contact-bg button[type="submit"]{
  grid-column:1; justify-self:start; display:inline-block;
  width:239px; height:57px; margin-top:8px;
  background:#D4AB47; box-shadow:0 7px 0 #F0EADC; border:0; border-radius:50px;
  color:#fff; font:700 19.2px/27.43px "Open Sans"; cursor:pointer;
}
section.contact-bg .btn-send:hover{ filter:brightness(.96) }

/* responsive fallback: center card & stack fields */
@media (max-width:1400px){
  section.contact-bg .shell{
    width:min(934px, calc(100% - 48px)); height:auto; margin:32px auto;
  }
  section.contact-bg .head{ width:auto; margin-left:24px; margin-right:24px }
  section.contact-bg .form-area{
    width:auto; height:auto; padding:20px 24px 20px;
    grid-template-columns:1fr; column-gap:0; row-gap:10px;
  }
  section.contact-bg .input,
  section.contact-bg input[type="text"],
  section.contact-bg input[type="email"],
  section.contact-bg input[type="tel"],
  section.contact-bg .textarea,
  section.contact-bg textarea,
  section.contact-bg .btn-send,
  section.contact-bg input[type="submit"],
  section.contact-bg button[type="submit"]{ width:100% }
}

/* =====================================================
   ABOUT / CONTACT STRIP
===================================================== */
.about-contact { padding: 28px 0 28px; border-top:1px solid rgba(0,0,0,.2); border-bottom:1px solid rgba(0,0,0,.2) }
.about-contact .row{
  max-width: var(--inner-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr); /* About | Contact */
  gap: 0px;
  align-items: start;
  padding-inline: clamp(16px,3vw,24px);
}

/* About column: a bit narrower */
.about-contact .about{ max-width: 520px; }
.about-contact .about h3{ margin: 0 0 8px; font-size:27.2px; line-height:32.64px; color:var(--ink-85) }
.about-contact .about .hrbar{ width: 30px; height: 8px; background:#E0D5AF; margin: 6px 0 14px }
.about-contact .about p{ margin:0; max-width:447px; font-size:16px; line-height:23px; color:var(--ink-75) }

/* Contact block */
.pcl-contact-footer__grid{ display:grid; grid-template-columns: 1fr auto; gap: 18px 28px; align-items: start }
.pcl-contact-footer__info h3{ margin:0 0 6px; font:700 27px/1.2 "Open Sans", system-ui, sans-serif }
.pcl-contact-footer__info .pcl-underline{ display:block; width:30px; height:8px; background:#E0D5AF; margin-bottom:10px }
.pcl-contact-footer__info p{ margin:10px 0; font:400 16px/1.45 "Open Sans", system-ui, sans-serif }
.pcl-contact-footer__info strong{ font-weight:700 }

.pcl-link{
  color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pcl-link:hover,.pcl-link:focus-visible{
  color:#000; border-color: currentColor; text-underline-offset:2px;
}

/* Map */
.pcl-contact-footer__map iframe{
  display:block; width: 403px; max-width: 100%; height: auto;
  aspect-ratio: 403 / 234; border:0; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Mobile: stack and center */
@media (max-width:900px){
  .about-contact .row{ grid-template-columns: 1fr; gap: 24px }
  .pcl-contact-footer__grid{ grid-template-columns: 1fr; }
}

/* =====================================================
   FOOTER
===================================================== */
footer{ padding:24px 0 }
.footer-links{
  width:min(1270px,100%); margin:0 auto 16px; display:flex; gap:24px; flex-wrap:wrap;
  padding-inline:clamp(16px,3vw,24px)
}
.footer-links a{ padding-right:24px; border-right:1px solid rgba(0,0,0,.1); font-weight:700; font-size:17.6px; color:var(--ink-75) }
.footer-links a:last-child{ border-right:none }
.copyright{ width:min(1270px,100%); margin:0 auto; color:var(--ink-75); font-size:12.8px; line-height:18.29px; padding-inline:clamp(16px,3vw,24px) }
.copyright a{ color:#2A88C5; font-weight:400 }

/* =====================================================
   RESPONSIVE MISC (global)
===================================================== */
@media (max-width:1300px){ .quick-contact{ display:none } }
@media (max-width:1100px){ .hero .grid{ grid-template-columns:1fr } .copy{ padding-left:0 } }
@media (max-width:900px){
  .headline span{ font-size:36px; line-height:44px }
  .sub{ font-size:18px; line-height:26px }
}
@media (max-width:600px){
  .bullets{ font-size:16px; line-height:24px; gap:12px }
}
@media (max-width:420px){
  .headline span{ font-size:30px; line-height:38px }
}

/* =====================================================
   ACCESSIBLE TEL/MAIL HOVER (site-wide)
===================================================== */
a[href^="tel:"], a[href^="mailto:"]{ text-decoration:none }
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover,
a[href^="tel:"]:focus-visible,
a[href^="mailto:"]:focus-visible{
  text-decoration:underline; text-underline-offset:2px;
}
/* ================================
   CONTACT: mobile-friendly fixes
   (append at the very end of style.css)
================================ */

/* Tablet & down: center the card, remove fixed heights */
@media (max-width: 900px){
  section.contact-bg{
    grid-template-columns: 1fr;           /* no inner 1536 grid on mobile */
    background-position: center;
    padding: 24px 0;                       /* add top/bottom breath */
  }

  /* White card: full width (with gutter), auto height */
  section.contact-bg .shell{
    width: min(720px, calc(100% - 24px));  /* 12px side gutters */
    margin: 0 auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
  }

  /* Head area: let text wrap nicely */
  section.contact-bg .head{
    width: auto;
    margin: 16px 16px 0;
    padding-bottom: 12px;
  }
  section.contact-bg .head h2{
    font-size: 28px;
    line-height: 1.2;
  }
  section.contact-bg .head p{
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.45;
  }

  /* Form panel: single column, no giant indent */
  section.contact-bg .form-area{
    width: auto;
    height: auto;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
    padding: 16px;                         /* was: 20px 0 28px 96px */
    border-top: 2px solid #F0F0F0;
    background: #FAF8F8;
  }

  /* Inputs go full width */
  section.contact-bg .input,
  section.contact-bg input[type="text"],
  section.contact-bg input[type="email"],
  section.contact-bg input[type="tel"]{
    width: 100%;
    height: 46px;
  }

  /* Textarea spans 1 col at 100% */
  section.contact-bg .textarea,
  section.contact-bg textarea{
    grid-column: auto;
    width: 100%;
    min-height: 140px;
    height: auto;
  }

  /* Button: full width, touch-friendly */
  section.contact-bg .btn-row{ grid-column: auto }
  section.contact-bg .btn-send,
  section.contact-bg input[type="submit"],
  section.contact-bg button[type="submit"]{
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border-radius: 12px;
    box-shadow: 0 5px 0 #F0EADC;
  }
}

/* Compact phones: tighten gutters/typography further */
@media (max-width: 600px){
  section.contact-bg .shell{
    width: calc(100% - 16px); /* 8px gutters */
    border-radius: 8px;
  }
  section.contact-bg .head{
    margin: 12px 12px 0;
  }
  section.contact-bg .form-area{
    padding: 12px;
    row-gap: 10px;
  }
  section.contact-bg .head h2{ font-size: 24px }
  section.contact-bg .head p{ font-size: 15px }
  section.contact-bg .label,
  section.contact-bg label{ font-size: 16px; line-height: 1.35 }
}

/* Tiny phones: smallest safe sizes */
@media (max-width: 420px){
  section.contact-bg .head h2{ font-size: 22px }
  section.contact-bg .btn-send{ height: 50px }
}
/* =========================================
   SPLIT SECTIONS: mobile/tablet fixes
   (Built from the ground up / History)
   Append at the end of style.css
========================================= */

/* 1) Prevent horizontal overflow and add safe side padding */
.split{
  width: min(100%, var(--inner-w)) !important;   /* override earlier fixed width */
  padding-inline: clamp(0px, 3vw, 0px);        /* gutters on small screens */
}

/* Keep the desktop two-column layout but shrink the image a bit earlier */
@media (max-width: 1200px){
  :root{ --split-img-w: 640px; }                 /* was 770px */
  .split{ gap: 32px; }
}

/* 2) Tablet & phones: stack content, image on top for both variants */
@media (max-width: 900px){
  .split,
  .split.split--img-left,
  .split.split--img-right{
    grid-template-columns: 1fr !important;       /* single column */
    gap: 24px;
  }

  .split > img{
    order: -1;                                   /* image first */
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }

  .split .copy{
    max-width: 65ch;                             /* comfortable line length */
    margin: 0 auto 0 0;                          /* left align text */
  }

  .split .copy .title{
    font-size: 28px;
    line-height: 1.2;
  }

  .split .copy .hrbar{
    width: 30px; height: 8px;                    /* smaller accent bar */
    margin-top: 10px;
  }

  .split .copy .body{
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--ink-75);
  }

  /* CTA: easy tap target but not full-width “blocky” */
  .split .pill-outline{
    height: 48px;
    padding: 0 22px;
    margin-top: 14px;
    max-width: 360px;
  }
}

/* 3) Compact phones: tighter spacing & type scale */
@media (max-width: 600px){
  .split{ gap: 18px; padding-top: 24px; padding-bottom: 24px; }
  .split .copy .title{ font-size: 24px; }
  .split .copy .body{ font-size: 15.5px; }
}

/* 4) Tiny phones: final reductions so nothing wraps awkwardly */
@media (max-width: 420px){
  .split .copy .title{ font-size: 22px; }
  .split .pill-outline{ width: 100%; max-width: none; }
}
/* Hero: darker photo on mobile */
@media (max-width: 900px){
  /* stack already happens elsewhere; this just darkens the image */
  .hero .inner::after{
    /* add a semi-transparent black layer on top of your existing gradient */
    background:
      linear-gradient(0deg, rgba(0,0,0,.48), rgba(0,0,0,.48)),
      linear-gradient(191deg,
        rgba(122,125,135,0) 7%,
        rgba(122,125,135,0) 30%,
        rgba(122,125,135,0) 44%,
        rgba(30,34,53,.78) 71%,
        #212539 100%
      );
  }

  /* optional: tiny boost to legibility */
  .headline span,
  .sub{ text-shadow: 0 1px 2px rgba(0,0,0,.35); }
}

/* If you want it even darker on very small phones */
@media (max-width: 600px){
  .hero .inner::after{
    background:
      linear-gradient(0deg, rgba(0,0,0,.58), rgba(0,0,0,.58)),
      linear-gradient(191deg,
        rgba(122,125,135,0) 7%,
        rgba(122,125,135,0) 30%,
        rgba(122,125,135,0) 44%,
        rgba(30,34,53,.80) 71%,
        #212539 100%
      );
  }
}
/* CONTACT: mobile layout + readable header */
@media (max-width: 900px){
  section.contact-bg .shell{
    width: auto; height: auto;
    margin: 24px 16px; border-radius: 10px;
  }
  section.contact-bg .head{
    width: auto; margin: 16px; padding-bottom: 10px; text-align: center;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }
  section.contact-bg .head h2{ font-size: 28px; line-height: 1.2; margin: 0 }
  section.contact-bg .head p{ font-size: 16px; line-height: 1.45; margin: 8px 0 0 }

  section.contact-bg .form-area{
    width: 100%; height: auto;
    padding: 16px; row-gap: 12px;
    grid-template-columns: 1fr !important;   /* force single column */
  }

  /* make every field span full width */
  section.contact-bg .form-area .field,
  section.contact-bg .label,
  section.contact-bg .textarea,
  section.contact-bg textarea,
  section.contact-bg input[type="text"],
  section.contact-bg input[type="email"],
  section.contact-bg input[type="tel"]{
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }
  section.contact-bg .textarea,
  section.contact-bg textarea{ height: 160px; }

  section.contact-bg .btn-row{ grid-column: 1 / -1 }
  section.contact-bg .btn-send{ width: 100%; height: 54px; border-radius: 999px }
}
/* REASONS: smaller, cleaner on phones */
@media (max-width: 900px){
  .reasons .container{ padding-inline: 16px }
  .reasons .grid{ grid-template-columns: 1fr; gap: 18px }
  .reasons .left{ padding-top: 8px }
  .reasons .left .eyebrow{ font-size: 16px }
  .reasons .left .title36{ font-size: 32px; line-height: 1.2 }
  .reasons .left .hrbar{ width: 40px; height: 10px; margin-top: 10px }
  .reasons .left .body{ font-size: 17px; line-height: 1.6 }

  .reasons .right{ height: 300px; border-radius: 6px }
  .reasons .quote{
    left: 24px; right: 24px; top: 88px;
    font-size: 34px; line-height: 1.15;
  }
}
@media (max-width: 480px){
  .reasons .left .title36{ font-size: 28px }
  .reasons .quote{ top: 72px; font-size: 28px }
}
/* ---------- SIMPLE REASONS: mobile rework ---------- */
@media (max-width: 900px){
  .reasons{ padding: 32px 0; }
  .reasons .container{
    width: 100%;
    padding-inline: 16px;            /* add side padding on phones */
  }
  .reasons .grid{
    grid-template-columns: 1fr;      /* stack */
    gap: 16px;                       /* smaller spacing */
  }
  .reasons .left{ padding-top: 0; }

  .reasons .left .eyebrow{ font-size: 16px; }

  /* shrink & wrap the big title */
  .reasons .left .title36{
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.25;
    margin: 6px 0 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
            hyphens: auto;
    letter-spacing: -0.01em;
  }

  .reasons .left .hrbar{
    width: 40px; height: 10px;
    margin: 8px 0;
  }

  .reasons .left .body{
    font-size: 16px;
    line-height: 1.55;
    margin-top: 6px;
  }

  /* quote panel */
  .reasons .right{
    height: 240px;
    border-radius: 8px;
    background-position: center;
    position: relative;
  }
  /* subtle dark overlay so text always reads */
  .reasons .right::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0, rgba(0,0,0,.35) 100%);
  }
  .reasons .right::before{
    left: 20px; top: 24px; width: 120px; height: 90px;   /* shrink the decorative block */
  }
  .reasons .quote{
    left: 20px; right: 20px;
    top: auto; bottom: 24px;              /* anchor near bottom */
    font-size: 26px; line-height: 1.15;
    z-index: 1;
  }
}

@media (max-width: 480px){
  .reasons .right{ height: 200px; }
  .reasons .quote{ font-size: 22px; }
}


/* =========================================
   BUTTON INTERACTIONS (hover/focus/active)
   Append at end of style.css
========================================= */

/* Smooth transitions on interactive elements */
.nav.primary .btn,
.cta,
.pill,
.pill-outline,
section.contact-bg .btn-send,
section.contact-bg input[type="submit"],
section.contact-bg button[type="submit"]{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease,
    filter .16s ease;
  will-change: transform, box-shadow, filter;
}

/* --- Filled buttons (gold / nav CTA / contact submit) --- */
.nav.primary .btn,
.cta,
section.contact-bg .btn-send,
section.contact-bg input[type="submit"],
section.contact-bg button[type="submit"]{
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}

.nav.primary .btn:hover,
.cta:hover,
section.contact-bg .btn-send:hover,
section.contact-bg input[type="submit"]:hover,
section.contact-bg button[type="submit"]:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.15);
}

.nav.primary .btn:active,
.cta:active,
section.contact-bg .btn-send:active,
section.contact-bg input[type="submit"]:active,
section.contact-bg button[type="submit"]:active{
  transform: translateY(0);
  filter: brightness(.92);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* --- Pill (outlined in black) --- */
.pill{
  transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pill:hover{
  background:#111; color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.pill:active{ transform: translateY(0) }

/* --- Pill Outline (brand border) --- */
.pill-outline{
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.pill-outline:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,.12);
}
.pill-outline:active{ transform: translateY(0) }

/* --- Focus visibility (keyboard users) --- */
.nav.primary .btn:focus-visible,
.cta:focus-visible,
.pill:focus-visible,
.pill-outline:focus-visible,
section.contact-bg .btn-send:focus-visible,
section.contact-bg input[type="submit"]:focus-visible,
section.contact-bg button[type="submit"]:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand) 70%, white);
  outline-offset: 2px;
}

/* --- Disabled state (just in case) --- */
.nav.primary .btn:disabled,
.cta:disabled,
.pill:disabled,
.pill-outline:disabled,
section.contact-bg .btn-send:disabled,
section.contact-bg input[type="submit"]:disabled,
section.contact-bg button[type="submit"]:disabled{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; filter:none;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .nav.primary .btn,
  .cta,
  .pill,
  .pill-outline,
  section.contact-bg .btn-send,
  section.contact-bg input[type="submit"],
  section.contact-bg button[type="submit"]{
    transition: none;
  }
}
/* =========================================
   HEADER NAV: hover underline + focus ring
========================================= */

nav.primary a{
  position: relative;
  text-decoration: none;               /* base: no underline */
  transition: color .16s ease;
}

/* exclude the CTA button */
nav.primary a.btn{ text-decoration: none }

/* animated underline */
nav.primary a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-4px;                         /* adjust if you want closer */
  height:2px;
  background: currentColor;            /* matches link color */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

/* show underline on hover/focus */
nav.primary a:not(.btn):hover::after,
nav.primary a:not(.btn):focus-visible::after{
  transform: scaleX(1);
}

/* fallback underline for older browsers */
nav.primary a:not(.btn):hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* keyboard focus ring */
nav.primary a:not(.btn):focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* “current page” styles (WP common classes) */
nav.primary .current-menu-item > a:not(.btn),
nav.primary .current_page_item > a:not(.btn){
  font-weight: 700;
}
nav.primary .current-menu-item > a:not(.btn)::after,
nav.primary .current_page_item > a:not(.btn)::after{
  transform: scaleX(1);                /* keep underline visible */
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  nav.primary a:not(.btn)::after{ transition: none }
}