/* ==========================================================================
   Basin Hosting & Web Design — stylesheet
   Editorial / West-Texas magazine aesthetic. Base: 1rem = 10px.
   ========================================================================== */

html{font-size:62.5%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  /* palette */
  --bf-red:#C8102E;
  --bf-blue:#00205B;
  --bf-cream:#F4EFE6;
  --bf-paper:#FAF7F1;
  --bf-ink:#0A0A0A;
  --bf-mute:#6E6A60;
  /* easing */
  --ease-quiet:cubic-bezier(.22,1,.36,1);
  --ease-emphasis:cubic-bezier(.16,1,.3,1);
  /* layout */
  --container-max:140rem;
  --container-narrow:82rem;
  --gutter:clamp(1.6rem,4vw,2.4rem);
  --section-pad:clamp(4.5rem,9vw,8rem);
  /* fluid type */
  --fs-hero:clamp(4.4rem,10vw,13rem);
  --fs-h2:clamp(3.4rem,5.5vw,7rem);
  --fs-h3:clamp(3rem,4.4vw,5.4rem);
  --fs-cta:clamp(4rem,7vw,9.6rem);
  --fs-stat:clamp(3.4rem,4vw,5.4rem);
  --fs-lead:clamp(1.6rem,1.4vw,1.8rem);
  --fs-body:1.6rem;
  --fs-label:1.1rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  background:var(--bf-cream);
  color:var(--bf-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--bf-red);color:var(--bf-paper)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--bf-red);outline-offset:3px}

/* ─────────── Type helpers ─────────── */
.display{font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:-0.025em;line-height:.9;text-transform:uppercase}
.label{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--bf-mute)}
.container{max-width:var(--container-max);margin:0 auto}
.container-narrow{max-width:var(--container-narrow);margin:0 auto}
.section-pad{padding:var(--section-pad) var(--gutter)}
.accent,.r{color:var(--bf-red)}
.b{color:var(--bf-blue)}

/* ─────────── Buttons ─────────── */
.btn{display:inline-flex;align-items:center;gap:.8rem;font-family:'IBM Plex Mono',monospace;font-size:1.2rem;letter-spacing:.16em;text-transform:uppercase;padding:1.4rem 2.2rem;transition:background 200ms,color 200ms,border-color 200ms}
.btn--primary{background:var(--bf-ink);color:var(--bf-paper)}
.btn--primary:hover{background:var(--bf-red)}
.btn--ghost{background:transparent;color:var(--bf-ink);border:1px solid rgba(10,10,10,.3)}
.btn--ghost:hover{border-color:var(--bf-red);color:var(--bf-red)}
.btn--lg{padding:1.7rem 2.8rem;font-size:1.3rem}
.btn--light{background:var(--bf-paper);color:var(--bf-ink)}
.btn--light:hover{background:var(--bf-blue);color:var(--bf-paper)}

/* ─────────── Nav ─────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(244,239,230,.88);backdrop-filter:blur(1rem);border-bottom:1px solid transparent;transition:background 400ms var(--ease-quiet),border-color 400ms var(--ease-quiet)}
.nav--scrolled{background:rgba(244,239,230,.96);border-bottom:1px solid rgba(10,10,10,.08)}
.nav__inner{max-width:var(--container-max);margin:0 auto;padding:1.6rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav__logo{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.88rem;text-transform:uppercase}
.nav__logo .star{width:1.8rem;height:1.8rem;background:var(--bf-red);flex-shrink:0;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.nav__logo .co{color:var(--bf-mute);font-weight:800}
.nav__logo .logo-star{width:3.4rem;height:3.4rem;flex-shrink:0}
.nav__links{display:flex;gap:3rem;align-items:center}
.nav__links a{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;transition:color 200ms}
.nav__links a:hover{color:var(--bf-red)}
.nav__cta{padding:1.1rem 1.7rem;background:var(--bf-ink);color:var(--bf-paper)}
.nav__cta:hover{background:var(--bf-red);color:var(--bf-paper)!important}
.nav__toggle,.nav__burger{display:none}

/* ─────────── Page hero (interior pages) ─────────── */
.page-hero{background:var(--bf-blue);color:var(--bf-paper);padding:14rem var(--gutter) clamp(4rem,7vw,7rem);position:relative;overflow:hidden}
.page-hero__inner{max-width:var(--container-max);margin:0 auto;position:relative;z-index:2}
.page-hero .label{color:rgba(255,255,255,.65)}
.page-hero__title{font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:-.025em;line-height:.95;text-transform:uppercase;font-size:var(--fs-h2);margin:1.6rem 0 0;max-width:20ch}
.page-hero__lead{margin-top:2.4rem;font-size:var(--fs-lead);line-height:1.55;max-width:60ch;color:rgba(255,255,255,.85)}
.page-hero__lead a{color:var(--bf-paper);border-bottom:1px solid rgba(255,255,255,.4)}
.page-hero__actions{margin-top:3.2rem;display:flex;gap:1.2rem;flex-wrap:wrap}

