/* ============================================================
   INFINITY MEDIA — theme v2 "THE INFINITE STUDIO"
   Neobrutalist system. Scope: #wrapwrap.im2
   Surfaces: .s-paper .s-cyan .s-ink .s-acid (color-block story)
   Dark mode: html[data-theme=dark] (localStorage "neo-theme")
   ============================================================ */

/* ---------- 1. Font ---------- */
@font-face{
  font-family:"Archivo V";
  src:url("/web/content/118394/Archivo-Variable-latin.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}

/* ---------- 2. Tokens ---------- */
.im2{
  /* constants (never swap) */
  --ink0:#0C152A;
  --paper0:#F1F5F4;
  --cyan:#20BEC6;
  --acid:#FFDD33;
  /* mode-swapped */
  --bg:var(--paper0);
  --card:#FFFFFF;
  --tx:var(--ink0);
  --mut:#3D4A60;
  --line:var(--ink0);
  --shc:var(--ink0);
  --headbg:var(--paper0);
  /* type */
  --f:"Archivo V","Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* physics */
  --e:cubic-bezier(.22,1,.36,1);
  --bd:3px solid var(--line);
  /* z scale */
  --z-marquee:1; --z-sticker:2; --z-head:100; --z-menu:110; --z-toast:120;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f);
  font-weight:430;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="dark"] .im2{
  --bg:#0A1122;
  --card:#101B36;
  --tx:var(--paper0);
  --mut:#AFBACB;
  --line:var(--paper0);
  --shc:#04070F;
  --headbg:#0A1122;
}
/* surface slabs: nearest-ancestor var assignment wins over the mode block */
.im2 .s-cyan{
  --bg:var(--cyan); --card:#FFFFFF; --tx:var(--ink0); --mut:#0F2233;
  --line:var(--ink0); --shc:var(--ink0);
  background:var(--bg); color:var(--tx);
}
.im2 .s-ink{
  --bg:var(--ink0); --card:#101B36; --tx:var(--paper0); --mut:#AFBACB;
  --line:var(--paper0); --shc:#04070F;
  background:var(--bg); color:var(--tx);
}
.im2 .s-acid{
  --bg:var(--acid); --card:#FFFFFF; --tx:var(--ink0); --mut:#3A3410;
  --line:var(--ink0); --shc:var(--ink0);
  background:var(--bg); color:var(--tx);
}
.im2 .s-paper{ background:var(--bg); color:var(--tx); }

/* ---------- 3. Base ---------- */
.im2 *{ box-sizing:border-box; }
.im2 ::selection{ background:var(--acid); color:var(--ink0); }
.im2 a{ color:inherit; }
.im2 :where(a){ text-decoration:none; }
.im2 img{ max-width:100%; height:auto; }
.im2 p{ max-width:68ch; }
.im2 :focus-visible{ outline:3px dashed var(--line); outline-offset:3px; }
.im2 .wrap{ max-width:1240px; margin-inline:auto; padding-inline:clamp(18px,4vw,48px); }
.im2 .wrap-w{ max-width:1440px; margin-inline:auto; padding-inline:clamp(18px,3vw,40px); }

.im2 h1,.im2 h2,.im2 h3,.im2 h4,.im2 h5,.im2 h6{ text-wrap:balance; color:inherit; }

/* type roles */
.im2 .d1{
  font-family:var(--f); font-stretch:125%; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2.05rem,6.6vw,5.5rem); line-height:.94; margin:0;
}
.im2 .d2{
  font-family:var(--f); font-stretch:125%; font-weight:850;
  text-transform:uppercase; letter-spacing:-.008em;
  font-size:clamp(1.9rem,4.2vw,3.4rem); line-height:1; margin:0;
}
.im2 .d3{
  font-family:var(--f); font-stretch:118%; font-weight:800;
  text-transform:uppercase; letter-spacing:0;
  font-size:clamp(1.15rem,2.2vw,1.6rem); line-height:1.1; margin:0;
}
.im2 .lbl{
  font-family:var(--f); font-stretch:78%; font-weight:750;
  text-transform:uppercase; letter-spacing:.07em;
  font-size:.82rem; line-height:1.2;
}
.im2 .hollow{
  color:transparent;
  -webkit-text-stroke:2px currentColor;
  -webkit-text-stroke-color:var(--tx);
}
.im2 .lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.55; font-weight:480; }
.im2 .mut{ color:var(--mut); }
.im2 .acc{ color:var(--cyan); }
.s-cyan .acc,.s-acid .acc{ color:var(--ink0); }

