/* 35 Ai Agency: compact pass (Gulnar 2026-11-05: "huge sections and containers smaller, everything is giant").
   Loaded AFTER brand.css. One type scale, one spacing scale, one container width.
   Display font: Unbounded (free, Google Fonts, has ə Ə ğ ı ş İ) for h1/h2 only; Inter Tight stays for everything else;
   Instrument Serif italic stays as the one accent word. */

:root{
  --wrap:1120px;
  --sec:clamp(64px,8vw,116px);         /* section padding top/bottom: smaller things, more air between them */
  --h1:clamp(40px,5.6vw,84px);
  --h2:clamp(30px,3.8vw,56px);
  --h3:clamp(22px,2.2vw,32px);
  --lead:clamp(16px,1.25vw,18px);
}
body{font-size:16px}
.wrap{width:min(var(--wrap),100% - 40px)}

/* display type: Unbounded, tight, sentence case */
h1.big,h2.big,.hero h1,.mission h2,.diff h2,.route h2,.fix .head h2,.head h2,.results h2,.cmp h2,.prices h2,.faq h2,.ftop h2{
  font-family:"Schibsted Grotesk","Schibsted Grotesk",system-ui,sans-serif !important;font-weight:700 !important;
  letter-spacing:-.03em !important;line-height:1.04 !important}
h1 .b,h2 .b,.big .b{font-size:1.12em;letter-spacing:-.01em !important}
.hero h1{font-size:var(--h1) !important}
.mission h2,.diff h2,.route h2,.fix .head h2,.head h2,.results h2,.cmp h2,.prices h2,.faq h2,.ftop h2{font-size:var(--h2) !important}

/* lead paragraphs */
.hero p,.mission .sub,.dhead .sub,.results .rlead,.card p,.head p{font-size:var(--lead) !important;line-height:1.5}

/* sections: one rhythm */
.mission,.diff,.fix,.work,.results,.cmp,.prices,.faq{padding-top:var(--sec) !important;padding-bottom:var(--sec) !important}
.route{padding:var(--sec) 0 calc(var(--sec) * .6) !important}
.how{padding:var(--sec) 0 !important;margin:0 clamp(12px,2vw,20px) !important;border-radius:28px !important}
.hero{min-height:0 !important;padding:clamp(110px,14vh,150px) 0 clamp(40px,6vh,64px) !important}

/* hero */
.hero .tag{font-size:clamp(12px,1vw,15px) !important;padding:8px 16px !important}
.hero .offer{font-size:clamp(15px,1.2vw,17px) !important}
.hero-pol img,.polaroid img{max-width:clamp(150px,16vw,220px)}
.cta{font-size:15px}.cta.lg{font-size:16px;padding:7px 7px 7px 20px}.cta.lg i{width:36px;height:36px}

/* "We fix the problem first" steps */
.fs b{font-size:clamp(18px,1.6vw,24px) !important}
.fs{padding:18px !important}
.others{font-size:clamp(16px,1.5vw,22px) !important}

/* services path: same journey, about half the height */
@media (min-width:901px){.track{height:1020px !important;margin-top:10px !important}}
@media (max-width:900px){.track{gap:44px !important}.stop .note,.stop.r .note{margin-left:90px !important}}
.stop h3{font-size:clamp(24px,2.8vw,40px) !important}
.stop .ico{width:72px !important;height:72px !important}
.stop .note{font-size:14px !important;padding:9px 16px !important;left:84px !important;max-width:300px}
.stop.r .note{left:auto !important;right:84px !important}
/* LOCK 2026-11-05: the team lives in 3 places only; the path uses numbered stops */
.stop .ico .num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;
  font:700 18px/1 "Schibsted Grotesk","Schibsted Grotesk",sans-serif;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.stop .ico .num{rotate:-6deg}.stop.r .ico .num{rotate:5deg}
.wthumb.next .wm2{place-items:center !important;padding-top:0 !important}

/* what we fix grid */
.fxg{gap:14px !important}
.fx{padding:12px 12px 16px !important;border-radius:16px !important}
.fx h3{font-size:clamp(17px,1.4vw,21px) !important}
.fx p{font-size:13.5px !important}
.imgbox img{inset:8% 8% 18% !important}