/* ─────────── Breadcrumb ─────────── */
.breadcrumb{background:var(--bf-paper);border-bottom:1px solid rgba(10,10,10,.07)}
.breadcrumb ol{max-width:var(--container-max);margin:0 auto;padding:1.4rem var(--gutter);list-style:none;display:flex;flex-wrap:wrap;gap:.8rem;font-family:'IBM Plex Mono',monospace;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bf-mute)}
.breadcrumb li:not(:last-child)::after{content:'/';margin-left:.8rem;color:rgba(10,10,10,.25)}
.breadcrumb a:hover{color:var(--bf-red)}

/* ─────────── Home hero ─────────── */
.hero{position:relative;padding:16rem var(--gutter) 6rem;background:var(--bf-cream);overflow:hidden}
.hero__inner{position:relative;z-index:2;max-width:var(--container-max);margin:0 auto}
.hero__top{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap}
.hero__top .location{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.8}
.hero__title{font-size:var(--fs-hero);color:var(--bf-ink);margin:4rem 0;max-width:14ch}
.hero__bottom{display:grid;grid-template-columns:1fr auto;gap:4.8rem;align-items:end}
.hero__sub{max-width:48ch;font-size:var(--fs-lead);line-height:1.6}
.hero__sub strong{color:var(--bf-red);font-weight:600}
.hero__meta{display:flex;gap:3.6rem;align-items:flex-end;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase}
.hero__meta div{display:flex;flex-direction:column;gap:.6rem}
.hero__meta .v{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.8rem;letter-spacing:-.02em;color:var(--bf-blue)}

