/* itsArne.ai — brand layer over Cornerstone.
   Cornerstone emits a per-element stylesheet (.mg-N) that hard-sets colour,
   font and spacing on every element, so the selectors here are compounded
   with .x-text / .x-anchor to match its specificity and land after it. */

@font-face{font-family:"LEMON MILK";src:url("fonts/LEMONMILK-Medium.otf") format("opentype");font-weight:500;font-display:block}
@font-face{font-family:"F37 Zagma";src:url("fonts/F37Zagma-Book.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"F37 Zagma";src:url("fonts/F37Zagma-Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  --ia-ground:#0D0D0C;
  --ia-surface:#151513;
  --ia-line:rgba(247,247,242,.09);
  --ia-line-strong:rgba(247,247,242,.16);
  --ia-ink:#F7F7F2;
  --ia-body:rgba(247,247,242,.62);
  --ia-muted:rgba(247,247,242,.40);
  --ia-turbo:#FFF200;
  --ia-turbo-deep:#D9CE00;
  --ia-on-turbo:#12120F;
  --ia-icon-bg:var(--ia-surface);
  --ia-display:"LEMON MILK","Arial Narrow",sans-serif;
  --ia-font:"F37 Zagma","Helvetica Neue",Arial,sans-serif;
  --ia-shell:1100px;
  --ia-ease:cubic-bezier(.2,.7,.3,1);
}

/* ---- page ground -------------------------------------------------------- */
body, .x-site, .x-main, .x-container.main{background:var(--ia-ground)!important}
body{font-family:var(--ia-font)!important;color:var(--ia-body)!important;-webkit-font-smoothing:antialiased}

/* Sections own the horizontal rhythm; rows just centre a fixed shell. */
.x-section[class*="ia-"]{padding:0!important;margin:0!important;background:transparent!important}
.x-section[class*="ia-"] > .x-row{
  max-width:var(--ia-shell)!important;
  margin-inline:auto!important;
  padding-inline:clamp(20px,5vw,40px)!important;
  width:100%;
}
.x-section[class*="ia-"] .x-row-inner{gap:0}

/* ---- typography --------------------------------------------------------- */
.ia-h1.x-text .x-text-content-text-primary,
.ia-h2.x-text .x-text-content-text-primary,
.ia-card-title.x-text .x-text-content-text-primary,
.ia-offer-title.x-text .x-text-content-text-primary,
.ia-step-title.x-text .x-text-content-text-primary{
  font-family:var(--ia-display)!important;
  font-weight:500!important;
  color:var(--ia-ink)!important;
  text-transform:uppercase!important;
  letter-spacing:-.01em!important;
  line-height:1.02!important;
  text-wrap:balance;
}
.ia-h1.x-text .x-text-content-text-primary{font-size:clamp(38px,6.2vw,76px)!important}
.ia-h2.x-text .x-text-content-text-primary{font-size:clamp(28px,4vw,50px)!important}
.ia-card-title.x-text .x-text-content-text-primary,
.ia-offer-title.x-text .x-text-content-text-primary,
.ia-step-title.x-text .x-text-content-text-primary{font-size:clamp(19px,2vw,23px)!important;line-height:1.1!important}
.ia-accent{color:var(--ia-turbo)!important}

.ia-lead.x-text, .ia-body.x-text, .ia-card-body.x-text, .ia-offer-desc.x-text, .ia-step-body.x-text{
  font-family:var(--ia-font)!important;
  color:var(--ia-body)!important;
  line-height:1.62!important;
}
.ia-lead.x-text{font-size:clamp(16px,1.6vw,19px)!important;max-width:56ch}
.ia-body.x-text{font-size:16px!important;max-width:58ch}
.ia-card-body.x-text, .ia-offer-desc.x-text, .ia-step-body.x-text{font-size:15px!important}

.ia-eyebrow.x-text{
  font-family:var(--ia-font)!important;
  font-weight:700!important;
  font-size:12px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  color:var(--ia-muted)!important;
  line-height:1.4!important;
}
.ia-eyebrow--accent.x-text{color:var(--ia-turbo-deep)!important}

/* ---- buttons — square, per brand tokens --------------------------------- */
.ia-btn.x-anchor{
  border-radius:0!important;
  border:1px solid transparent!important;
  padding:13px 20px!important;
  font-family:var(--ia-font)!important;
  font-weight:700!important;
  font-size:14px!important;
  line-height:1!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transition:background 200ms var(--ia-ease),border-color 200ms var(--ia-ease),transform 200ms var(--ia-ease)!important;
}
.ia-btn.x-anchor .x-anchor-text-primary{font-family:var(--ia-font)!important;font-weight:700!important;font-size:14px!important}
.ia-btn.x-anchor:active{transform:translateY(1px)}
.ia-btn--primary.x-anchor{background-color:var(--ia-turbo)!important}
.ia-btn--primary.x-anchor .x-anchor-text-primary{color:var(--ia-on-turbo)!important}
.ia-btn--primary.x-anchor:hover{background-color:var(--ia-turbo-deep)!important}
.ia-btn--ghost.x-anchor{background-color:transparent!important;border-color:var(--ia-line-strong)!important}
.ia-btn--ghost.x-anchor .x-anchor-text-primary{color:var(--ia-ink)!important}
.ia-btn--ghost.x-anchor:hover{border-color:var(--ia-muted)!important;background-color:rgba(247,247,242,.04)!important}
.ia-btn--dark.x-anchor{background-color:var(--ia-on-turbo)!important}
.ia-btn--dark.x-anchor .x-anchor-text-primary{color:var(--ia-turbo)!important}
.ia-btn--sm.x-anchor{padding:10px 16px!important}

/* ---- nav ---------------------------------------------------------------- */
.ia-nav.x-section{position:sticky!important;top:0;z-index:50;background:rgba(13,13,12,.86)!important;backdrop-filter:blur(14px);border-bottom:1px solid var(--ia-line)!important}
.ia-nav .x-row-inner{flex-wrap:nowrap;align-items:center}
.ia-nav-row{padding-block:14px!important}
.ia-nav-brand.x-col{display:flex;align-items:center;gap:11px;flex:0 0 auto;margin-right:auto}
.ia-logo img{width:26px!important;height:26px!important;display:block}
.ia-brandname.x-text{font-family:var(--ia-display)!important;font-size:15px!important;color:var(--ia-ink)!important;text-transform:lowercase!important}
.ia-nav-links.x-col{flex:0 0 auto}
.ia-navlinks.x-text{display:flex;gap:30px}
.ia-navlinks a{font-size:14px;color:var(--ia-muted)!important;text-decoration:none;transition:color 200ms var(--ia-ease)}
.ia-navlinks a:hover{color:var(--ia-ink)!important}
.ia-nav-cta.x-col{flex:0 0 auto;margin-left:30px}

/* ---- hero --------------------------------------------------------------- */
.ia-hero-row{padding-block:clamp(56px,9vw,104px) clamp(72px,11vw,140px)!important}
.ia-hero .x-row-inner{display:grid!important;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,72px);align-items:center}
.ia-hero-copy.x-col{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.ia-actions{display:flex!important;flex-wrap:wrap;gap:12px}
.ia-meta.x-text{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px!important;color:var(--ia-muted)!important}
.ia-meta span{display:flex;align-items:center;gap:7px}
.ia-meta span::before{content:"";width:3px;height:3px;background:var(--ia-turbo);flex:none}
.ia-portrait img{width:100%!important;height:auto!important;border-radius:0!important;display:block;margin-inline:auto}

/* ---- proof strip -------------------------------------------------------- */
.ia-proof.x-section{border-block:1px solid var(--ia-line)!important}
.ia-proof-row{padding-block:24px!important}
/* Label sits above its own row of four slots, rather than competing with them
   for horizontal space. */
.ia-proof-col.x-col{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.ia-proof-label.x-text{font-size:11px!important;font-weight:700!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--ia-muted)!important;flex:none;text-align:center}
.ia-slots.x-text{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ia-slot{min-height:48px;border:1px dashed var(--ia-line-strong);border-radius:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ia-muted)}

/* ---- bands -------------------------------------------------------------- */
.ia-band.x-section{border-bottom:1px solid var(--ia-line)!important}
.ia-band > .x-row:first-child{padding-top:clamp(72px,11vw,140px)!important}
.ia-band > .x-row:last-child{padding-bottom:clamp(72px,11vw,140px)!important}
.ia-head-col.x-col{display:flex;flex-direction:column;gap:16px;max-width:64ch}
.ia-head-row{margin-bottom:clamp(36px,5vw,60px)!important}

/* ---- cards -------------------------------------------------------------- */
.ia-cards-3 .x-row-inner{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px}
.ia-card.x-col{background:var(--ia-surface);border:1px solid var(--ia-line);border-radius:0;padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:14px;transition:border-color 200ms var(--ia-ease)}
.ia-card.x-col:hover{border-color:var(--ia-line-strong)}

/* ---- offers ------------------------------------------------------------- */
.ia-offers .x-row-inner{display:grid!important;grid-template-columns:repeat(3,1fr);gap:16px}
.ia-offer.x-col{position:relative;background:var(--ia-surface);border:1px solid var(--ia-line);border-radius:0;padding:clamp(24px,2.4vw,30px);display:flex;flex-direction:column;gap:16px}
.ia-offer:first-child{border-color:rgba(255,242,0,.28)}
.ia-offer-for.x-text{font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--ia-turbo-deep)!important}
.ia-badge.x-text{position:absolute;top:22px;right:22px;font-size:10px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase!important;padding:5px 10px;border-radius:0;background:var(--ia-turbo);color:var(--ia-on-turbo)!important}
.ia-list{list-style:none;margin:0;padding:20px 0 0;display:flex;flex-direction:column;gap:11px;border-top:1px solid var(--ia-line)}
.ia-list li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.5;color:var(--ia-body)}
.ia-list li::before{content:"";position:absolute;left:2px;top:6px;width:9px;height:5px;border-left:2px solid var(--ia-turbo);border-bottom:2px solid var(--ia-turbo);transform:rotate(-45deg)}
.ia-offer .ia-btn{margin-top:auto;width:100%}
.ia-offer .ia-btn.x-anchor{justify-content:center}