/* work carousel: open row of separate taped cards (no box around the box), room to breathe */
.works{border:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;
  gap:26px !important;padding:22px 10px 26px 4px !important;scroll-padding-left:4px}
.works .wcard{flex:0 0 clamp(210px,19vw,250px) !important}
.wcard{padding:10px 10px 14px !important;border-radius:16px !important;box-shadow:4px 4px 0 var(--ink) !important}
.wcard::before{top:-11px !important;width:70px !important;height:22px !important}
.wthumb{border-radius:10px !important;aspect-ratio:4/4.4 !important}
.wm2{font-size:clamp(22px,2vw,30px) !important}
.wmeta{grid-template-columns:36px 1fr 34px !important;gap:10px !important;margin-top:12px !important;padding:0 2px !important;align-items:center !important}
.wlogo{width:36px !important;height:36px !important}
.wlogo.t{font-size:13px !important}
.wname{font-size:15px !important;text-transform:none !important;letter-spacing:-.01em !important;line-height:1.15 !important}
.wcat{font-size:11.5px !important;font-weight:500 !important;text-transform:none !important;letter-spacing:0 !important;color:var(--mute) !important;line-height:1.35 !important;margin-top:3px !important}
.warr{width:34px !important;height:34px !important;font-size:14px !important}
.wnav{margin:0 0 6px !important}
.wnav button{width:40px !important;height:40px !important;font-size:17px !important}
@media (max-width:900px){
  .works .wcard{flex-basis:64vw !important}
  .wmeta{grid-template-columns:1fr 32px !important}
  .wlogo{display:none !important}.warr{display:grid !important;width:32px !important;height:32px !important}
}
/* the next card peeks in softly instead of being chopped */
.works{padding-right:64px !important;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}

/* how it works cards */
.stack{height:330px !important;max-width:760px !important}
.card{padding:clamp(22px,3vw,36px) !important;gap:8px 24px !important}
.card .n{font-size:clamp(56px,7vw,96px) !important}
.card h3{font-size:var(--h3) !important}

/* comparison + results */
.cmp table{font-size:14px}
.cmp td,.cmp th{padding-top:10px !important;padding-bottom:10px !important}

/* prices */
.plan{padding:24px 22px 6px !important;gap:12px !important}
.plan h3{font-size:clamp(22px,2vw,28px) !important}
.plan .p{font-size:clamp(40px,4vw,58px) !important}
.plan .p small{font-size:14px !important}
.plan ul{font-size:14.5px !important;gap:6px !important}
.plan .who{font-size:15px !important}
.launch{padding:20px 22px !important;gap:20px !important}
.launch h3{font-size:clamp(20px,1.8vw,26px) !important}
.launch .lp{font-size:clamp(34px,3.4vw,46px) !important}
.launch p{font-size:14.5px !important}
.found{margin-top:26px !important;font-size:clamp(16px,1.4vw,19px) !important}

/* tables (comparison + what's included) */
.tbl table{font-size:14px !important}
.tbl th,.tbl td{padding:9px 12px !important;line-height:1.35 !important}
.tbl thead th{font-size:12px !important;letter-spacing:.08em !important;line-height:1.2 !important}
.incl{margin-top:28px !important}
.incl td.y{font-size:15px !important}

/* faq: follows prices closely */
.faq{padding-top:calc(var(--sec) * .45) !important}
.qs details{padding:13px 0 !important}
.qs summary{font-size:clamp(14px,1.2vw,16px) !important}
.qs details p{font-size:15px !important}

/* footer */
.ftop h2{font-size:clamp(34px,4.6vw,64px) !important}
.giant{height:clamp(160px,22vw,320px) !important;margin-top:40px !important}
.giant svg{width:min(400px,60%) !important}

/* phones: even tighter */
@media (max-width:700px){
  :root{--sec:48px}
  .stack{height:300px !important}
  .card .mate{width:58px !important;right:10px !important;bottom:-14px !important}
  .card p{padding-right:52px}
}