/* ─────────── Marquee strip ─────────── */
.strip{background:var(--bf-ink);color:var(--bf-paper);padding:1.9rem 0;overflow:hidden}
.strip__row{display:flex;width:max-content;gap:4.8rem;white-space:nowrap;animation:strip 38s linear infinite;font-family:'Montserrat',sans-serif;font-weight:900;font-size:2rem;letter-spacing:-.01em;text-transform:uppercase}
.strip__row span{display:inline-flex;align-items:center;gap:4.8rem}
.strip__row .dot{color:var(--bf-red)}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─────────── Stats ─────────── */
.stats{background:var(--bf-blue);color:var(--bf-paper);padding:var(--section-pad) var(--gutter)}
.stats__inner{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3.2rem}
.stat{border-top:1px solid rgba(255,255,255,.18);padding-top:2.4rem}
.stat .v{font-family:'Montserrat',sans-serif;font-weight:900;font-size:var(--fs-stat);letter-spacing:-.02em;line-height:1}
.stat .v .plus{color:var(--bf-red)}
.stat .l{margin-top:1.1rem;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

/* ─────────── Section heading ─────────── */
.sec{padding:var(--section-pad) var(--gutter)}
.sec--paper{background:var(--bf-paper)}
.sec--cream{background:var(--bf-cream)}
.sec-head{max-width:var(--container-max);margin:0 auto 7rem;display:grid;grid-template-columns:1fr 2fr;gap:4.8rem;align-items:end}
.sec-head .label{align-self:start}
.sec-head h2{font-size:var(--fs-h2)}
.sec-head p{max-width:52ch;font-size:var(--fs-lead);line-height:1.6;color:var(--bf-mute);margin-top:2.4rem}
.sec-head--center{grid-template-columns:1fr;text-align:center;justify-items:center}
.sec-head--center p{margin-inline:auto}

/* ─────────── Services mosaic ─────────── */
.services{background:var(--bf-paper)}
.mosaic{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:20rem;gap:1.2rem;grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;border:1px solid rgba(10,10,10,.1);background:var(--bf-cream);padding:2.8rem;display:flex;flex-direction:column;justify-content:space-between;transition:border-color 400ms var(--ease-emphasis),transform 400ms var(--ease-emphasis)}
.tile:hover{border-color:var(--bf-red);transform:translateY(-.3rem)}
.tile--tall{grid-row:span 2}
.tile--wide{grid-column:span 2}
.tile--big{grid-row:span 2;grid-column:span 2}
.tile--dark{background:var(--bf-ink);color:var(--bf-paper)}
.tile--blue{background:var(--bf-blue);color:var(--bf-paper)}
.tile--red{background:var(--bf-red);color:var(--bf-paper)}
.tile .num{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.tile h3{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.6rem;letter-spacing:-.02em;line-height:1;text-transform:uppercase;margin-top:1rem;overflow-wrap:break-word}
.tile--big h3{font-size:4.2rem}
.tile p{font-size:1.45rem;line-height:1.5;opacity:.85;margin-top:1.1rem}
.tile .arrow{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.9rem;margin-top:1.4rem}
.tile .arrow span{transition:transform 400ms var(--ease-emphasis)}
.tile:hover .arrow span{transform:translateX(.6rem)}
.tile ul{list-style:none;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:.7rem;opacity:.85;margin-top:1.2rem}

/* ─────────── Generic card grid ─────────── */
.grid{max-width:var(--container-max);margin:0 auto;display:grid;gap:1.6rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--split{grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
.card{background:var(--bf-paper);border:1px solid rgba(10,10,10,.1);padding:2.8rem;transition:border-color 300ms,transform 300ms}
.card--link:hover{border-color:var(--bf-red);transform:translateY(-.3rem)}
.card__num{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bf-mute)}
.card__title{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.2rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;margin:.8rem 0 1rem}
.card__text{font-size:1.5rem;line-height:1.55;color:var(--bf-mute)}
.card__more{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bf-red)}

/* ─────────── Prose ─────────── */
.prose{max-width:var(--container-narrow);margin:0 auto}
.prose h2{font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.6rem,3.4vw,3.8rem);margin:3.6rem 0 1.6rem}
.prose h3{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:2rem;margin:2.8rem 0 1.2rem}
.prose p{font-size:1.7rem;line-height:1.7;margin-bottom:1.8rem;color:#26241f}
.prose ul,.prose ol{margin:0 0 1.8rem 2rem;font-size:1.7rem;line-height:1.7;color:#26241f}
.prose li{margin-bottom:.8rem}
.prose a{color:var(--bf-red);border-bottom:1px solid rgba(200,16,46,.3)}
.prose a:hover{border-color:var(--bf-red)}
.prose strong{color:var(--bf-ink)}
.prose .lead{font-size:2rem;line-height:1.6;color:var(--bf-ink)}

/* ─────────── Checklist ─────────── */
.checklist{list-style:none;display:flex;flex-direction:column;gap:1.2rem}
.checklist li{position:relative;padding-left:3.2rem;font-size:1.6rem;line-height:1.5}
.checklist li::before{content:'';position:absolute;left:0;top:.3rem;width:1.8rem;height:1.8rem;background:var(--bf-red);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.checklist--grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 3rem}

/* ─────────── Story ─────────── */
.story{background:var(--bf-paper);padding:var(--section-pad) var(--gutter)}
.story__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:start}
.story__media{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid rgba(10,10,10,.1);background:var(--bf-blue)}
.story__media img{width:100%;height:100%;object-fit:cover}
.story__media .stamp{position:absolute;bottom:1.6rem;left:1.6rem;background:var(--bf-red);color:var(--bf-paper);padding:.64rem 1.28rem;font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.2em;text-transform:uppercase}
.story__copy h2{font-size:var(--fs-h3);margin:1.4rem 0 3rem}
.story__copy p{font-size:var(--fs-lead);line-height:1.65;margin-bottom:2rem}
.story__copy p.mute{color:var(--bf-mute)}
.story__sign{margin-top:3rem}
.story__sign .name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.8rem;text-transform:uppercase}
.story__sign .role{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bf-mute);margin-top:.4rem}

