/* ============================================================
   FOUNDRECO — design system
   ============================================================ */
:root{
  --lime:#BEE870;      --lime-h:#C8EC88;   --lime-soft:#F8FDF1;  --lime-ink:#2E391B;
  --deep:#00584D;      --deep-2:#00463D;   --deep-h:#E7EEED;     --deep-p:#A8C3BE;
  --black:#000;        --ink:#191919;      --ink-2:#0E0E0E;
  --white:#fff;        --grey:#F4F4F4;     --grey-2:#E9E9E9;
  --p:#323232;         --p-light:#636363;  --p-dull:#959595;
  --line:#E4E4E4;      --line-2:#C6C6C6;   --on-black-p:#C6C6C6;
  --r-sec:40px;  --r-card:24px;  --r-sm:14px;  --r-pill:999px;
  --maxw:1200px; --gut:20px;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-head:'Inter Tight',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-ser:'Instrument Serif',Georgia,serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;padding:12px var(--gut) 20px;background:var(--white);color:var(--p);
  font-family:var(--f-body);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--lime);color:var(--lime-ink)}

/* ---------- type ---------- */
h1,h2,h3,h4,h5{font-family:var(--f-head);margin:0;color:var(--black);letter-spacing:-.015em}
h1{font-size:clamp(38px,6.2vw,66px);line-height:1.08;font-weight:600;letter-spacing:-.03em}
.h-xl{font-size:clamp(32px,4.8vw,56px);line-height:1.1;font-weight:600;letter-spacing:-.028em}
.h-lg{font-size:clamp(29px,4.2vw,50px);line-height:1.12;font-weight:600;letter-spacing:-.026em}
.h-md{font-size:clamp(24px,2.6vw,32px);line-height:1.26;font-weight:500;letter-spacing:-.018em}
.h-sm{font-size:clamp(20px,2vw,24px);line-height:1.28;font-weight:600;letter-spacing:-.015em}
.ser{font-family:var(--f-ser);font-style:italic;font-weight:400;letter-spacing:-.01em}
p{margin:0}
.lede{font-family:var(--f-head);font-size:clamp(16px,1.35vw,18px);line-height:1.62;color:var(--p-light);font-weight:400}
.body-p{font-size:16px;line-height:1.62;color:var(--p-light);font-weight:400}
.small{font-size:14px;line-height:1.55;color:var(--p-dull)}

/* eyebrow */
/* Section label. Inter Tight, not mono: tiny wide-tracked monospace caps read as
   filler. Larger, tighter and heavier reads as a deliberate kicker. */
.eyebrow{font-family:var(--f-head);font-size:14.5px;font-weight:600;letter-spacing:.035em;
  text-transform:uppercase;color:var(--p);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.eyebrow.on-dark{color:var(--on-black-p)}
.eyebrow.on-deep{color:var(--deep-p)}
.num-lab{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--p-dull)}

