@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Sans:wdth,wght@75..100,400..700&family=Inter:wght@400;500;600&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --ink:#111;
  --paper:#fff;
  --blue:#3f63ff;
  --fluor:#b7ff2f;
  --line:#d7d7d7;
  --muted:#6f6f6f;
  --oat:#ecd06f;
  --super-bg:#f5efe7;
  --super-green:#15af9d;
  --super-navy:#1a2a40;
  --max:1440px;
  --outer:clamp(22px,3.2vw,48px);
  --gutter:clamp(12px,1.35vw,20px);
  --u:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Instrument Sans",Arial,sans-serif;font-size:15px;line-height:1.38}
a{color:inherit;text-decoration:none}
::selection{background:var(--fluor)}
.shell{width:min(100%,var(--max));margin:auto;padding-inline:var(--outer)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.header{height:52px;border-bottom:1px solid var(--line);background:var(--page,#fff);position:sticky;top:0;z-index:20}
.header .inner{height:100%;display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center}
.brand{font-size:13px;font-weight:650;letter-spacing:-.015em}
.slash{color:var(--blue)}
.nav,.langs{display:flex;gap:18px;align-items:center;font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.nav a,.langs a{padding:2px 1px;border-bottom:1px solid transparent}
.nav a:hover,.langs a:hover{background:var(--fluor)}
.lang-active{border-bottom-color:currentColor!important}
.kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3,p{margin-top:0}
.home-intro{padding-top:56px;padding-bottom:48px}
.home-intro .title{grid-column:1/8;font-size:clamp(38px,4.5vw,66px);line-height:.96;letter-spacing:-.045em;font-weight:520;margin:12px 0 22px}
.home-intro .bio{grid-column:1/8;font-size:clamp(17px,1.45vw,21px);max-width:720px;letter-spacing:-.015em;margin:0}
.portrait{
  grid-column:11/13;grid-row:1/4;align-self:end;justify-self:end;
  width:min(112px,100%);aspect-ratio:1;border:1px solid var(--line);
  border-radius:50%;overflow:hidden;background:#fff
}
.slideshow-section{padding-bottom:56px}
.slideshow{height:clamp(180px,18vw,250px);position:relative;overflow:hidden;border-top:1px solid var(--blue);border-bottom:1px solid var(--blue)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;background:#e9e9e9}
.slide.active{opacity:1}
.slide:nth-child(2){background:#dedede}.slide:nth-child(3){background:#d4d4d4}
.slide-meta{display:flex;justify-content:space-between;padding-top:7px;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.slide-meta button{font:inherit;border:0;background:transparent;padding:1px 0;cursor:pointer}
.slide-meta button:hover{background:var(--fluor)}
.practice-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.practice{grid-column:span 4;height:336px;padding:22px 22px 22px 0;display:grid;grid-template-rows:auto auto 1fr auto;align-items:start;border-right:1px solid var(--line)}
.practice:nth-child(2),.practice:nth-child(3){padding-left:22px}
.practice:last-child{border-right:0}
.practice h2{font-size:clamp(28px,2.7vw,40px);line-height:1;letter-spacing:-.04em;font-weight:520;margin:48px 0 13px}
.practice p{max-width:39ch;margin:0}
.link{justify-self:start;align-self:end;border-bottom:1px solid;padding-bottom:2px}
.link:hover{background:var(--fluor)}
.about{padding-top:56px;padding-bottom:48px}
.about-main{grid-column:1/8}
.about-contact{grid-column:9/13}
.about h2{font-size:clamp(27px,3vw,42px);letter-spacing:-.04em;line-height:1.02;font-weight:520;margin:13px 0 20px}
.about p{font-family:"Libre Caslon Text",Georgia,serif;font-size:18px;line-height:1.48;max-width:62ch}
.contact-list{display:grid;gap:7px;margin-top:14px}
.contact-list a:hover{background:var(--fluor)}
.footer{height:48px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.07em;text-transform:uppercase}

/* OAT */
body.oat{--page:#fff}
body.oat ::selection{background:var(--oat)}
body.oat .slash{color:#111}
body.oat .nav a:hover,body.oat .langs a:hover,body.oat .link:hover,body.oat .cta:hover{background:var(--oat)}
.oat-hero{height:456px;border-bottom:1px solid #cfcfcf;padding-top:52px;padding-bottom:40px}
.oat-hero .identity{grid-column:1/5}
.oat-hero .message{grid-column:6/13;display:flex;flex-direction:column;height:100%}
.oat-hero h1{font-size:clamp(40px,4.7vw,68px);line-height:.96;letter-spacing:-.05em;font-weight:520;margin:12px 0 0}
.oat-hero .lead{font-size:clamp(18px,1.55vw,22px);max-width:720px;margin:0}
.cta{margin-top:auto;align-self:flex-start;border-bottom:1px solid;padding-bottom:2px}
.services{border-bottom:1px solid #cfcfcf}
.service{grid-column:span 4;height:408px;padding:22px 22px 22px 0;display:grid;grid-template-rows:auto auto 1fr auto;border-right:1px solid #cfcfcf}
.service:nth-child(2),.service:nth-child(3){padding-left:22px}
.service:last-child{border-right:0}
.service h2{font-size:clamp(25px,2.35vw,35px);letter-spacing:-.035em;font-weight:520;margin:44px 0 18px}
.service ul{list-style:none;padding:0;margin:0}
.service li{border-top:1px solid #e5e5e5;padding:6px 0}
.service .note{font-size:12px;color:#555;max-width:37ch;margin:14px 0 0}
.process{height:168px;border-bottom:1px solid #cfcfcf}
.step{grid-column:span 4;padding:22px 22px 18px 0;border-right:1px solid #cfcfcf}
.step:nth-child(2),.step:nth-child(3){padding-left:22px}
.step:last-child{border-right:0}
.step strong{font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.step p{margin:32px 0 0;max-width:38ch}
.pros{min-height:328px;border-bottom:1px solid #cfcfcf;padding-top:48px;padding-bottom:40px}
.pros-title{grid-column:1/5}
.pros-copy{grid-column:6/13;font-size:17px;max-width:740px}
.pros h2{font-size:clamp(30px,3.4vw,48px);line-height:1;letter-spacing:-.04em;font-weight:520;margin:12px 0}
.tags{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:26px 0}
.oat-contact{height:216px;padding-top:42px}
.oat-contact .left{grid-column:1/6}.oat-contact .right{grid-column:7/13}
.oat-contact h2{font-size:34px;letter-spacing:-.035em;font-weight:520}

/* SUPERITALICA */
body.super{--page:var(--super-bg);background:var(--super-bg)}
body.super ::selection{background:var(--super-green)}
body.super .slash{color:var(--super-green)}
body.super .nav a:hover,body.super .langs a:hover,body.super .link:hover,body.super .cta:hover{background:var(--super-green)}
.super-hero{height:408px;border-bottom:1px solid #cbd2c6;padding-top:50px}
.super-hero .title{grid-column:1/8}
.super-hero .intro{grid-column:8/13;align-self:end;padding-bottom:40px}
.super-hero h1{font-family:"Libre Caslon Text",Georgia,serif;font-weight:400;font-size:clamp(52px,6.5vw,94px);line-height:.92;letter-spacing:-.05em;margin:16px 0}
.super-hero .intro p{font-size:18px;max-width:42ch}
.formats{border-bottom:1px solid #cbd2c6}
.format{grid-column:span 4;height:376px;padding:22px 22px 22px 0;display:grid;grid-template-rows:auto auto 1fr auto;border-right:1px solid #cbd2c6}
.format:nth-child(2),.format:nth-child(3){padding-left:22px}.format:last-child{border-right:0}
.format h2{font-family:"Libre Caslon Text",Georgia,serif;font-size:clamp(29px,3vw,43px);font-weight:400;letter-spacing:-.035em;margin:48px 0 14px}
.format p{max-width:38ch}
.selection{padding-top:48px;padding-bottom:48px;border-bottom:1px solid #cbd2c6}
.selection-head{grid-column:1/13;margin-bottom:28px}
.work{min-height:238px;border-top:1px solid #aeb8aa;padding-top:9px}
.work.w6{grid-column:span 6}.work.w3{grid-column:span 3}.work.w4{grid-column:span 4}
.thumb{height:128px;background:#dce5d6;margin:9px 0 10px}
.work h3{font-family:"Libre Caslon Text",Georgia,serif;font-size:18px;font-weight:400;margin:0}
.super-contact{height:264px;padding-top:46px}
.super-contact .left{grid-column:1/7}.super-contact .right{grid-column:8/13}
.super-contact h2{font-family:"Libre Caslon Text",Georgia,serif;font-size:36px;font-weight:400;line-height:1.05}

@media(max-width:760px){
 .header{height:auto}.header .inner{grid-template-columns:1fr auto;padding-block:12px}.nav{grid-column:1/3;overflow:auto;padding-bottom:2px}
 .grid12{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home-intro .title,.home-intro .bio{grid-column:1/5}.portrait{display:none}
 .practice{grid-column:1/5;height:280px;border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}
 .about-main,.about-contact{grid-column:1/5}.about-contact{margin-top:40px}
 .oat-hero{height:auto;min-height:500px}.oat-hero .identity,.oat-hero .message{grid-column:1/5}.oat-hero .message{margin-top:48px;min-height:280px}
 .service,.step,.format{grid-column:1/5;border-right:0;border-bottom:1px solid #cfcfcf;padding-left:0!important}
 .service{height:370px}.process{height:auto}.step{min-height:150px}
 .pros{height:auto}.pros-title,.pros-copy,.oat-contact .left,.oat-contact .right{grid-column:1/5}.pros-copy,.oat-contact .right{margin-top:28px}.oat-contact{height:auto;padding-bottom:42px}
 .super-hero{height:auto;min-height:430px}.super-hero .title,.super-hero .intro{grid-column:1/5}.super-hero .intro{padding-top:70px}
 .format{height:330px}
 .selection-head,.work.w6,.work.w3,.work.w4{grid-column:1/5}.work{margin-bottom:28px}
 .super-contact{height:auto;padding-bottom:46px}.super-contact .left,.super-contact .right{grid-column:1/5}.super-contact .right{margin-top:32px}
}

.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 33%;display:block}
body.super{color:var(--super-navy)}
body.super .header, body.super .footer{border-color:color-mix(in srgb,var(--super-navy) 22%, transparent)}
body.super .kicker{color:color-mix(in srgb,var(--super-navy) 66%, transparent)}
body.super .thumb{background:color-mix(in srgb,var(--super-green) 14%, var(--super-bg))}

/* V1.2 */
.cota-bridge{min-height:184px;border-bottom:1px solid #cfcfcf;padding-top:34px;padding-bottom:30px}
.cota-bridge .label{grid-column:1/4}
.cota-bridge .copy{grid-column:5/10;font-size:16px;max-width:690px}
.cota-bridge .action{grid-column:10/13;justify-self:end;align-self:end}
.cota-bridge .action a{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:2px}
.cota-bridge .action a:hover{background:var(--oat)}

body.super{font-family:"Inter",Arial,sans-serif}
body.super .brand,body.super .nav,body.super .langs,body.super .kicker,body.super .footer{font-family:"Inter",Arial,sans-serif}
body.super h1,body.super h2,body.super h3,body.super .editorial-serif{font-family:"EB Garamond",Georgia,serif}

.super-hero .title{grid-column:1/8}
.super-hero .intro{grid-column:8/11;align-self:end;padding-bottom:40px}
.super-iso{grid-column:11/13;align-self:start;justify-self:end;width:min(104px,100%);margin-top:2px}
.super-iso img{width:100%;height:auto;display:block}

.selection-v12{padding-top:48px;padding-bottom:50px;border-bottom:1px solid #cbd2c6}
.selection-v12 .selection-head{grid-column:1/13;margin-bottom:26px}
.latest-post{grid-column:1/7;min-height:292px;border-top:1px solid #9aa99b;padding-top:10px;display:grid;grid-template-rows:auto 1fr auto;padding-right:22px}
.latest-post .latest-meta{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.latest-post h3{font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.04;margin:28px 0 14px;max-width:18ch}
.latest-post p{max-width:54ch}
.latest-post.loading{opacity:.72}
.latest-post .error{font-size:12px;color:#68736a}

.socarrat{grid-column:7/13;min-height:292px;border-top:1px solid #9aa99b;padding-top:10px;padding-left:22px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--gutter)}
.socarrat .meta{grid-column:1/3}
.socarrat .body{grid-column:3/7}
.socarrat h3{font-family:"EB Garamond",Georgia,serif;font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.04;margin:26px 0 12px}
.socarrat p{max-width:40ch}

@media(max-width:760px){
 .cota-bridge{height:auto}
 .cota-bridge .label,.cota-bridge .copy,.cota-bridge .action{grid-column:1/5}
 .cota-bridge .copy{margin-top:24px}.cota-bridge .action{justify-self:start;margin-top:24px}
 .super-iso{grid-column:4/5;width:72px}
 .selection-v12 .selection-head,.latest-post,.socarrat{grid-column:1/5}
 .latest-post{padding-right:0}.socarrat{padding-left:0;margin-top:28px;grid-template-columns:repeat(4,minmax(0,1fr))}
 .socarrat .meta,.socarrat .body{grid-column:1/5}
}

/* =========================
   SUPERITALICA V2
   ========================= */
body.super{
  --page:var(--super-bg);
  background:var(--super-bg);
  color:var(--super-navy);
  font-family:"Inter",Arial,sans-serif;
}
body.super .header{
  background:var(--super-bg);
  border-bottom:1px solid color-mix(in srgb,var(--super-navy) 18%, transparent);
}
body.super .brand,
body.super .nav,
body.super .langs,
body.super .kicker,
body.super .footer{
  font-family:"Inter",Arial,sans-serif;
}
body.super h1,
body.super h2,
body.super h3{
  font-family:"Inter",Arial,sans-serif;
}
body.super .nav a:hover,
body.super .langs a:hover,
body.super .link:hover,
body.super .cta:hover{
  background:var(--super-green);
}
.super-v2-hero{
  border-bottom:1px solid #cfc9bf;
}
.super-v2-top{
  min-height:420px;
  position:relative;
  border-bottom:1px solid #cfc9bf;
}
.super-v2-name{
  grid-column:1/7;
  padding-top:34px;
  padding-bottom:26px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.super-v2-name .wordmark{
  font-size:clamp(58px,7vw,110px);
  line-height:.78;
  letter-spacing:-.07em;
  font-weight:700;
  text-transform:uppercase;
  margin:0;
}
.super-v2-name .wordmark span{
  display:block;
}
.super-v2-amp{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}
.super-v2-amp img{
  width:56px;
  height:auto;
  display:block;
}
.super-v2-note{
  display:inline-block;
  align-self:flex-start;
  background:#e6ff19;
  color:#111;
  padding:10px 12px 9px;
  font-size:12px;
  line-height:1.2;
  transform:rotate(-1.6deg);
  box-shadow:0 1px 0 rgba(0,0,0,.05);
}
.super-v2-image{
  grid-column:7/13;
  min-height:420px;
  overflow:hidden;
  border-left:1px solid #cfc9bf;
}
.super-v2-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  display:block;
}
.super-v2-sections{
  border-bottom:1px solid #cfc9bf;
}
.super-v2-section{
  grid-column:span 3;
  height:260px;
  padding:18px 18px 20px 0;
  border-right:1px solid #cfc9bf;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
.super-v2-section:nth-child(2),
.super-v2-section:nth-child(3),
.super-v2-section:nth-child(4){
  padding-left:18px;
}
.super-v2-section:last-child{
  border-right:0;
}
.super-symbol{
  width:18px;height:18px;margin-bottom:14px;
}
.super-symbol.circle{border-radius:50%;background:var(--super-green)}
.super-symbol.square{background:#ff5a3d}
.super-symbol.triangle{
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid #e6ff19;
}
.super-symbol.cross{
  position:relative;width:18px;height:18px;
}
.super-symbol.cross:before,
.super-symbol.cross:after{
  content:"";position:absolute;left:8px;top:0;width:3px;height:18px;background:var(--super-navy)
}
.super-symbol.cross:before{transform:rotate(45deg)}
.super-symbol.cross:after{transform:rotate(-45deg)}
.super-v2-section h2{
  font-size:17px;
  letter-spacing:-.02em;
  font-weight:700;
  margin:0 0 10px;
  text-transform:uppercase;
}
.super-v2-section p{
  font-size:13px;
  line-height:1.45;
  max-width:29ch;
  margin:0;
}
.super-v2-section .link{
  font-size:12px;
  justify-self:start;
  align-self:end;
}

/* Publication band */
.super-v2-editorial{
  border-bottom:1px solid #cfc9bf;
  padding-top:38px;
  padding-bottom:40px;
}
.super-v2-editorial .section-title{
  grid-column:1/13;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:20px;
}
.super-v2-feature{
  min-height:330px;
  border-top:1px solid #bdb7ad;
  padding-top:12px;
}
.super-v2-feature.substack{
  grid-column:1/7;
  padding-right:22px;
}
.super-v2-feature.socarrat{
  grid-column:7/13;
  padding-left:22px;
  border-left:1px solid #cfc9bf;
}
.feature-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.super-v2-feature h3{
  font-family:"EB Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(30px,3.5vw,48px);
  line-height:.98;
  margin:28px 0 16px;
  max-width:18ch;
}
.super-v2-feature p{
  max-width:50ch;
  font-size:14px;
}
.super-v2-feature .link{
  margin-top:18px;
}
.socarrat-cover{
  margin-top:24px;
  width:180px;
  aspect-ratio:3/4;
  background:#ff5a3d;
  color:#111;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:14px;
  font-weight:700;
  font-size:22px;
  transform:rotate(-2deg);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Closing strip */
.super-v2-close{
  min-height:180px;
  padding-top:34px;
  padding-bottom:32px;
}
.super-v2-close .left{grid-column:1/7}
.super-v2-close .right{grid-column:8/13}
.super-v2-close h2{
  font-family:"EB Garamond",Georgia,serif;
  font-weight:500;
  font-size:34px;
  line-height:1.04;
  margin:10px 0 0;
}
.super-v2-close p{
  font-size:14px;
  max-width:40ch;
}

@media(max-width:760px){
  .super-v2-top{min-height:0}
  .super-v2-name,.super-v2-image{grid-column:1/5}
  .super-v2-name{min-height:330px}
  .super-v2-image{min-height:260px;border-left:0;border-top:1px solid #cfc9bf}
  .super-v2-section{grid-column:1/5;height:220px;border-right:0;border-bottom:1px solid #cfc9bf;padding-left:0!important}
  .super-v2-feature.substack,.super-v2-feature.socarrat{grid-column:1/5;padding-left:0;padding-right:0;border-left:0}
  .super-v2-feature.socarrat{margin-top:28px}
  .super-v2-close .left,.super-v2-close .right{grid-column:1/5}
  .super-v2-close .right{margin-top:24px}
}

body.super{--super-navy:#213E60;--super-green:#15AF9D;--super-coral:#ff5a3d;--super-lime:#dfff18;--super-cream:#f4efe7;background:var(--super-cream);color:var(--super-navy);font-family:"Inter",Arial,sans-serif}
.super21-top{min-height:500px;border-bottom:1px solid rgba(33,62,96,.18)}
.super21-copy{grid-column:1/7;min-height:500px;padding:30px 28px 28px 0;display:flex;flex-direction:column;justify-content:space-between}
.super21-title{font-family:"Inter",Arial,sans-serif!important;font-size:clamp(72px,8vw,126px);line-height:.76;letter-spacing:-.075em;font-weight:600!important;margin:0;color:var(--super-navy)}
.super21-title span{display:block}
.super21-mark img{width:58px;height:auto;margin-top:14px}
.super21-note{display:inline-block;align-self:flex-start;background:var(--super-lime);color:#111;padding:11px 14px 10px;font-size:12px;transform:rotate(-1.3deg)}
.super21-visual{grid-column:7/13;min-height:500px;position:relative;overflow:hidden;border-left:1px solid rgba(33,62,96,.18)}
.super21-visual img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08)}
.super21-overlay{position:absolute;right:-4%;top:10%;width:42%;height:78%;background:var(--super-green);mix-blend-mode:multiply;opacity:.92;clip-path:polygon(18% 0,100% 0,100% 100%,0 86%,8% 44%)}
.super21-menu{border-bottom:1px solid rgba(33,62,96,.18)}
.super21-item{grid-column:span 3;height:270px;padding:18px 18px 20px 0;border-right:1px solid rgba(33,62,96,.18);display:grid;grid-template-rows:auto auto 1fr auto}
.super21-item:nth-child(n+2){padding-left:18px}.super21-item:last-child{border-right:0}
.super21-icon{width:18px;height:18px;margin-bottom:14px}.circle{border-radius:50%;background:var(--super-green)}.square{background:var(--super-coral)}
.triangle{width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid var(--super-lime)}
.cross{position:relative}.cross:before,.cross:after{content:"";position:absolute;left:8px;top:0;width:3px;height:18px;background:var(--super-navy)}.cross:before{transform:rotate(45deg)}.cross:after{transform:rotate(-45deg)}
.super21-item h2{font-family:"Inter",Arial,sans-serif!important;font-size:17px;text-transform:uppercase;font-weight:700;margin:0 0 10px}.super21-item p{font-size:13px;line-height:1.45;max-width:28ch;margin:0}.super21-item .link{font-size:12px;justify-self:start;align-self:end}
.super21-editorial{padding-top:36px;padding-bottom:42px;border-bottom:1px solid rgba(33,62,96,.18)}.super21-editorial-head{grid-column:1/13;margin-bottom:20px}
.super21-substack{grid-column:1/7;min-height:390px;border-top:1px solid rgba(33,62,96,.28);display:grid;grid-template-columns:190px 1fr;column-gap:22px;padding-top:12px;padding-right:22px}
.super21-sub-image{width:190px;height:260px;background:#ded7cc;overflow:hidden}.super21-sub-image img{width:100%;height:100%;object-fit:cover}.super21-sub-fallback{width:100%;height:100%;background:linear-gradient(135deg,var(--super-green) 0 36%,transparent 36%),#d8d0c4;display:grid;place-items:end start;padding:14px;font-size:11px;text-transform:uppercase}
.super21-sub-copy{display:grid;grid-template-rows:auto auto 1fr auto}.super21-meta{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.07em}
.super21-substack h3{font-family:"Inter",Arial,sans-serif!important;font-size:clamp(31px,3.7vw,54px);line-height:.96;letter-spacing:-.045em;font-weight:500!important;margin:24px 0 12px;max-width:12ch}
.super21-socarrat{grid-column:7/13;min-height:390px;border-top:1px solid rgba(33,62,96,.28);border-left:1px solid rgba(33,62,96,.18);padding:12px 0 0 22px;display:grid;grid-template-columns:1fr 230px;column-gap:20px}
.super21-soc-copy{display:grid;grid-template-rows:auto auto 1fr auto}.super21-socarrat h3{font-family:"EB Garamond",Georgia,serif!important;font-size:clamp(42px,5vw,68px);font-weight:500!important;line-height:.95;margin:28px 0 14px}
.socarrat-mock{width:190px;height:270px;align-self:center;justify-self:center;position:relative;transform:rotate(-4deg);filter:drop-shadow(0 14px 16px rgba(0,0,0,.16))}
.socarrat-mock:before{content:"";position:absolute;inset:0;background:var(--super-coral)}.soc-cover-content{position:absolute;inset:0;padding:16px;z-index:2;color:#111;display:flex;flex-direction:column}.soc-cover-content strong{font-size:28px;line-height:.92}.soc-cover-content small{margin-top:8px;font-size:8px;text-transform:uppercase}
.soc-cover-figure{margin-top:auto;height:118px;border:2px solid #111;border-radius:50%;position:relative}.soc-cover-figure:before{content:"";position:absolute;width:46px;height:46px;left:18px;top:22px;background:#111;border-radius:50%}.soc-cover-figure:after{content:"";position:absolute;width:76px;height:16px;right:12px;bottom:18px;background:#111;border-radius:50%}
.super21-close{min-height:190px;padding-top:34px;padding-bottom:32px}.super21-close .left{grid-column:1/7}.super21-close .right{grid-column:8/13}.super21-close h2{font-family:"Inter",Arial,sans-serif!important;font-size:32px;font-weight:500!important;letter-spacing:-.035em;margin:10px 0 0}
@media(max-width:760px){.super21-copy,.super21-visual,.super21-item,.super21-substack,.super21-socarrat,.super21-close .left,.super21-close .right{grid-column:1/5}.super21-visual{border-left:0;min-height:300px}.super21-item{height:220px;border-right:0;border-bottom:1px solid rgba(33,62,96,.18);padding-left:0!important}.super21-substack{grid-template-columns:1fr;padding-right:0}.super21-sub-image{width:100%;height:220px;margin-bottom:18px}.super21-socarrat{border-left:0;padding-left:0;margin-top:30px;grid-template-columns:1fr}.socarrat-mock{margin-top:24px}}

/* =========================
   SUPERITALICA V2.2
   ========================= */
body.super{
  --super-navy:#213E60;
  --super-green:#037563;
  --super-fluor:#D8FE47;
  --super-coral:#ff5a3d;
  --super-cream:#f4efe7;
  background:var(--super-cream);
  color:var(--super-navy);
  font-family:"Inter",Arial,sans-serif;
}
body.super ::selection{background:var(--super-fluor);color:#111}
body.super .slash{color:var(--super-green)}
body.super .nav a:hover,body.super .langs a:hover,body.super .link:hover,body.super .cta:hover{background:var(--super-fluor);color:#111}

/* Hero */
.super22-top{
  min-height:440px;
  border-bottom:1px solid rgba(33,62,96,.18);
}
.super22-copy{
  grid-column:1/6;
  min-height:440px;
  padding:30px 28px 28px 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.super22-title{
  font-family:"Inter",Arial,sans-serif!important;
  font-size:clamp(44px,5.2vw,76px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:600!important;
  margin:0;
  color:var(--super-navy);
}
.super22-intro{
  margin-top:22px;
  max-width:43ch;
  font-family:"EB Garamond",Georgia,serif;
  font-size:clamp(18px,1.55vw,22px);
  line-height:1.32;
  color:var(--super-navy);
}
.super22-byline{
  margin-top:16px;
  font-size:11px;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:rgba(33,62,96,.7);
}
.super22-note{
  display:inline-block;
  align-self:flex-start;
  background:var(--super-fluor);
  color:#111;
  padding:10px 13px 9px;
  font-size:11px;
  line-height:1.2;
  transform:rotate(-1.2deg);
}
.super22-visual{
  grid-column:6/13;
  min-height:440px;
  position:relative;
  overflow:hidden;
  border-left:1px solid rgba(33,62,96,.18);
  background:#dadada;
}
.super22-hero-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .65s ease;
}
.super22-hero-slide.active{opacity:1}
.super22-hero-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.08);
}
.super22-green-shape{
  position:absolute;
  right:-5%;
  top:8%;
  width:39%;
  height:84%;
  border:44px solid var(--super-green);
  border-left-color:transparent;
  border-radius:50%;
  mix-blend-mode:multiply;
  opacity:.92;
  transform:rotate(-12deg);
  z-index:4;
  pointer-events:none;
}
.super22-hero-meta{
  position:absolute;
  left:14px;bottom:12px;
  z-index:6;
  color:white;
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(33,62,96,.78);
  padding:5px 7px;
}

/* four activities */
.super22-menu{border-bottom:1px solid rgba(33,62,96,.18)}
.super22-item{
  grid-column:span 3;
  height:244px;
  padding:17px 18px 18px 0;
  border-right:1px solid rgba(33,62,96,.18);
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
.super22-item:nth-child(n+2){padding-left:18px}
.super22-item:last-child{border-right:0}
.super22-item h2{
  font-family:"Inter",Arial,sans-serif!important;
  font-size:16px;font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;
  margin:0 0 9px;
}
.super22-item p{font-size:12.5px;line-height:1.45;max-width:30ch;margin:0}
.super22-item .link{font-size:11px;align-self:end;justify-self:start}
.super22-symbol{width:17px;height:17px;margin-bottom:13px}
.super22-symbol.circle{border-radius:50%;background:var(--super-green)}
.super22-symbol.square{background:var(--super-coral)}
.super22-symbol.triangle{width:0;height:0;border-left:8.5px solid transparent;border-right:8.5px solid transparent;border-bottom:17px solid var(--super-fluor)}
.super22-symbol.cross{position:relative}
.super22-symbol.cross:before,.super22-symbol.cross:after{content:"";position:absolute;left:7px;top:0;width:3px;height:17px;background:var(--super-navy)}
.super22-symbol.cross:before{transform:rotate(45deg)}.super22-symbol.cross:after{transform:rotate(-45deg)}
.super22-professional{
  margin-top:9px;
  font-family:"EB Garamond",Georgia,serif;
  font-size:14px;
  line-height:1.3;
  max-width:28ch;
}

/* Feature area */
.super22-features{
  padding-top:36px;padding-bottom:46px;
  border-bottom:1px solid rgba(33,62,96,.18);
}
.super22-features-head{grid-column:1/13;margin-bottom:20px}
.super22-guides{
  grid-column:1/7;
  min-height:430px;
  border-top:1px solid rgba(33,62,96,.28);
  padding:12px 24px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.super22-guide-copy{display:grid;grid-template-rows:auto auto 1fr auto}
.super22-guide-copy h3{
  font-family:"EB Garamond",Georgia,serif!important;
  font-size:clamp(36px,4.5vw,58px);
  line-height:.96;font-weight:500!important;
  margin:25px 0 14px;
}
.super22-guide-copy p{font-size:13px;max-width:34ch}
.super22-guide-mock{
  position:relative;
  min-height:390px;
  overflow:visible;
}
.magazine{
  position:absolute;
  width:170px;
  aspect-ratio:0.71;
  background:white;
  overflow:hidden;
  box-shadow:0 16px 26px rgba(0,0,0,.16);
}
.magazine img{width:100%;height:100%;object-fit:cover;display:block}
.magazine.krakow{left:0;top:48px;transform:rotate(-6deg);z-index:2}
.magazine.warszawa{right:2px;top:15px;transform:rotate(5deg);z-index:1}
.magazine.krakow img{object-position:50% 50%}
.super22-coming{
  display:inline-block;
  margin-top:8px;
  background:var(--super-fluor);
  color:#111;
  padding:5px 8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
  justify-self:start;
  align-self:end;
}

/* Substack */
.super22-substack{
  grid-column:7/13;
  min-height:430px;
  border-top:1px solid rgba(33,62,96,.28);
  border-left:1px solid rgba(33,62,96,.18);
  padding:12px 0 0 24px;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:20px;
}
.super22-sub-image{
  width:210px;height:300px;
  overflow:hidden;background:#d8d1c6;
  align-self:start;margin-top:28px;
}
.super22-sub-image img{width:100%;height:100%;object-fit:cover;display:block}
.super22-sub-fallback{
  width:100%;height:100%;
  background:linear-gradient(135deg,var(--super-green) 0 38%,transparent 38%),#ddd5ca;
  display:flex;align-items:flex-end;padding:13px;
  font-size:10px;text-transform:uppercase;letter-spacing:.06em
}
.super22-sub-copy{display:grid;grid-template-rows:auto auto 1fr auto}
.super22-meta{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:.07em;text-transform:uppercase}
.super22-sub-copy h3{
  font-family:"Inter",Arial,sans-serif!important;
  font-size:clamp(28px,3.3vw,46px);
  line-height:.98;letter-spacing:-.045em;
  font-weight:500!important;margin:25px 0 12px;
}
.super22-sub-copy p{font-family:"EB Garamond",Georgia,serif;font-size:16px;line-height:1.35;max-width:38ch}
.super22-sub-copy .link{align-self:end;justify-self:start;font-size:11px}

/* Socarrat */
.super22-socarrat{
  border-bottom:1px solid rgba(33,62,96,.18);
  min-height:365px;
  padding-top:34px;padding-bottom:34px;
}
.super22-soc-copy{grid-column:1/6}
.super22-soc-visual{grid-column:7/13;position:relative;min-height:290px}
.super22-soc-copy h2{
  font-family:"EB Garamond",Georgia,serif!important;
  font-size:clamp(42px,5vw,66px);
  font-weight:500!important;line-height:.95;
  margin:18px 0 14px;
}
.super22-soc-copy p{font-size:13px;max-width:40ch}
.soc22-cover{
  position:absolute;right:15%;top:8px;
  width:190px;height:270px;
  background:var(--super-coral);
  transform:rotate(-5deg);
  box-shadow:0 15px 25px rgba(0,0,0,.17);
  padding:16px;color:#111;
}
.soc22-cover strong{font-size:28px;letter-spacing:-.04em;line-height:.95}
.soc22-cover small{display:block;margin-top:9px;font-size:8px;text-transform:uppercase;line-height:1.25}
.soc22-figure{position:absolute;left:22px;right:22px;bottom:22px;height:125px;border:2px solid #111;border-radius:52% 48% 45% 55%}
.super22-soc-note{
  display:inline-block;
  background:var(--super-fluor);color:#111;
  padding:5px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;margin-top:15px
}

/* discreet Pau/profile close */
.super22-profile{
  min-height:250px;
  padding-top:42px;padding-bottom:40px;
}
.super22-profile .portrait-col{grid-column:1/3}
.super22-profile .copy-col{grid-column:4/9}
.super22-profile .contact-col{grid-column:10/13}
.super22-profile .profile-photo{
  width:112px;height:112px;border-radius:50%;overflow:hidden;
  border:1px solid rgba(33,62,96,.18)
}
.super22-profile .profile-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;filter:grayscale(1)}
.super22-profile h2{
  font-family:"Inter",Arial,sans-serif!important;
  font-size:24px;font-weight:500!important;letter-spacing:-.035em;margin:12px 0 10px
}
.super22-profile .profile-copy{
  font-family:"EB Garamond",Georgia,serif;
  font-size:18px;line-height:1.4;max-width:48ch
}
.super22-profile .contact-col{font-size:12px}
.super22-profile .contact-col a{display:inline-block;margin-top:12px;border-bottom:1px solid}
.super22-profile .contact-col a:hover{background:var(--super-fluor);color:#111}

@media(max-width:760px){
  .super22-copy,.super22-visual,.super22-item,.super22-guides,.super22-substack,
  .super22-soc-copy,.super22-soc-visual,.super22-profile .portrait-col,
  .super22-profile .copy-col,.super22-profile .contact-col{grid-column:1/5}
  .super22-copy{min-height:350px}
  .super22-visual{min-height:300px;border-left:0}
  .super22-title{font-size:54px}
  .super22-item{height:210px;border-right:0;border-bottom:1px solid rgba(33,62,96,.18);padding-left:0!important}
  .super22-guides{grid-template-columns:1fr;padding-right:0}
  .super22-guide-mock{min-height:360px;margin-top:12px}
  .super22-substack{grid-template-columns:1fr;border-left:0;padding-left:0;margin-top:30px}
  .super22-sub-image{width:100%;height:240px;margin-top:12px}
  .super22-soc-visual{min-height:300px;margin-top:24px}
  .super22-profile .copy-col,.super22-profile .contact-col{margin-top:24px}
}

/* =========================
   SUPERITALICA V2.3 refinements
   ========================= */

/* Hero overlay: simple right-side polygon, left edge tilted */
.super22-green-shape{
  right:0;
  top:0;
  width:36%;
  height:100%;
  border:0;
  border-radius:0;
  background:var(--super-green);
  mix-blend-mode:multiply;
  opacity:.88;
  transform:none;
  clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);
}

/* No city captions */
.super22-hero-meta{display:none!important}

/* Superguides typography: more restrained, 2-line target */
.super22-guide-copy h3{
  font-size:clamp(30px,3.15vw,44px);
  line-height:.98;
  max-width:11.5ch;
  letter-spacing:-.025em;
}
.super22-guide-copy p{
  font-size:12.5px;
  line-height:1.42;
  max-width:36ch;
}

/* cleaner physical mockups */
.super22-guide-mock{
  min-height:360px;
}
.magazine{
  width:158px;
  box-shadow:0 13px 22px rgba(0,0,0,.14);
  background:#fff;
}
.magazine.krakow{
  left:10px;
  top:48px;
  transform:rotate(-5deg);
  z-index:2;
}
.magazine.warszawa{
  right:8px;
  top:18px;
  transform:rotate(4deg);
  z-index:1;
}

/* Reduce Substack visual hierarchy */
.super22-sub-copy h3{
  font-size:clamp(24px,2.65vw,36px);
  line-height:1.02;
  max-width:15ch;
  letter-spacing:-.035em;
}
.super22-sub-copy p{
  font-size:15px;
}

/* Reduce Socarrat headline */
.super22-soc-copy h2{
  font-size:clamp(34px,4vw,52px);
  line-height:.98;
}

/* slightly less dominant section heading */
.super22-features-head{
  font-size:9px;
  letter-spacing:.09em;
}

@media(max-width:760px){
  .super22-guide-copy h3{font-size:34px;max-width:12ch}
  .super22-sub-copy h3{font-size:30px}
  .super22-soc-copy h2{font-size:42px}
  .magazine{width:145px}
}

/* =========================
   SUPERITALICA V2.4
   proportion + alignment pass
   ========================= */

/* Hero: exact 50/50 division, aligned with axis between menu blocks 2 and 3 */
.super22-copy{
  grid-column:1/7;
  padding-right:28px;
}
.super22-visual{
  grid-column:7/13;
}

/* Tighten title hierarchy across the page */
.super22-title{
  font-size:clamp(42px,4.7vw,68px);
}

.super22-guide-copy h3{
  font-size:clamp(25px,2.55vw,35px);
  line-height:1.02;
  max-width:13ch;
  letter-spacing:-.02em;
}
.super22-guide-copy p{
  font-size:12px;
  line-height:1.4;
}

.super22-sub-copy h3{
  font-size:clamp(21px,2.2vw,30px);
  line-height:1.04;
  max-width:17ch;
  letter-spacing:-.025em;
}
.super22-sub-copy p{
  font-size:14px;
}

.super22-soc-copy h2{
  font-size:clamp(30px,3.35vw,44px);
  line-height:1;
}

/* Slightly reduce titles in four-pillars row */
.super22-item h2{
  font-size:15px;
}
.super22-item p{
  font-size:12px;
}

/* Superguides mockup: real covers, a little smaller and cleaner */
.super22-guide-mock{
  min-height:340px;
}
.magazine{
  width:148px;
}
.magazine.krakow{
  left:12px;
  top:42px;
  transform:rotate(-4deg);
}
.magazine.warszawa{
  right:10px;
  top:18px;
  transform:rotate(3.5deg);
}

/* Socarrat: visually connect copy + mockup */
.super22-soc-copy{
  grid-column:1/7;
}
.super22-soc-visual{
  grid-column:7/13;
}
.soc22-cover{
  left:8%;
  right:auto;
  top:6px;
  width:180px;
  height:256px;
}
.super22-socarrat{
  min-height:330px;
}

@media(max-width:760px){
  .super22-copy,.super22-visual{grid-column:1/5}
  .super22-guide-copy h3{font-size:30px}
  .super22-sub-copy h3{font-size:27px}
  .super22-soc-copy h2{font-size:38px}
  .soc22-cover{left:0}
}

/* =========================
   OAT V3 — conversion + UX
   ========================= */
body.oat{scroll-behavior:smooth}
.oat-subnav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid #d6d6d6;backdrop-filter:blur(8px)}
.oat-subnav-inner{height:42px;display:flex;align-items:center;justify-content:space-between}
.oat-subnav-links{display:flex;gap:22px;font-size:9px;letter-spacing:.08em}
.oat-subnav-links a:hover{background:var(--oat)}
.oat-subnav-cta{font-size:9px;font-weight:700;letter-spacing:.06em;padding:7px 9px}
.oat-subnav-cta:hover{background:var(--oat)}
.oat-hero{height:430px}
.oat-hero .hero-question{margin-top:auto;font-size:15px;font-weight:600;max-width:520px}
.oat-hero .message .cta{margin-top:14px;align-self:flex-start}
.services{scroll-margin-top:42px}
.service ul li:first-child{font-weight:650}
.oat-cases{min-height:390px;padding-top:42px;padding-bottom:42px;border-bottom:1px solid #cfcfcf;scroll-margin-top:42px}
.oat-cases-head{grid-column:1/5}
.oat-cases-head h2{font-size:clamp(28px,3vw,42px);line-height:1.02;letter-spacing:-.04em;font-weight:520;max-width:9ch;margin-top:16px}
.oat-cases-grid{grid-column:6/13;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #d7d7d7}
.oat-case{min-height:145px;padding:18px 22px 18px 0;border-bottom:1px solid #d7d7d7}
.oat-case:nth-child(odd){border-right:1px solid #d7d7d7}
.oat-case:nth-child(even){padding-left:22px}
.oat-case h3{font-size:15px;line-height:1.3;font-weight:520;margin:0 0 18px;max-width:29ch}
.oat-case p{font-size:11px;color:#555;margin:0}
.pros{scroll-margin-top:42px}
.pros-title h2{max-width:12ch}
.pros-copy .tags{line-height:1.6}
.process{border-top:0}
.cota-bridge{min-height:118px;height:auto;padding-top:26px;padding-bottom:26px}
.cota-bridge .label{grid-column:1/4}
.cota-bridge .label strong{display:block;font-size:13px;margin-top:9px;max-width:22ch}
.cota-bridge .copy{grid-column:4/10}
.cota-bridge .copy p{font-size:12px;max-width:55ch;margin:0}
.cota-bridge .action{grid-column:11/13}
.oat-profile{min-height:260px;padding-top:40px;padding-bottom:40px;border-bottom:1px solid #cfcfcf}
.oat-profile-photo{grid-column:1/3}
.oat-profile-photo img{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:50% 32%;filter:grayscale(1);display:block}
.oat-profile-copy{grid-column:4/9}
.oat-profile-copy h2{font-size:27px;letter-spacing:-.035em;font-weight:520;margin:12px 0 12px}
.oat-profile-copy p{font-size:13px;line-height:1.5;max-width:52ch}
.oat-profile-meta{grid-column:10/13;display:flex;flex-direction:column;gap:8px;font-size:9px;letter-spacing:.08em;color:#666}
.oat-form-section{min-height:500px;padding-top:46px;padding-bottom:52px;scroll-margin-top:42px}
.oat-form-intro{grid-column:1/5}
.oat-form-intro h2{font-size:clamp(28px,3vw,42px);line-height:1.02;letter-spacing:-.04em;font-weight:520;margin:16px 0 18px;max-width:10ch}
.oat-form-intro p{font-size:12px;line-height:1.5;max-width:34ch}
.oat-form{grid-column:6/13;display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.oat-form label{display:flex;flex-direction:column;gap:8px}
.oat-form label span{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.oat-form .wide{grid-column:1/3}
.oat-form input,.oat-form textarea{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;border-radius:0;padding:9px 0;font:inherit;font-size:13px;outline:none}
.oat-form textarea{border:1px solid #aaa;padding:12px;resize:vertical;min-height:130px}
.oat-form input:focus,.oat-form textarea:focus{border-color:#111;box-shadow:0 2px 0 var(--oat)}
.oat-file input{border:1px dashed #aaa;padding:14px}
.oat-file small{font-size:9px;color:#777}
.oat-form button{appearance:none;border:1px solid #111;background:#fff;padding:11px 13px;font:inherit;font-size:10px;font-weight:700;letter-spacing:.06em;cursor:pointer}
.oat-form button:hover{background:var(--oat)}
.oat-mobile-cta{display:none}

@media(max-width:760px){
  .oat-subnav-links{display:none}
  .oat-subnav-inner{justify-content:flex-end}
  .oat-hero{min-height:520px}
  .oat-cases-head,.oat-cases-grid,.oat-profile-photo,.oat-profile-copy,.oat-profile-meta,.oat-form-intro,.oat-form{grid-column:1/5}
  .oat-cases-grid{margin-top:30px;grid-template-columns:1fr}
  .oat-case,.oat-case:nth-child(even){padding:18px 0;border-right:0}
  .oat-profile-copy,.oat-profile-meta,.oat-form{margin-top:28px}
  .oat-form{grid-template-columns:1fr}
  .oat-form .wide{grid-column:1}
  .cota-bridge .label,.cota-bridge .copy,.cota-bridge .action{grid-column:1/5}
  .cota-bridge .copy,.cota-bridge .action{margin-top:18px}
  .oat-mobile-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:var(--oat);color:#111;border:1px solid #111;text-align:center;padding:12px;font-size:10px;font-weight:700;letter-spacing:.06em}
  body.oat .footer{padding-bottom:70px}
}

/* =========================
   OAT V3.1 — strict 3-column master grid
   ========================= */

body.oat{
  --oat-col-line:#d1d1d1;
  --oat-hover:#ECD06F;
}

/* one single 3-column logic across the entire OAT page */
.oat-grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:0;
}
.oat-grid3 > *{
  min-width:0;
}
.oat-col{
  padding-left:28px;
  padding-right:28px;
}
.oat-col:first-child{padding-left:0}
.oat-col:last-child{padding-right:0}
.oat-col + .oat-col{
  border-left:1px solid var(--oat-col-line);
}

/* HERO */
.oat31-hero{
  min-height:410px;
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-hero .hero-id{
  grid-column:1;
  padding-top:48px;
  padding-bottom:38px;
}
.oat31-hero .hero-message{
  grid-column:2/4;
  padding:48px 0 38px 28px;
  display:flex;
  flex-direction:column;
}
.oat31-hero h1{
  font-size:clamp(42px,4.6vw,68px);
  line-height:.96;
  letter-spacing:-.05em;
  font-weight:520;
  margin:12px 0 0;
}
.oat31-hero .lead{
  font-size:clamp(18px,1.5vw,22px);
  max-width:760px;
}
.oat31-hero .hero-question{
  margin-top:auto;
  font-size:15px;
  font-weight:650;
  max-width:560px;
}
.oat31-hero .cta{
  margin-top:14px;
  align-self:flex-start;
}

/* SERVICES */
.oat31-services{
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-service{
  min-height:410px;
  padding-top:22px;
  padding-bottom:22px;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}
.oat31-service h2{
  font-size:clamp(25px,2.35vw,35px);
  letter-spacing:-.035em;
  font-weight:520;
  margin:44px 0 18px;
}
.oat31-service ul{list-style:none;padding:0;margin:0}
.oat31-service li{
  border-top:1px solid #e5e5e5;
  padding:6px 0;
}
.oat31-service li:first-child{font-weight:650}
.oat31-service .note{
  font-size:11px;
  color:#555;
  max-width:34ch;
  margin:14px 0 0;
}

/* CASES: heading col 1, two stacked questions in col 2 and 3 */
.oat31-cases{
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-cases-head{
  min-height:300px;
  padding-top:34px;
  padding-bottom:34px;
}
.oat31-cases-head h2{
  font-size:clamp(28px,3vw,42px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:520;
  max-width:8ch;
  margin:16px 0 0;
}
.oat31-case-col{
  min-height:300px;
  display:grid;
  grid-template-rows:1fr 1fr;
}
.oat31-case{
  position:relative;
  overflow:hidden;
  padding:18px 18px 18px 0;
  border-bottom:1px solid var(--oat-col-line);
  isolation:isolate;
}
.oat31-case-col .oat31-case:last-child{border-bottom:0}
.oat31-case::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--oat-hover);
  transform:translateY(102%);
  transition:transform .26s cubic-bezier(.2,.75,.3,1);
  z-index:-1;
}
.oat31-case:hover::before,
.oat31-case:focus-within::before{
  transform:translateY(0);
}
.oat31-case h3{
  font-size:14px;
  line-height:1.3;
  font-weight:520;
  margin:0 0 18px;
  max-width:29ch;
}
.oat31-case p{
  font-size:10.5px;
  color:#575757;
  margin:0;
  transition:color .2s ease;
}
.oat31-case:hover p{color:#111}

/* B2B */
.oat31-pros{
  min-height:300px;
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-pros-title{
  padding-top:40px;
  padding-bottom:40px;
}
.oat31-pros-title h2{
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:520;
  max-width:10ch;
  margin:14px 0 0;
}
.oat31-pros-copy{
  grid-column:2/4;
  padding:40px 0 40px 28px;
}
.oat31-pros-copy p{
  font-size:16px;
  line-height:1.45;
  max-width:760px;
}
.oat31-pros-copy .tags{
  margin:26px 0;
  font-size:9px;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:#777;
}

/* PROCESS */
.oat31-process{
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-step{
  min-height:170px;
  padding-top:22px;
  padding-bottom:20px;
}
.oat31-step strong{
  font-size:10px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.oat31-step p{
  margin:30px 0 0;
  max-width:35ch;
}

/* PRL bridge */
.oat31-cota{
  min-height:118px;
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-cota > div{
  padding-top:24px;
  padding-bottom:24px;
}
.oat31-cota strong{
  display:block;
  margin-top:8px;
  font-size:12px;
  max-width:22ch;
}
.oat31-cota p{
  margin:0;
  font-size:11px;
  max-width:48ch;
}
.oat31-cota .cota-link{
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
}
.oat31-cota .cota-link a{
  border-bottom:1px solid currentColor;
}
.oat31-cota .cota-link a:hover{background:var(--oat-hover)}

/* PROFILE */
.oat31-profile{
  min-height:250px;
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-profile > div{
  padding-top:38px;
  padding-bottom:38px;
}
.oat31-profile-photo img{
  width:112px;height:112px;border-radius:50%;
  object-fit:cover;object-position:50% 32%;
  filter:grayscale(1);display:block;
}
.oat31-profile-copy h2{
  font-size:26px;
  letter-spacing:-.035em;
  font-weight:520;
  margin:12px 0 12px;
}
.oat31-profile-copy p{
  font-size:12.5px;
  line-height:1.5;
  max-width:46ch;
}
.oat31-profile-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:9px;
  letter-spacing:.08em;
  color:#666;
}

/* FORM */
.oat31-form-section{
  min-height:500px;
}
.oat31-form-intro{
  padding-top:44px;
  padding-bottom:48px;
}
.oat31-form-intro h2{
  font-size:clamp(28px,3vw,42px);
  line-height:1.02;
  letter-spacing:-.04em;
  font-weight:520;
  margin:16px 0 18px;
  max-width:10ch;
}
.oat31-form-intro p{
  font-size:12px;
  line-height:1.5;
  max-width:34ch;
}
.oat31-form-wrap{
  grid-column:2/4;
  padding:44px 0 48px 28px;
}
.oat31-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 18px;
}
.oat31-form label{display:flex;flex-direction:column;gap:8px}
.oat31-form label span{
  font-size:9px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.oat31-form .wide{grid-column:1/3}
.oat31-form input,.oat31-form textarea{
  width:100%;
  border:0;
  border-bottom:1px solid #aaa;
  background:transparent;
  border-radius:0;
  padding:9px 0;
  font:inherit;
  font-size:13px;
  outline:none;
}
.oat31-form textarea{
  border:1px solid #aaa;
  padding:12px;
  resize:vertical;
  min-height:130px;
}
.oat31-form input:focus,.oat31-form textarea:focus{
  border-color:#111;
  box-shadow:0 2px 0 var(--oat-hover);
}
.oat31-file input{border:1px dashed #aaa;padding:14px}
.oat31-file small{font-size:9px;color:#777}
.oat31-form button{
  appearance:none;
  border:1px solid #111;
  background:#fff;
  padding:11px 13px;
  font:inherit;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
}
.oat31-form button:hover{background:var(--oat-hover)}

@media(max-width:760px){
  .oat-grid3{grid-template-columns:1fr}
  .oat-grid3 > *{grid-column:1!important}
  .oat-col,.oat-col:first-child,.oat-col:last-child{
    padding-left:0;padding-right:0;border-left:0!important;
  }
  .oat31-hero .hero-message,.oat31-pros-copy,.oat31-form-wrap{padding-left:0}
  .oat31-case-col{border-top:1px solid var(--oat-col-line)}
  .oat31-process .oat31-step,
  .oat31-services .oat31-service{
    border-bottom:1px solid var(--oat-col-line);
  }
  .oat31-form{grid-template-columns:1fr}
  .oat31-form .wide{grid-column:1}
}


/* =========================
   OAT V3.2 — hierarchy update
   ========================= */

/* 2 px chapter separator between services and cases */
.oat31-services{
  position:relative;
  border-bottom:0;
}
.oat31-services::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--oat-hover);
  z-index:3;
}

/* OAT yellow becomes a semantic accent on the three verbs */
.oat31-service .service-title-accent{
  position:relative;
  display:inline-block;
  justify-self:start;
  padding-bottom:10px;
}
.oat31-service .service-title-accent::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:58%;
  height:5px;
  background:var(--oat-hover);
  transform-origin:left center;
  transition:width .22s cubic-bezier(.2,.75,.3,1);
  z-index:-1;
}
.oat31-service:hover .service-title-accent::after{
  width:100%;
}

/* B2B + process are one visual block */
.oat31-b2b-group{
  border-bottom:1px solid var(--oat-col-line);
}
.oat31-pros{
  border-bottom:0;
  min-height:270px;
}
.oat31-process{
  border-bottom:0;
}
.oat31-step{
  border-left:0!important;
}
.oat31-process .oat-col + .oat-col{
  border-left:0!important;
}

/* No legacy COTA PRL traces */
.oat31-cota{display:none!important}

@media(max-width:760px){
  .oat31-services::after{bottom:0}
  .oat31-process .oat31-step{
    border-bottom:0;
  }
}

/* =========================
   OAT V3.3 — hierarchy + microinteraction pass
   ========================= */

/* 4 px yellow chapter separator + breathing room before CASOS */
.oat31-services::after{
  height:4px;
  bottom:-2px;
}
.oat31-cases{
  padding-top:32px;
}

/* close B2B + process as a single visual piece before About */
.oat31-b2b-group{
  border-bottom:1px solid var(--oat-col-line);
  padding-bottom:22px;
  margin-bottom:0;
}

/* Animation 1: service underlines animate in once, then extend on hover */
@keyframes oatAccentIn{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.oat31-service .service-title-accent::after{
  width:58%;
  transform:scaleX(0);
  transform-origin:left center;
  animation:oatAccentIn .42s cubic-bezier(.2,.75,.3,1) forwards;
}
.oat31-service:nth-child(1) .service-title-accent::after{animation-delay:.06s}
.oat31-service:nth-child(2) .service-title-accent::after{animation-delay:.14s}
.oat31-service:nth-child(3) .service-title-accent::after{animation-delay:.22s}
.oat31-service:hover .service-title-accent::after{
  width:100%;
  transform:scaleX(1);
}

/* Animation 2: softer Stabilo reveal on cases */
.oat31-case::before{
  top:12%;
  bottom:10%;
  transform:translateY(115%);
  transition:transform .22s cubic-bezier(.2,.75,.3,1);
}
.oat31-case:hover::before,
.oat31-case:focus-within::before{
  transform:translateY(0);
}

/* Animation 3: CTA arrows shift a few pixels */
.oat .cta,
.oat-subnav-cta,
.oat31-cota .cota-link a,
.oat31-form button,
.oat-mobile-cta{
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.oat .cta:hover,
.oat-subnav-cta:hover,
.oat31-cota .cota-link a:hover,
.oat-mobile-cta:hover{
  transform:translateX(5px);
}
.oat31-form button:hover{
  transform:translateX(4px);
}

/* About portrait: keep new photograph circular and monochrome */
.oat31-profile-photo img,
.oat-profile-photo img{
  border-radius:50%;
  filter:grayscale(1);
  object-fit:cover;
  object-position:50% 28%;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .oat31-service .service-title-accent::after{
    animation:none;
    transform:scaleX(1);
  }
  .oat31-case::before,
  .oat .cta,
  .oat-subnav-cta,
  .oat31-form button,
  .oat-mobile-cta{
    transition:none;
  }
}

/* =========================
   OAT V3.4 — spacing, closure and motion
   ========================= */

/* More breathing room after the 4 px yellow separator */
.oat31-cases{
  padding-top:96px;
}

/* Explicit, full-width closing line after B2B + process, before About */
.oat31-b2b-group{
  position:relative;
  border-bottom:0!important;
  padding-bottom:28px;
}
.oat31-b2b-group::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--oat-col-line);
  z-index:4;
}

/* Double-thickness yellow service accents */
.oat31-service .service-title-accent::after{
  height:10px;
  bottom:0;
  opacity:.88;
}

/* Additional subtle motion */

/* A. service rows respond without altering grid */
.oat31-service li{
  position:relative;
  transition:transform .18s ease, padding-left .18s ease;
}
.oat31-service li::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:2px;
  background:var(--oat-hover);
  transform:translateY(-50%);
  transition:width .18s ease;
}
.oat31-service li:hover{
  transform:translateX(4px);
  padding-left:10px;
}
.oat31-service li:hover::before{
  width:6px;
}

/* B. case content gets a tiny lateral response */
.oat31-case h3,
.oat31-case p{
  transition:transform .18s ease, color .18s ease;
}
.oat31-case:hover h3,
.oat31-case:hover p{
  transform:translateX(3px);
}

/* C. sticky subnav gets animated underline */
.oat-subnav-links a{
  position:relative;
  background:transparent!important;
}
.oat-subnav-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-5px;
  height:2px;
  background:var(--oat-hover);
  transition:right .2s cubic-bezier(.2,.75,.3,1);
}
.oat-subnav-links a:hover::after{
  right:0;
}

/* D. profile portrait gets a very small zoom on hover */
.oat31-profile-photo{
  overflow:visible;
}
.oat31-profile-photo img{
  transition:transform .28s cubic-bezier(.2,.75,.3,1), filter .28s ease;
}
.oat31-profile-photo:hover img{
  transform:scale(1.025);
  filter:grayscale(1) brightness(1.04);
}

/* E. B2B content gently responds */
.oat31-pros-copy .cta{
  position:relative;
}
.oat31-pros-copy .cta::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:var(--oat-hover);
  transition:width .2s ease;
}
.oat31-pros-copy .cta:hover::after{
  width:100%;
}

@media (prefers-reduced-motion: reduce){
  .oat31-service li,
  .oat31-service li::before,
  .oat31-case h3,
  .oat31-case p,
  .oat-subnav-links a::after,
  .oat31-profile-photo img,
  .oat31-pros-copy .cta::after{
    transition:none!important;
  }
  .oat31-profile-photo:hover img,
  .oat31-case:hover h3,
  .oat31-case:hover p,
  .oat31-service li:hover{
    transform:none!important;
  }
}

/* =========================
   OAT V3.5 — grey structural line system
   ========================= */

/* Services: title accents return to the same structural grey */
.oat31-service .service-title-accent::after{
  background:var(--oat-col-line)!important;
}

/* CASOS becomes a clearly boxed chapter:
   explicit grey rule above, after the 96px breathing zone */
.oat31-cases{
  position:relative;
  border-top:1px solid var(--oat-col-line)!important;
  border-bottom:1px solid var(--oat-col-line)!important;
}

/* Remove the previous yellow separator so the hierarchy is entirely grey */
.oat31-services::after{
  display:none!important;
}

/* Explicit visible closing rule between B2B/process and About */
.oat31-b2b-group{
  position:relative;
  border-bottom:1px solid var(--oat-col-line)!important;
  padding-bottom:28px;
}
.oat31-b2b-group::after{
  content:"";
  display:block!important;
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:var(--oat-col-line)!important;
  z-index:20;
}

/* Underline the three process headings */
.oat31-step strong{
  position:relative;
  display:inline-block;
  padding-bottom:8px;
}
.oat31-step strong::after{
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:2px;
  background:var(--oat-col-line);
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.2,.75,.3,1);
}
.oat31-step:hover strong::after{
  transform:scaleX(.72);
}

/* Ensure About itself doesn't visually swallow the B2B closing rule */
.oat31-profile{
  border-top:0!important;
}

/* =========================
   OAT V3.6 — grey structure / yellow interaction
   ========================= */

/* Structural rules stay thin and grey */
.oat31-cases{
  border-top:1px solid var(--oat-col-line)!important;
  border-bottom:1px solid var(--oat-col-line)!important;
}
.oat31-b2b-group{
  border-bottom:1px solid var(--oat-col-line)!important;
}
.oat31-b2b-group::after{
  background:var(--oat-col-line)!important;
}

/* Thick service bars are interaction accents again */
.oat31-service .service-title-accent::after{
  background:var(--oat-hover)!important;
  opacity:1;
}

/* Process headings: neutral baseline + yellow animated hover */
.oat31-step strong::after{
  background:var(--oat-col-line);
  height:1px;
  transform:scaleX(1);
  transition:background .18s ease, height .18s ease, transform .22s cubic-bezier(.2,.75,.3,1);
}
.oat31-step:hover strong::after{
  background:var(--oat-hover);
  height:4px;
  transform:scaleX(1);
}

/* Preserve yellow hover language in cases and service rows */
.oat31-service li::before{
  background:var(--oat-hover)!important;
}
.oat31-case::before{
  background:var(--oat-hover)!important;
}
.oat-subnav-links a::after,
.oat31-pros-copy .cta::after{
  background:var(--oat-hover)!important;
}


/* =========================
   OAT V3.7 — Space Mono identity layer
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  --oat-mono:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* OAT becomes the typographic identifier */
.oat-wordmark,
.oat-brand,
.oat-logo,
body.oat .brand strong{
  font-family:var(--oat-mono);
  font-weight:700;
  letter-spacing:-0.055em;
}

/* Functional numbering: 01 / 02 / 03 */
.oat31-service .num,
.oat31-service .eyebrow,
.oat31-step strong,
.oat31-step .step-label,
.oat31-process .kicker{
  font-family:var(--oat-mono);
}

/* Small grey uppercase metadata / interface labels */
.oat .eyebrow,
.oat .kicker,
.oat .micro,
.oat .meta,
.oat31-cases > .oat-col:first-child > span,
.oat31-pros .eyebrow,
.oat31-profile .eyebrow,
.oat31-service .num{
  font-family:var(--oat-mono);
  text-transform:uppercase;
  letter-spacing:.055em;
}

/* Keep body copy and large functional headings in the existing sans.
   Mono is an identity/data layer, not the reading face. */
.oat31-service h2,
.oat31-case h3,
.oat31-pros h2,
.oat31-profile h2,
.oat p,
.oat li{
  font-family:inherit;
}

/* Slightly tighten mono labels so they read like technical metadata */
.oat31-service .num,
.oat31-step strong,
.oat .eyebrow,
.oat .kicker,
.oat .micro,
.oat .meta{
  font-size:.94em;
}


/* =========================
   V3.8 — Legal / privacy
   ========================= */
.footer-with-legal{min-height:64px;height:auto;gap:18px}
.footer-primary{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.footer-legal{display:flex;gap:16px;margin-left:auto}
.footer-legal a,.legal-footer a{transition:opacity .2s ease}
.footer-legal a:hover,.legal-footer a:hover{opacity:.55}
.legal-page{background:#fff;color:var(--ink)}
.legal-main{padding-bottom:96px}
.legal-hero{min-height:46vh;padding:120px 0 72px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.legal-hero .kicker{grid-column:1}
.legal-hero h1{grid-column:2/4;max-width:820px;margin:0;font-size:clamp(42px,6vw,86px);line-height:.94;letter-spacing:-.045em;font-weight:500}
.legal-hero p{grid-column:2/4;max-width:700px;margin:36px 0 0;font-size:15px;line-height:1.65}
.legal-section{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);padding:72px 0 84px}
.legal-index{grid-column:1;display:flex;flex-direction:column;gap:8px;font-family:var(--oat-mono,"Space Mono",monospace);font-size:11px;letter-spacing:.05em}
.legal-index span{color:#929292}
.legal-copy{grid-column:2/4;max-width:780px}
.legal-copy h2{margin:38px 0 10px;font-size:14px;line-height:1.35;font-weight:600}
.legal-copy h2:first-child{margin-top:0}
.legal-copy p{margin:0;max-width:760px;font-size:14px;line-height:1.72;color:#333}
.legal-copy a{text-decoration:underline;text-underline-offset:3px}
.legal-update{display:flex;justify-content:space-between;padding:24px 0;font-family:var(--oat-mono,"Space Mono",monospace);font-size:10px;letter-spacing:.05em}
.legal-update span{color:#888}
.legal-footer>div{display:flex;gap:18px}
.oat31-privacy{border-top:1px solid var(--oat-col-line,#d1d1d1);padding-top:16px}
.oat31-privacy p{margin:0 0 12px;max-width:760px;font-size:10px;line-height:1.55;color:#777}
.oat31-privacy p strong{color:#555;font-weight:600}
.oat31-privacy p a{text-decoration:underline;text-underline-offset:2px}
.oat31-form .oat31-privacy-check{display:flex;flex-direction:row;align-items:flex-start;gap:9px;font-size:10px;line-height:1.4;color:#666}
.oat31-form .oat31-privacy-check input{width:14px;height:14px;min-width:14px;padding:0;margin:1px 0 0}
.oat31-form .oat31-privacy-check span{font-size:10px;letter-spacing:0;text-transform:none;color:#666}
@media (max-width:760px){
  .footer-with-legal{align-items:flex-start;flex-direction:column;padding-top:16px;padding-bottom:16px}
  .footer-legal{margin-left:0;flex-wrap:wrap}
  .legal-hero{grid-template-columns:1fr;padding:100px 0 48px}
  .legal-hero .kicker,.legal-hero h1,.legal-hero p{grid-column:1}
  .legal-hero h1{margin-top:24px;font-size:clamp(38px,12vw,58px)}
  .legal-section{grid-template-columns:1fr;padding:48px 0 60px}
  .legal-index,.legal-copy{grid-column:1}
  .legal-copy{margin-top:36px}
  .legal-footer{align-items:flex-start;flex-direction:column;height:auto;padding-top:16px;padding-bottom:16px}
  .legal-footer>div{flex-wrap:wrap}
}