/* ─────────── Process ─────────── */
.process{background:var(--bf-ink);color:var(--bf-paper);padding:var(--section-pad) var(--gutter)}
.process .sec-head h2,.process .sec-head .label{color:var(--bf-paper)}
.process .sec-head .label{color:rgba(255,255,255,.6)}
.process .sec-head p{color:rgba(255,255,255,.7)}
.steps{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12)}
.step{background:var(--bf-ink);padding:4rem 2.4rem;min-height:32rem;display:flex;flex-direction:column;justify-content:space-between}
.step .n{font-family:'Montserrat',sans-serif;font-weight:900;font-size:6.4rem;line-height:1;letter-spacing:-.04em;color:var(--bf-red)}
.step h3{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.1rem;text-transform:uppercase;margin:1.6rem 0}
.step p{font-size:1.45rem;line-height:1.55;color:rgba(255,255,255,.7)}
.step .time{margin-top:1.6rem;font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* ─────────── Testimonials ─────────── */
.quotes{background:var(--bf-cream);padding:var(--section-pad) var(--gutter)}
.quote-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:3.2rem}
.quote{background:var(--bf-paper);padding:3.2rem;border:1px solid rgba(10,10,10,.1);display:flex;flex-direction:column;justify-content:space-between;transition:border-color 400ms}
.quote:hover{border-color:var(--bf-blue)}
.quote .stars{font-family:'IBM Plex Mono',monospace;color:var(--bf-blue);letter-spacing:.2em;font-size:1.1rem;margin-bottom:1.4rem}
.quote .mark{font-family:'Montserrat',sans-serif;font-weight:900;font-size:5rem;color:var(--bf-red);line-height:.5;margin-bottom:1.4rem}
.quote blockquote{font-size:1.55rem;line-height:1.55;margin-bottom:2.4rem}
.quote .who{display:flex;align-items:center;gap:1.3rem;border-top:1px solid rgba(10,10,10,.1);padding-top:1.6rem}
.quote .who .name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.35rem;text-transform:uppercase;line-height:1.1}
.quote .who .biz{font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bf-mute);margin-top:.4rem}

/* ─────────── Service area ─────────── */
.area{background:var(--bf-paper);padding:var(--section-pad) var(--gutter)}
.area__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:7rem;align-items:start}
.area__copy h2{font-size:var(--fs-h3);margin:1.4rem 0 2.4rem}
.area__copy p{font-size:var(--fs-lead);line-height:1.65;color:var(--bf-mute);margin-bottom:1.8rem}
.area__map{position:relative;aspect-ratio:5/4;background:var(--bf-cream);border:1px solid rgba(10,10,10,.1);overflow:hidden}
.area__map iframe{width:100%;height:100%;border:0;display:block}

/* ─────────── FAQ ─────────── */
.faq{background:var(--bf-cream);padding:var(--section-pad) var(--gutter)}
.faq__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr 1.6fr;gap:6rem;align-items:start}
.faq__intro h2{font-size:var(--fs-h3);margin:1.4rem 0}
.faq__intro p{color:var(--bf-mute);max-width:34ch;line-height:1.6;font-size:1.5rem}
.faq__list{display:flex;flex-direction:column}
.faq__item{border-top:1px solid rgba(10,10,10,.18)}
.faq__item:last-child{border-bottom:1px solid rgba(10,10,10,.18)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:2.4rem 0;cursor:pointer;list-style:none;font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.85rem;letter-spacing:-.01em;text-transform:uppercase}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'+';color:var(--bf-red);font-size:2.4rem;transition:transform 300ms var(--ease-emphasis)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item .faq__a{padding:0 0 2.4rem;font-size:1.6rem;line-height:1.65;color:var(--bf-mute);max-width:60ch}

