/* ============================================================
   Homepage only. Everything is scoped under body.home or a prefix
   (.hx hero, .px proof band, .cx closing call), so no other page that
   shares styles.css changes.

   The look: white and blue, large and confident. The client sites are the
   imagery; the studio's own page is the sharp frame around them. No
   monospace, no grid, no terminal, no numbered eyebrows.
   Built from the winning prototype of a three-way design panel.
   ============================================================ */

body.home{
  --bg:#FFFFFF; --bg-2:#F3F6FC; --surf:#FFFFFF; --surf-2:#F3F6FC;
  --accent:#2563EB; --accent-rgb:37,99,235; --accent-hi:#1D53CC; --accent-ink:#1D53CC;
  --head:#0B1530; --text:#27324E; --muted:#4E5B7A;
  --line:rgba(11,21,48,.12); --line-2:rgba(11,21,48,.22);
  --raise:rgba(11,21,48,.025);
  --shadow:0 1px 2px rgba(11,21,48,.05), 0 14px 34px -18px rgba(11,21,48,.22);
  --mono:var(--sans);
  --nav-bg:rgba(255,255,255,.9);
  --navy:#0B1530; --blue-soft:#7FA9FF; --tint:#E8F0FF;
  /* left/right edge of content, matching .wrap at its widened 1312 max */
  --hpad:max(clamp(20px,5vw,40px), calc((100vw - 1232px) / 2));
}
body.home .wrap{ max-width:1312px; }