/* ---- steps -------------------------------------------------------------- */
.ia-step{border-top:1px solid var(--ia-line)!important;padding-block:clamp(26px,3.4vw,38px)!important}
.ia-ablauf > .x-row:last-child{border-bottom:1px solid var(--ia-line)}
.ia-step .x-row-inner{display:grid!important;grid-template-columns:88px 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.ia-num.x-text{font-family:var(--ia-display)!important;font-size:clamp(26px,3.4vw,40px)!important;line-height:1!important;color:var(--ia-turbo)!important;font-variant-numeric:tabular-nums}
.ia-step-copy.x-col{display:flex;flex-direction:column;gap:10px;max-width:60ch}

/* ---- about -------------------------------------------------------------- */
.ia-about-row .x-row-inner{display:grid!important;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,68px);align-items:center}
.ia-about-copy.x-col{display:flex;flex-direction:column;gap:20px}
.ia-sig.x-text{font-family:var(--ia-display)!important;font-size:20px!important;color:var(--ia-ink)!important;text-transform:uppercase!important}
.ia-motif.x-text{--ia-icon-bg:var(--ia-ground)}
.ia-motif svg{width:132px;height:auto;color:var(--ia-turbo);opacity:.55}

/* ---- icons -------------------------------------------------------------- */
.ia-icon svg{display:block;width:46px;height:46px;color:var(--ia-turbo)}
.ia-icon--sm svg{width:34px;height:34px}