/* ─────────── CTA / Contact ─────────── */
.cta{background:var(--bf-red);color:var(--bf-paper);padding:var(--section-pad) var(--gutter);position:relative;overflow:hidden}
.cta__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:6rem;align-items:start;position:relative;z-index:2}
.cta h2{font-size:var(--fs-cta);line-height:.92}
.cta__copy>p{margin-top:2.4rem;font-size:1.7rem;line-height:1.55;max-width:42ch}
.cta__contact{margin-top:2.4rem;font-family:'IBM Plex Mono',monospace;font-size:1.2rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.9}
.cta__contact a{border-bottom:1px solid rgba(255,255,255,.4)}
.cta__deco{position:absolute;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(12rem,22vw,32rem);line-height:1;color:rgba(255,255,255,.09);right:-2rem;bottom:-5rem;letter-spacing:-.04em;pointer-events:none;z-index:1}
.cta--band{text-align:center}
.cta--band .cta__inner{max-width:var(--container-narrow);margin:0 auto}
.cta--band h2{font-size:var(--fs-h2);margin-bottom:3rem}
.cta--band .cta__actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* ─────────── Lead form ─────────── */
.leadform{background:var(--bf-paper);color:var(--bf-ink);padding:3.6rem}
.cta .leadform{margin-top:0}
.leadform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{margin-bottom:2.2rem}
.field-row{display:grid;gap:1.6rem}
.field-row--2{grid-template-columns:1fr 1fr}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bf-mute);margin-bottom:.8rem}
.field label span{color:var(--bf-red)}
.field input,.field select,.field textarea{width:100%;border:0;border-bottom:1px solid rgba(10,10,10,.25);padding:1rem 0;font:inherit;font-size:1.6rem;background:transparent;color:var(--bf-ink);transition:border-color 200ms}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--bf-red)}
.field textarea{min-height:9rem;resize:vertical}
.submit{width:100%;padding:1.7rem;background:var(--bf-ink);color:var(--bf-paper);font-family:'IBM Plex Mono',monospace;font-size:1.2rem;letter-spacing:.18em;text-transform:uppercase;transition:background 200ms}
.submit:hover{background:var(--bf-red)}
.leadform__note{margin-top:1.6rem;font-size:1.2rem;line-height:1.5;color:var(--bf-mute)}
.form-error{background:#fdecea;border:1px solid var(--bf-red);color:#7a0a1b;padding:1.6rem 2rem;font-size:1.5rem}

/* ─────────── Contact aside ─────────── */
.contact-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:6rem;align-items:start}
.contact-card{background:var(--bf-paper);border:1px solid rgba(10,10,10,.1);padding:3.2rem;display:flex;flex-direction:column;gap:2.4rem}
.contact-card h3{font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bf-mute);margin-bottom:.6rem}
.contact-card .big{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2.4rem}
.contact-card a:hover{color:var(--bf-red)}

/* ─────────── Portfolio grid ─────────── */
.work{background:var(--bf-cream);padding:var(--section-pad) var(--gutter)}
.work-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.work-card{background:var(--bf-paper);border:1px solid rgba(10,10,10,.1);padding:1.4rem 1.4rem 2rem;transition:transform 400ms var(--ease-emphasis),box-shadow 400ms}
.work-card:hover{transform:translateY(-.5rem);box-shadow:0 2.4rem 4rem -1.4rem rgba(10,10,10,.25)}
.work-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center top;background:var(--bf-cream);border:1px solid rgba(10,10,10,.06)}
.work-card__cap{margin-top:1.4rem;display:flex;flex-direction:column;gap:.4rem;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.work-card__cap .name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.5rem;letter-spacing:-.01em;text-transform:none}
.work-card__cap .meta{color:var(--bf-red)}
.work-card__cap .meta.blue{color:var(--bf-blue)}