/* ---------- layout ---------- */
.sec{max-width:none;padding:clamp(64px,7vw,104px) clamp(20px,4vw,56px);position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%}
.block{border-radius:var(--r-sec);overflow:hidden;position:relative}
.block.dark{background:var(--ink);color:var(--on-black-p)}
.block.dark h1,.block.dark h2,.block.dark h3,.block.dark h4,.block.dark h5{color:#FEFEFE}
.block.deep{background:var(--deep);color:var(--deep-p)}
.block.deep h1,.block.deep h2,.block.deep h3,.block.deep h4,.block.deep h5{color:var(--deep-h)}
.block.soft{background:var(--grey)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(28px,5vw,72px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(24px,5vw,72px);align-items:start}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:600;
  font-size:15px;line-height:1;padding:15px 24px;border-radius:var(--r-pill);
  position:relative;overflow:hidden;transition:transform .45s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;border:1.5px solid transparent;will-change:transform}
.btn .ico{transition:transform .4s var(--ease)}
.btn:hover .ico{transform:translate(3px,-3px)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:var(--ink)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{background:var(--lime-h)}
.btn-white{background:#fff;color:#000}
.btn-ghost{border-color:var(--line-2);color:var(--black);background:transparent}
.btn-ghost:hover{background:var(--black);color:#fff;border-color:var(--black)}
.btn-ghost-d{border-color:rgba(255,255,255,.28);color:#fff;background:transparent}
.btn-ghost-d:hover{background:#fff;color:#000;border-color:#fff}
.btn-lg{padding:18px 30px;font-size:16px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-head);font-size:13.5px;font-weight:500;
  padding:8px 15px;border-radius:var(--r-pill);background:var(--grey);color:var(--p);white-space:nowrap;
  transition:background .3s,color .3s,transform .3s var(--ease)}
.pill:hover{transform:translateY(-2px)}
.pill.line{background:transparent;border:1px solid var(--line-2);color:var(--p-light)}
.pill.lime{background:var(--lime);color:var(--lime-ink)}
.pill.on-dark{background:rgba(255,255,255,.08);color:#E6E6E6}
.pill.on-deep{background:rgba(255,255,255,.09);color:var(--deep-h)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:12px;left:var(--gut);right:var(--gut);z-index:900;
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:16px;border:1px solid var(--line);
  box-shadow:0 2px 20px rgba(0,0,0,.05);
  transition:transform .55s var(--ease),box-shadow .35s,background .35s}
.nav.up{transform:translateY(calc(-100% - 16px))}
.nav.scrolled{box-shadow:0 8px 34px rgba(0,0,0,.09)}
.nav-in{max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:11px 12px 11px 20px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:700;
  font-size:20px;letter-spacing:-.03em;color:#000}
.brand svg{width:24px;height:24px;color:var(--deep);flex:none}
.brand .dot{color:var(--lime)}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>li{position:relative}
.nl{display:flex;align-items:center;gap:5px;font-family:var(--f-head);font-size:14.5px;font-weight:500;
  color:var(--p);padding:9px 13px;border-radius:10px;transition:background .25s,color .25s}
.nl:hover{background:var(--grey);color:#000}
.nl .car{width:9px;height:9px;transition:transform .3s var(--ease);opacity:.55}
.nav-links>li:hover .car{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,8px);
  min-width:262px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:9px;
  box-shadow:0 22px 60px rgba(0,0,0,.13);opacity:0;visibility:hidden;transition:.32s var(--ease)}
.nav-links>li:hover .dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
.dd a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-radius:11px;
  font-family:var(--f-head);font-size:14px;font-weight:500;color:var(--p);transition:background .22s,color .22s}
.dd a:hover{background:var(--lime-soft);color:#000}
.dd a span{font-family:var(--f-mono);font-size:11px;color:var(--p-dull)}
.nav-cta{display:flex;align-items:center;gap:9px}
.burger{display:none;width:42px;height:42px;border-radius:11px;align-items:center;justify-content:center;
  border:1px solid var(--line)}
.burger i{display:block;width:17px;height:1.7px;background:#000;position:relative;transition:.3s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:1.7px;background:#000;transition:.3s var(--ease)}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
.burger.on i{background:transparent}
.burger.on i::before{top:0;transform:rotate(45deg)}
.burger.on i::after{top:0;transform:rotate(-45deg)}
.mnav{position:fixed;inset:12px var(--gut) 20px;z-index:890;background:#fff;border-radius:26px;
  border:1px solid var(--line);padding:84px 26px 26px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.4s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav .fh{font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-dull);margin:22px 0 8px}
.mnav a{display:block;font-family:var(--f-head);font-size:19px;font-weight:500;color:#000;padding:9px 0;
  border-bottom:1px solid var(--line)}

/* ============================================================
   HERO
   ============================================================ */
.hero{border-radius:var(--r-sec);overflow:hidden;position:relative;background:#04140F;
  min-height:min(92vh,880px);display:flex;align-items:center;justify-content:center;
  padding:150px 24px 92px;text-align:center;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .mesh{position:absolute;inset:-30%;
  background:
    radial-gradient(46% 42% at 20% 26%,rgba(0,88,77,.95),transparent 62%),
    radial-gradient(40% 40% at 78% 22%,rgba(190,232,112,.24),transparent 64%),
    radial-gradient(52% 48% at 62% 82%,rgba(0,110,92,.68),transparent 66%),
    radial-gradient(36% 34% at 12% 84%,rgba(190,232,112,.14),transparent 62%);
  filter:blur(28px);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.07)}100%{transform:translate3d(3%,-2%,0) scale(1.03)}}
.hero-bg .grid{position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000 25%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 42%,#000 25%,transparent 78%)}
.hero-bg .vig{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.12) 34%,rgba(0,0,0,.55) 100%)}
.hero-in{position:relative;z-index:2;max-width:1000px;width:100%}

/* rating cluster */
.rating{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:34px}
.rating-top{display:flex;align-items:center;gap:9px}
.rating-top b{font-family:var(--f-head);font-size:19px;font-weight:600;color:#fff}
.stars{display:flex;gap:2.5px}
.stars svg{width:15px;height:15px;color:var(--lime)}
.rating-sub{font-family:var(--f-head);font-size:13px;color:rgba(255,255,255,.72);font-weight:400}
.laurels{display:flex;align-items:center;justify-content:center;gap:14px}
.laurels>div{min-width:0}
.laurels svg.lf{width:26px;height:54px;color:rgba(255,255,255,.55);flex:none}
.badge-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px}
.plat{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:12.5px;font-weight:600;
  letter-spacing:.01em;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:6px 11px;
  backdrop-filter:blur(6px)}
/* brand marks stay monochrome: lime is the only accent on this page */
.plat svg{width:13px;height:13px;flex:none;opacity:.92}
.plat svg.wm{width:30px;height:10px}

/* headline */
.hero h1{color:#fff;margin-bottom:0}
.hero h1 .ser{color:var(--lime)}
.hero-line{display:block}
.word{display:inline-block;white-space:nowrap}
.msk{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.msk>i{display:inline-block;font-style:inherit;transform:translateY(105%);opacity:0}
.hero.go .msk>i{animation:rise .95s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0);opacity:1}}
.hpill{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;background:var(--lime);color:var(--lime-ink);
  border-radius:var(--r-pill);padding:.14em .42em .18em;font-size:.62em;font-weight:600;font-family:var(--f-head);
  letter-spacing:-.01em;transform:translateY(-.06em);box-shadow:0 8px 34px rgba(190,232,112,.34);
  transition:transform .4s var(--ease)}
.hpill:hover{transform:translateY(-.06em) scale(1.04)}
.hpill svg{width:.85em;height:.85em}
.hero-sub{max-width:640px;margin:26px auto 0;font-family:var(--f-head);font-size:clamp(15px,1.35vw,17.5px);
  line-height:1.6;color:rgba(255,255,255,.8);font-weight:400}
.hero-sub b{color:#fff;font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:34px}
/* .row is used for every button pair on the site — page heroes and the closing
   CTA on all 39 pages — but only ever had a scoped rule under .fcta. Everywhere
   else it was a plain block, so the buttons sat with no gap and their rounded
   ends touched once they stacked. It also meant the inline justify-content on
   some of them did nothing, there being no flex container to align. */
.row{display:flex;flex-wrap:wrap;align-items:center;gap:11px}
.avail{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-family:var(--f-head);font-size:13.5px;font-weight:500;
  letter-spacing:.05em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:8px 15px;backdrop-filter:blur(6px)}
.avail .led{position:relative;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.avail .led::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--lime);
  animation:pulse 2.1s infinite;will-change:transform,opacity}
@keyframes pulse{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3.3);opacity:0}}

/* ============================================================
   MARQUEE STRIP
   ============================================================ */
.strip{display:flex;align-items:center;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);
  margin:0 clamp(4px,2vw,20px)}
.strip-lab{font-family:var(--f-head);font-size:13.5px;color:var(--p-dull);white-space:nowrap;flex:none;
  padding-left:clamp(8px,2vw,28px)}
.mq{overflow:hidden;flex:1;min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:clamp(34px,5vw,64px);width:max-content;animation:slide 42s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
/* real client logos; greyscale keeps a mixed-brand row visually coherent */
.lgo{flex:none;display:flex;align-items:center;justify-content:center;height:40px;
  opacity:.62;transition:opacity .3s var(--ease)}
.lgo img{max-height:40px;max-width:132px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);transition:filter .3s var(--ease)}
.lgo:hover{opacity:1}
.lgo:hover img{filter:none}
@media(max-width:640px){
  .lgo{height:32px}
  .lgo img{max-height:32px;max-width:104px}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-photo{position:relative;width:min(100%,340px)}
.about-photo .arc{position:absolute;inset:-14px;z-index:0}
.about-photo .arc svg{width:100%;height:100%}
.ph-mask{position:relative;z-index:1;aspect-ratio:1/1;overflow:hidden;
  border-radius:56% 44% 52% 48%/48% 52% 48% 52%;background:var(--grey)}
.ph-mask img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  transition:transform 1s var(--ease)}
.about-photo:hover .ph-mask img{transform:scale(1.05)}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px 24px;
  display:flex;flex-direction:column;gap:34px;transition:border-color .35s,transform .5s var(--ease),box-shadow .4s}
.stat:hover{border-color:var(--lime);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.06)}
.stat .n{font-family:var(--f-head);font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1}
.stat .v{font-family:var(--f-head);font-size:clamp(30px,3.4vw,42px);font-weight:600;color:#000;line-height:1;letter-spacing:-.03em}
.stat .c{font-size:13.5px;color:var(--p-light);margin-top:8px;line-height:1.45}

/* ============================================================
   WORK / CASE CARDS (sticky stack)
   ============================================================ */
.stack{display:flex;flex-direction:column;gap:22px}
.case{position:sticky;border-radius:var(--r-sec);overflow:hidden;background:var(--ink);
  min-height:clamp(420px,58vw,600px);display:flex;align-items:flex-end;padding:clamp(18px,2.4vw,28px);
  transition:box-shadow .4s}
.case-bg{position:absolute;inset:0;z-index:0}
.case-bg .fill{position:absolute;inset:0}
.case-bg .noise{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:22px 22px}
.case-vis{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(30px,5vw,64px) clamp(20px,4vw,60px) clamp(90px,12vw,150px)}
.case-card{position:relative;z-index:3;background:#fff;border-radius:var(--r-card);padding:24px 26px;
  max-width:400px;box-shadow:0 26px 70px rgba(0,0,0,.24);
  transform:translateY(14px);opacity:0;transition:.7s var(--ease)}
.case.in .case-card{transform:none;opacity:1}
.case-card h3{font-size:23px;font-weight:600;margin-bottom:9px}
.case-card p{font-size:14.5px;line-height:1.55;color:var(--p-light);margin-bottom:15px}
.case-card .go{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;transition:gap .3s var(--ease)}
.case-card .go svg{width:12px;height:12px;flex:none}
.case-card .go:hover{gap:11px}
/* real product screenshot in place of the CSS device mockups */
.case-shot{width:min(100%,700px);border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.case-shot img{display:block;width:100%;height:auto}
.case-idx{position:absolute;top:clamp(16px,2.2vw,26px);right:clamp(22px,3vw,34px);z-index:3;
  font-family:var(--f-head);font-size:clamp(22px,2.4vw,30px);font-weight:700;letter-spacing:-.02em;
  color:#fff;line-height:1}
.case-idx i{font-style:normal;color:var(--lime)}

/* device mockups (pure CSS) */
.dev-lap{width:min(100%,660px);position:relative;transform:perspective(1500px) rotateX(9deg);transform-style:preserve-3d}
.dev-lap .scr{background:#fff;border:9px solid #1b1b1b;border-radius:14px 14px 4px 4px;aspect-ratio:16/10;
  overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.dev-lap .base{height:13px;background:linear-gradient(#2a2a2a,#151515);border-radius:0 0 12px 12px;
  margin:0 -3%;box-shadow:0 22px 40px rgba(0,0,0,.5)}
.dev-ph{width:clamp(150px,17vw,196px);border:8px solid #1b1b1b;border-radius:30px;overflow:hidden;
  aspect-ratio:9/19;background:#fff;box-shadow:0 34px 70px rgba(0,0,0,.5);position:relative;flex:none}
.dev-ph::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:38%;height:15px;
  background:#1b1b1b;border-radius:99px;z-index:4}
.phones{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,24px)}
.phones .dev-ph:nth-child(1){transform:rotate(-7deg) translateY(16px)}
.phones .dev-ph:nth-child(3){transform:rotate(7deg) translateY(16px)}
/* fake ui */
.ui{height:100%;display:flex;flex-direction:column;font-family:var(--f-body)}
.ui-top{height:12%;background:var(--deep);display:flex;align-items:center;gap:5px;padding:0 9%}
.ui-top i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);display:block}
.ui-body{flex:1;padding:8% 8% 0;display:flex;flex-direction:column;gap:6%;background:#F7F9F7}
.ui-hero{height:24%;border-radius:9px;background:linear-gradient(120deg,var(--deep),#0a7a66)}
.ui-hero.lime{background:linear-gradient(120deg,var(--lime),#8FCB4A)}
.ui-row{display:flex;gap:5%}
.ui-box{flex:1;height:38px;border-radius:7px;background:#E6EBE7}
.ui-box.a{background:var(--lime);opacity:.85}
.ui-ln{height:7px;border-radius:99px;background:#DFE5E0}
.ui-ln.s{width:58%}
.ui-ln.m{width:78%}
.ui-bars{display:flex;align-items:flex-end;gap:6px;height:32%;padding-top:4%}
.ui-bars span{flex:1;background:var(--lime);border-radius:4px 4px 0 0;opacity:.9}
.ui-side{display:flex;height:100%}
.ui-nav{width:15%;background:#0F1512;display:flex;flex-direction:column;gap:9px;padding:5% 4%}
.ui-nav i{height:8px;border-radius:3px;background:rgba(255,255,255,.16);display:block}
.ui-nav i:first-child{background:var(--lime)}
.ui-main{flex:1;background:#F7F9F7;padding:4%;display:flex;flex-direction:column;gap:9px}
.ui-cards{display:flex;gap:8px}
.ui-cards div{flex:1;height:44px;border-radius:8px;background:#fff;border:1px solid #E6EBE7}
.ui-chart{flex:1;border-radius:9px;background:#fff;border:1px solid #E6EBE7;padding:10px;display:flex;align-items:flex-end;gap:5px}
.ui-chart span{flex:1;border-radius:3px 3px 0 0;background:var(--deep);opacity:.75}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:44px}
.svc{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px 26px 24px;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  transition:border-color .4s,transform .55s var(--ease),box-shadow .45s}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,var(--lime-soft),transparent 62%);
  opacity:0;transition:opacity .45s}
.svc:hover{border-color:var(--lime);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.07)}
.svc:hover::before{opacity:1}
.svc>*{position:relative;z-index:1}
.svc-n{font-family:var(--f-head);font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1}
.svc h3{font-size:clamp(20px,2vw,23px);font-weight:600;line-height:1.22}
.svc p{font-size:14.8px;line-height:1.58;color:var(--p-light);flex:1}
.svc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-top:16px;margin-top:2px;border-top:1px solid var(--line)}
.svc-price{font-family:var(--f-head);font-size:19px;font-weight:600;color:#000;line-height:1.15;letter-spacing:-.02em}
.svc-price small{display:block;font-family:var(--f-mono);font-size:11.5px;font-weight:400;color:var(--p-dull);
  letter-spacing:.04em;margin-top:5px}
.svc-go{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  flex:none;transition:.4s var(--ease)}
.svc-go svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.svc:hover .svc-go{background:var(--lime);border-color:var(--lime)}
.svc:hover .svc-go svg{transform:translate(2px,-2px)}
/* flagship */
.svc.flag{background:var(--deep);border-color:var(--deep);color:var(--deep-p);
  grid-column:span 2}
.svc.flag::before{background:radial-gradient(120% 110% at 80% 0%,rgba(190,232,112,.2),transparent 60%);opacity:1}
.svc.flag h3,.svc.flag .svc-price{color:#fff}
.svc.flag p{color:var(--deep-p)}
.svc.flag .svc-n{color:var(--deep-p)}
.svc.flag .svc-foot{border-top-color:rgba(255,255,255,.16)}
.svc.flag .svc-price small{color:var(--deep-p)}
.svc.flag .svc-go{border-color:rgba(255,255,255,.3);color:#fff}
.svc.flag:hover{border-color:var(--lime)}
.tagline{position:absolute;top:0;right:0;background:var(--lime);color:var(--lime-ink);
  font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.04em;
  padding:7px 15px;border-radius:0 var(--r-card) 0 14px;z-index:2}
/* retainer strip */
.retainer{margin-top:16px;background:var(--grey);border-radius:var(--r-card);padding:26px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.retainer h3{font-size:20px;font-weight:600;margin-bottom:6px}
.retainer p{font-size:14.5px;color:var(--p-light);max-width:620px}
.retainer .amt{font-family:var(--f-head);font-size:26px;font-weight:600;color:#000;white-space:nowrap;letter-spacing:-.02em}

/* ============================================================
   GUARANTEES
   ============================================================ */
.gz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:46px}
.gz-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-card);
  padding:26px 24px 24px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  transition:border-color .4s,background .4s,transform .55s var(--ease)}
.gz-card:hover{border-color:var(--lime);background:rgba(190,232,112,.06);transform:translateY(-5px)}
.gz-ic{width:46px;height:46px;border-radius:13px;background:rgba(190,232,112,.13);display:grid;place-items:center;
  color:var(--lime);flex:none}
.gz-ic svg{width:22px;height:22px}
.gz-card .fear{font-family:var(--f-ser);font-style:italic;font-size:16.5px;line-height:1.45;color:#9C9C9C}
.gz-card h3, .gz-card h4{font-size:19px;font-weight:600;line-height:1.28;color:#fff}
.gz-card p{font-size:14.5px;line-height:1.58;color:var(--on-black-p)}
.gz-card p b{color:#fff;font-weight:600}
.gz-num{position:absolute;top:20px;right:22px;font-family:var(--f-head);font-size:20px;font-weight:700;
  letter-spacing:-.01em;color:rgba(255,255,255,.5)}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,5vw,64px);
  align-items:end;margin-bottom:48px}
.tst-score{display:flex;flex-direction:column;gap:6px}
.tst-score .big{font-family:var(--f-head);font-size:clamp(46px,6vw,64px);font-weight:600;color:#fff;line-height:1;letter-spacing:-.035em}
.tst-score .lab{font-size:14px;color:var(--on-black-p)}
.tst-score .rr{display:flex;align-items:center;gap:8px;margin-top:12px}
.tst-score .rr b{font-family:var(--f-head);font-size:17px;color:#fff;font-weight:600}
.tmq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.tmq-track{display:flex;gap:16px;width:max-content;animation:slide 78s linear infinite}
.tmq:hover .tmq-track{animation-play-state:paused}
.tmq+.tmq{margin-top:16px}
.tmq.rev .tmq-track{animation-direction:reverse;animation-duration:88s}
.tcard{width:min(82vw,382px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:16px;flex:none;
  transition:border-color .35s,background .35s}
.tcard:hover{border-color:rgba(190,232,112,.5);background:rgba(190,232,112,.05)}
.tcard .stars svg{width:14px;height:14px}
.tcard blockquote{margin:0;font-family:var(--f-head);font-size:15.5px;line-height:1.58;color:#E9E9E9;flex:1}
.who{display:flex;align-items:center;gap:11px}
.av{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;
  font-family:var(--f-head);font-size:13px;font-weight:700;flex:none;letter-spacing:.02em}
.who .n{font-family:var(--f-head);font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.who .r{font-size:12.5px;color:var(--p-dull)}

/* ============================================================
   PROCESS
   ============================================================ */
.proc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,204px),1fr));gap:16px;margin-top:48px}
.pstep{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 24px 20px;
  position:relative;min-height:214px;display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .4s,transform .55s var(--ease),box-shadow .4s}
.pstep::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lime);transition:width .6s var(--ease)}
.pstep:hover{border-color:var(--line-2);transform:translateY(-5px);box-shadow:0 18px 44px rgba(0,0,0,.06)}
.pstep:hover::after{width:100%}
.pstep h3, .pstep h4{font-size:18px;font-weight:600;margin-bottom:9px;line-height:1.26}
.pstep p{font-size:14px;line-height:1.55;color:var(--p-light);flex:1}
.pstep .pn{font-family:var(--f-head);font-size:30px;font-weight:600;color:var(--line-2);align-self:flex-end;
  line-height:1;letter-spacing:-.03em;transition:color .4s}
.pstep:hover .pn{color:var(--deep)}

/* ============================================================
   CAPABILITIES / AI EDGE (deep green)
   ============================================================ */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin-top:46px}
.cap-col{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:24px}
.cap-col h3, .cap-col h4{font-size:17px;font-weight:600;margin-bottom:14px;color:#fff}
.cap-col li{display:flex;gap:10px;font-size:14.3px;line-height:1.5;color:var(--deep-p);padding:6px 0}
.cap-col li svg{width:15px;height:15px;color:var(--lime);flex:none;margin-top:3px}
.punch{margin-top:44px;font-family:var(--f-head);font-size:clamp(22px,3.2vw,38px);line-height:1.24;
  font-weight:500;color:#fff;letter-spacing:-.022em;max-width:900px}
.punch .ser{color:var(--lime)}
.cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin-top:40px}
.cmp-side{border-radius:var(--r-card);padding:26px;border:1px solid rgba(255,255,255,.12)}
.cmp-side.old{background:rgba(0,0,0,.16)}
.cmp-side.new{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.cmp-side .tg{font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--deep-p);display:block;margin-bottom:14px}
.cmp-side.new .tg{color:#4A6220}
.cmp-side .big{font-family:var(--f-head);font-size:clamp(32px,4.4vw,48px);font-weight:600;line-height:1;
  letter-spacing:-.035em;color:#fff;margin-bottom:12px}
.cmp-side.new .big{color:var(--lime-ink)}
.cmp-side p{font-size:14.5px;line-height:1.55;color:var(--deep-p)}
.cmp-side.new p{color:#3D5219}

/* ============================================================
   ESTIMATOR
   ============================================================ */
.est{background:#fff;border:1px solid var(--line);border-radius:var(--r-sec);padding:clamp(26px,4vw,44px);margin-top:44px}
.eq+.eq{margin-top:30px}
.eq .ql{display:block;font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-dull);margin-bottom:14px}
.eopts{display:flex;flex-wrap:wrap;gap:9px}
.eopt{font-family:var(--f-head);font-size:14.5px;font-weight:500;padding:11px 18px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--p);transition:.32s var(--ease)}
.eopt:hover{border-color:#000;color:#000}
.eopt.sel{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:600}
.eout{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.eout .el{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--p-dull)}
.eout .en{font-family:var(--f-head);font-size:clamp(28px,3.6vw,42px);font-weight:600;color:#000;
  letter-spacing:-.03em;line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums}
.enote{margin-top:20px;font-size:13px;color:var(--p-dull);line-height:1.5}

/* ============================================================
   FIT
   ============================================================ */
.fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-top:44px}
.fitc{border:1px solid var(--line);border-radius:var(--r-card);padding:28px;background:#fff}
.fitc.no{background:var(--grey);border-color:var(--grey-2)}
.fitc h3, .fitc h4{font-size:19px;font-weight:600;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.fitc h3 i,.fitc h4 i{width:9px;height:9px;border-radius:50%;display:block}
.fitc.yes h3 i,.fitc.yes h4 i{background:var(--lime)}
.fitc.no h3 i,.fitc.no h4 i{background:var(--p-dull)}
.fitc li{display:flex;gap:11px;font-size:15px;line-height:1.5;color:var(--p-light);padding:8px 0;
  border-bottom:1px solid var(--line)}
.fitc.no li{border-bottom-color:#DEDEDE}
.fitc li:last-child{border-bottom:0}
.fitc li svg{width:16px;height:16px;flex:none;margin-top:3px}
.fitc.yes li svg{color:var(--deep)}
.fitc.no li svg{color:var(--p-dull)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
  font-family:var(--f-head);font-size:clamp(16.5px,1.7vw,19px);font-weight:500;color:#000;line-height:1.4;
  transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--deep)}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:11px;height:11px;
  border-right:1.8px solid #000;border-bottom:1.8px solid #000;
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 60px 26px 0;font-size:15.5px;line-height:1.66;color:var(--p-light);
  animation:fadeIn .45s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   BIG CTA + FOOTER
   ============================================================ */
.fcta{text-align:center;padding:clamp(56px,8vw,104px) clamp(20px,4vw,56px) clamp(46px,6vw,80px);
  border-bottom:1px solid rgba(255,255,255,.1)}
.fcta h2{color:#fff;margin-bottom:18px}
.fcta h2 .ser{color:var(--lime)}
.fcta p{max-width:540px;margin:0 auto;font-family:var(--f-head);font-size:16.5px;line-height:1.6;color:var(--on-black-p)}
.fcta .row{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:30px}
.fcols{display:grid;grid-template-columns:1.7fr repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,44px);
  padding:clamp(46px,6vw,72px) clamp(20px,4vw,56px)}
.fcol .fh{font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-dull);margin:0 0 16px;font-weight:500}
.fcol a{display:block;font-family:var(--f-head);font-size:14.5px;color:var(--on-black-p);padding:6px 0;
  transition:color .25s,transform .35s var(--ease)}
.fcol a:hover{color:var(--lime);transform:translateX(3px)}
.fcol .fbrand{display:flex;align-items:center;gap:9px;font-family:var(--f-head);font-weight:700;font-size:22px;
  color:#fff;letter-spacing:-.03em;margin-bottom:14px}
.fcol .fbrand svg{width:26px;height:26px;color:var(--lime)}
.fcol .fabout{font-size:14.5px;line-height:1.6;color:var(--on-black-p);max-width:330px}
.fsoc{display:flex;gap:9px;margin-top:20px}
.fsoc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:grid;
  place-items:center;color:#fff;transition:.35s var(--ease);padding:0}
.fsoc a:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:translateY(-3px)}
.fsoc svg{width:16px;height:16px}
.floc{display:flex;flex-wrap:wrap;gap:34px;padding:0 clamp(20px,4vw,56px) 34px}
.floc div{font-size:14px;color:var(--on-black-p);line-height:1.55}
.floc b{display:block;font-family:var(--f-head);color:#fff;font-weight:600;font-size:14.5px;margin-bottom:4px}
.wmark::after{content:"FOUNDRECO"}
.wmark{font-family:var(--f-head);font-weight:700;letter-spacing:-.04em;text-align:center;
  font-size:clamp(52px,15.5vw,220px);line-height:.82;color:rgba(255,255,255,.055);
  padding:0 12px;user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden}
.fbot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:26px clamp(20px,4vw,56px);border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px;color:var(--p-dull)}
.fbot .lk{display:flex;gap:22px;flex-wrap:wrap}
.fbot .lk a:hover{color:var(--lime)}
.totop{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#fff;
  display:grid;place-items:center;transition:.35s var(--ease)}
.totop:hover{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:translateY(-3px)}

/* ============================================================
   FAB + misc
   ============================================================ */
.fab{position:fixed;right:20px;bottom:20px;z-index:880;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 34px rgba(37,211,102,.4);
  transition:transform .45s var(--ease)}
.fab:hover{transform:scale(1.09) translateY(-2px)}
.fab svg{width:27px;height:27px}
.fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25D366;
  animation:ring 2.6s infinite;z-index:-1}
@keyframes ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.65);opacity:0}}
.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.qbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:var(--lime);border-radius:var(--r-card);padding:22px 28px;margin-top:44px}
.qbar span{font-family:var(--f-head);font-size:clamp(16px,2vw,19px);font-weight:600;color:var(--lime-ink);letter-spacing:-.015em}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
.d4{transition-delay:.36s}.d5{transition-delay:.45s}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .svc.flag{grid-column:span 1}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}
  .grid2,.sec-head,.tst-head{grid-template-columns:1fr;gap:26px}
  .tst-head{align-items:start}
  .fcols{grid-template-columns:repeat(2,1fr)}
  .case{min-height:auto;padding:16px}
  .case-vis{position:relative;inset:auto;padding:26px 10px 34px}
  .case{flex-direction:column;align-items:stretch}
  .case-card{max-width:none}
  .case-idx{top:14px;right:18px}
}
@media(max-width:640px){
  :root{--gut:12px;--r-sec:26px;--r-card:18px}
  body{padding:10px var(--gut) 14px}
  .nav{top:10px}
  .hero{padding:126px 18px 68px;min-height:auto}
  .strip{flex-direction:column;align-items:stretch;gap:16px}
  .strip-lab{padding-left:0}
  .mq{width:100%;flex:none}
  .fcols{grid-template-columns:1fr}
  .stat{gap:18px}
  .dev-lap{transform:none}
  .phones .dev-ph:nth-child(1),.phones .dev-ph:nth-child(3){display:none}
  .laurels svg.lf{display:none}
  .plat{font-size:10.5px;padding:4px 8px}
  .rating{margin-bottom:26px}
  .fab{width:50px;height:50px;right:14px;bottom:14px}
}
/* ---------- touch corrections -------------------------------------------
   Found by auditing all 39 pages at 320/375/414px. Layout was already sound
   (no horizontal scroll, nothing off-screen), so these only make things
   comfortable to tap and read on a phone. Scoped to coarse pointers and
   small screens, so the desktop design is untouched. */
@media(max-width:900px){
  /* 26 footer links stacked at 35px with no gap: adjacent targets touch, so
     the wrong one gets hit. 11px padding takes each to ~44px. */
  .fcol a{padding:11px 0}
  .brand{min-height:44px}
  /* "Read the case study" and "Back to case studies" were 22px tall */
  .case-card .go,.cs-back{padding:11px 0}
  .cs-back{margin-top:-11px}
  /* marquee logos link to their case study. The logo image keeps its size;
     only the tap box grows, so the strip gains 4px and nothing else moves. */
  .lgo{min-height:44px;min-width:44px}
  /* The pill sits inline inside the hero headline, so it cannot be padded to
     44px without stretching the line. An absolutely positioned pseudo-element
     extends the touch area instead: out of flow, so the headline is unchanged
     to the pixel, and the surrounding words are not links so nothing is stolen. */
  .hpill{position:relative}
  .hpill::before{content:"";position:absolute;inset:-9px -6px}
  /* the open menu scrolls; without this, scrolling past its end drags the page
     behind it instead of stopping */
  .mnav{overscroll-behavior:contain}
  /* The WhatsApp button is fixed to the viewport, so on a narrow screen it sits
     on top of whatever happens to be under it — the last words of a paragraph,
     the corner of a pill. It now uses the signal the nav already computes:
     scrolling down means reading, so it gets out of the way, and because the
     class only clears on an upward scroll it stays away while you stop to read.
     Scroll up, which is the gesture that means "I want to do something", and it
     comes back. */
  .fab{opacity:0;transform:scale(.6);pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease)}
  /* .deep is set by the nav's scroll handler once past 520px */
  html.deep .fab{opacity:1;transform:none;pointer-events:auto}
  html.deep #nav.up ~ .fab{opacity:0;transform:scale(.6);pointer-events:none}
}
@media(max-width:640px){
  /* nothing below 12px: at 10.5px these were unreadable on a phone */
  .plat{font-size:12px;padding:5px 9px}
  .tagline{font-size:12px}
  .svc-price small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .msk>i{transform:none;opacity:1}
  .case-card{opacity:1;transform:none}
}

/* ==========================================================
   CASE STUDIES — additions to the Foundreco design system
   Tokens, nav, footer, buttons, pills and reveals are inherited
   unchanged from the homepage stylesheet above.
   ========================================================== */

/* ---------- shared: back link ---------- */
.cs-back{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-head);font-size:13.5px;
  font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--p-light);
  text-decoration:none;transition:color .3s var(--ease),gap .3s var(--ease)}
.cs-back svg{width:13px;height:13px;flex:none}
.cs-back:hover{color:var(--p);gap:12px}
.cs-back.on-dark{color:var(--on-black-p)}
.cs-back.on-dark:hover{color:var(--lime)}

/* ==========================================================
   INDEX — /case-studies
   ========================================================== */
.cs-top{padding:clamp(120px,12vw,168px) clamp(20px,4vw,56px) clamp(40px,4vw,56px)}
.cs-top .wrap{max-width:var(--maxw);margin:0 auto}
.cs-top h1{max-width:16ch}
.cs-top .lede{max-width:62ch;margin-top:18px}

/* filters */
.cs-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.cs-filters button{font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--p-light);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 17px;cursor:pointer;transition:all .35s var(--ease);white-space:nowrap;-webkit-tap-highlight-color:transparent}
.cs-filters button:hover{border-color:var(--line-2);color:var(--p)}
.cs-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.cs-count{font-family:var(--f-head);font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-dull);margin-top:26px}

/* grid */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.cs-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:26px 26px 22px;text-decoration:none;position:relative;
  overflow:hidden;transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.cs-card:hover{transform:translateY(-5px);border-color:var(--lime);box-shadow:0 18px 44px rgba(0,0,0,.08)}
.cs-card.hide{display:none}

.cs-card-logo{height:34px;display:flex;align-items:center;margin-bottom:20px}
.cs-card-logo img{max-height:34px;max-width:150px;width:auto;height:auto;object-fit:contain}

.cs-card-cat{font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.045em;
  text-transform:uppercase;color:var(--p-dull);display:block;margin-bottom:10px}

.cs-card h2{font-family:var(--f-head);font-size:19px;line-height:1.32;font-weight:600;
  color:var(--ink);letter-spacing:-.015em;margin:0 0 20px}

.cs-card-m{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:auto;
  padding-top:20px;border-top:1px solid var(--line)}
.cs-card-m b{display:block;font-family:var(--f-head);font-size:21px;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.cs-card-m span{display:block;font-size:12.5px;color:var(--p-light);line-height:1.35;margin-top:5px}

.cs-card-go{position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;color:var(--p-dull);
  transition:all .45s var(--ease)}
.cs-card:hover .cs-card-go{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);transform:rotate(45deg)}
.cs-card-go svg{width:12px;height:12px}

.cs-empty{display:none;text-align:center;padding:60px 20px;color:var(--p-light)}
.cs-empty.show{display:block}

/* ==========================================================
   DETAIL — /case-studies/<slug>
   ========================================================== */
.cs-hero{margin:0;border-radius:0 0 var(--r-sec) var(--r-sec);
  padding:clamp(112px,11vw,150px) clamp(20px,4vw,56px) clamp(44px,4.5vw,60px)}
.cs-hero .wrap{max-width:940px;margin:0 auto}
.cs-hero-logo{height:40px;display:flex;align-items:center;margin:26px 0 22px}
.cs-hero-logo img{max-height:40px;max-width:190px;width:auto;height:auto;object-fit:contain;
  /* logos are dark-on-transparent; lift them onto the dark hero */
  background:#fff;padding:8px 12px;border-radius:10px}
.cs-hero h1{font-size:clamp(29px,4.1vw,50px);line-height:1.1;font-weight:600;letter-spacing:-.028em;
  color:#fff;margin:0;max-width:20ch}
.cs-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--f-head);font-size:13.5px;font-weight:500;letter-spacing:.035em;text-transform:uppercase;color:var(--on-black-p)}
.cs-hero-meta i{font-style:normal;color:#4a4a4a}

/* metric bar */
.cs-mx{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;
  border-top:1px solid rgba(255,255,255,.14)}
.cs-mx div{padding:24px 22px 4px;border-right:1px solid rgba(255,255,255,.14)}
.cs-mx div:last-child{border-right:0}
.cs-mx b{display:block;font-family:var(--f-head);font-size:clamp(24px,2.8vw,33px);font-weight:600;
  color:var(--lime);letter-spacing:-.025em;line-height:1.05}
.cs-mx span{display:block;font-size:13px;color:var(--on-black-p);line-height:1.4;margin-top:8px}

/* article body */
.cs-art{padding:clamp(52px,6vw,84px) clamp(20px,4vw,56px)}
.cs-art .wrap{max-width:768px;margin:0 auto}
.cs-art p{font-size:17px;line-height:1.72;color:var(--p);margin:0 0 22px}
.cs-art p.lede-in{font-size:19px;line-height:1.65;color:var(--ink);font-family:var(--f-head);
  font-weight:400;letter-spacing:-.01em}
.cs-art h2{font-family:var(--f-head);font-size:clamp(25px,3.1vw,34px);line-height:1.18;font-weight:600;
  color:var(--ink);letter-spacing:-.025em;margin:56px 0 22px;scroll-margin-top:100px}
.cs-art h2:first-child{margin-top:0}
.cs-art a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2);transition:text-decoration-color .3s}
.cs-art a:not(.btn):hover{text-decoration-color:var(--lime)}
.cs-art .btn{text-decoration:none}

/* pull quote */
.cs-q{margin:34px 0;padding:28px 30px;background:var(--lime-soft);border-left:3px solid var(--lime);
  border-radius:0 var(--r-sm) var(--r-sm) 0}
.cs-q p{font-family:var(--f-head);font-size:clamp(18px,2vw,21px);line-height:1.5;font-weight:500;
  color:var(--ink);letter-spacing:-.015em;margin:0}
.cs-q footer{margin-top:16px;font-family:var(--f-head);font-size:13px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--p-light)}

/* figures */
.cs-fig{margin:34px 0}
.cs-fig img{display:block;width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--line);
  background:var(--grey)}
