/* =====================================================
   HiveMind Web — landing page
   Built to match the supplied design reference (1440px)
   ===================================================== */

@font-face{
  font-family:'Inter';
  src:url('../fonts/Inter-var-latin.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter Tight';
  src:url('../fonts/InterTight-var-latin.woff2') format('woff2');
  font-weight:500 900; font-style:normal; font-display:swap;
}

:root{
  --y:#FDBF10;
  --y-soft:#FEF5DE;
  --y-pale:#FEF3D8;
  --ink:#000;
  --tx:#5B5B5B;
  --line:#EAE4DA;
  --card:#FDFBF8;
  --muted:#B4AEA4;

  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --disp:'Inter Tight','Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  --pw:min(100vw,1920px);
  --gutter:clamp(20px,calc(var(--pw) * 0.038),73px);
  --sec:clamp(48px,calc(var(--pw) * 0.054),103.7px);

  --fs-disp:clamp(30px,calc(var(--pw) * 0.047),90.2px);
  --fs-lead:clamp(15px,calc(var(--pw) * 0.0139),26.7px);
  --fs-body:clamp(14px,calc(var(--pw) * 0.0106),20.4px);
  --fs-h3:clamp(15px,calc(var(--pw) * 0.0132),25.3px);
  --fs-h4:clamp(14px,calc(var(--pw) * 0.0112),21.5px);
  --fs-card:clamp(15px,calc(var(--pw) * 0.0125),24px); /* one size for every card title */
  --fs-micro:clamp(11px,calc(var(--pw) * 0.0082),15.7px);
  --fs-num:calc(var(--fs-micro) - .2px);      /* every card index / label */
  --card-body:calc(var(--fs-body) - .4px);    /* every card paragraph */
  --card-r:12px;                              /* every card corner radius */
  --g-card:clamp(12px,calc(var(--pw) * 0.017),32.6px);       /* gap between cards */
  --mt-grid:clamp(26px,calc(var(--pw) * 0.03),57.6px);       /* space above a card grid */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0 auto;max-width:1920px;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
em{font-style:normal}

.wrap{width:100%;padding-inline:var(--gutter);margin-inline:auto}
.sec{padding-block:var(--sec)}

/* ---------- display type ---------- */
.disp{
  font-family:var(--disp);
  font-weight:800;
  font-size:var(--fs-disp);
  line-height:.885;
  letter-spacing:-.031em;
  text-transform:uppercase;
}
.disp em{color:var(--y)}
.sec .disp{font-size:clamp(26px,calc(var(--pw) * 0.0375),72px);line-height:1}
.sec--contact .disp{font-size:clamp(28px,calc(var(--pw) * 0.042),80.6px);line-height:0.98}
.lead{
  font-size:var(--fs-lead);
  line-height:1.4;
  color:var(--tx);
  max-width:46ch;
  margin-top:clamp(14px,calc(var(--pw) * 0.013),25px);
}
.lead--wide{max-width:68ch}
.lead strong{color:#111;font-weight:700}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:flex;align-items:center;gap:clamp(8px,calc(var(--pw) * 0.0085),16.3px);
  margin-bottom:clamp(12px,calc(var(--pw) * 0.011),21.1px);
}
.eyebrow b{
  font-size:var(--fs-micro);font-weight:800;color:var(--y);
  letter-spacing:.02em;font-family:var(--disp);
}
.eyebrow i{width:clamp(16px,calc(var(--pw) * 0.021),40.3px);height:1px;background:var(--y);display:block}
.eyebrow span{
  font-size:calc(var(--fs-micro) - .4px);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:clamp(10px,calc(var(--pw) * 0.01),19.2px);
  font-family:var(--sans);font-size:calc(var(--fs-micro) + .2px);font-weight:700;
  letter-spacing:.075em;text-transform:uppercase;line-height:1;
  padding:clamp(13px,calc(var(--pw) * 0.0122),23.4px) clamp(24px,calc(var(--pw) * 0.0295),56.6px);
  border:1px solid transparent;border-radius:6px;
  cursor:pointer;transition:background-color .18s,color .18s,border-color .18s,transform .18s;
  white-space:nowrap;
}
.btn .ar{width:clamp(15px,calc(var(--pw) * 0.0125),24px);height:clamp(15px,calc(var(--pw) * 0.0125),24px);flex:0 0 auto;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:square}
.btn--primary{background:var(--y);color:#0A0A0A;border-color:var(--y)}
.btn--primary:hover{background:#0A0A0A;color:var(--y);border-color:#0A0A0A}
.btn--ghost{background:#fff;color:#0A0A0A;border-color:#0A0A0A}
.btn--ghost:hover{background:#0A0A0A;color:#fff}
.btn--pill{border-radius:6px} /* all buttons share the same rectangular radius */
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:clamp(8px,calc(var(--pw) * 0.0085),16.3px);margin-top:clamp(22px,calc(var(--pw) * 0.024),46.1px)}

/* ============ HEADER ============ */
.hdr{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s;
}
.hdr.is-stuck{border-bottom-color:#F0EBE2;box-shadow:0 6px 24px rgba(0,0,0,.045)}
.hdr__in{
  display:flex;align-items:center;gap:clamp(16px,calc(var(--pw) * 0.03),57.6px);
  height:clamp(66px,calc(var(--pw) * 0.058),111.4px);
}
.logo{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.logo img{display:block;height:clamp(26px,calc(var(--pw) * 0.0245),48px);width:auto}
.logo--light img{height:clamp(26px,calc(var(--pw) * 0.0245),48px)}

.nav{display:flex;align-items:center;gap:clamp(12px,calc(var(--pw) * 0.0185),35.5px);margin-left:auto}
.nav a{
  font-size:calc(var(--fs-micro) + .3px);font-weight:600;color:#1A1A1A;
  letter-spacing:.01em;position:relative;padding-block:6px;
}
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--y);
  transition:right .22s ease;
}
.nav a:hover::after{right:0}
.hdr__cta{margin-left:clamp(4px,calc(var(--pw) * 0.01),19.2px)}

.burger{
  display:none;width:44px;height:44px;margin-left:auto;background:none;border:0;
  position:relative;cursor:pointer;flex:0 0 auto;
}
.burger span{
  position:absolute;left:10px;right:10px;height:2px;background:#111;
  transition:transform .25s,opacity .2s;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){bottom:17px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ============ HERO ============ */
.hero{position:relative;overflow:hidden}
.hero__stage{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__scene{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block}
.hero__cut{display:none}
.hero__inner{
  position:relative;display:flex;align-items:flex-start;
  min-height:clamp(430px,calc(var(--pw) * 0.545),1046px);
  padding-block:clamp(44px,calc(var(--pw) * 0.07),134px) clamp(40px,calc(var(--pw) * 0.05),96px);
}
.hero__copy{max-width:46%}
.hero .lead{margin-top:clamp(16px,calc(var(--pw) * 0.016),30.7px);max-width:42ch}

/* ============ SPLIT (02 / FAQ) ============ */
.split{display:grid;grid-template-columns:47.6% 1fr;align-items:end;gap:clamp(20px,calc(var(--pw) * 0.026),49.9px)}
.split__copy{max-width:none}
.split__media img{width:100%;height:auto}
/* section 02: full-bleed photo band, uncropped (band aspect = image aspect) */
.why-band{position:relative}
.sec--why .lead{max-width:calc(var(--pw) * 0.3125)}
.why-band__img{display:block;width:100%;height:auto}
@media (min-width:1081px){
  .why-band{
    display:flex;align-items:center;
    min-height:calc(var(--pw) * 0.3345);   /* 725 / 2168 — exact image ratio, so nothing is cropped */
    background:#fdfdfd url('../img/problem-devices.webp') right bottom/100% 100% no-repeat;
  }
  .why-band__in{width:100%}
  .why-band__img{display:none}
  .why-copy{width:52%;max-width:none}
  .why-copy .disp{font-size:clamp(24px,calc(var(--pw) * 0.0332),63.7px);line-height:.98}
  .why-sm{font-size:.94em}
}

/* ============ PROBLEM CARDS ============ */
.prob-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--g-card);margin-top:var(--mt-grid);
}
.prob{background:#fff;border:1px solid #EDE7DE;border-radius:var(--card-r);overflow:hidden;display:flex;flex-direction:column;padding-bottom:clamp(10px,1.2vw,16px);transition:border-color .25s,box-shadow .25s}
.prob:hover{border-color:#F2D69A;box-shadow:0 14px 32px rgba(0,0,0,.06)}
.prob__img img{width:100%;height:auto;display:block}
.prob__no{
  display:block;margin:clamp(10px,calc(var(--pw) * 0.011),21.1px) clamp(12px,calc(var(--pw) * 0.0135),25.9px) clamp(3px,calc(var(--pw) * 0.004),7.7px);
  font-family:var(--disp);font-weight:800;font-size:var(--fs-num);color:var(--y);
}
.prob h3{font-family:var(--disp);font-size:var(--fs-card);font-weight:800;line-height:1.15;letter-spacing:-.01em;text-transform:uppercase;padding-inline:clamp(12px,1.35vw,20px)}

.callout{
  background:var(--y-soft);border-radius:6px;border-left:clamp(4px,.42vw,6px) solid var(--y);
  padding:clamp(18px,calc(var(--pw) * 0.021),40.3px) clamp(18px,calc(var(--pw) * 0.023),44.2px);
  margin-top:clamp(26px,calc(var(--pw) * 0.03),57.6px);
}
.sec .callout__big{
  font-size:clamp(17px,calc(var(--pw) * 0.0195),37.4px);line-height:1.12;letter-spacing:-.015em;
}
.callout__sub{margin-top:6px;font-size:calc(var(--fs-body) - .5px);color:#4E4E4E}

/* ============ HEAD (03) ============ */
.head{position:relative}
.head .lead{max-width:60ch}
.head > .btn{position:absolute;right:0;top:clamp(70px,calc(var(--pw) * 0.082),157.4px)}
.sol-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--g-card);margin-top:var(--mt-grid);
}
/* solutions — white "matte" cards: photo inset with a soft frame, lifts on hover */
.sol{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid #EDE7DE;border-radius:var(--card-r);
  padding:clamp(8px,calc(var(--pw) * 0.0075),14.4px);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sol img{width:100%;height:auto;display:block;border-radius:9px}
.sol h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);line-height:1.15;
  text-transform:uppercase;letter-spacing:-.012em;
  margin:clamp(12px,calc(var(--pw) * 0.014),26.9px) 0 clamp(5px,calc(var(--pw) * 0.0006),9px);
}
.sol p{
  color:var(--tx);font-size:var(--card-body);line-height:1.5;max-width:44ch;
  padding-bottom:clamp(4px,calc(var(--pw) * 0.003),6px);
}
.sol:hover{transform:translateY(-4px);border-color:#F2D69A;box-shadow:0 20px 44px rgba(0,0,0,.09)}

/* ============ INCLUDED (04) ============ */
.sec--why{padding-top:0}
.sec--inc{position:relative;overflow:hidden}
.inc__scribble{
  position:absolute;right:0;top:0;
  width:clamp(240px,calc(var(--pw) * 0.29),556.8px);height:auto;pointer-events:none;
}
.sec--inc > .wrap{position:relative}
.inc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--g-card);margin-top:var(--mt-grid);
}
.inc{
  position:relative;background:var(--card);border:1px solid #F3EDE3;border-radius:var(--card-r);
  padding:clamp(16px,calc(var(--pw) * 0.018),34.6px);
  display:flex;flex-direction:column;
  min-height:clamp(190px,calc(var(--pw) * 0.171),328.3px);
  transition:border-color .25s,box-shadow .25s;
}
.inc:hover{border-color:#F2D69A;box-shadow:0 14px 32px rgba(0,0,0,.06)}
.inc__no{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-num);
  color:var(--y);letter-spacing:.02em;
}
.inc h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);
  text-transform:uppercase;line-height:1.15;letter-spacing:-.01em;
  margin:clamp(10px,calc(var(--pw) * 0.011),21.1px) 0 clamp(6px,calc(var(--pw) * 0.0006),9px);max-width:62%;
}
.inc p{color:var(--tx);font-size:var(--card-body);line-height:1.5;max-width:58%}
.inc__art{
  position:absolute;right:clamp(8px,calc(var(--pw) * 0.011),21.1px);top:clamp(24px,calc(var(--pw) * 0.029),55.7px);
  height:clamp(58px,calc(var(--pw) * 0.069),132.5px);width:auto;pointer-events:none;
}
.checks{
  display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:6px clamp(8px,calc(var(--pw) * 0.011),21.1px);
  margin-top:auto;padding-top:clamp(10px,calc(var(--pw) * 0.012),23px);border-top:1px solid #F2EDE3;
}
.checks li{
  display:flex;align-items:center;gap:6px;font-size:calc(var(--fs-micro) - .2px);
  color:#3E3E3E;line-height:1.3;
}
.checks li::before{
  content:'';width:15px;height:15px;flex:0 0 auto;border-radius:50%;background:#FDEECB;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23B98A00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:10px 10px;background-position:center;background-repeat:no-repeat;
}
.fineprint{
  text-align:right;margin-top:clamp(14px,calc(var(--pw) * 0.016),30.7px);
  font-size:calc(var(--fs-micro) - .5px);color:#8A8378;font-style:italic;
}

/* ============ WORK (06) ============ */
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--g-card);margin-top:var(--mt-grid);
}
/* portfolio — light cards to match the rest of the site (warm white, yellow accents) */
.work{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:var(--ink);text-decoration:none;
  border:1px solid #EDE7DE;border-radius:14px;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.work__media{
  position:relative;overflow:hidden;background:var(--card);
  border-bottom:1px solid #F1EBE1;
}
.work img{width:100%;aspect-ratio:543/353;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.work__arw{
  position:absolute;right:clamp(10px,calc(var(--pw) * 0.0115),22.1px);
  top:clamp(10px,calc(var(--pw) * 0.0115),22.1px);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:clamp(30px,calc(var(--pw) * 0.026),49.9px);height:clamp(30px,calc(var(--pw) * 0.026),49.9px);
  border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.78);backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  transition:background-color .22s,border-color .22s,transform .22s;
}
.work__arw svg{width:50%;height:50%;stroke:#111;stroke-width:2;fill:none;stroke-linecap:square;transition:stroke .22s}
.work__body{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(15px,calc(var(--pw) * 0.016),30.7px) clamp(15px,calc(var(--pw) * 0.017),32.6px) 0;
}
.work__type{
  align-self:flex-start;
  font-size:var(--fs-num);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#A87C00;background:var(--y-pale);border:1px solid #F7E6BE;
  border-radius:999px;padding:clamp(3px,.35vw,5px) clamp(8px,.85vw,13px);line-height:1.2;
}
.work h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);
  text-transform:uppercase;letter-spacing:-.012em;line-height:1.15;color:var(--ink);
  margin:clamp(8px,calc(var(--pw) * 0.009),17.3px) 0 0;
}
.work p{
  color:var(--tx);font-size:var(--card-body);line-height:1.55;
  margin-top:clamp(7px,calc(var(--pw) * 0.008),15.4px);
}
/* footer row: hairline + visit label + arrow, pinned to the card bottom */
.work__visit{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding:clamp(11px,calc(var(--pw) * 0.012),23px) 0;
  border-top:1px solid #F1EBE1;
  font-size:var(--fs-num);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#8A8378;text-decoration:none;transition:color .2s;
}
.work__visit::after{
  content:'';width:14px;height:14px;flex:0 0 auto;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M9 7h8v8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s;
}
.work:hover .work__visit{color:#0A0A0A}
.work:hover .work__visit::after{transform:translate(2px,-2px)}
.work:focus-visible{outline:2px solid var(--y);outline-offset:3px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.work:hover{transform:translateY(-5px);border-color:#F2D69A;box-shadow:0 22px 44px rgba(0,0,0,.10)}
.work:hover img{transform:scale(1.04)}
.work:hover .work__arw{background:var(--y);border-color:var(--y);transform:translate(2px,-2px)}
.work:hover .work__arw svg{stroke:#0A0A0A}
.work__cta{display:flex;justify-content:flex-end;margin-top:clamp(20px,calc(var(--pw) * 0.024),46.1px)}

/* ============ PROCESS (05) ============ */
.proc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--g-card);margin-top:var(--mt-grid);
}
/* process — "step" cards: cream panel, photo inside, yellow step badge on the photo corner */
.proc{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid #F3EDE3;border-radius:var(--card-r);
  padding:clamp(9px,calc(var(--pw) * 0.0085),16.3px);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.proc img{width:100%;height:auto;display:block;border-radius:8px}
.proc__no{
  position:absolute;top:calc(clamp(9px,calc(var(--pw) * 0.0085),16.3px) + clamp(8px,calc(var(--pw) * 0.008),15.4px));
  right:calc(clamp(9px,calc(var(--pw) * 0.0085),16.3px) + clamp(8px,calc(var(--pw) * 0.008),15.4px));
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(24px,calc(var(--pw) * 0.0195),37.4px);height:clamp(24px,calc(var(--pw) * 0.0195),37.4px);
  border-radius:50%;background:var(--y);color:#0A0A0A;
  font-family:var(--disp);font-weight:800;font-size:var(--fs-num);
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.proc h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.15;
  padding:clamp(11px,calc(var(--pw) * 0.012),23px) 0 0;
}
.proc p{
  color:var(--tx);font-size:var(--card-body);line-height:1.5;
  margin-top:6px;padding:0 0 clamp(6px,calc(var(--pw) * 0.006),11.5px);
}
.proc:hover{transform:translateY(-4px);border-color:#F2D69A;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.proc__cta{display:flex;justify-content:center;margin-top:clamp(20px,calc(var(--pw) * 0.024),46.1px)}

/* ============ WHY (07) ============ */
.why-grid{
  display:grid;grid-template-columns:45.3% 1fr;
  gap:var(--g-card);margin-top:var(--mt-grid);
}
.why__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;border-radius:6px}
.why__cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--g-card)}
.why{
  position:relative;background:var(--card);border:1px solid #F3EDE3;border-radius:var(--card-r);
  padding:clamp(14px,calc(var(--pw) * 0.017),32.6px);
  display:flex;flex-direction:column;
  min-height:clamp(176px,calc(var(--pw) * 0.186),357.1px);
  transition:border-color .25s,box-shadow .25s;
}
.why:hover{border-color:#F2D69A;box-shadow:0 14px 32px rgba(0,0,0,.06)}
.why__no{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(26px,calc(var(--pw) * 0.023),44.2px);height:clamp(26px,calc(var(--pw) * 0.023),44.2px);border-radius:50%;
  background:var(--y-pale);color:#C79300;font-family:var(--disp);font-weight:800;
  font-size:var(--fs-num);
}
.why h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);
  text-transform:uppercase;line-height:1.15;letter-spacing:-.012em;
  margin:clamp(8px,calc(var(--pw) * 0.0009),14px) 0 clamp(5px,calc(var(--pw) * 0.0006),9px);max-width:78%;
}
.why p{color:var(--tx);font-size:var(--card-body);line-height:1.5;max-width:66%}
.why__art{position:absolute;right:clamp(2px,calc(var(--pw) * 0.0005),8px);bottom:clamp(2px,calc(var(--pw) * 0.0005),8px);width:clamp(96px,calc(var(--pw) * 0.112),215px);height:auto;pointer-events:none}