/* ─────────── Scrapbook (home selected work) ─────────── */
.scrapbook{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.polaroid{background:var(--bf-paper);padding:1.4rem 1.4rem 2rem;box-shadow:0 1.6rem 2.8rem -1rem rgba(10,10,10,.18);transition:transform 500ms var(--ease-emphasis),box-shadow 500ms}
.polaroid:nth-child(odd){transform:rotate(-1.4deg)}
.polaroid:nth-child(even){transform:rotate(1.4deg)}
.polaroid:hover{transform:rotate(0) translateY(-.5rem) scale(1.02);box-shadow:0 3rem 4.4rem -1rem rgba(10,10,10,.28);position:relative;z-index:5}
.polaroid img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center top}
.polaroid .cap{margin-top:1.2rem;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;display:flex;flex-direction:column;gap:.4rem}
.polaroid .cap .name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:1.5rem;text-transform:none;letter-spacing:-.01em}
.polaroid .cap .meta{color:var(--bf-red)}
.polaroid .cap .meta.blue{color:var(--bf-blue)}

/* ─────────── Split feature (image + copy) ─────────── */
.split{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.split__media{aspect-ratio:4/3;background:var(--bf-blue);border:1px solid rgba(10,10,10,.1);overflow:hidden}
.split__media img{width:100%;height:100%;object-fit:cover}

/* ─────────── Call bar (mobile) ─────────── */
.call-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--bf-red);color:var(--bf-paper);text-align:center;padding:1.4rem;font-family:'IBM Plex Mono',monospace;font-size:1.2rem;letter-spacing:.1em;text-transform:uppercase}