.cs-fig figcaption{margin-top:12px;font-size:13px;color:var(--p-dull);line-height:1.5}

/* the deep-green "why Foundreco" block */
.cs-why{margin-top:20px}
.cs-why .wrap{max-width:940px;margin:0 auto}
.cs-why p{font-size:17px;line-height:1.72;color:var(--deep-p);margin:0 0 20px;max-width:70ch}
.cs-why .cs-q{background:rgba(255,255,255,.055);border-left-color:var(--lime)}
.cs-why .cs-q p{color:#fff;max-width:none}
.cs-why .cs-q footer{color:var(--deep-p)}

/* how we build it — the AI + human strip */
.cs-how{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.cs-hc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-card);padding:24px 22px}
.cs-hc b{display:block;font-family:var(--f-head);font-size:17px;font-weight:600;color:#fff;
  letter-spacing:-.01em;margin-bottom:9px}
.cs-hc span{display:block;font-size:14px;line-height:1.6;color:var(--deep-p)}

/* next / prev */
.cs-nav2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.cs-nav2 a{display:block;padding:26px;border:1px solid var(--line);border-radius:var(--r-card);
  text-decoration:none;transition:all .45s var(--ease)}
.cs-nav2 a:hover{border-color:var(--lime);transform:translateY(-4px)}
.cs-nav2 em{display:block;font-family:var(--f-head);font-size:12.5px;font-weight:600;font-style:normal;letter-spacing:.045em;
  text-transform:uppercase;color:var(--p-dull);margin-bottom:10px}