/* ---------- 4. Buttons ---------- */
.im2 .b{
  display:inline-flex; align-items:center; gap:.6em;
  padding:1.02em 1.55em;
  border:var(--bd); border-radius:0;
  background:var(--card); color:var(--tx);
  font-family:var(--f); font-stretch:80%; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; font-size:.92rem; line-height:1;
  box-shadow:6px 6px 0 var(--shc);
  cursor:pointer; user-select:none; text-decoration:none;
  transition:transform .16s var(--e), box-shadow .16s var(--e), background-color .16s var(--e), color .16s var(--e);
  will-change:transform;
}
.im2 .b:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--shc); text-decoration:none; color:var(--tx); }
.im2 .b:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--shc); }
.im2 .b .ar{ transition:transform .16s var(--e); }
.im2 .b:hover .ar{ transform:translateX(4px); }
.im2 .b-acid{ background:var(--acid); color:var(--ink0); }
.im2 .b-acid:hover{ color:var(--ink0); }
.im2 .b-cyan{ background:var(--cyan); color:var(--ink0); }
.im2 .b-cyan:hover{ color:var(--ink0); }
.im2 .b-ink{ background:var(--ink0); color:var(--paper0); --shc:var(--ink0); }
.s-ink .b-ink{ background:var(--paper0); color:var(--ink0); }
.im2 .b-ink:hover{ color:var(--paper0); }
.s-ink .b-ink:hover{ color:var(--ink0); }
.im2 .b-lg{ padding:1.2em 2em; font-size:1.02rem; }
/* on ink surfaces default button = paper card */
.s-ink .b{ --shc:#04070F; }

/* ---------- 5. Stickers ---------- */
.im2 .stkr{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em 1em;
  border:3px solid var(--ink0); border-radius:999px;
  background:var(--acid); color:var(--ink0);
  font-family:var(--f); font-stretch:80%; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; line-height:1.2;
  box-shadow:4px 4px 0 var(--ink0);
  transform:rotate(var(--rot,-3deg));
  z-index:var(--z-sticker);
  white-space:nowrap;
}
.im2 .stkr--w{ background:#fff; }
.im2 .stkr--c{ background:var(--cyan); }
.im2 .stkr--abs{ position:absolute; }

/* ---------- 6. Section grammar: slab + index tab ---------- */
.im2 .sec{ position:relative; border-top:3px solid var(--line); padding:clamp(64px,9vw,120px) 0; }
/* first section after the hero: its top border (and the tab riding it) sat
   flush against the marquee — push the whole boundary down so the tab gets the
   same open space above it that every later section boundary has */
.im2 .im2-hero + .sec{ margin-top:clamp(64px,9vw,120px); }
.im2 .sec--flush{ padding:0; }
.im2 .tab{
  position:absolute; top:0; left:clamp(16px,6vw,72px);
  transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.62em 1.2em;
  background:var(--card); color:var(--tx);
  border:var(--bd); box-shadow:5px 5px 0 var(--shc);
  font-family:var(--f); font-stretch:78%; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; font-size:.85rem;
  z-index:var(--z-sticker);
}
.im2 .tab--acid{ background:var(--acid); color:var(--ink0); }
.im2 .tab--cyan{ background:var(--cyan); color:var(--ink0); }
.im2 .tab .inf{ font-stretch:100%; font-weight:900; }
.im2 .sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:clamp(34px,5vw,64px); }
.im2 .sec-head p{ margin:0; }

/* ---------- 7. Marquee ---------- */
.im2 .mq{ overflow:hidden; border-top:3px solid var(--line); border-bottom:3px solid var(--line); padding:.9em 0; position:relative; z-index:var(--z-marquee); }
.im2 .mq-in{ display:flex; width:max-content; animation:im2-mq var(--mq-t,30s) linear infinite; }
.im2 .mq-half{ display:flex; align-items:center; gap:1.4em; padding-right:1.4em; }
.im2 .mq span{
  font-family:var(--f); font-stretch:110%; font-weight:850; text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.5rem); letter-spacing:.02em; white-space:nowrap;
}
.im2 .mq .inf{ color:var(--cyan); font-weight:900; }
.s-cyan .mq:not(.s-ink) .inf,.s-acid .mq:not(.s-ink) .inf{ color:var(--ink0); }
@keyframes im2-mq{ to{ transform:translateX(-50%); } }
.im2 .mq:hover .mq-in{ animation-play-state:paused; }

