/* Ana Gjurikj — Space Mono / Plus Jakarta Sans / Reenie Beanie identity,
   on the 340068 / FF6978 / FFFCF9 / B1EDE8 / 6D435A palette.
   Structure ported from the Figma Make prototype.
   Every number here was read off the prototype at 1440 and 390; the clamps
   interpolate between those two measured ends. */

:root{
  --paper:#fffcf9;
  --ink:#340068;          /* 15.3:1 on paper */
  --coral:#ff6978;        /* 2.7:1 — FILL ONLY, never text */
  --coral-ink:#d1394b;    /* coral type: 4.67:1 on paper */
  --sage:#b1ede8;         /* mint environment, 12.0:1 with ink */
  --blush:#ffc9cf;        /* soft coral environment, 10.8:1 with ink */
  --dark:#340068;
  --dark-2:#6d435a;       /* plum inner panel, 7.9:1 with paper */
  --onDark:#fffcf9;
  --muted:#6d435a;
  --line:rgba(52,0,104,.2);

  --ff-dis:"Space Mono",ui-monospace,"Courier New",monospace;
  --ff:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ff-hand:"Reenie Beanie","Bradley Hand",cursive;

  /* 24px at 390 → 72px at 1440 */
  --gut:clamp(24px, calc(6.17px + 4.571vw), 72px);
  --rail:1296px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ───────────────────────── shell ───────────────────────── */
.f-in{max-width:var(--rail);margin-inline:auto;width:100%}
.f-s{padding-inline:var(--gut)}

/* ───────────────────────── header ──────────────────────── */
.f-bar{
  display:flex;align-items:center;justify-content:space-between;
  height:clamp(84px, calc(75.1px + 2.286vw), 108px);
  padding-inline:var(--gut);
}
.f-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.f-mark{
  width:64px;aspect-ratio:220/180;flex:none;display:block;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 180'%3E%3Cpath d='m24 148 44-113 43 113-18-49h34c32 0 51-18 51-43 0-17-11-28-27-28-22 0-37 18-37 42 0 26 18 43 44 43h35v22c0 15-10 23-25 23' fill='none' stroke='%23340068' stroke-width='13' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='168' cy='158' r='7' fill='%23ff6978'/%3E%3C/svg%3E");
}
.f-bname{
  padding-left:14px;border-left:1px solid var(--line);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5;white-space:nowrap;
}
.f-nav{display:flex;align-items:center;gap:clamp(22px, calc(14.2px + 2vw), 43px)}
.f-nav a{font-size:14px;font-weight:600;text-decoration:none}
.f-nav a:hover{color:var(--coral-ink)}
.f-pill{
  background:var(--ink);color:#fff;border-radius:100px;padding:12px 18px;
  display:inline-flex;gap:6px;align-items:center;white-space:nowrap;
}
.f-pill:hover{background:var(--coral-ink);color:#fff}

/* ───────────────────────── shared type ─────────────────── */
.f-eyeb{
  margin:0;display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;
}
.f-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.f-h1{
  margin:40px 0 46px;max-width:1100px;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(44px, calc(27.66px + 4.19vw), 88px);
  line-height:.98;letter-spacing:-.04em;
}
.f-h1 em{font-style:italic;color:var(--coral-ink)}
.f-h2{
  margin:0;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(31px, calc(22.83px + 2.095vw), 53px);
  line-height:1.05;letter-spacing:-.03em;
}
.f-arrow{
  display:inline-flex;gap:6px;align-items:baseline;text-decoration:none;
  font-size:16px;font-weight:700;padding-bottom:5px;
  border-bottom:1px solid currentColor;
}
.f-arrow:hover{color:var(--coral-ink)}
.f-card-dark .f-arrow:hover{color:var(--blush)}
.f-hand{font-family:var(--ff-hand);font-weight:400;line-height:1.1}

/* ───────────────────────── hero ────────────────────────── */
.f-hero{
  position:relative;
  /* the prototype holds 90px under the hero at 390 and 257px at 1440 */
  padding-block:clamp(75px, calc(66.1px + 2.286vw), 99px)
                clamp(90px, calc(28px + 15.9vw), 257px);
}
.f-herorow{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding-left:clamp(0px, calc(-53.5px + 13.71vw), 144px);
  max-width:1040px;
}
.f-lead{
  margin:0;max-width:560px;
  font-size:clamp(18px, calc(15.4px + .667vw), 25px);
  line-height:1.42;letter-spacing:-.025em;
}
.f-herorow .f-arrow{flex:none;margin-bottom:0}
.f-hand-hero{
  position:absolute;right:calc(var(--gut) + 70px);top:79px;
  transform:rotate(5deg);color:var(--coral-ink);
  font-size:30px;line-height:1.05;text-align:center;
}

/* ───────────────────────── work ────────────────────────── */
.f-work{padding-bottom:clamp(90px, calc(53.9px + 9.24vw), 187px)}
.f-workhead{
  display:grid;grid-template-columns:290px minmax(0,1fr) 290px;
  align-items:end;gap:40px;
  padding:100px 0 60px;border-top:1px solid var(--line);
}
.f-workhead .f-h2{text-align:center}
.f-note{margin:0;font-size:16px;line-height:1.5}

.f-card{
  display:grid;grid-template-columns:680fr 616fr;
  border-radius:clamp(22px, calc(18.3px + .952vw), 32px);
  overflow:hidden;
}
.f-card + .f-card{margin-top:38px}
.f-card-sage{background:var(--sage)}
.f-card-dark{grid-template-columns:795fr 501fr;background:var(--dark);color:var(--onDark)}
.f-cardbody{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(36px, calc(18.9px + 4.38vw), 82px);
}
.f-meta{
  display:flex;justify-content:space-between;width:100%;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.5;
}
.f-kicker{margin:60px 0 16px;font-size:16px;font-weight:700;line-height:1.5}
.f-cardh{
  margin:0;font-family:var(--ff-dis);font-weight:400;
  font-size:clamp(40px, calc(31.83px + 2.095vw), 62px);
  line-height:1;letter-spacing:-.03em;
}
.f-card-dark .f-cardh{font-size:clamp(36px, calc(29.69px + 1.619vw), 53px)}
.f-cardlead{
  margin:34px 0 16px;
  font-size:clamp(18px, calc(15.8px + .571vw), 24px);
  line-height:1.55;
}
.f-cardnote{margin:0;font-size:16px;line-height:1.55}
.f-cardbody .f-arrow{margin-top:38px}

.f-env{display:flex;align-items:flex-end;justify-content:center;position:relative}
.f-env-blush{background:var(--blush);padding:70px 50px 0}
.f-env-ink{
  background:var(--dark-2);align-items:center;
  padding:clamp(30px, calc(15.1px + 3.81vw), 70px);
}
.f-shot{
  width:clamp(165px, calc(103.7px + 15.71vw), 330px);
  border-radius:39px 39px 0 0;border-top:7px solid var(--ink);
  object-fit:cover;align-self:flex-end;
}
.f-wide{width:100%;transform:rotate(-2deg)}
.f-env .f-hand{
  position:absolute;
  top:clamp(38px, calc(31.3px + 1.71vw), 56px);
  right:clamp(28px, calc(19.8px + 2.1vw), 50px);
  transform:rotate(5deg);font-size:29px;text-align:center;
}

/* ───────────────────────── about ───────────────────────── */
.f-about{padding-bottom:clamp(100px, calc(62.9px + 9.52vw), 200px)}
.f-about .f-in{
  display:grid;grid-template-columns:455fr 712fr;align-items:center;
  gap:clamp(55px, calc(27.1px + 7.14vw), 130px);
}
.f-pola{
  position:relative;margin:0;width:100%;
  background:var(--coral);padding:14px 14px 50px;transform:rotate(-2.5deg);
}
.f-pola img{width:100%;aspect-ratio:427/526;object-fit:cover}
/* inside the -2.5deg frame, so -4.5 here composes to the -7 the prototype shows */
.f-cap{
  position:absolute;right:-11px;bottom:0;transform:rotate(-4.5deg);
  font-size:37px;line-height:1.2;
}
.f-abouttext .f-h2{margin:25px 0 40px}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.f-cols p{
  margin:0 0 20px;
  font-size:clamp(17px, calc(15.5px + .381vw), 21px);
  line-height:1.55;
}
.f-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:35px}
.f-tag{
  border:1px solid var(--ink);border-radius:100px;padding:8px 13px;
  font-size:12px;font-weight:600;line-height:1.5;
}

/* ───────────────────────── contact band ───────────────── */
.f-contact{
  background:var(--coral);text-align:center;
  padding:clamp(90px, calc(60.3px + 7.62vw), 170px) 24px;
}
.f-contact .f-in{max-width:1392px}
.f-contact .f-eyeb{justify-content:center}
.f-h2big{
  margin:35px 0;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(43px, calc(28.89px + 3.619vw), 81px);
  line-height:1;letter-spacing:-.035em;
}
.f-clead{margin:0;font-size:19px;line-height:1.5}
.f-mail{
  margin-top:55px;border-bottom-width:2px;
  font-size:clamp(20px, calc(14.8px + 1.333vw), 34px);
}

/* ───────────────────────── footer ──────────────────────── */
.f-foot{padding-inline:var(--gut);padding-block:55px}
.f-foot .f-in{
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px;
  min-height:160px;
}
.f-foot .f-mark{width:92px;height:76px}
.f-fmid{margin:0;font-size:13px;line-height:1.5;text-align:center}
.f-fright{display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  font-size:13px;line-height:1.5}

/* ───────────────────────── breakpoints ─────────────────── */
@media screen and (max-width:991px){
  .f-workhead{grid-template-columns:1fr;gap:18px}
  .f-workhead .f-h2{text-align:left}
  .f-card,.f-card-dark{grid-template-columns:1fr}
  .f-card-dark .f-cardbody{order:-1}
  /* stacked, the panels no longer stretch to a sibling column; these are the
     heights the prototype holds them at */
  .f-env-ink{min-height:390px}
  .f-env-blush{min-height:480px}
  .f-hand-hero{display:none}
  .f-about .f-in{grid-template-columns:1fr}
  .f-cols{grid-template-columns:1fr;gap:0}
  .f-foot .f-in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .f-fmid{width:100%}
  .f-fright{align-items:center}
}
@media screen and (max-width:767px){
  .f-herorow{flex-direction:column;align-items:flex-start;gap:0}
  .f-herorow .f-arrow{margin-top:30px}
  /* The prototype drops Work and About here, which leaves those pages with no
     route on a phone. Keeping the links and showing the mark alone instead. */
  .f-bar .f-bname{display:none}
  .f-nav{gap:22px}
}

/* ═══════════════ inner pages ═══════════════ */

/* page hero: eyebrow, big mono headline with a coral italic tail */
.f-phero{padding-block:clamp(70px, calc(42.5px + 7.05vw), 144px) clamp(60px, calc(23.6px + 9.33vw), 158px)}
.f-h1p{
  margin:30px 0;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(43px, calc(25.54px + 4.476vw), 90px);
  line-height:.98;letter-spacing:-.04em;
}
.f-h1p em{font-style:italic;color:var(--coral-ink)}
.f-plead{
  margin:0;max-width:550px;
  font-size:clamp(18px, calc(15.4px + .667vw), 25px);line-height:1.45;
}
.f-phero-right{display:flex;flex-direction:column}
.f-phero-right .f-plead{align-self:flex-end;text-align:left}

/* coral call-to-action band, shared by /work and /about */
.f-cta{
  background:var(--coral);text-align:center;
  padding:clamp(80px, calc(54px + 6.67vw), 150px) 24px;
}
.f-cta .f-eyeb{justify-content:center}
.f-ctah{
  margin:25px 0 45px;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(33px, calc(19.26px + 3.524vw), 70px);
  line-height:1.25;letter-spacing:-.03em;
}
.f-cta .f-arrow{border-bottom-width:2px}

/* ── /work list ── */
.f-worklist{padding-bottom:clamp(80px, calc(46.6px + 8.57vw), 170px);display:grid;gap:40px}
.f-wcard{
  display:grid;grid-template-columns:583fr 713fr;text-decoration:none;
  border-radius:clamp(22px, calc(18.3px + .952vw), 32px);overflow:hidden;
  background:var(--sage);
}
.f-wcard-dark{grid-template-columns:718fr 578fr;background:var(--dark);color:var(--onDark)}
.f-wbody{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(36px, calc(18.9px + 4.38vw), 80px);
}
.f-wmeta{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.5}
.f-wh{
  margin:auto 0 20px;font-family:var(--ff-dis);font-weight:700;
  font-size:clamp(38px, calc(26.11px + 3.048vw), 70px);
  line-height:1;letter-spacing:-.035em;
}
.f-wstrong{
  font-size:clamp(22px, calc(19px + .762vw), 30px);font-weight:700;line-height:1.5;
}
.f-wp{margin:18px 0 35px;font-size:16px;line-height:1.55}
.f-wgo{
  display:inline-flex;gap:6px;align-items:baseline;font-size:16px;font-weight:700;
  padding-bottom:5px;border-bottom:1px solid currentColor;
}
.f-wcard:hover .f-wgo{color:var(--coral-ink)}
.f-wcard-dark:hover .f-wgo{color:var(--blush)}
.f-env-blush60{background:var(--blush);padding:60px 60px 0}
.f-shotw{
  width:clamp(170px, calc(132.5px + 9.62vw), 271px);
  border-radius:38px 38px 0 0;border-top:7px solid var(--ink);
  object-fit:cover;align-self:flex-end;
}

/* ── /contact ── */
.f-cgrid{
  display:grid;grid-template-columns:875fr 292fr;align-items:center;
  gap:clamp(50px, calc(20.3px + 7.62vw), 130px);
}
.f-mail-page{font-size:clamp(22px, calc(16.8px + 1.333vw), 36px);margin-top:50px}
.f-list{list-style:none;margin:0;padding:0}
.f-list li,.f-listp{
  margin:0;padding:17px 0;border-bottom:1px solid var(--line);
  font-size:16px;line-height:1.5;
}
.f-side + .f-side{margin-top:55px}

/* ── /about ── */
.f-pcols{
  display:grid;grid-template-columns:437fr 729fr;align-items:center;
  gap:clamp(55px, calc(27.1px + 7.14vw), 130px);
  padding-bottom:clamp(80px, calc(46.6px + 8.57vw), 170px);
}
.f-pcols .f-h2{margin:0 0 40px}
.f-bodyp{margin:20px 0 0;max-width:720px;font-size:clamp(17px, calc(15.9px + .286vw), 20px);line-height:1.6}
.f-cap-wide{font-size:34px;right:auto;left:50%;bottom:-6px;transform:translateX(-50%) rotate(-3.5deg);white-space:nowrap}
.f-triple{
  display:grid;grid-template-columns:495fr 330fr 330fr;gap:70px;
  padding-block:clamp(50px, calc(38.9px + 2.86vw), 80px) clamp(70px, calc(47.7px + 5.71vw), 130px);
  border-top:1px solid var(--line);
}
.f-dlist{list-style:none;margin:0;padding:0}
.f-dlist li{
  padding:10px 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-dis);font-weight:400;line-height:1.5;
  font-size:clamp(17px, calc(14.77px + .571vw), 23px);
}