/* buttons: bigger, squarer, a real primary and a real secondary */
body.home .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:0 28px; border-radius:12px; border:2px solid transparent;
  font:700 17px/1 var(--sans); letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 14px 28px -10px rgba(37,99,235,.6), 0 2px 0 rgba(255,255,255,.18) inset;
}
body.home .btn svg{ width:20px; height:20px; flex:0 0 auto; transition:transform .15s; }
body.home .btn:hover svg{ transform:translateX(3px); }
body.home .btn--ghost{ background:#fff; color:var(--head); border-color:var(--head); box-shadow:none; }
body.home .btn--ghost:hover{ background:var(--head); color:#fff; border-color:var(--head); }
body.home .btn--sm{ min-height:46px; padding:0 20px; font-size:15.5px; border-radius:10px; }
body.home .nav__links a:not(.btn){ font-family:var(--sans); font-size:15.5px; font-weight:600; }
body.home .nav__book{ display:none; }
@media (max-width:860px){
  body.home .nav__inner{ gap:10px; }
  body.home .nav__book{ display:inline-flex; margin-left:auto; }
  body.home .nav__links .btn{ display:none; }
}

/* ── hero ─────────────────────────────────────────────── */
.hx{ position:relative; z-index:2; background:#fff; overflow:hidden; }
@supports (overflow:clip){ .hx{ overflow:visible; overflow-x:clip; } }
.hx__grid{
  display:grid; grid-template-columns:minmax(0,min(610px,48vw)) minmax(0,1fr); column-gap:28px;
  padding-left:var(--hpad); min-height:780px;
}
.hx__copy{ position:relative; z-index:5; padding:50px 0 46px; }
.hx__h1{
  margin:0; font-size:clamp(46px,6.4vw,94px); line-height:.94; font-weight:700;
  letter-spacing:-.048em; color:var(--head);
}
.hx__ln, .hx__ln span{ display:block; }
.hx__ln--b{ color:var(--accent); }
.hx__lede{ margin:26px 0 0; max-width:560px; font-size:18px; line-height:1.55; font-weight:500; color:var(--text); }
.hx__lede strong{ color:var(--head); font-weight:700; }
.hx__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hx__facts{ display:flex; list-style:none; margin:34px 0 0; padding:0; }
.hx__facts li{ padding:0 26px; border-left:1px solid var(--line); }
.hx__facts li:first-child{ padding-left:0; border-left:0; }
.hx__facts b{ display:block; font-size:30px; line-height:1; font-weight:700; letter-spacing:-.04em; color:var(--head); white-space:nowrap; }
.hx__facts b i{ font-style:normal; font-size:.5em; font-weight:600; letter-spacing:0; color:var(--muted); margin-right:.4em; }
.hx__facts span{ display:block; margin-top:9px; font-size:14.5px; line-height:1.25; font-weight:500; color:var(--muted); }

/* the stage: three real sites, big, overlapping, bleeding off the right edge */
.hx__stage{
  position:relative; min-height:53em;
  font-size:min(15.5px, calc((100vw - var(--hpad) - min(610px,48vw) - 28px) / 50));
}
.hx__stage::before{
  content:""; position:absolute; top:0; bottom:0; left:-1em; right:-60vw;
  background:linear-gradient(180deg,#E3ECFF 0%,#EEF3FF 100%);
  clip-path:polygon(10em 0,100% 0,100% 100%,0 100%);
}
.hx__frame{
  position:absolute; background:#fff; border-radius:.9em; overflow:hidden;
  box-shadow:0 0 0 1px rgba(11,21,48,.10), 0 .8em 1.4em -.4em rgba(11,21,48,.20),
             0 3em 5em -1.2em rgba(11,21,48,.38), 0 7em 9em -3em rgba(11,21,48,.28);
}
.hx__bar{ display:flex; align-items:center; gap:.55em; height:2.5em; padding:0 1em; background:#F3F6FC; border-bottom:1px solid #DDE4F2; }
.hx__bar i{ width:.72em; height:.72em; border-radius:50%; background:#C5CFE4; }
.hx__bar b{
  margin-left:.8em; display:inline-flex; align-items:center; gap:.6em; height:1.7em; padding:0 1.1em;
  background:#fff; border:1px solid #DDE4F2; border-radius:999px;
  font-size:.82em; font-weight:600; letter-spacing:.01em; color:var(--muted);
}
.hx__bar b::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:var(--accent); }
.hx__frame img{ display:block; width:100%; height:auto; }
.hx__frame--cow{ left:13em; top:.8em; width:50em; transform:rotate(2.2deg); z-index:1; }
.hx__frame--sip{ left:0; top:14em; width:43em; transform:rotate(-1.6deg); z-index:2; }
.hx__frame--moo{ left:38em; bottom:-3em; width:30em; transform:rotate(2.4deg); z-index:3; }

/* ── proof band (navy) ────────────────────────────────── */
.px{ position:relative; z-index:1; background:var(--navy); color:#fff; padding:128px var(--hpad) 96px; }
.px__top{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:start; }
.px h2{ margin:0; font-size:clamp(38px,4.4vw,64px); line-height:1; font-weight:700; letter-spacing:-.045em; color:#fff; }
.px h2 em{ font-style:normal; color:var(--blue-soft); }
.px__sites{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.18); }
.px__sites li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 24px;
  padding:26px 0; border-bottom:1px solid rgba(255,255,255,.18);
}
.px__name{ font-family:var(--display); font-size:clamp(26px,2.9vw,42px); line-height:1.05; font-weight:700; letter-spacing:-.035em; color:#fff; }
.px__what{ grid-column:1; font-size:16.5px; font-weight:500; color:#B4C1DE; }
.px__live{ grid-column:2; grid-row:1 / span 2; display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:#fff; }
.px__live::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--blue-soft); }
.px__get{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px; list-style:none;
  margin:72px 0 0; padding:48px 0 0; border-top:1px solid rgba(255,255,255,.18);
}
.px__get li::before{ content:""; display:block; width:34px; height:4px; border-radius:2px; background:var(--accent); margin-bottom:20px; }
.px__get h3{ margin:0; font-size:27px; line-height:1.1; font-weight:700; letter-spacing:-.03em; color:#fff; }
.px__get p{ margin:8px 0 0; font-size:17px; line-height:1.4; font-weight:500; color:#B4C1DE; }

/* pricing + faq keep their content; they just sit on the cooler tints now */
body.home .section--panel{ background:var(--bg-2); }
body.home h2{ letter-spacing:-.035em; }
body.home .eyebrow{ font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:none; }

/* detail is there if you want it, out of the way if you don't */
.more{ margin-top:18px; }
.more > summary{ cursor:pointer; list-style:none; font-size:15px; font-weight:600; color:var(--accent-ink); padding:6px 0; min-height:44px; display:flex; align-items:center; gap:8px; }
.more > summary::-webkit-details-marker{ display:none; }
.more > summary::before{ content:"+"; display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:rgba(var(--accent-rgb),.1); font-weight:700; }
.more[open] > summary::before{ content:"\2212"; }
.more--block{ margin:28px 0; padding:0 22px; background:var(--surf); border:1px solid var(--line); border-radius:var(--r); }
.more--block > summary{ font-size:1.05rem; padding:14px 0; }
.more--block[open]{ padding-bottom:22px; }

/* ── closing call (white) ─────────────────────────────── */
.cx{ background:#fff; padding:120px var(--hpad) 112px; }
.cx__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,min(640px,48%)); gap:56px; align-items:end; }
.cx h2{ margin:0; font-size:clamp(52px,7.2vw,104px); line-height:.92; font-weight:700; letter-spacing:-.05em; color:var(--head); }
.cx h2 em{ font-style:normal; color:var(--accent); }
.cx__status{
  display:inline-flex; align-items:center; gap:12px; min-height:44px; margin:0; padding:0 18px; border-radius:999px;
  background:var(--tint); color:var(--accent-ink); font-size:15.5px; font-weight:700;
}
.cx__status::before{ content:""; flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.cx .hx__cta{ margin-top:24px; }
.cx__tags{ display:grid; grid-template-columns:repeat(2,max-content); justify-content:start; gap:10px 44px; list-style:none; margin:30px 0 0; padding:0; font-size:15.5px; font-weight:600; color:var(--muted); line-height:1.4; }
.cx__tags li{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; }
.cx__tags li::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--accent); flex:0 0 auto; }
.cx__note{ margin:26px 0 0; font-size:15px; color:var(--muted); }
.cx__note a{ color:var(--accent-ink); }

body.home .foot__links a{ font-family:var(--sans); font-size:14.5px; }
body.home .card:hover{ transform:none; }

/* ── below the two-column hero ────────────────────────── */
@media (max-width:1199px){
  .hx__grid{ grid-template-columns:minmax(0,1fr); padding:0 var(--hpad); min-height:0; }
  .hx__copy{ padding:52px 0 44px; }
  .hx__h1{ font-size:clamp(50px,9.4vw,104px); line-height:.95; }
  .hx__ln span{ display:inline; }
  .hx__lede{ max-width:700px; font-size:19px; }
  .hx__stage{ font-size:min(1.62vw,16px); height:57em; min-height:0; margin:0 calc(-1 * var(--hpad)); }
  .hx__stage::before{ left:0; right:0; clip-path:none; }
  .hx__frame--cow{ left:15em; }
  .hx__frame--sip{ left:2.4em; }
  .hx__frame--moo{ left:40em; }
  .px__top{ gap:40px; }
  .px__get{ gap:24px; }
}
@media (max-width:860px){
  .hx__copy{ padding:38px 0 34px; }
  .hx__cta .btn{ flex:1 1 auto; }
  .hx__facts{ margin-top:30px; }
  .px{ padding:84px var(--hpad) 72px; }
  .px__top{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .px__get{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; margin-top:52px; padding-top:40px; }
  .cx{ padding:84px var(--hpad) 76px; }
  .cx__in{ grid-template-columns:minmax(0,1fr); gap:36px; }
}
@media (max-width:520px){
  .hx__h1{ font-size:clamp(50px,13.4vw,92px); line-height:.94; }
  .hx__ln span{ display:block; }
  .hx__lede{ font-size:17.5px; }
  body.home .btn{ min-height:56px; padding:0 22px; font-size:17px; }
  body.home .btn--sm{ min-height:46px; padding:0 15px; font-size:15.5px; }
  .hx__cta{ flex-direction:column; align-items:stretch; }
  .hx__facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hx__facts li{ padding:0 10px 0 12px; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; }
  .hx__facts li:first-child{ padding-left:0; }
  .hx__facts b{ font-size:clamp(17px,5.3vw,23px); }
  .hx__facts b i{ display:block; margin:0 0 5px; font-size:12.5px; }
  .hx__facts span{ font-size:13.5px; }
  .hx__stage{ font-size:2.06vw; height:58em; }
  .hx__frame--cow{ left:14em; }
  .hx__frame--sip{ left:2.4em; }
  .hx__frame--moo{ left:36em; }
  .hx__bar b{ display:none; }
  .px__sites li{ padding:22px 0; }
  .px__get{ gap:36px 20px; }
  .px__get h3{ font-size:22px; }
  .px__get p{ font-size:15.5px; }
  .cx__tags{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
  .cx__tags li{ white-space:normal; align-items:flex-start; }
  .cx__tags li::before{ margin-top:7px; }
  .cx__status{ font-size:14.5px; padding:8px 16px; border-radius:24px; }
}