/* ---- faq ---------------------------------------------------------------- */
.ia-faq-col.x-col{max-width:78ch}
.ia-faq-item details{border-top:1px solid var(--ia-line)}
.ia-faq-col .ia-faq-item:last-child details{border-bottom:1px solid var(--ia-line)}
.ia-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:22px;cursor:pointer;list-style:none;font-weight:700;font-size:16px;color:var(--ia-ink);transition:color 200ms var(--ia-ease)}
.ia-faq-item summary::-webkit-details-marker{display:none}
.ia-faq-item summary:hover{color:var(--ia-turbo)}
.ia-sign{position:relative;width:13px;height:13px;flex:none}
.ia-sign::before,.ia-sign::after{content:"";position:absolute;background:currentColor;transition:transform 200ms var(--ia-ease),opacity 200ms var(--ia-ease)}
.ia-sign::before{top:6px;left:0;width:13px;height:1.5px}
.ia-sign::after{left:6px;top:0;width:1.5px;height:13px}
.ia-faq-item details[open] .ia-sign::after{transform:rotate(90deg);opacity:0}
.ia-faq-item details p{padding-bottom:24px;max-width:64ch;font-size:15px;color:var(--ia-body)}

/* ---- closing CTA — the one loud moment ---------------------------------- */
.ia-close.x-section{background:var(--ia-turbo)!important}
.ia-close-row{padding-block:clamp(60px,9vw,110px)!important}
.ia-close-col.x-col{display:flex;flex-direction:column;align-items:flex-start;gap:24px;max-width:44ch}
.ia-close .ia-h2.x-text .x-text-content-text-primary{color:var(--ia-on-turbo)!important}
.ia-close .ia-eyebrow.x-text{color:rgba(18,18,15,.6)!important}
.ia-close-lead.x-text{color:rgba(18,18,15,.72)!important;font-size:clamp(16px,1.6vw,19px)!important}