/* ============ FAQ (08) ============ */
.split--faq{grid-template-columns:52.5% 1fr;align-items:start;gap:clamp(20px,calc(var(--pw) * 0.026),49.9px)}
.split__media--faq{margin-top:0}

/* desktop: the FAQ list stacks in front of a larger device shot that bleeds right */
@media (min-width:1081px){
  .split--faq{position:relative}
  .split--faq .split__media--faq{
    position:absolute;top:0;left:41.5%;right:calc(var(--gutter) * -1);margin:0;z-index:0;
  }
  .split--faq .split__media--faq img{width:100%;height:auto}
  .split--faq .split__copy{position:relative;z-index:1;background:#fff;padding-right:clamp(14px,calc(var(--pw) * 0.02),38.4px)}
}
.faq{margin-top:clamp(18px,calc(var(--pw) * 0.02),38.4px);display:flex;flex-direction:column;gap:clamp(7px,calc(var(--pw) * 0.0072),13.8px)}
.faq__item{
  background:#fff;border:1px solid #EFE9DF;border-radius:var(--card-r);
  padding-inline:clamp(14px,calc(var(--pw) * 0.015),28.8px);
  box-shadow:0 1px 2px rgba(0,0,0,.028);
  transition:border-color .2s,box-shadow .2s;
}
.faq__item:hover{border-color:#E2DACB;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:0;padding:clamp(11px,calc(var(--pw) * 0.0105),20.2px) 0;text-align:left;cursor:pointer;
  font-family:var(--disp);font-weight:800;font-size:calc(var(--fs-micro) + 1.6px);
  text-transform:uppercase;letter-spacing:.005em;line-height:1.3;
}
.faq__ic{position:relative;width:16px;height:16px;flex:0 0 auto}
.faq__ic::before,.faq__ic::after{
  content:'';position:absolute;background:#111;transition:transform .25s,opacity .25s;
}
.faq__ic::before{left:0;right:0;top:7.5px;height:1.4px}
.faq__ic::after{top:0;bottom:0;left:7.5px;width:1.4px}
.faq__q[aria-expanded="true"] .faq__ic::after{transform:scaleY(0);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq__a p{
  font-size:var(--card-body);line-height:1.5;color:var(--tx);
  padding:0 clamp(26px,calc(var(--pw) * 0.024),46.1px) clamp(12px,calc(var(--pw) * 0.012),23px) 0;
}

/* ============ CONTACT (09) ============ */
.sec--contact{
  position:relative;padding-bottom:var(--sec);   /* match the section's top padding */
  background:#f7f6f3 url('../img/cta-bg.webp') center bottom/cover no-repeat;
}
.sec--contact::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,.45) 52%,rgba(255,255,255,.05) 72%,rgba(255,255,255,0) 84%);
}
.sec--contact > .wrap{position:relative;z-index:1}
.contact{display:grid;grid-template-columns:54% 1fr;gap:clamp(22px,calc(var(--pw) * 0.026),49.9px);align-items:stretch}
.contact__copy .disp{margin-bottom:0}
.contact__copy .lead{max-width:58ch}
.contact__copy .lead + .lead{margin-top:7px}
.contact__copy > .btn{margin-top:clamp(14px,calc(var(--pw) * 0.015),28.8px)}
.contact__media{margin-top:clamp(10px,calc(var(--pw) * 0.012),23px);margin-left:calc(var(--gutter) * -1);margin-bottom:0;max-width:none;width:calc(100% + var(--gutter))}
.contact__media img{width:100%;max-width:77%;height:auto}