/* ---------- 8. Header ---------- */
.im2 .im2-skip{
  position:fixed; left:8px; top:8px; z-index:var(--z-toast);
  padding:.7em 1.2em; background:var(--acid); color:var(--ink0);
  border:3px solid var(--ink0); font-weight:800;
  transform:translateY(-200%); opacity:0; pointer-events:none;
  transition:transform .2s var(--e), opacity .2s var(--e);
}
.im2 .im2-skip:focus{ transform:none; opacity:1; pointer-events:auto; }
.im2 .im2-head{
  position:sticky; top:0; z-index:var(--z-head);
  background:var(--headbg);
  border-bottom:3px solid var(--line);
}
.im2 .im2-head-in{
  max-width:1440px; margin-inline:auto;
  padding:0 clamp(14px,3vw,32px);
  display:flex; align-items:stretch; gap:18px;
  height:72px;
  transition:height .25s var(--e);
}
.im2 .im2-head.is-slim .im2-head-in{ height:58px; }
.im2 .im2-logo{
  display:flex; align-items:center; gap:2px;
  font-family:var(--f); font-stretch:112%; font-weight:900;
  font-size:1.14rem; letter-spacing:.01em; text-transform:uppercase;
  color:var(--tx); text-decoration:none; white-space:nowrap;
}
.im2 .im2-logo .inf{
  color:var(--cyan); font-size:1.5em; line-height:0; font-weight:900;
  transform:translateY(-.04em); display:inline-block; padding:0 .06em;
}
.im2 .im2-nav{ display:flex; align-items:stretch; margin-left:auto; }
.im2 .im2-nav>a{
  display:flex; align-items:center; padding:0 clamp(10px,1.4vw,20px);
  font-family:var(--f); font-stretch:82%; font-weight:750;
  text-transform:uppercase; letter-spacing:.06em; font-size:.86rem;
  color:var(--tx); text-decoration:none; position:relative;
}
.im2 .im2-nav>a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:10px; height:6px;
  background:var(--acid); border:2px solid var(--line);
  transform:scaleX(0); transform-origin:left; transition:transform .2s var(--e);
}
.im2 .im2-nav>a:hover::after,.im2 .im2-nav>a.act::after{ transform:scaleX(1); }
.im2 .im2-hcta{ display:flex; align-items:center; gap:12px; margin-left:6px; }
.im2 .im2-hcta .b{ padding:.72em 1.15em; font-size:.82rem; box-shadow:4px 4px 0 var(--shc); }
.im2 .im2-hcta .b:hover{ box-shadow:6px 6px 0 var(--shc); }
/* theme toggle */
.im2 .im2-tgl{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; align-self:center;
  border:var(--bd); background:var(--card); color:var(--tx);
  box-shadow:4px 4px 0 var(--shc); cursor:pointer;
  transition:transform .16s var(--e), box-shadow .16s var(--e);
  font-size:1.05rem; line-height:1;
}
.im2 .im2-tgl:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shc); }
.im2 .im2-tgl:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--shc); }
.im2 .im2-tgl .ic-sun{ display:none; }
html[data-theme="dark"] .im2 .im2-tgl .ic-sun{ display:block; }
html[data-theme="dark"] .im2 .im2-tgl .ic-moon{ display:none; }
/* burger */
.im2 .im2-bgr{
  display:none; width:44px; height:44px; align-self:center; margin-left:auto;
  border:var(--bd); background:var(--card); box-shadow:4px 4px 0 var(--shc);
  flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer;
}
.im2 .im2-bgr span{ display:block; width:20px; height:3px; background:var(--tx); transition:transform .2s var(--e), opacity .2s var(--e); }
.im2 .im2-bgr[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.im2 .im2-bgr[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.im2 .im2-bgr[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
/* mobile menu */
.im2 .im2-menu{
  display:none; position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--cyan); color:var(--ink0);
  padding:96px clamp(20px,6vw,48px) 40px;
  flex-direction:column; gap:8px;
}
.im2 .im2-menu.open{ display:flex; }
.im2 .im2-menu>a{
  font-family:var(--f); font-stretch:120%; font-weight:900; text-transform:uppercase;
  font-size:clamp(2rem,9vw,3.2rem); line-height:1.14; color:var(--ink0); text-decoration:none;
  border-bottom:3px solid var(--ink0); padding:.22em 0;
  display:flex; justify-content:space-between; align-items:center;
}
.im2 .im2-menu>a .ar{ font-size:.6em; }
.im2 .im2-menu-x{
  position:absolute; top:16px; right:16px; width:52px; height:52px;
  border:3px solid var(--ink0); background:#fff; box-shadow:4px 4px 0 var(--ink0);
  font-size:1.4rem; font-weight:900; cursor:pointer; color:var(--ink0);
}
.im2 .im2-menu .im2-menu-cta{ margin-top:auto; display:flex; flex-direction:column; gap:18px; }
.im2 .im2-menu .im2-menu-btn{
  width:100%; justify-content:space-between;
  font-size:1.05rem; padding:1.25em 1.4em;
  box-shadow:6px 6px 0 var(--ink0);
}
.im2 .im2-menu-meta{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 18px; }
.im2 .im2-menu-meta a{
  color:var(--ink0); font-weight:700; font-size:.95rem;
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
}
@media (max-width:920px){
  .im2 .im2-nav{ display:none; }
  .im2 .im2-hcta .b{ display:none; }
  .im2 .im2-bgr{ display:flex; order:9; margin-left:0; }
  .im2 .im2-hcta{ margin-left:auto; }
}

/* ---------- 9. Hero (home) ---------- */
.im2 .im2-hero{ position:relative; overflow:clip; padding:clamp(48px,7vh,90px) 0 0; }
.im2 .im2-hero .wrap-w{ position:relative; }
.im2 .hero-lower{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(24px,4vw,64px); align-items:center; margin-top:clamp(24px,3.4vh,40px); }
.im2 .hero-kick{ margin:0 0 20px; display:flex; gap:16px; flex-wrap:wrap; }
.im2 .hero-h .row-w{ display:block; overflow:hidden; }
.im2 .inf-word{ color:#fff; -webkit-text-stroke:2.5px var(--ink0); padding:0 .05em; }
.s-ink .inf-word{ -webkit-text-stroke-color:var(--cyan); }
.im2 .hero-sub{ margin:0 0 30px; font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.55; font-weight:480; max-width:46ch; }
.im2 .hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:clamp(40px,6vh,72px); }
/* infinity SVG — sized in em so it scales WITH the headline and never
   exceeds the line box (a px width taller than the mobile line height
   inflated the gap above its line) */
.im2 .inf-svg{ display:inline-block; width:1.75em; height:.8em; vertical-align:baseline; margin-left:.1em; margin-bottom:-.04em; }
.im2 .inf-svg path{ stroke:var(--ink0); stroke-width:11; fill:none; stroke-linecap:round; }
.im2 .inf-svg .p2{ stroke:#fff; stroke-width:11; }
/* showreel card */
.im2 .reel{
  position:relative; border:var(--bd); background:var(--ink0);
  box-shadow:10px 10px 0 var(--shc); margin-bottom:clamp(40px,6vh,72px);
}
.im2 .reel video{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.im2 .reel .stkr{ position:absolute; }
.im2 .reel .reel-top{ top:-16px; right:16px; left:auto; bottom:auto; }
.im2 .reel .reel-tag{ left:-12px; bottom:18px; top:auto; right:auto; --rot:2deg; }
@media (max-width:920px){
  .im2 .hero-lower{ grid-template-columns:1fr; align-items:start; }
  .im2 .reel{ max-width:560px; }
}

/* ---------- 10. Ledger rows (why us) ---------- */
.im2 .ledger{ border:var(--bd); background:var(--card); box-shadow:10px 10px 0 var(--shc); }
.im2 .ledger-row{
  display:grid; grid-template-columns:minmax(180px,4fr) 7fr auto; gap:16px 32px;
  align-items:center; padding:clamp(18px,2.6vw,30px) clamp(18px,3vw,40px);
  border-top:3px solid var(--line);
  transition:background-color .16s var(--e), color .16s var(--e);
}
.im2 .ledger-row:first-child{ border-top:0; }
.im2 .ledger-row p{ margin:0; color:var(--mut); }
.im2 .ledger-row .lg-ar{ font-size:1.5rem; font-weight:900; transition:transform .16s var(--e); }
.im2 .ledger-row:hover{ background:var(--acid); color:var(--ink0); }
.im2 .ledger-row:hover p{ color:#3A3410; }
.im2 .ledger-row:hover .lg-ar{ transform:translateX(6px); }
@media (max-width:720px){ .im2 .ledger-row{ grid-template-columns:1fr; gap:6px; } .im2 .ledger-row .lg-ar{ display:none; } }

/* ---------- 11. Service mosaic (gapless shared borders) ---------- */
.im2 .mosaic{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:var(--bd); background:var(--line); gap:3px;
  box-shadow:10px 10px 0 var(--shc);
}
.im2 .mos{
  background:var(--card); color:var(--tx);
  padding:clamp(22px,3vw,36px);
  display:flex; flex-direction:column; gap:14px; min-height:210px;
  position:relative; text-decoration:none;
  transition:background-color .16s var(--e), color .16s var(--e);
}
.im2 .mos p{ margin:0; color:var(--mut); font-size:.98rem; }
.im2 .mos .mos-ar{ margin-top:auto; font-size:1.4rem; font-weight:900; transition:transform .16s var(--e); }
.im2 .mos:hover{ background:var(--cyan); color:var(--ink0); }
.im2 .mos:hover p{ color:#0F2233; }
.im2 .mos:hover .mos-ar{ transform:translateX(8px); }
.im2 .mos--wide{ grid-column:span 2; flex-direction:row; align-items:center; gap:28px; }
.im2 .mos--wide img{ width:clamp(120px,14vw,190px); flex:none; }
.im2 .mos--img img{ width:clamp(96px,10vw,140px); }
.im2 .mosaic--2{ grid-template-columns:1fr 1fr; }
@media (max-width:920px){
  .im2 .mosaic{ grid-template-columns:1fr 1fr; }
  .im2 .mos--wide{ grid-column:span 2; flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (max-width:640px){ .im2 .mosaic,.im2 .mosaic--2{ grid-template-columns:1fr; } .im2 .mos--wide{ grid-column:span 1; } }

/* ---------- 12. Statement band (s-ink) ---------- */
.im2 .stmt{ max-width:1000px; }
.im2 .stmt .d2{ text-transform:none; letter-spacing:0; font-stretch:112%; font-weight:820; line-height:1.06; }
.im2 .stmt-q{
  margin:34px 0 0; padding:clamp(20px,3vw,32px);
  border:3px solid var(--paper0); background:var(--card);
  box-shadow:8px 8px 0 #04070F; max-width:640px;
  font-size:1.05rem; line-height:1.6; font-style:normal;
  transform:rotate(-.6deg);
}
.im2 .stmt-q footer{ margin-top:14px; }

/* ---------- 13. Team chips ---------- */
.im2 .crew{ display:flex; flex-wrap:wrap; gap:clamp(14px,2vw,24px); }
.im2 .crew-card{
  flex:1 1 220px; max-width:300px;
  border:var(--bd); background:var(--card);
  box-shadow:7px 7px 0 var(--shc); padding:22px;
  display:flex; flex-direction:column; gap:4px;
  transition:transform .16s var(--e), box-shadow .16s var(--e);
}
.im2 .crew-card:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--shc); }
.im2 .crew-card .avz{
  width:64px; height:64px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--line); background:var(--cyan); color:var(--ink0);
  font-family:var(--f); font-stretch:110%; font-weight:900; font-size:1.3rem;
  box-shadow:4px 4px 0 var(--shc);
}
.im2 .crew-card:nth-child(4n+2) .avz{ background:var(--acid); }
.im2 .crew-card:nth-child(4n+3) .avz{ background:#fff; }
.im2 .crew-card:nth-child(4n+4) .avz{ background:var(--cyan); }
.im2 .crew-name{ font-stretch:112%; font-weight:850; font-size:1.12rem; text-transform:uppercase; line-height:1.15; }
.im2 .crew-role{ color:var(--mut); font-stretch:82%; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.8rem; }
/* small chips (leads) */
.im2 .crew-chips{ display:flex; flex-wrap:wrap; gap:12px 14px; }
.im2 .chip{
  display:inline-flex; align-items:center; gap:.6em;
  border:3px solid var(--line); background:var(--card); color:var(--tx);
  box-shadow:4px 4px 0 var(--shc); padding:.55em 1em;
  font-stretch:86%; font-weight:750; font-size:.92rem; text-transform:uppercase; letter-spacing:.03em;
  transform:rotate(var(--rot,0deg));
  transition:transform .16s var(--e), background-color .16s var(--e);
}
.im2 .chip:hover{ transform:rotate(0deg) translate(-2px,-2px); background:var(--acid); color:var(--ink0); }
.im2 .chip .inf{ color:var(--cyan); font-weight:900; }
.im2 .chip:hover .inf{ color:var(--ink0); }

/* ---------- 14. Testimonial stickers ---------- */
.im2 .quotes{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.4vw,44px); align-items:start; }
.im2 .qcard{
  border:var(--bd); background:var(--card); color:var(--tx);
  box-shadow:8px 8px 0 var(--shc);
  padding:clamp(22px,3vw,34px);
  transform:rotate(var(--rot,0deg));
  transition:transform .18s var(--e), box-shadow .18s var(--e);
}
.im2 .qcard:hover{ transform:rotate(0deg) translate(-3px,-3px); box-shadow:11px 11px 0 var(--shc); }
.im2 .qcard blockquote{ margin:0; font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.55; font-weight:470; border:0; padding:0; font-style:normal; }
.im2 .qcard blockquote::before{ content:"“"; display:block; font-stretch:125%; font-weight:900; font-size:2.6rem; line-height:.6; margin-bottom:14px; color:var(--cyan); }
.im2 .qcard footer{ margin-top:18px; display:flex; align-items:center; gap:10px; }
.im2 .qcard footer .lbl{ color:var(--mut); }
.im2 .qcard footer .dot{ width:14px; height:14px; background:var(--acid); border:2px solid var(--line); flex:none; }
@media (max-width:820px){ .im2 .quotes{ grid-template-columns:1fr; } }

/* ---------- 15. Big CTA (s-acid) ---------- */
.im2 .cta-band{ text-align:left; }
.im2 .cta-band .d1{ font-size:clamp(1.65rem,6vw,5rem); }
.im2 .cta-row{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:34px; }
.im2 .cta-note{ margin:0; font-weight:600; }

/* ---------- 16. Footer ---------- */
.im2 .im2-foot{ border-top:3px solid var(--line); }
.im2 .im2-foot .foot-mq{ border-top:0; }
.im2 .foot-main{
  display:grid; grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));
  gap:clamp(24px,4vw,56px); padding:clamp(44px,6vw,80px) 0;
}
.im2 .foot-brand p{ margin:14px 0 0; color:var(--mut); max-width:32ch; }
.im2 .foot-word{
  font-stretch:125%; font-weight:900; text-transform:uppercase; font-size:1.5rem; line-height:1;
}
.im2 .foot-word .inf{ color:var(--cyan); }
.im2 .foot-col h2{ font-stretch:80%; font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; margin:0 0 16px; color:var(--mut); }
.im2 .foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.im2 .foot-col a{ color:inherit; text-decoration:none; font-weight:600; }
.im2 .foot-col a:hover{ color:var(--cyan); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; }
.im2 .foot-col li>span{ color:var(--mut); }
.im2 .foot-bottom{
  border-top:3px solid var(--line);
  padding:18px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:.88rem; color:var(--mut);
}
@media (max-width:920px){ .im2 .foot-main{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .im2 .foot-main{ grid-template-columns:1fr; } }

/* ---------- 17. Page heroes (inner pages) ---------- */
.im2 .phero{ padding:clamp(56px,9vh,110px) 0 clamp(44px,7vh,80px); position:relative; overflow:clip; }
.im2 .phero .d1{ margin-bottom:20px; }
.im2 .phero .lead{ max-width:56ch; }

/* ---------- 18. Split slabs (services page) ---------- */
.im2 .svc-split{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px); align-items:center;
}
.im2 .svc-split.rev>.svc-fig{ order:-1; }
.im2 .svc-fig{
  border:var(--bd); background:#fff; box-shadow:10px 10px 0 var(--shc);
  padding:clamp(24px,3.4vw,44px); position:relative;
}
.im2 .svc-fig img{ display:block; width:100%; height:auto; max-height:320px; object-fit:contain; }
.im2 .svc-fig .stkr{ position:absolute; top:-16px; left:22px; }
.im2 .svc-body .d2{ margin-bottom:18px; }
.im2 .svc-body p{ font-size:1.04rem; }
.im2 .svc-list{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.im2 .svc-list li{ display:flex; gap:12px; align-items:baseline; font-weight:600; }
.im2 .svc-list li::before{ content:"∞"; font-weight:900; color:var(--cyan); flex:none; }
.s-cyan .svc-list li::before,.s-acid .svc-list li::before{ color:var(--ink0); }
@media (max-width:860px){ .im2 .svc-split{ grid-template-columns:1fr; } .im2 .svc-split.rev>.svc-fig{ order:0; } }

/* ---------- 19. Portfolio wall ---------- */
.im2 .wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:3px; border:var(--bd); background:var(--line);
  box-shadow:10px 10px 0 var(--shc);
}
.im2 .wall-t{
  background:#fff; padding:18px; display:flex; flex-direction:column; gap:12px;
  transition:background-color .16s var(--e);
  position:relative; min-height:200px;
}
.im2 .wall-t img{ width:100%; aspect-ratio:1/1; object-fit:contain; mix-blend-mode:multiply; transition:transform .2s var(--e); }
.im2 .wall-t:hover{ background:var(--acid); }
.im2 .wall-t:hover img{ transform:scale(1.05) rotate(-1deg); }
.im2 .wall-t h3{ margin:auto 0 0; font-stretch:84%; font-weight:750; font-size:.86rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink0); }
html[data-theme="dark"] .im2 .wall-t{ background:#E9EFEE; }
html[data-theme="dark"] .im2 .wall-t:hover{ background:var(--acid); }

/* ---------- 20. Process steps (real sequence — numbered) ---------- */
.im2 .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,28px); position:relative; }
.im2 .step{
  border:var(--bd); background:var(--card); box-shadow:7px 7px 0 var(--shc);
  padding:24px; position:relative;
}
.im2 .step-n{
  position:absolute; top:-20px; left:18px;
  background:var(--cyan); color:var(--ink0); border:3px solid var(--line);
  box-shadow:4px 4px 0 var(--shc);
  font-stretch:110%; font-weight:900; font-size:1.05rem; padding:.3em .6em; line-height:1;
}
.im2 .step h3{ margin:10px 0 8px; }
.im2 .step p{ margin:0; color:var(--mut); font-size:.96rem; }
@media (max-width:920px){ .im2 .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .im2 .steps{ grid-template-columns:1fr; } }

/* ---------- 21. Values grid (about) ---------- */
.im2 .vals{ display:grid; grid-template-columns:1fr 1fr; gap:3px; border:var(--bd); background:var(--line); box-shadow:10px 10px 0 var(--shc); }
.im2 .val{ background:var(--card); padding:clamp(22px,3vw,36px); transition:background-color .16s var(--e), color .16s var(--e); }
.im2 .val h3{ margin:0 0 10px; }
.im2 .val p{ margin:0; color:var(--mut); }
.im2 .val:hover{ background:var(--cyan); color:var(--ink0); }
.im2 .val:hover p{ color:#0F2233; }
@media (max-width:640px){ .im2 .vals{ grid-template-columns:1fr; } }

/* ---------- 22. Contact ---------- */
.im2 .con-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.5vw,64px); align-items:start; }
@media (max-width:860px){ .im2 .con-grid{ grid-template-columns:1fr; } }
.im2 .con-list{ display:flex; flex-direction:column; gap:16px; }
.im2 .con-item{
  border:var(--bd); background:var(--card); box-shadow:6px 6px 0 var(--shc);
  padding:18px 20px; display:flex; flex-direction:column; gap:2px;
  color:inherit; text-decoration:none;
  transition:transform .16s var(--e), box-shadow .16s var(--e), background-color .16s var(--e), color .16s var(--e);
}
.im2 a.con-item:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--shc); background:var(--acid); color:var(--ink0); text-decoration:none; }
.im2 a.con-item:hover .lbl{ color:#3A3410; }
.im2 .con-item .lbl{ color:var(--mut); }
.im2 .con-item strong{ font-stretch:100%; font-weight:800; font-size:1.08rem; word-break:break-word; }
/* form card */
.im2 .form-card{
  border:var(--bd); background:var(--card); box-shadow:10px 10px 0 var(--shc);
  padding:clamp(24px,3.4vw,44px); position:relative;
}
.im2 .form-card .stkr{ position:absolute; top:-16px; right:24px; }
.im2 .form-card label,.im2 .s_website_form label{
  font-family:var(--f); font-stretch:80%; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.8rem; margin-bottom:8px; display:block; color:inherit;
}
.im2 .form-card .form-group{ margin-bottom:20px; }
.im2 .form-control, .im2 select.form-control, .im2 textarea.form-control,
.im2 .form-select, .im2 input.form-control{
  width:100%;
  border:3px solid var(--line); border-radius:0;
  background:var(--bg); color:var(--tx);
  font-family:var(--f); font-weight:500; font-size:1rem;
  padding:.85em 1em; line-height:1.4; min-height:44px;
  box-shadow:none; transition:box-shadow .15s var(--e), transform .15s var(--e);
}
.im2 .form-control:focus,.im2 .form-select:focus{
  outline:none; border-color:var(--line);
  box-shadow:5px 5px 0 var(--cyan);
  transform:translate(-2px,-2px);
  background:var(--bg); color:var(--tx);
}
.im2 .form-control::placeholder{ color:#51617A; opacity:1; }
html[data-theme="dark"] .im2 .form-control::placeholder{ color:#93A1B8; }
/* honor Bootstrap validation coloring minimally */
.im2 .form-control.is-invalid{ border-color:#B4004E; box-shadow:4px 4px 0 #B4004E; }

/* ---------- 23. Jobs (index/cards) ---------- */
.im2 .job-list{ display:flex; flex-direction:column; gap:20px; }
.im2 .job-card{
  border:var(--bd); background:var(--card); box-shadow:7px 7px 0 var(--shc);
  padding:clamp(20px,2.6vw,30px); display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  color:inherit; text-decoration:none;
  transition:transform .16s var(--e), box-shadow .16s var(--e);
}
.im2 .job-card:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--shc); text-decoration:none; color:inherit; }
.im2 .job-card .job-t{ margin-right:auto; }
.im2 .job-card h3{ margin:0 0 4px; }
.im2 .job-empty{
  border:var(--bd); background:var(--card); box-shadow:8px 8px 0 var(--shc);
  padding:clamp(28px,4vw,48px); max-width:640px;
}
.im2 .job-empty .d3{ margin-bottom:10px; }

/* ---------- 24. Module-page base layer (.im2-standard: jobs detail, appointment, thankyou…) ---------- */
.im2 #wrap{ background:var(--bg); }
.im2-standard #wrap{ padding:clamp(36px,5vw,64px) 0 clamp(48px,6vw,80px); min-height:62vh; }
.im2-standard #wrap h1{ font-family:var(--f); font-stretch:122%; font-weight:900; text-transform:uppercase; letter-spacing:-.01em; line-height:1; font-size:clamp(1.9rem,4.4vw,3.4rem); }
.im2-standard #wrap h2{ font-family:var(--f); font-stretch:118%; font-weight:850; text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.08; }
.im2-standard #wrap h3,.im2-standard #wrap h4{ font-family:var(--f); font-stretch:112%; font-weight:800; line-height:1.15; }
.im2-standard #wrap h5,.im2-standard #wrap h6{ font-family:var(--f); font-stretch:86%; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.im2-standard #wrap .text-muted{ color:var(--mut) !important; }
.im2 #wrap .btn{ border-radius:0; font-family:var(--f); font-stretch:82%; font-weight:800; text-transform:uppercase; letter-spacing:.05em; transition:transform .16s var(--e), box-shadow .16s var(--e); }
.im2 #wrap .btn-primary,.im2 #wrap .btn-secondary{
  background:var(--acid); color:var(--ink0); border:3px solid var(--ink0);
  box-shadow:5px 5px 0 var(--shc); padding:.8em 1.4em;
}
.im2 #wrap .btn-primary:hover,.im2 #wrap .btn-secondary:hover{ background:var(--acid); color:var(--ink0); transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--shc); }
.im2 #wrap .btn-primary:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--shc); }
.im2 #wrap .btn-outline-primary,.im2 #wrap .btn-outline-secondary,.im2 #wrap .btn-light{
  background:var(--card); color:var(--tx); border:3px solid var(--line); box-shadow:4px 4px 0 var(--shc);
}
.im2 #wrap .btn-outline-primary:hover,.im2 #wrap .btn-outline-secondary:hover,.im2 #wrap .btn-light:hover{ background:var(--card); color:var(--tx); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shc); }
.im2 #wrap .btn-link{ color:var(--tx); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:4px; box-shadow:none; border:0; }
.im2-standard #wrap .card{ border:var(--bd); border-radius:0; background:var(--card); color:var(--tx); box-shadow:7px 7px 0 var(--shc); }
.im2-standard #wrap .badge{ border-radius:0; border:2px solid var(--line); background:var(--cyan); color:var(--ink0); font-weight:800; }
.im2-standard #wrap a:not(.btn):not(.b){ color:inherit; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.im2-standard #wrap a:not(.btn):not(.b):hover{ color:var(--cyan); }
.im2-standard #wrap .breadcrumb{ background:transparent; }