.cs-nav2 b{display:block;font-family:var(--f-head);font-size:17px;font-weight:600;color:var(--ink);
  line-height:1.35;letter-spacing:-.015em}
.cs-nav2 a.nx{text-align:right}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media(max-width:1080px){
  .cs-grid{grid-template-columns:repeat(2,1fr)}
  .cs-how{grid-template-columns:1fr;gap:14px}
}
@media(max-width:900px){
  .cs-mx{grid-template-columns:1fr 1fr}
  .cs-mx div{border-bottom:1px solid rgba(255,255,255,.14)}
  .cs-mx div:nth-child(2n){border-right:0}
  .cs-mx div:nth-last-child(-n+2){border-bottom:0}
  .cs-art p{font-size:16.5px}
  .cs-nav2{grid-template-columns:1fr}
  .cs-nav2 a.nx{text-align:left}
}
@media(max-width:640px){
  .cs-top{padding-top:104px}
  .cs-grid{grid-template-columns:1fr;gap:14px}
  .cs-card{padding:22px 20px 20px}
  .cs-card h2{font-size:18px}
  .cs-card-m b{font-size:19px}
  .cs-filters{gap:7px;margin-top:26px}
  .cs-filters button{font-size:12.5px;padding:8px 14px}

  .cs-hero{border-radius:0 0 var(--r-sec) var(--r-sec);padding-top:96px}
  .cs-hero-logo img{max-width:150px}
  /* single column: a rule between every row, none after the last */
  .cs-mx{grid-template-columns:1fr;margin-top:30px}
  .cs-mx div{border-right:0;padding:18px 0 4px;
    border-bottom:1px solid rgba(255,255,255,.14)}
  .cs-mx div:last-child{border-bottom:0}

  .cs-q{padding:22px 20px;margin:28px 0}
  .cs-fig{margin:28px 0}
  .cs-art h2{margin:44px 0 18px}
}