.form{
  display:flex;flex-direction:column;justify-content:space-between;height:100%;
  background:#fff;border:1px solid #F1EBE1;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.09);
  padding:clamp(18px,calc(var(--pw) * 0.02),38.4px);
}
.form__head{display:flex;align-items:center;gap:12px;margin-bottom:clamp(12px,calc(var(--pw) * 0.014),26.9px)}
.form__head i{width:clamp(16px,calc(var(--pw) * 0.017),32.6px);height:2px;background:var(--y)}
.form__head h3{
  font-family:var(--disp);font-weight:800;font-size:var(--fs-card);line-height:1.15;
  text-transform:uppercase;letter-spacing:-.005em;
}
.field{margin-bottom:clamp(7px,calc(var(--pw) * 0.0072),13.8px)}
.field label{display:block;font-size:calc(var(--fs-micro) - .3px);color:#6B6B6B;margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:calc(var(--fs-body) - 1.6px);color:#111;
  background:#fff;border:1px solid #E7E1D7;border-radius:4px;
  padding:clamp(10px,calc(var(--pw) * 0.0102),19.6px) clamp(10px,calc(var(--pw) * 0.0095),18.2px);
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{resize:vertical;min-height:clamp(66px,calc(var(--pw) * 0.054),103.7px);line-height:1.45}
.field input::placeholder,.field textarea::placeholder{color:#AAA49A}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--y);box-shadow:0 0 0 3px rgba(253,191,16,.18);
}
.field select{appearance:none;-webkit-appearance:none;color:#7E7871;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23555' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:15px;
}
.field select:valid{color:#111}
.form .btn{margin-top:0}
.form__note{
  text-align:center;font-size:calc(var(--fs-micro) - .8px);color:#8A8378;
  margin-top:clamp(10px,calc(var(--pw) * 0.011),21.1px);
}
.field.is-error input,.field.is-error select{border-color:#D33}
.form__note.is-error{color:#C22}

/* ============ FOOTER ============ */
.ftr{background:#0A0A0A;color:#fff;margin-top:0;padding-top:clamp(36px,calc(var(--pw) * 0.04),76.8px)}
.ftr__top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(22px,calc(var(--pw) * 0.03),57.6px);padding-bottom:clamp(28px,calc(var(--pw) * 0.034),65.3px);
}
.ftr__brand p{
  color:#A6A29B;font-size:calc(var(--fs-body) - 1.6px);line-height:1.6;
  margin:clamp(14px,calc(var(--pw) * 0.016),30.7px) 0 0;max-width:34ch;
}
.ftr__mail{
  display:inline-block;margin-top:14px;color:var(--y);
  font-size:calc(var(--fs-body) - 1.2px);border-bottom:1px solid rgba(253,191,16,.4);padding-bottom:2px;
}
/* email + WhatsApp sit on their own lines */
.ftr__brand .ftr__mail{display:block;width:max-content;max-width:100%}
.ftr__brand .ftr__mail + .ftr__mail{margin-top:8px}
.ftr__col{display:flex;flex-direction:column;gap:9px}
.ftr__col h4{
  font-family:var(--disp);font-weight:800;font-size:calc(var(--fs-micro) + .3px);
  text-transform:uppercase;letter-spacing:.12em;color:var(--y);margin-bottom:6px;
}
.ftr__col a,.ftr__addr{color:#A6A29B;font-size:calc(var(--fs-body) - 1.8px);line-height:1.5}
.ftr__col a:hover{color:#fff}
.ftr__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid #1E1E1E;padding-block:clamp(16px,calc(var(--pw) * 0.018),34.6px);
}
.ftr__bar p{color:#77736C;font-size:calc(var(--fs-micro) - .3px)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* =====================================================
   TABLET
   ===================================================== */
@media (max-width:1080px){
  .br-d{display:none}
  .why-band__img{display:none}
  .inc__scribble{display:none}
  .sec--why{padding-top:var(--sec)}
  :root{--fs-disp:clamp(30px,calc(var(--pw) * 0.056),107.5px)}
  .nav{display:none}
  .hdr__cta{display:none}
  .burger{display:block}

  .hero{display:flex;flex-direction:column}
  .hero__inner{order:1}
  .hero__stage{order:2;position:static;overflow:visible;padding-bottom:0}
  .hero__scene{display:none}
  .hero__cut{display:block;width:100%;height:auto;margin-top:6px}
  .hero__inner{min-height:0;padding-block:clamp(28px,calc(var(--pw) * 0.05),96px) clamp(20px,calc(var(--pw) * 0.03),57.6px)}
  .hero__copy{max-width:100%}
  .hero__media-stack{display:block}

  .split,.split--faq,.contact{grid-template-columns:1fr}
  .split__media,.split__media--faq{margin-top:clamp(18px,calc(var(--pw) * 0.03),57.6px)}
  .head > .btn{position:static;margin-top:22px}

  .prob-grid{grid-template-columns:1fr 1fr}
  .sol-grid,.inc-grid,.work-grid{grid-template-columns:1fr 1fr}
  .proc-grid{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
  .why__photo img{aspect-ratio:651/619}
  .inc__art{width:30%;max-width:150px}

  .contact__media{margin-left:0}
  .form{height:auto}   /* single column: height:100% + margin-top pushed the card past the section padding */
  .contact__media,.form{margin-top:clamp(18px,calc(var(--pw) * 0.03),57.6px)}
  .contact__media{margin-top:clamp(20px,calc(var(--pw) * 0.03),57.6px)}

  .ftr__top{grid-template-columns:1fr 1fr}
}

/* mobile nav panel */
.nav.is-open{
  display:flex;position:fixed;inset:clamp(66px,calc(var(--pw) * 0.058),111.4px) 0 auto 0;
  flex-direction:column;align-items:flex-start;gap:0;
  background:#fff;padding:10px var(--gutter) 26px;
  border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.08);
  margin:0;z-index:55;max-height:calc(100vh - 70px);overflow:auto;
}
.nav.is-open a{
  width:100%;padding:15px 0;border-bottom:1px solid #F4F0E9;
  font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}
.nav.is-open a::after{display:none}
.nav.is-open .btn{display:none}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width:720px){
  .why-band__img{display:none}
  :root{
    --fs-disp:clamp(29px,calc(var(--pw) * 0.086),165.1px);
    --fs-lead:15px;--fs-body:14px;--fs-h3:17px;--fs-h4:15px;--fs-micro:11px;
    --sec:48px;
  }
  .disp{line-height:.99;letter-spacing:-.02em}
  .hero__inner{display:block;padding-top:36px;padding-bottom:32px}
  .hero .lead{max-width:100%}

  .prob-grid,.sol-grid,.inc-grid,.work-grid,.proc-grid,.why__cards{grid-template-columns:1fr}
  .btn-row{gap:10px}
  .btn{width:100%;padding-block:15px}
  .btn-row .btn{flex:1 1 100%}
  .hdr__cta.hdr__cta{display:none}

  .inc p,.inc h3,.why p,.why h3{max-width:100%}
  .inc__art{position:static;height:68px;width:auto;margin:0 0 10px;order:-1;align-self:flex-end}
  .why__art{width:96px;right:10px;bottom:10px}

  .sec--why{padding-top:72px}
  .callout__big{font-size:clamp(17px,calc(var(--pw) * 0.046),88.3px)}
  .contact .disp{font-size:clamp(26px,calc(var(--pw) * 0.076),145.9px)}
  .contact__copy > .btn{width:100%}
  .form{padding:18px}
  /* 09 — centre the device image on phones and give it a bit more presence */
  .contact__media{width:100%;max-width:100%;margin-inline:0;display:flex;justify-content:center}
  .contact__media img{max-width:92%}
  .ftr__top{grid-template-columns:1fr;gap:26px}
  .ftr__bar{flex-direction:column;gap:6px}
  .fineprint{text-align:left}
  .work__cta,.proc__cta{justify-content:flex-start}
  .proc__cta .btn,.work__cta .btn{width:100%}

  /* 08 FAQ — the laptop + phone photo is not shown on phones */
  .split__media--faq{display:none}
}

/* =====================================================
   CARD RHYTHM (≤1080px) — one card system on tablet + phone
   16px inner padding for text cards, 10px frame for
   photo-frame cards, 12px title spacing
   ===================================================== */
@media (max-width:1080px){
  .inc,.why{padding:16px}
  .prob{padding:0 0 16px}
  .prob h3{padding-inline:16px}
  .prob__no{margin:14px 16px 6px}
  .work__body{padding:16px}

  .sol,.proc{padding:10px}
  .proc__no{top:20px;right:20px}

  .sol h3,.inc h3,.why h3{margin-top:12px;margin-bottom:5px}
  .proc h3{padding-top:12px}
  .proc p{padding-bottom:6px}

  .why__cards{margin-top:12px}

  /* 02: desktop width cap was squeezing this lead on small screens */
  .sec--why .lead{max-width:100%}

  /* 04: checklist items stack instead of squeezing two per row */
  .checks{flex-direction:column;gap:6px}
}

@media (max-width:720px){
  .faq__q{font-size:13px}
/* ---------- 04 What's included — phone layout ----------
   desktop arrangement, scaled down: number on top, copy in a 62% column,
   illustration floating to the right, checklist on one row */
.inc{
  display:block;position:relative;min-height:0;
  padding:14px 16px 15px;
}
.inc__no{
  display:block;width:auto;height:auto;border-radius:0;background:none;
  font-size:11px;line-height:1;letter-spacing:.02em;color:var(--y);
}
.inc h3{max-width:62%;margin:10px 0 5px;line-height:1.2}
.inc p{max-width:64%}
.inc__art{
  position:absolute;right:6px;top:24px;
  height:clamp(74px,calc(var(--pw) * 0.23),104px);width:auto;max-width:none;margin:0;
}
.checks{
  flex-direction:row;flex-wrap:wrap;margin-top:12px;padding-top:12px;
  gap:6px 14px;
}
.checks li{font-size:11px}
/* ---------- 07 Why HiveMind — phone layout ----------
   desktop arrangement scaled down: numbered chip, title, copy in a left column,
   illustration anchored to the bottom-right corner of the card */
@media (max-width:720px){
  .why{
    display:block;position:relative;min-height:0;
    padding:14px 16px 16px;
  }
  .why__no{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;
    background:var(--y-pale);color:#C79300;font-size:11px;
  }
  .why h3{max-width:88%;margin:10px 0 5px;line-height:1.2}
  .why p{max-width:62%}
  .why__art{
    position:absolute;right:2px;bottom:0;
    height:clamp(86px,calc(var(--pw) * 0.25),116px);width:auto;max-width:none;margin:0;
  }
}

}
.form .hp{
  position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px;height:1px;overflow:hidden;margin:0;padding:0;border:0;
}

/* ---------- 09 thank-you popup ---------- */
.hm-thanks{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.hm-thanks[hidden]{display:none!important}
.hm-thanks__backdrop{position:absolute;inset:0;background:rgba(18,14,4,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hm-thanks__card{
  position:relative;width:100%;max-width:470px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,calc(var(--pw) * 0.026),42px) clamp(22px,calc(var(--pw) * 0.022),38px) clamp(22px,calc(var(--pw) * 0.02),32px);
  box-shadow:0 30px 90px rgba(0,0,0,.28);animation:hmPop .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes hmPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.hm-thanks__icon{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--y);color:#000;margin-bottom:18px;
}
.hm-thanks__icon svg{width:30px;height:30px}
.hm-thanks__title{
  font-family:var(--disp);font-weight:900;font-size:clamp(20px,calc(var(--pw) * 0.019),34px);
  line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);margin:0 0 12px;
}
.hm-thanks__body{font-size:var(--fs-body);line-height:1.55;color:var(--tx);margin:0 auto;max-width:38ch}
.hm-thanks__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.hm-thanks__actions .btn{width:auto}
.hm-thanks__x{
  position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:transparent;
  font-size:24px;line-height:1;color:var(--tx);cursor:pointer;border-radius:50%;
}
.hm-thanks__x:hover{background:rgba(0,0,0,.06);color:var(--ink)}
@media (max-width:720px){
  .hm-thanks__card{max-width:100%}
  .hm-thanks__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hm-thanks__card{animation:none}
}

/* form submit — in-button sending state */
.btn.is-sending{cursor:progress;opacity:.92}
.btn__spin{
  display:inline-block;width:15px;height:15px;margin-right:10px;vertical-align:-3px;
  border:2px solid rgba(0,0,0,.22);border-top-color:#000;border-radius:50%;
  animation:hmSpin .7s linear infinite;
}
@keyframes hmSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn__spin{animation-duration:1.8s}}