/* ---------- 25. Job detail bodies (.im-jd-* legacy classes, restyled) ---------- */
.im2 .job-description-content ul{ list-style:none; padding-left:0; }
.im2 .job-description-content li{ position:relative; padding-left:24px; margin-bottom:8px; }
.im2 .job-description-content li::before{
  content:""; position:absolute; left:0; top:.52em; width:11px; height:11px;
  background:var(--cyan); border:2px solid var(--line);
}
.im2 .im-jd-row,.im2 .im-jd-weeks{ align-items:stretch; }
.im2 .im-jd-facts,.im2 .im-jd-take,.im2 .im-jd-manifesto,.im2 .glass-card{
  border:var(--bd) !important; border-radius:0 !important;
  background:var(--card) !important; color:var(--tx) !important;
  box-shadow:7px 7px 0 var(--shc) !important; backdrop-filter:none !important;
}
.im2 .im-jd-week{ border:var(--bd); background:var(--card); box-shadow:5px 5px 0 var(--shc); border-radius:0; }
.im2 .im-jd-week-chip,.im2 .section-label{
  display:inline-block; background:var(--cyan); color:var(--ink0);
  border:2px solid var(--ink0); padding:.3em .8em; border-radius:0;
  font-family:var(--f); font-stretch:80%; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem;
}
.im2 .im-jd-list li::before{ background:var(--acid); }