/* ─────────── Footer ─────────── */
.foot{background:var(--bf-ink);color:var(--bf-paper);padding:var(--section-pad) var(--gutter) 3.2rem}
.foot__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4.8rem;margin-bottom:6rem}
.foot__brand .nav__logo{color:var(--bf-paper)}
.foot__brand .nav__logo .co{color:rgba(255,255,255,.5)}
.foot__brand p{margin-top:1.9rem;font-size:1.5rem;line-height:1.55;color:rgba(255,255,255,.6);max-width:40ch}
.foot__social{list-style:none;display:flex;gap:1.6rem;margin-top:1.9rem}
.foot__social a{font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.foot__social a:hover{color:var(--bf-red)}
.foot__col h4{font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1.9rem}
.foot__col ul{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
.foot__col a{font-size:1.5rem;color:rgba(255,255,255,.85)}
.foot__col a:hover{color:var(--bf-red)}
.foot__bottom{max-width:var(--container-max);margin:0 auto;border-top:1px solid rgba(255,255,255,.15);padding-top:3.2rem;display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.foot__bottom .flag{display:flex;align-items:center;gap:.96rem}
.foot__bottom .flag a:hover{color:var(--bf-red)}
.foot__bottom .txflag{display:block;width:2.4rem;height:1.6rem;border:1px solid rgba(255,255,255,.2)}

/* ─────────── Reveal helper ─────────── */
.fade-up{opacity:0;transform:translateY(3rem);transition:opacity 900ms var(--ease-quiet),transform 900ms var(--ease-quiet)}
.fade-up.is-in{opacity:1;transform:none}

/* ─────────── Responsive ─────────── */
@media(max-width:900px){
  .nav__burger{display:inline-flex;align-items:center;justify-content:center;width:4.4rem;height:4.4rem;border:1px solid rgba(10,10,10,.18)}
  .nav__burger span,.nav__burger span::before,.nav__burger span::after{content:'';display:block;width:2rem;height:2px;background:var(--bf-ink);transition:transform 300ms,opacity 200ms}
  .nav__burger span{position:relative}
  .nav__burger span::before{position:absolute;top:-.6rem}
  .nav__burger span::after{position:absolute;top:.6rem}
  .nav__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bf-paper);border-bottom:1px solid rgba(10,10,10,.1);max-height:0;overflow:hidden;transition:max-height 360ms var(--ease-quiet)}
  .nav__links a{padding:1.8rem var(--gutter);border-top:1px solid rgba(10,10,10,.07);font-size:1.3rem}
  .nav__cta{background:var(--bf-ink);color:var(--bf-paper)}
  .nav__toggle:checked ~ .nav__links{max-height:40rem}
  .nav__toggle:checked ~ .nav__burger span{background:transparent}
  .nav__toggle:checked ~ .nav__burger span::before{transform:translateY(.6rem) rotate(45deg)}
  .nav__toggle:checked ~ .nav__burger span::after{transform:translateY(-.6rem) rotate(-45deg)}

  .hero{padding-top:13rem}
  .hero__bottom{grid-template-columns:1fr;gap:3rem}
  .hero__meta{gap:2.4rem;flex-wrap:wrap}
  .sec-head{grid-template-columns:1fr;gap:2.4rem;margin-bottom:4.8rem}
  .stats__inner{grid-template-columns:repeat(2,1fr);gap:3.2rem 2.4rem}
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:18rem}
  .tile h3{font-size:2.2rem}
  .tile--big h3{font-size:3rem}
  .grid--2,.grid--3,.grid--split,.story__grid,.area__grid,.faq__grid,.cta__grid,.contact-grid,.split,.work-grid,.scrapbook{grid-template-columns:1fr;gap:4rem}
  .quote-grid{grid-template-columns:1fr;gap:2.4rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr;gap:3.2rem}
  .checklist--grid{grid-template-columns:1fr}
  .polaroid{transform:none!important}
  .call-bar{display:block}
  body{padding-bottom:5rem}
}
@media(max-width:560px){
  .mosaic{grid-template-columns:1fr;grid-auto-rows:auto}
  .tile,.tile--big,.tile--wide,.tile--tall{grid-column:auto;grid-row:auto;min-height:15rem}
  .steps{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:2.6rem}
  .hero__top .location{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .fade-up{opacity:1!important;transform:none!important}
  .strip__row{animation:none}
  html{scroll-behavior:auto}
}

/* ===== Pricing / packages ===== */
.pricing__head{max-width:var(--container-narrow);margin:0 auto 4rem;text-align:center}
.pricing__head .label{display:inline-block;margin-bottom:1.2rem}
.pricing__cadence{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;letter-spacing:.04em;color:var(--bf-mute);margin-top:1rem}
.pricing__grid{align-items:stretch}
.pricing__grid--solo{grid-template-columns:minmax(0,44rem);justify-content:center}
.ptier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(10,10,10,.12);padding:3.2rem 2.8rem;transition:transform 300ms var(--ease-quiet),border-color 300ms,box-shadow 300ms}
.ptier:hover{transform:translateY(-4px);border-color:rgba(10,10,10,.28);box-shadow:0 1.6rem 4rem rgba(10,10,10,.08)}
.ptier--featured{border:2px solid var(--bf-blue);box-shadow:0 1.6rem 4rem rgba(0,32,91,.1)}
.ptier__badge{position:absolute;top:0;left:2.8rem;transform:translateY(-50%);background:var(--bf-red);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;padding:.5rem 1.1rem}
.ptier__name{font-family:'Montserrat',sans-serif;font-weight:900;font-size:2rem;letter-spacing:-.01em;text-transform:uppercase;line-height:1.05;margin:.4rem 0 1.4rem}
.ptier__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem;padding-bottom:1.8rem;border-bottom:1px solid rgba(10,10,10,.1)}
.ptier__amt{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(3.4rem,4vw,4.4rem);line-height:1;color:var(--bf-blue);letter-spacing:-.02em}
.ptier--featured .ptier__amt{color:var(--bf-red)}
.ptier__unit{font-family:'IBM Plex Mono',monospace;font-size:1.3rem;color:var(--bf-mute)}
.ptier__summary{font-size:1.55rem;line-height:1.5;color:#26241f;margin-bottom:2.2rem}
.ptier__features{margin-bottom:2.8rem}
.ptier__features li{font-size:1.5rem}
.ptier__cta{margin-top:auto;align-self:flex-start}
.pricing__note,.pricing__more{max-width:var(--container-narrow);margin:3.2rem auto 0;text-align:center;font-size:1.5rem;line-height:1.6;color:var(--bf-mute)}
.pricing__note em{font-style:italic;color:#26241f}
.pricing__more{margin-top:1.6rem;font-family:'IBM Plex Mono',monospace;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase}
.pricing__more a{color:var(--bf-red);border-bottom:1px solid rgba(200,16,46,.3)}
.pricing__more a:hover{border-color:var(--bf-red)}
.sec--ink{background:var(--bf-ink)}
.pricing-bundle .prose{max-width:var(--container-narrow)}
.pricing-bundle h2{font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.8rem,3.8vw,4.6rem);margin:1.2rem 0 1.8rem}
.pricing-bundle p{font-size:1.8rem;line-height:1.65}
@media(max-width:900px){
  .ptier__cta{align-self:stretch;justify-content:center}
}

/* ===== Showcase image band (service / business-type pages) ===== */
.showcase-band{background:var(--bf-cream);padding:clamp(4rem,7vw,7rem) var(--gutter)}
.showcase{max-width:var(--container-max);margin:0 auto;text-align:center}
.showcase img{width:100%;max-width:84rem;height:auto;display:block;margin:0 auto}
.showcase--photo img{max-width:58rem;border:.9rem solid #fff;box-shadow:0 1.6rem 4rem rgba(10,10,10,.14)}
.showcase figcaption{font-family:'IBM Plex Mono',monospace;font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;color:var(--bf-mute);margin-top:1.8rem}

/* ===== Area local-photo gallery ===== */
.area-photos{background:var(--bf-cream)}
.area-photos__head{text-align:center;margin-bottom:3rem}
.area-photos__head .label{display:inline-block}
.area-photos__grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.area-photos__item{overflow:hidden;border:1px solid rgba(10,10,10,.1);background:var(--bf-paper)}
.area-photos__item img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 600ms var(--ease-quiet)}
.area-photos__item:hover img{transform:scale(1.05)}
@media(max-width:760px){.area-photos__grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.area-photos__grid{grid-template-columns:1fr}}

/* ===== Lead form checkbox group ===== */
.field__lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bf-mute);margin-bottom:1.2rem}
.checkgroup{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.6rem}
.checkgroup .checkopt{display:flex;align-items:center;gap:.9rem;margin:0;font-family:'Inter',system-ui,sans-serif;font-weight:400;font-size:1.5rem;letter-spacing:normal;text-transform:none;line-height:1.3;color:var(--bf-ink);cursor:pointer}
.checkgroup .checkopt span{color:var(--bf-ink)}
.checkgroup .checkopt input{width:1.9rem;height:1.9rem;padding:0;border:0;accent-color:var(--bf-red);flex-shrink:0;cursor:pointer}
@media(max-width:560px){.checkgroup{grid-template-columns:1fr}}