/* motion / a11y */
@media(prefers-reduced-motion:reduce){
  .cs-card,.cs-card-go,.cs-nav2 a,.cs-back{transition:none!important}
  .cs-card:hover,.cs-nav2 a:hover{transform:none!important}
}

/* Portrait and square figures must not run full-bleed (source used max-w-sm) */
.cs-fig.port img{max-width:400px;margin-left:auto;margin-right:auto}
.cs-fig.sq   img{max-width:520px;margin-left:auto;margin-right:auto}
@media(max-width:640px){
  .cs-fig.port img,.cs-fig.sq img{max-width:100%}
}

/* ==========================================================
   SERVICE / CONTENT PAGES  (/vibe-code-rescue, /pricing, /contact)
   ========================================================== */

/* breadcrumbs */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:var(--f-head);
  font-size:13px;font-weight:500;color:var(--p-dull);margin-bottom:20px}
.crumb a{color:var(--p-light);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;color:var(--line-2)}
.crumb.on-dark{color:var(--on-black-p)}
.crumb.on-dark a{color:var(--on-black-p)}
.crumb.on-dark a:hover{color:var(--lime)}
.crumb.on-dark i{color:#4a4a4a}

/* page hero */
.p-hero{margin:0;border-radius:0 0 var(--r-sec) var(--r-sec);
  padding:clamp(112px,11vw,150px) clamp(20px,4vw,56px) clamp(44px,4.5vw,60px)}
.p-hero .wrap{max-width:940px;margin:0 auto}
.p-hero h1{font-size:clamp(30px,4.3vw,52px);line-height:1.08;font-weight:600;letter-spacing:-.03em;
  color:#fff;margin:0;max-width:19ch}
.p-hero .sub{font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;color:var(--on-black-p);
  margin-top:20px;max-width:60ch}
/* This was inline-flex with gap:10px. In a flex container every run of text
   becomes its own anonymous item, so "Steps 01-04 are the Blueprint" was three
   items with a 10px gap between each — that is where the wide word spacing came
   from — and wrapping broke mid-phrase, leaving "Steps" stranded at the end of a
   line. It is a sentence, so it flows as one. The separators keep their spacing
   from a margin instead of the flex gap. */
.p-anchor{display:inline-block;margin-top:24px;line-height:1.55;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-pill);
  padding:10px 18px;font-family:var(--f-head);font-size:14.5px;font-weight:600;color:#fff}
.p-anchor b{color:var(--lime)}
.p-anchor i{margin:0 8px}
@media(max-width:640px){
  /* once it wraps to two or three lines a 999px radius reads as a blob, not a
     pill, so the corners tighten and the lines get room to breathe */
  .p-anchor{border-radius:var(--r-sm);line-height:1.8;padding:12px 16px}
}
.p-updated{font-family:var(--f-head);font-size:13px;font-weight:500;color:var(--p-dull);margin-top:14px}
.p-updated.on-dark{color:#7a7a7a}

/* prose body */
.prose{padding:clamp(52px,6vw,84px) clamp(20px,4vw,56px)}
.prose .wrap{max-width:820px;margin:0 auto}
.prose p{font-size:17px;line-height:1.72;color:var(--p);margin:0 0 22px}
.prose p.answer{font-size:19px;line-height:1.65;color:var(--ink);font-family:var(--f-head);
  font-weight:400;letter-spacing:-.01em}
.prose h2{font-family:var(--f-head);font-size:clamp(25px,3.1vw,34px);line-height:1.18;font-weight:600;
  color:var(--ink);letter-spacing:-.025em;margin:58px 0 20px;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--f-head);font-size:19px;font-weight:600;color:var(--ink);
  letter-spacing:-.015em;margin:32px 0 12px}
.prose a:not(.btn){color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2);transition:text-decoration-color .3s}
.prose a:not(.btn):hover{text-decoration-color:var(--lime)}
/* buttons keep their own colours inside prose */
.prose .btn{text-decoration:none}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:26px;font-size:17px;line-height:1.65;
  color:var(--p);margin-bottom:11px}