/* ── case studies ── */
.f-back{display:inline-flex;gap:8px;font-size:16px;font-weight:700;text-decoration:none;margin-bottom:70px}
.f-back:hover{color:var(--coral-ink)}
.f-csub{
  display:block;margin:0;font-family:var(--ff-hand);font-weight:400;
  font-size:clamp(41px, calc(28.74px + 3.143vw), 74px);
  color:var(--coral-ink);transform:rotate(-2deg);text-align:right;line-height:1.3;
}
.f-cslead{
  margin:50px 0 0;margin-left:auto;max-width:620px;
  font-size:clamp(19px, calc(16px + .762vw), 27px);line-height:1.4;
}
.f-dl{
  display:grid;grid-template-columns:479fr 368fr 369fr;gap:40px;
  margin:0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.f-dl > div{display:flex;gap:22px}
.f-dl dt{margin:0;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:2;white-space:nowrap}
.f-dl dd{margin:0;font-size:13px;line-height:1.5}
.f-stage{
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--blush);border-radius:clamp(22px,calc(18.3px + .952vw),32px);
  padding:70px 50px 0;margin-top:70px;overflow:hidden;
}
.f-short{
  max-width:850px;margin-inline:auto;
  padding-block:clamp(70px, calc(47.7px + 5.71vw), 130px);
}
.f-shortp{
  margin:0;padding:28px 0;border-bottom:1px solid var(--line);
  font-family:var(--ff-dis);font-weight:400;
  font-size:clamp(20px, calc(15.91px + 1.048vw), 31px);
  line-height:1.4;letter-spacing:-.02em;
}
.f-num{
  display:grid;grid-template-columns:133px minmax(0,532fr) minmax(0,532fr);gap:50px;
  padding-block:clamp(44px, calc(26.9px + 4.38vw), 90px);
  border-top:1px solid var(--line);
}
.f-numk{font-family:var(--ff-hand);font-size:34px;color:var(--coral-ink);line-height:1.5}
.f-numh{
  margin:0;font-family:var(--ff-dis);font-weight:400;
  font-size:clamp(24px, calc(17.69px + 1.619vw), 41px);
  line-height:1.12;letter-spacing:-.025em;
}
.f-nump{margin:0;font-size:clamp(16px, calc(15.3px + .19vw), 18px);line-height:1.6}
.f-next{
  display:block;background:var(--ink);color:#fff;text-decoration:none;
  border-radius:28px;padding:clamp(34px, calc(24.3px + 2.48vw), 60px);
  margin:70px 0 clamp(60px,calc(38px + 5.6vw),120px);
}
.f-next .f-eyeb{color:#fff}
.f-nexth{
  margin:25px 0 0;font-family:var(--ff-dis);font-weight:400;
  font-size:clamp(28px, calc(16.86px + 2.857vw), 58px);line-height:1.25;
}
.f-next:hover .f-nexth{color:var(--blush)}

@media screen and (max-width:991px){
  .f-wcard,.f-wcard-dark{grid-template-columns:1fr}
  .f-wcard-dark .f-wbody{order:-1}
  .f-env-blush60{min-height:430px}
  .f-wcard-dark .f-env-ink{min-height:330px}
  .f-cgrid,.f-pcols{grid-template-columns:1fr}
  .f-triple{grid-template-columns:1fr;gap:40px}
  .f-dl{grid-template-columns:1fr;gap:14px}
  .f-num{grid-template-columns:1fr;gap:18px}
  .f-phero-right .f-plead{align-self:flex-start}
  .f-csub{text-align:left}
  .f-cslead{margin-left:0}
}
.f-cpage{padding-block:clamp(50px,calc(39px + 2.86vw),80px) clamp(70px,calc(47.7px + 5.71vw),130px)}

/* ── the contact form (kept from the live site, restyled) ───────────────
   The prototype has no form; this is her working one, dressed in the
   new system rather than dropped. */
/* the form section keeps its own horizontal padding: it is the live
   Webflow section, reclassed rather than rebuilt, so it carries one class */
.f-formsec{padding-inline:var(--gut);padding-bottom:clamp(70px,calc(47.7px + 5.71vw),130px)}
.form-g{max-width:760px}
.form-g .w-form{margin:0}
.form-g form{display:grid;gap:26px}
.field{display:grid;gap:9px}
.field > span{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.5;
}
.field input,.field select,.field textarea{
  width:100%;height:auto;margin:0;padding:15px 18px;
  font-family:var(--ff);font-size:17px;line-height:1.5;color:var(--ink);
  background:#ffffff;border:1px solid var(--line);border-radius:14px;
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23340068' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;background-size:12px 8px;
  padding-right:46px;
}
.field textarea{min-height:170px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8d7b88}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink);
}
.send{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border:0;border-radius:100px;
  padding:15px 26px;font-family:var(--ff);font-size:15px;font-weight:600;
  line-height:1.5;cursor:pointer;
}
.send:hover{background:var(--coral-ink)}
.send .arw{font-size:17px}
.sent{
  margin-top:22px;padding:22px 24px;border-radius:14px;
  background:var(--sage);color:var(--ink);
}
.sent.w-form-fail{background:var(--blush)}
.sent b{display:block;font-size:17px;margin-bottom:4px}
.sent .muted{margin:0;font-size:15px;line-height:1.5}
.f-phero-short{padding-bottom:clamp(40px,calc(25.1px + 3.81vw),80px)}
.f-stage{margin-block:clamp(40px,calc(25.1px + 3.81vw),80px)}
.f-stage-ink{background:#2a0055;align-items:center;padding:clamp(30px,calc(15.1px + 3.81vw),70px)}
.f-stage-ink img{width:100%;transform:rotate(-1deg)}
.f-stage .f-shotw{width:clamp(180px,calc(134.7px + 11.62vw),302px);border-radius:42px 42px 0 0}
.f-cshead{max-width:1100px}

/* ── corrections measured against the prototype ── */
.f-cta .f-in{max-width:1392px}
.f-ctah{line-height:1.5}
.f-h1p{font-size:clamp(43px, calc(25.54px + 4.476vw), 90px)}
.f-h1p-sm{font-size:clamp(40px, calc(25.89px + 3.619vw), 78px)}
.f-pcols .f-h2{font-size:clamp(30px, calc(23.14px + 1.762vw), 48px)}
.f-cap-wide{left:auto;right:-18px;bottom:-6px;transform:rotate(-3.5deg)}
.f-sidecol{padding-left:40px}
.f-csub{width:fit-content;margin-left:auto;line-height:1.5;text-align:right}
.f-nexth{line-height:1.5}
@media screen and (max-width:991px){
  .f-sidecol{padding-left:0}
  .f-csub{margin-left:0;text-align:left}
  .f-cap-wide{right:auto;left:14px}
}

/* ── over Webflow's own base styles ──────────────────────────────────
   Webflow ships .body{background:#f8f4f2} (same specificity as a bare
   body rule, so it would win) and h1/h3 tag styles carrying padding and
   a display font. These neutralise exactly those. */
.body{background:var(--paper);color:var(--ink)}
.f-h1,.f-h1p,.f-h2,.f-h2big,.f-ctah,.f-cardh,.f-wh,.f-numh,.f-nexth,.f-shortp{
  padding-left:0;padding-right:0;
}
.f-wh,.f-cardh,.f-numh{font-family:var(--ff-dis)}

/* ── 404 / password ── */
.f-nf{padding-block:clamp(70px,calc(47.7px + 5.71vw),140px) clamp(70px,calc(47.7px + 5.71vw),140px)}
.f-nflist{list-style:none;margin:40px 0 0;padding:0;max-width:760px}
.f-nflist li{border-bottom:1px solid var(--line)}
.f-nflist a{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:22px 0;text-decoration:none;font-size:clamp(17px,calc(15.5px + .381vw),21px);
}
.f-nflist a:hover{color:var(--coral-ink)}
.f-nflist b{font-family:var(--ff-dis);font-weight:400;font-size:1.25em}

/* ── /401 password page ──────────────────────────────────────────────
   Webflow holds only .ag-utilform; the rest of this page was styled by
   the superseded sheet, so it is restyled here rather than rebuilt. */
.a-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--gut);background:var(--paper);
}
.a-card{
  width:100%;max-width:520px;background:#ffffff;border:1px solid var(--line);
  border-radius:22px;padding:clamp(28px,calc(20.6px + 1.9vw),48px);
  display:flex;flex-direction:column;gap:20px;
}
.a-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:700}
.a-wrap h1,.a-wrap h2{
  margin:0;font-family:var(--ff-dis);font-weight:400;
  font-size:clamp(30px,calc(24.4px + 1.43vw),45px);line-height:1.05;letter-spacing:-.04em;
}
.a-wrap p{margin:0;font-size:16px;line-height:1.55}
.a-wrap label{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.a-wrap input[type="password"],.a-wrap input[type="text"]{
  width:100%;height:auto;margin:0;padding:15px 18px;
  font-family:var(--ff);font-size:17px;color:var(--ink);
  background:#ffffff;border:1px solid var(--line);border-radius:14px;
}
.a-wrap input[type="submit"]{
  justify-self:start;background:var(--ink);color:#fff;border:0;border-radius:100px;
  padding:15px 26px;font-family:var(--ff);font-size:15px;font-weight:600;cursor:pointer;
  width:auto;height:auto;
}
.a-wrap input[type="submit"]:hover{background:var(--coral-ink)}

/* Webflow puts loading="lazy" on every Image element and reserves no box for
   it, so without these the page jumps as the reader scrolls. */
.f-shot{aspect-ratio:330/610}
.f-shotw{aspect-ratio:271/580}
.f-wide,.f-stage-ink img{aspect-ratio:1080/756}

/* ═══════════ hover and focus ═══════════
   Webflow ships `a:hover{color:#ff003d}`. Anything without its own hover
   rule turned that magenta — including a whole project card, which dragged
   its heading and body text with it. Every interactive thing now declares
   its own hover, and the signal is a move or an underline, not colour alone. */
.f-brand{transition:color .15s ease}
.f-brand:hover{color:var(--ink)}
.f-brand:hover .f-bname{color:var(--coral-ink)}

.f-nav a{transition:color .15s ease}
.f-nav a:not(.f-pill):hover{
  color:var(--coral-ink);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;
}
.f-pill{transition:background-color .15s ease}
.f-pill:hover{background:var(--coral-ink);color:#fff}

.f-arrow,.f-back,.f-wgo{transition:color .15s ease,border-color .15s ease}
.f-arrow:hover,.f-back:hover{
  color:var(--coral-ink);border-bottom-color:var(--coral-ink);border-bottom-width:2px;
}
.f-card-dark .f-arrow:hover{color:var(--blush);border-bottom-color:var(--blush)}
.f-mail:hover,.f-mail-page:hover{border-bottom-width:3px}

.f-nflist a:hover{color:var(--coral-ink)}
.f-nflist li{transition:border-color .15s ease}
.f-nflist li:hover{border-bottom-color:var(--coral-ink)}

/* the whole card is the link, so the whole card answers */
.f-wcard{color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
/* same specificity as .f-wcard and declared later, so the dark card needs
   the combo to keep its own colour */
.f-wcard.f-wcard-dark{color:var(--onDark)}
.f-wcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(52,0,104,.18);color:var(--ink)}
.f-wcard-dark:hover{color:var(--onDark)}
.f-wcard:hover .f-wgo{color:var(--coral-ink);border-bottom-width:2px}
.f-wcard-dark:hover .f-wgo{color:var(--blush);border-bottom-color:var(--blush)}

.f-next{transition:transform .2s ease,background-color .2s ease}
.f-next:hover{transform:translateY(-4px);background:#26004c;color:#fff}
.f-next:hover .f-nexth{color:var(--blush)}

/* keyboard users get the same signal, not a fainter one */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--coral-ink);outline-offset:4px;
}
@media (prefers-reduced-motion:reduce){
  .f-wcard:hover,.f-next:hover{transform:none}
  *{transition-duration:.01ms !important}
}

/* ═══════════ placeholder project cards ═══════════ */
.f-wcard-soon{
  display:grid;grid-template-columns:583fr 713fr;
  border-radius:clamp(22px, calc(18.3px + .952vw), 32px);
  border:1px dashed rgba(52,0,104,.3);background:transparent;overflow:hidden;
}
.f-wcard-soon .f-wbody{min-height:300px}
.f-soonbadge{
  display:inline-block;border:1px solid var(--line);border-radius:100px;
  padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;
}
.f-soonart{
  display:flex;align-items:center;justify-content:center;min-height:240px;
  background:rgba(52,0,104,.04);border-left:1px dashed rgba(52,0,104,.3);
}
.f-soonart span{
  font-family:var(--ff-hand);font-weight:400;
  font-size:clamp(30px, calc(24.8px + 1.333vw), 44px);
  color:var(--muted);transform:rotate(-3deg);text-align:center;line-height:1.15;
}

/* ═══════════ case-study galleries ═══════════ */
.f-galhead{margin-bottom:clamp(24px, calc(17.6px + 1.64vw), 42px)}
.f-gal{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px, calc(12.1px + 1.52vw), 34px);
}
.f-fig{margin:0}
.f-fig + .f-fig{margin-top:clamp(18px, calc(12.1px + 1.52vw), 34px)}
.f-fig img{
  display:block;width:auto;height:auto;max-width:100%;
  max-height:clamp(420px, calc(300px + 30vw), 780px);
  margin-inline:auto;
  background:#ffffff;border:1px solid var(--line);
  border-radius:clamp(14px, calc(11.0px + .76vw), 22px);
}
/* one text node, no inline children — the builder drops those */
.f-fig figcaption{
  margin-top:13px;font-size:14px;line-height:1.55;color:var(--ink);max-width:62ch;
}
.f-galsec{padding-block:clamp(44px, calc(26.9px + 4.38vw), 90px);border-top:1px solid var(--line)}

@media screen and (max-width:991px){
  .f-wcard-soon{grid-template-columns:1fr}
  .f-soonart{border-left:0;border-top:1px dashed rgba(52,0,104,.3);min-height:180px}
  .f-gal{grid-template-columns:1fr}
}
.f-aboutmore{margin-top:clamp(26px, calc(20.1px + 1.52vw), 42px)}