/* ---- footer ------------------------------------------------------------- */
.ia-foot-row{padding-block:44px 52px!important}
.ia-foot-col.x-col{display:flex;flex-direction:column;gap:28px}
.ia-footnav.x-text{display:flex;flex-wrap:wrap;gap:22px}
.ia-footnav a{font-size:13.5px;color:var(--ia-muted)!important;text-decoration:none;transition:color 200ms var(--ia-ease)}
.ia-footnav a:hover{color:var(--ia-ink)!important}
.ia-legal.x-text{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px!important;color:var(--ia-muted)!important;padding-top:28px;border-top:1px solid var(--ia-line)}
.ia-legal a{color:var(--ia-muted)!important;text-decoration:none}
.ia-legal a:hover{color:var(--ia-ink)!important}


/* ---- hard edges, enforced ------------------------------------------------
   Cornerstone writes border-radius into its own per-element sheet, so any
   element touched in the builder would otherwise come back rounded.
   The brand is square; this keeps it that way. */
.x-section[class*="ia-"],
.x-section[class*="ia-"] .x-col,
.x-section[class*="ia-"] .x-row,
.x-section[class*="ia-"] .x-text,
.x-section[class*="ia-"] .x-anchor,
.x-section[class*="ia-"] .x-image,
.x-section[class*="ia-"] img,
.x-section[class*="ia-"] details,
.x-section[class*="ia-"] .ia-slot{border-radius:0!important}