/* ===== Insights glossary (DefinedTermSet) ===== */
.glossary-jump{display:flex;flex-wrap:wrap;gap:.8rem;margin:3.2rem 0 1rem}
.glossary-jump a{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:1.15rem;letter-spacing:.04em;color:var(--bf-blue);text-decoration:none;padding:.7rem 1.3rem;border:1px solid rgba(0,32,91,.22);border-radius:999px;background:var(--bf-paper);transition:background 200ms var(--ease-quiet),color 200ms var(--ease-quiet),border-color 200ms var(--ease-quiet)}
.glossary-jump a:hover{background:var(--bf-blue);color:#fff;border-color:var(--bf-blue)}
.glossary-group{margin-top:5.6rem;scroll-margin-top:9rem}
.glossary-group__title{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(2.2rem,3.4vw,3rem);line-height:1.1;color:var(--bf-ink);padding-bottom:1.4rem;border-bottom:3px solid var(--bf-red);margin-bottom:.8rem}
.glossary{margin:0}
.glossary__item{display:grid;grid-template-columns:minmax(0,22rem) 1fr;gap:1.2rem 3.2rem;padding:2.4rem 0;border-bottom:1px solid rgba(10,10,10,.1);scroll-margin-top:9rem}
.glossary__term{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.9rem;line-height:1.25;color:var(--bf-blue)}
.glossary__def{font-family:'Inter',system-ui,sans-serif;font-size:1.7rem;line-height:1.6;color:var(--bf-ink);margin:0}
@media(max-width:760px){
  .glossary__item{grid-template-columns:1fr;gap:.6rem;padding:2rem 0}
  .glossary__term{font-size:1.8rem}
  .glossary__def{font-size:1.6rem}
}