.prose ul li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--lime)}
.prose ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:s}
.prose ol li{position:relative;padding-left:42px;font-size:17px;line-height:1.65;
  color:var(--p);margin-bottom:15px;counter-increment:s}
.prose ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--f-head);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.prose ol li b,.prose ul li b{color:var(--ink);font-weight:600}

/* definition / callout block */
.defn{background:var(--lime-soft);border-left:3px solid var(--lime);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:26px 30px;margin:0 0 26px}
.defn p{font-family:var(--f-head);font-size:clamp(17px,1.9vw,19.5px);line-height:1.55;font-weight:500;
  color:var(--ink);letter-spacing:-.012em;margin:0}

/* tables */
.tbl-wrap{overflow-x:auto;margin:0 0 26px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--f-head);font-size:13.5px;font-weight:700;color:var(--ink);
  letter-spacing:.01em;background:var(--grey);white-space:nowrap}
.tbl td{color:var(--p);line-height:1.55}
.tbl td b,.tbl th b{color:var(--ink);font-weight:600}
.tbl tr:last-child td{border-bottom:0}
.tbl .hi{background:var(--lime-soft)}
.tbl-note{font-size:13px;color:var(--p-dull);line-height:1.5;margin:-14px 0 26px}

/* symptom checklist */
.symp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 26px}
.symp div{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;font-size:15.5px;line-height:1.5;color:var(--p);display:flex;gap:11px}
.symp div svg{width:17px;height:17px;flex:none;color:var(--lime-ink);margin-top:2px}