/* ---- focus + motion ----------------------------------------------------- */
.ia-nav a:focus-visible,.ia-btn:focus-visible,.ia-faq-item summary:focus-visible,.ia-footnav a:focus-visible{outline:2px solid var(--ia-turbo);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ia-btn.x-anchor,.ia-card.x-col,.ia-navlinks a{transition-duration:.01ms!important}
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1040px){
  .ia-offers .x-row-inner{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ia-hero .x-row-inner{grid-template-columns:1fr}
  .ia-hero-media.x-col{max-width:340px}
  .ia-about-row .x-row-inner{grid-template-columns:1fr}
  .ia-about-media.x-col{max-width:320px}
  .ia-cards-3 .x-row-inner{grid-template-columns:1fr}
  .ia-nav .x-row-inner{flex-wrap:wrap}
  .ia-nav-links.x-col{order:3;flex:1 0 100%;margin-top:10px}
  .ia-navlinks.x-text{gap:18px;flex-wrap:wrap}
  .ia-navlinks a{font-size:13px}
  .ia-nav-cta.x-col{margin-left:0}
  .ia-step .x-row-inner{grid-template-columns:56px 1fr}
}
@media (max-width:720px){
  .ia-offers .x-row-inner{grid-template-columns:1fr}
}

@media (max-width:520px){
  .ia-step .x-row-inner{grid-template-columns:1fr;gap:8px}
  .ia-num.x-text{font-size:24px!important}
  .ia-slot{flex:1 1 100%}
  .ia-actions{width:100%}
  .ia-actions .ia-btn.x-anchor{flex:1 1 100%;justify-content:center}
}

/* ---- inner pages: prose --------------------------------------------------
   Legal and course pages reuse the nav/footer sections and add a readable
   measure for long-form copy. */
.ia-pagehead-row{padding-block:clamp(56px,8vw,96px) clamp(28px,4vw,44px)!important}
.ia-pagehead-col.x-col{display:flex;flex-direction:column;gap:16px;max-width:64ch}
.ia-prose-row{padding-bottom:clamp(64px,9vw,120px)!important}
.ia-prose-col.x-col{max-width:68ch}
.ia-prose.x-text{color:var(--ia-body)!important;font-size:16px!important;line-height:1.7!important}
.ia-prose h2{font-family:var(--ia-display);font-weight:500;color:var(--ia-ink);text-transform:uppercase;font-size:22px;line-height:1.1;letter-spacing:-.01em;margin:38px 0 12px}
.ia-prose h2:first-child{margin-top:0}
.ia-prose h3{font-family:var(--ia-font);font-weight:700;color:var(--ia-ink);font-size:16px;margin:24px 0 6px;text-transform:none}
.ia-prose p{margin:0 0 14px}
.ia-prose ul{margin:0 0 16px;padding-left:20px}
.ia-prose li{margin-bottom:7px}
.ia-prose a{color:var(--ia-turbo)!important;text-decoration:underline;text-underline-offset:3px}
.ia-prose strong{color:var(--ia-ink);font-weight:700}
.ia-prose hr{border:0;border-top:1px solid var(--ia-line);margin:32px 0}

/* Anything still needing Arne's real data is marked, not faked. */
.ia-todo{display:inline-block;padding:1px 7px;border:1px dashed var(--ia-turbo);color:var(--ia-turbo);font-weight:700;font-size:13px;letter-spacing:.04em}
.ia-note{border-left:2px solid var(--ia-turbo);background:rgba(255,242,0,.05);padding:14px 18px;margin:0 0 24px}
.ia-note p{margin:0;font-size:14.5px}

/* ---- header & footer chrome ----------------------------------------------
   Pro wraps the layout documents in the theme's own masthead/colophon, which
   carry a light background. Sections inside are transparent by design, so the
   wrapper itself has to carry the dark ground. */
.x-masthead, .x-colophon{background:var(--ia-ground)!important;border:0!important}
.x-colophon{padding:0!important}

/* The brand mark is a link, so it inherits the theme's link colour (red)
   unless it is coloured explicitly. */
.ia-brandname a{color:var(--ia-ink)!important;text-decoration:none;transition:color 200ms var(--ia-ease)}
.ia-brandname a:hover{color:var(--ia-turbo)!important}

/* ---- scroll reveal stagger ------------------------------------------------
   Pro handles the reveal itself; this only staggers siblings so a row of three
   cards arrives one after another instead of all at once. */
.ia-cards-3 .x-col:nth-child(2), .ia-offers .x-col:nth-child(2){animation-delay:90ms!important;transition-delay:90ms!important}
.ia-cards-3 .x-col:nth-child(3), .ia-offers .x-col:nth-child(3){animation-delay:180ms!important;transition-delay:180ms!important}

/* Safety net: if motion is unwanted, never leave content stuck at opacity 0. */
@media (prefers-reduced-motion:reduce){
  .x-effect-exit{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
}

/* ---- mobile ---------------------------------------------------------------
   Cornerstone forces `flex-basis: calc(100% - var(--gap))` onto every column
   from its own stylesheet, which tears the three-column header apart on small
   screens. These rules take the header off that grid entirely and lay it out
   explicitly: brand and CTA on one line, links wrapped underneath. */
@media (max-width:900px){
  .ia-nav .x-row-inner{flex-wrap:wrap!important;row-gap:8px}

  /* The booking CTA is dropped here — it reappears in the hero two lines below,
     and losing it leaves the header with two parts instead of three. */
  .ia-nav-cta.x-col{display:none!important}

  .ia-nav-brand.x-col{flex:1 0 100%!important;justify-content:center;margin-right:0!important}
  .ia-nav-links.x-col{flex:1 0 100%!important;max-width:100%!important}
  .ia-navlinks.x-text{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
  .ia-navlinks a{font-size:13px}

  /* Portraits fill the content width instead of sitting in a narrowed,
     left-hanging column — that removes the centring problem rather than
     patching around it. */
  .ia-hero-media.x-col,
  .ia-about-media.x-col{max-width:none!important;width:100%!important;margin-inline:0!important}
  .ia-portrait img{width:100%!important}

  .ia-hero-copy.x-col{align-items:center;text-align:center}
  .ia-hero-copy .ia-lead{margin-inline:auto}
  .ia-actions{justify-content:center}
  .ia-meta.x-text{justify-content:center}
}

@media (max-width:520px){
  .ia-nav-row{padding-block:10px!important}
  .ia-brandname.x-text{font-size:14px!important}
  .ia-btn--sm.x-anchor{padding:9px 13px!important}
  .ia-btn--sm.x-anchor .x-anchor-text-primary{font-size:13px!important}
  .ia-navlinks.x-text{gap:14px}

  /* Four logo slots stop being legible below roughly 400px, so they pair up. */
  .ia-slots.x-text{grid-template-columns:repeat(2,1fr)}
}