/* ---------- 25b. Job detail/apply hero + CTA bands (legacy view classes) ---------- */
.im2 .im2-jdhero{
  background:var(--cyan); color:var(--ink0);
  border-bottom:3px solid var(--ink0);
  --line:var(--ink0); --shc:var(--ink0); --mut:#0F2233; --card:#FFFFFF; --tx:var(--ink0);
  padding:clamp(44px,7vh,80px) 0 clamp(36px,5vh,64px);
}
.im2 .im2-jdhero .hero-title{
  font-family:var(--f); font-stretch:122%; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:.96; color:inherit;
}
.im2 .im2-jdhero .section-label{ background:#fff; }
.im2 .im2-jdhero :where(a){ color:inherit; }
.im2 .im2-jdhero a.b-ink{ color:var(--paper0); }
.im2 .im2-jdhero a.b-ink:hover{ color:var(--paper0); }
.im2 .im2-jdhero .text-gradient{ background:none; -webkit-text-fill-color:currentColor; color:inherit; }
.im2-standard #wrap:has(.im2-jdhero){ padding-top:0; }
.im2 .im2-jdcta{
  background:var(--acid); color:var(--ink0);
  border-top:3px solid var(--ink0);
  --line:var(--ink0); --shc:var(--ink0); --mut:#3A3410; --tx:var(--ink0);
}
.im2 .im2-jdcta .section-title{
  font-family:var(--f); font-stretch:122%; font-weight:900;
  text-transform:uppercase; font-size:clamp(1.6rem,3.4vw,2.6rem); color:inherit;
}
.im2 .im2-jdcta p{ color:inherit; }
/* At-a-glance facts card rows */
.im2 .im-jd-facts{ padding:22px 24px !important; }
.im2 .im-jd-facts h4{ margin:0 0 12px; font-stretch:118%; font-weight:850; text-transform:uppercase; }
.im2 .im-jd-facts ul{ list-style:none; margin:0; padding:0; }
.im2 .im-jd-facts li{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:.5em 0 !important; }
.im2 .im-jd-facts li::before{ display:none !important; }
.im2 .im-jd-facts li+li{ border-top:2px solid var(--bg); }
.im2 .im-jd-facts li>span{ color:var(--mut); font-stretch:80%; font-weight:750; text-transform:uppercase; letter-spacing:.06em; font-size:.76rem; }
.im2 .im-jd-facts li>b{ font-weight:800; text-align:right; }

/* ---------- 26. Appointment ---------- */
.im2 .o_appointment,.im2 .o_appointment_details_column{
  background:var(--card); border:var(--bd); box-shadow:8px 8px 0 var(--shc);
  padding:24px; border-radius:0;
}
.im2 .o_appointment .o_day_wrapper{
  display:flex !important; align-items:center; justify-content:center;
  width:auto !important; border-radius:0;
  color:var(--mut) !important;
}
.im2 .o_appointment .o_day_wrapper.o_slot_button{ color:var(--tx) !important; }
.im2 .o_appointment .o_slot_button{
  border:2px solid var(--line) !important; border-radius:0 !important;
  background:var(--bg); color:var(--tx); font-weight:700;
  box-shadow:none;
}
.im2 .o_appointment .o_slot_button:hover,.im2 .o_appointment .o_slot_button.active{
  background:var(--acid) !important; color:var(--ink0) !important; border-color:var(--ink0) !important;
}
.im2 .o_appointment .o_slot_hours{ width:100% !important; }
.im2 .o_appointment .o_slot_hours .o_slot_button{ width:100%; }
.im2 .o_appointment select,.im2 .o_appointment .form-select{ border:2px solid var(--line); border-radius:0; background:var(--bg); color:var(--tx); }
html[data-theme="dark"] .im2 .o_appointment .bg-light{ background:#1A2747 !important; }

/* ---------- 27. Search / misc odoo widgets ---------- */
.im2 .o_searchbar_form input{ border:3px solid var(--line); border-radius:0; background:var(--bg); color:var(--tx); }
.im2 .modal-content{ border:var(--bd); border-radius:0; background:var(--card); color:var(--tx); }
.im2 .dropdown-menu{ border:var(--bd); border-radius:0; background:var(--card); color:var(--tx); box-shadow:6px 6px 0 var(--shc); }
.im2 .dropdown-item{ color:inherit; font-weight:600; }
.im2 .dropdown-item:hover{ background:var(--acid); color:var(--ink0); }

/* Boot curtain: inline header script adds html.im2-boot BEFORE first paint so
   the hero never flashes its final state before the load timeline replays it.
   Theme JS removes the class the instant the timeline is armed; the inline
   script self-clears after 2.5s and reduced-motion never adds it. */
html.im2-boot .im2-head,
html.im2-boot .im2-hero .hero-kick, html.im2-boot .im2-hero .hero-h,
html.im2-boot .im2-hero .hero-sub, html.im2-boot .im2-hero .hero-ctas,
html.im2-boot .im2-hero .reel,
html.im2-boot .phero .hero-kick, html.im2-boot .phero .hero-h,
html.im2-boot .phero .lead, html.im2-boot .phero .hero-ctas{ opacity:0; }

/* ---------- 28. Reveal states (JS-driven; fail-open: visible by default) ---------- */
.im2 .rv{ opacity:1; transform:none; }
.im2.js-motion .rv{ opacity:0; transform:translateY(26px); }
.im2.js-motion .rv.rv-in{ opacity:1; transform:none; transition:opacity .6s var(--e), transform .6s var(--e); }
/* word-mask rows (JS wraps) */
.im2 .wm{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
.im2 .wm>.w{ display:inline-block; will-change:transform; }

/* ---------- 29. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .im2 .mq-in{ animation:none; }
  .im2 .b,.im2 .chip,.im2 .qcard,.im2 .crew-card,.im2 .con-item,.im2 .job-card,.im2 .wall-t img{ transition:none; }
  .im2.js-motion .rv{ opacity:1; transform:none; }
}

/* ---------- 30. Utilities ---------- */
.im2 .mt-0{ margin-top:0; } .im2 .mb-0{ margin-bottom:0; }
.im2 .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; }
.im2 .rot-1{ --rot:-2deg; } .im2 .rot-2{ --rot:2.5deg; } .im2 .rot-3{ --rot:-1.2deg; } .im2 .rot-4{ --rot:1.6deg; }