/* quote pulled into a service page */
.pq{margin:30px 0;padding:26px 30px;background:var(--ink);border-radius:var(--r-card)}
.pq p{font-family:var(--f-head);font-size:clamp(17px,1.9vw,20px);line-height:1.5;font-weight:500;
  color:#fff;letter-spacing:-.015em;margin:0}
.pq footer{margin-top:14px;font-family:var(--f-head);font-size:13px;font-weight:600;
  letter-spacing:.03em;color:var(--lime)}

/* FAQ (reuses <details>) */
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-family:var(--f-head);font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--p-dull);border-bottom:2px solid var(--p-dull);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa .ans{padding:0 0 22px;font-size:16.5px;line-height:1.7;color:var(--p)}

/* ---------- contact form ---------- */
.cform{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sec);
  padding:clamp(24px,3.4vw,40px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{margin-bottom:16px;display:flex;flex-direction:column}
.fld label{font-family:var(--f-head);font-size:13.5px;font-weight:600;color:var(--ink);
  margin-bottom:7px;letter-spacing:.01em}
.fld label span{color:var(--p-dull);font-weight:500}
.fld input,.fld select,.fld textarea{font-family:var(--f-body);font-size:15.5px;color:var(--ink);
  background:var(--grey);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;width:100%;transition:border-color .3s,background .3s}
.fld textarea{min-height:120px;resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ink);background:#fff}
.fld input:invalid:not(:placeholder-shown){border-color:#C0392B}
/* iOS Safari zooms the whole page in when a focused field is under 16px, and
   the visitor then has to pinch back out to keep filling the form. 16px is the
   threshold, so the brief form uses exactly that on phones. */
@media(max-width:900px){
  .fld input,.fld select,.fld textarea{font-size:16px}
}
.fld .hint{font-size:12.5px;color:var(--p-dull);margin-top:6px;line-height:1.45}
.cform .btn{width:100%;justify-content:center;margin-top:6px}
.cform-alt{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cform-alt span{font-size:14px;color:var(--p-light);margin-right:4px}

@media(max-width:760px){
  .symp{grid-template-columns:1fr}
  .frow{grid-template-columns:1fr;gap:0}
  .prose p,.prose ul li,.prose ol li{font-size:16.5px}
  .p-hero{padding-top:96px}
}

/* contact page: form + sidebar. Kept in CSS, not inline, so the
   breakpoint can actually override it. */
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,48px);align-items:start}
.cgrid > *{min-width:0}
@media(max-width:860px){
  .cgrid{grid-template-columns:1fr;gap:34px}
}

/* ---- /contact channel cards ------------------------------------------ */
/* One card per way of reaching Foundreco. The whole card is the link, so
   there is one target rather than a link inside a clickable box, and each
   card ends in a button so it is obvious that clicking does something. */
.chan{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:34px}
.chan-c{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:24px 26px;background:#fff;text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.chan-c:hover{border-color:var(--black);transform:translateY(-3px)}
/* #767676 rather than --p-dull: at 13px these labels need 4.5:1 on white and
   --p-dull (#959595) only reaches 3.0:1. */
.chan-l{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.035em;
  text-transform:uppercase;color:#767676}
.chan-v{margin-top:10px;font-family:var(--f-head);font-size:clamp(17px,2vw,21px);
  font-weight:600;line-height:1.3;color:var(--black);word-break:break-word}
.chan-n{margin-top:8px;font-size:14px;line-height:1.5;color:var(--p-light)}
/* pushed to the bottom so the buttons line up across cards of unequal height */
.chan-go{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;margin-top:auto;
  padding-top:18px;font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--black)}
.chan-go i{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line-2);flex:none;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.chan-go svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.chan-c:hover .chan-go i{background:var(--lime);border-color:var(--lime)}
.chan-c:hover .chan-go svg{transform:translate(2px,-2px)}

/* ---- /blog index ------------------------------------------------------ */
/* Same card language as the contact channels: the whole card is the link and
   it ends in an arrow, so there is one target and an obvious affordance. */
.bfilters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.bfl{font-family:var(--f-head);font-size:13.5px;font-weight:500;padding:9px 17px;
  border-radius:var(--r-pill);border:1px solid var(--line-2);background:transparent;
  color:var(--p-light);cursor:pointer;transition:.25s var(--ease)}
.bfl:hover{border-color:#000;color:#000}
.bfl.on{background:var(--black);border-color:var(--black);color:#fff;font-weight:600}

.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.bp{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:28px 30px;background:#fff;text-decoration:none;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.bp:hover{border-color:var(--black);transform:translateY(-3px)}
.bp[hidden]{display:none}
.bp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:16px}
/* #767676, not --p-dull: at 13px this needs 4.5:1 on white and --p-dull is 3.0:1 */
.bp-cat{font-family:var(--f-head);font-size:12.5px;font-weight:600;letter-spacing:.035em;
  text-transform:uppercase;color:var(--lime-ink);background:var(--lime-soft);
  border:1px solid var(--lime);border-radius:var(--r-pill);padding:5px 11px}
.bp-when{font-family:var(--f-head);font-size:13px;color:#767676}
.bp-dot{margin:0 6px;font-style:normal;opacity:.5}
.bp-t{font-family:var(--f-head);font-size:clamp(19px,2.1vw,22px);font-weight:600;
  line-height:1.28;letter-spacing:-.015em;color:var(--black);margin:0}
.bp-x{margin-top:12px;font-size:15px;line-height:1.6;color:var(--p-light)}
.bp-go{display:inline-flex;align-items:center;align-self:flex-start;gap:8px;
  margin-top:auto;padding-top:22px;font-family:var(--f-head);font-size:14px;
  font-weight:600;color:var(--black)}
.bp-go i{display:inline-flex;align-items:center;justify-content:center;width:34px;
  height:34px;border-radius:50%;border:1px solid var(--line-2);flex:none;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.bp-go svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.bp:hover .bp-go i{background:var(--lime);border-color:var(--lime)}
.bp:hover .bp-go svg{transform:translate(2px,-2px)}
.bempty{font-family:var(--f-head);font-size:16px;color:var(--p-light);padding:30px 0}

/* the byline strip on a post */
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px;
  font-family:var(--f-head);font-size:14px;color:#C6C6C6}
.bmeta b{color:var(--lime);font-weight:600}
.bmeta i{font-style:normal;opacity:.35}

@media(max-width:520px){
  .bgrid{grid-template-columns:1fr}
  .bp{padding:24px 22px}
}

/* ---- a plain bordered panel, same shape as the estimator box ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-sec);
  padding:clamp(26px,4vw,44px);margin-top:34px}
.panel > :first-child{margin-top:0}

/* the "find us" strip: one real location, stated plainly */
.loc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-top:30px}
.loc dt{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.035em;
  text-transform:uppercase;color:#767676;margin:0}
.loc dd{margin:8px 0 0;font-family:var(--f-head);font-size:16.5px;font-weight:500;
  line-height:1.5;color:var(--black)}
.loc dd span{display:block;font-family:var(--f-body);font-size:14px;font-weight:400;
  color:var(--p-light);margin-top:4px}