/* viggo-n2.css — n2 'Cobalt Editorial' homepage styling, scoped under .viggo-n2.
   Generated from the approved mockup. Structural/layout CSS lives here (code, ships via SFTP);
   component classes can later be migrated into editable Oxygen selectors with rens-css-migrate.php. */
body{background:#ede1c8;}
/* sticky footer: body is a flex column so the footer template (last in-flow child) is pushed
   to the bottom on short pages instead of floating mid-screen. */
body{display:flex; flex-direction:column; min-height:100vh;}
body > .oxy-container-238-100{margin-top:auto;}

/* ════════════════════════════════════════════════════════════════════
       TOKENS — Cobalt Editorial
    ════════════════════════════════════════════════════════════════════ */
.viggo-n2{--cream:       #ede1c8;
      --cream-light: #f3ead6;
      --cream-dark:  #e4d4b4;
      --cream-deep:  #d9c89e;

      --cobalt:      #1b34d4;
      --cobalt-deep: #15259e;
      --cobalt-ink:  #0f1a4d;

      --ink:         #141019;
      --ink-muted:   #463d4f;

      --rule:        rgba(27,52,212,.18);
      --cobalt-shadow: rgba(21,37,158,.30);

      --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
      --sans:  'Hanken Grotesk', system-ui, sans-serif;

      --max:    1440px;
      /* match the site header's box exactly: a 1440 container with a flat 16px inner inset,
         so every n2 section/footer lines up with the nav logo + menu (no extra wide gutter). */
      --gutter: 1rem;

      --ease-out: cubic-bezier(.16,1,.3,1);
      --ease-io:  cubic-bezier(.76,0,.24,1);
      /* unified hover system — one smooth modern curve + a small duration scale,
         so every interaction feels related, subtle and intentional. */
      --ease-hover: cubic-bezier(.33,1,.68,1);
      --t-color: .3s;   /* colour / opacity / border       */
      --t-move:  .45s;  /* transform: lift, nudge, indent  */
      --t-img:   .7s;   /* image zoom (slow + cinematic)   */
      --lift:    -3px;  /* the one subtle card-lift amount */
      --card-shadow: 0 18px 40px -24px var(--cobalt-shadow);}
/* ─── RESET ────────────────────────────────────────────────────── */
.viggo-n2 *, .viggo-n2 *::before, .viggo-n2 *::after{box-sizing: border-box; margin: 0; padding: 0;}
.viggo-n2{scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
.viggo-n2{font-family: var(--sans);
      font-size: clamp(15px, 1.05vw, 17px);
      line-height: 1.65;
      color: var(--ink);
      background: var(--cream);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;}
.viggo-n2 img{display: block; max-width: 100%;}
.viggo-n2 a{color: inherit; text-decoration: none;}
.viggo-n2 button{font-family: var(--sans); cursor: pointer; border: none; background: none; color: inherit;}
.viggo-n2 :focus-visible{outline: 2px solid var(--cobalt);
      outline-offset: 3px;
      border-radius: 2px;}
/* ─── ATMOSPHERE: grain + soft cobalt aura ─────────────────────── */
.viggo-n2::before{content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
      opacity: .035;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");}
/* ─── UTILITIES ────────────────────────────────────────────────── */
.viggo-n2 .container{width: 100%;
      max-width: var(--max);
      margin-inline: auto;
      padding-inline: var(--gutter);}
.viggo-n2 .kicker{display: inline-block;
      font-family: var(--sans);
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cobalt);}
.viggo-n2 .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;}
/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────── */
.viggo-n2 #progress{position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--cobalt-deep), var(--cobalt));
      z-index: 1000;
      transition: width .08s linear;}
/* ─── SCROLL REVEAL primitives ─────────────────────────────────── */
.viggo-n2 .reveal{opacity: 0;
      transform: translateY(30px);
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
      transition-delay: var(--delay, 0s);}
.viggo-n2 .reveal.in{opacity: 1; transform: none;}
.viggo-n2 .clip-reveal{clip-path: inset(0 100% 0 0);
      transition: clip-path 1s var(--ease-out);
      transition-delay: var(--delay, 0s);}
.viggo-n2 .clip-reveal.in{clip-path: inset(0 0 0 0);}
/* ════════════════════════════════════════════════════════════════
       HEADER / NAV
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .site-header{position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(237,225,200,.82);
      backdrop-filter: blur(12px) saturate(1.2);
      -webkit-backdrop-filter: blur(12px) saturate(1.2);
      border-bottom: 1px solid var(--rule);
      transition: box-shadow .4s var(--ease-out);}
.viggo-n2 .site-header.scrolled{box-shadow: 0 6px 30px rgba(15,26,77,.10);}
.viggo-n2 .header-inner{display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      height: 4.25rem;}
/* ── Signature logo (ported from Viggo's Oxygen build, rebuilt better) ──
       Handwritten "Viggo / Rijswijk" in Water Brush, tilted -5°, revealed by a
       diagonal (+20°) cover that wipes off to the right on load. The cover is a
       GPU transform (no width-reflow), eased, with a cobalt leading edge, and it
       replays on hover. Default state = revealed, so no-JS / reduced-motion is fine. */
.viggo-n2 .wordmark{display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: var(--ink);
      -webkit-tap-highlight-color: transparent;}
.viggo-n2 .sig-clip{position: relative;
      display: inline-block;
      overflow: hidden;
      padding: .15rem .5rem .15rem .15rem;   /* room for the tilt + leading edge */
      line-height: 0;
      transform-origin: left top;
      transition: transform 1.05s var(--ease-out);
      will-change: transform;}
/* INTRO: on load the signature starts large, plays the wipe, then
       settles (scales) down into its navbar slot. Driven by body.logo-intro. */
.viggo-n2 body.logo-intro .sig-clip{transform: scale(2.55); z-index: 60;}
.viggo-n2 body.logo-intro .main-nav{opacity: 0; pointer-events: none;}
.viggo-n2 .main-nav{transition: opacity .55s var(--ease-out) .25s;}
.viggo-n2 .sig-name{display: block;
      font-family: 'Water Brush', cursive;
      font-weight: 400;
      font-size: 2.5rem;        /* two tight lines fit the 4.25rem header */
      line-height: .72;
      color: var(--ink);
      transform: rotate(-5deg);
      transform-origin: left center;
      text-shadow: 0 1px 0 rgba(237,225,200,.9), 0 2px 6px rgba(15,26,77,.12);
      white-space: nowrap;
      letter-spacing: .01em;}
.viggo-n2 .sig-cover{position: absolute;
      top: -70%; left: -25%;
      width: 165%; height: 240%;
      background: var(--cream-light);
      border-left: 3px solid var(--cobalt);
      box-shadow: -8px 0 18px -4px rgba(27,52,212,.35);
      transform: rotate(20deg) translateX(150%);   /* default: parked off-right → name revealed */
      transform-origin: right center;
      pointer-events: none;}
@keyframes sigWipe{from { transform: rotate(20deg) translateX(-25%); }   /* covering the name */
      to   { transform: rotate(20deg) translateX(150%); }   /* swept off to the right */}
.viggo-n2 .wordmark.wiping .sig-cover{animation: sigWipe .95s cubic-bezier(.16,1,.3,1) both;}
.viggo-n2 .wordmark:focus-visible{outline: 3px solid var(--cobalt); outline-offset: 4px; border-radius: 4px;}
@media (max-width: 560px){.viggo-n2 .sig-name{font-size: 2rem;}
.viggo-n2 body.logo-intro .sig-clip{transform: scale(1.9);}}
@media (prefers-reduced-motion: reduce){.viggo-n2 .wordmark.wiping .sig-cover{animation: none;}}
.viggo-n2 .main-nav{display: flex; align-items: center; gap: 2.2rem;}
.viggo-n2 .main-nav a{font-size: .76rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-muted);
      position: relative;
      padding-bottom: 3px;
      transition: color var(--t-color) var(--ease-hover);}
.viggo-n2 .main-nav a::after{content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 0; height: 1.5px;
      background: var(--cobalt);
      transition: width .35s var(--ease-out);}
.viggo-n2 .main-nav a:hover{color: var(--cobalt);}
.viggo-n2 .main-nav a:hover::after, .viggo-n2 .main-nav a:focus-visible::after{width: 100%;}
.viggo-n2 .nav-cta{font-size: .72rem !important;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--cream-light) !important;
      background: var(--cobalt);
      padding: .5rem 1.1rem;
      border-radius: 2px;
      transition: background .2s, transform .2s, box-shadow .2s;}
.viggo-n2 .nav-cta::after{display: none;}
.viggo-n2 .nav-cta:hover{background: var(--cobalt-deep);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px var(--cobalt-shadow);}
/* Hamburger */
.viggo-n2 .hamburger{display: none;
      flex-direction: column;
      gap: 5px;
      padding: .45rem;
      z-index: 210;}
.viggo-n2 .hamburger span{display: block;
      width: 24px; height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .35s var(--ease-out), opacity .25s;}
.viggo-n2 .hamburger.open span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.viggo-n2 .hamburger.open span:nth-child(2){opacity: 0; transform: scaleX(.4);}
.viggo-n2 .hamburger.open span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}
.viggo-n2 .mobile-nav{position: fixed;
      inset: 0;
      background: var(--cobalt);
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 1.2rem;
      padding: var(--gutter);
      clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem);
      transition: clip-path .6s var(--ease-io);
      pointer-events: none;}
.viggo-n2 .mobile-nav.open{clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem);
      pointer-events: auto;}
.viggo-n2 .mobile-nav a{font-family: var(--serif);
      font-optical-sizing: auto;
      font-size: clamp(2.2rem, 11vw, 3.4rem);
      font-weight: 500;
      font-style: italic;
      color: var(--cream-light);
      line-height: 1.05;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);}
.viggo-n2 .mobile-nav.open a{opacity: 1; transform: none;}
.viggo-n2 .mobile-nav.open a:nth-child(1){transition-delay: .18s;}
.viggo-n2 .mobile-nav.open a:nth-child(2){transition-delay: .25s;}
.viggo-n2 .mobile-nav.open a:nth-child(3){transition-delay: .32s;}
.viggo-n2 .mobile-nav.open a:nth-child(4){transition-delay: .39s;}
.viggo-n2 .mobile-nav.open a:nth-child(5){transition-delay: .46s;}
.viggo-n2 .mobile-nav-meta{margin-top: 2rem;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(243,234,214,.6);
      opacity: 0;
      transition: opacity .4s .55s;}
.viggo-n2 .mobile-nav.open .mobile-nav-meta{opacity: 1;}
/* ════════════════════════════════════════════════════════════════
       HERO
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .hero{position: relative;
      background: var(--cream-light);
      border-bottom: 1px solid var(--rule);
      overflow: hidden;}
/* soft cobalt aura bleeding from behind portrait */
.viggo-n2 .hero::after{content: '';
      position: absolute;
      top: -10%; right: -5%;
      width: 55%; height: 90%;
      background: radial-gradient(ellipse at 65% 40%, rgba(27,52,212,.10), rgba(27,52,212,.02) 55%, transparent 72%);
      pointer-events: none;
      z-index: 0;}
.viggo-n2 .hero-grid{display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 0;
      align-items: stretch;
      min-height: calc(100svh - 4.25rem);
      position: relative;
      z-index: 1;
      /* follow the page width like every other section (.container = --max + gutters) */
      max-width: var(--max);
      margin-inline: auto;}
/* LEFT */
.viggo-n2 .hero-left{padding: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3.5rem) clamp(2rem, 4vw, 4rem) var(--gutter);
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(1.4rem, 2.4vw, 2.2rem);}
.viggo-n2 .hero-dateline{display: flex;
      align-items: center;
      gap: 1rem;
      opacity: 0;
      animation: fadeUp .7s var(--ease-out) .15s forwards;}
.viggo-n2 .hero-dateline .sep{width: 2.2rem; height: 1px; background: var(--cobalt);}
.viggo-n2 .hero-dateline .issue{font-size: .66rem; font-weight: 500;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink-muted);}
.viggo-n2 .hero-title{font-family: var(--serif);
      font-optical-sizing: auto;
      font-size: clamp(2.9rem, 6vw, 6.4rem);
      font-weight: 600;
      line-height: .94;
      letter-spacing: -.025em;
      color: var(--ink);}
.viggo-n2 .hero-title .pre{display: block;
      font-size: .26em;
      font-weight: 600;
      font-family: var(--sans);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-muted);
      margin-bottom: .85rem;}
.viggo-n2 .line{display: block; overflow: clip; overflow-clip-margin: 0.45em;} /* clip (not hidden) so tall italic descenders (J) bleed below the tight line-box; the entrance translateY(105%) stays masked well beyond the margin */
.viggo-n2 .line > span{display: block;
      transform: translateY(105%);}
.viggo-n2.play .line > span{animation: lineUp .9s var(--ease-out) forwards;}
.viggo-n2.play .line.l1 > span{animation-delay: .30s;}
.viggo-n2.play .line.l2 > span{animation-delay: .42s;}
.viggo-n2.play .line.l3 > span{animation-delay: .54s;}
/* kinetic word slots */
.viggo-n2 .kwrap{display: inline-block;
      position: relative;
      overflow: clip;
      overflow-clip-margin: 0.45em; /* let italic glyph ink overhang the advance width (right) and descenders (J) drop below, while still masking the vertical word-swap */
      height: 1.02em;
      vertical-align: bottom;
      line-height: 1;}
.viggo-n2 .kword{display: block;
      position: absolute;
      top: 0; left: 0;
      white-space: nowrap;
      transform: translateY(110%);
      opacity: 0;
      transition: transform .55s var(--ease-out), opacity .4s;}
.viggo-n2 .kword.active{transform: translateY(0); opacity: 1;}
.viggo-n2 .kword.exit{transform: translateY(-110%); opacity: 0;}
.viggo-n2 .kword.role{color: var(--cobalt); font-style: italic;}
.viggo-n2 .kword.adj{color: var(--cobalt); font-style: italic;}
.viggo-n2 .l2{color: var(--ink-muted);}
.viggo-n2 .l2 em{color: var(--ink); font-style: italic;}
.viggo-n2 .hero-lede{font-size: clamp(.95rem, 1.15vw, 1.08rem);
      line-height: 1.65;
      color: var(--ink-muted);
      max-width: 40ch;
      opacity: 0;
      animation: fadeUp .8s var(--ease-out) .95s forwards;}
.viggo-n2 .hero-lede strong{color: var(--ink); font-weight: 600;}
.viggo-n2 .hero-ctas{display: flex;
      flex-wrap: wrap;
      gap: .8rem;
      opacity: 0;
      animation: fadeUp .8s var(--ease-out) 1.1s forwards;}
.viggo-n2 .btn{display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .78rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: .8rem 1.6rem;
      border-radius: 2px;
      transition: background var(--t-color) var(--ease-hover), color var(--t-color) var(--ease-hover), transform var(--t-move) var(--ease-hover), box-shadow var(--t-move) var(--ease-hover), border-color var(--t-color) var(--ease-hover);}
.viggo-n2 .btn .arr{transition: transform var(--t-move) var(--ease-hover);}
.viggo-n2 .btn:hover .arr{transform: translateX(4px);}
.viggo-n2 .btn-primary{color: var(--cream-light);
      background: var(--cobalt);}
.viggo-n2 .btn-primary:hover{background: var(--cobalt-deep);
      transform: translateY(var(--lift));
      box-shadow: 0 12px 28px -10px var(--cobalt-shadow);}
.viggo-n2 .btn-ghost{color: var(--cobalt);
      border: 1.5px solid var(--cobalt);}
.viggo-n2 .btn-ghost:hover{background: var(--cobalt);
      color: var(--cream-light);
      transform: translateY(var(--lift));
      box-shadow: 0 12px 28px -12px var(--cobalt-shadow);}
.viggo-n2 .hero-meta{display: flex;
      gap: clamp(1.5rem, 3vw, 3rem);
      padding-top: 1.6rem;
      border-top: 1px solid var(--rule);
      opacity: 0;
      animation: fadeUp .8s var(--ease-out) 1.25s forwards;}
.viggo-n2 .hero-meta-label{font-size: .58rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--ink-muted); margin-bottom: .25rem;}
.viggo-n2 .hero-meta-val{font-family: var(--serif); font-optical-sizing: auto;
      font-size: .95rem; font-weight: 600; color: var(--ink);}
/* RIGHT — portrait + grid-breaking cobalt block */
.viggo-n2 .hero-right{position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(2rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3.5rem);}
.viggo-n2 .portrait-stage{position: relative;
      width: min(100%, 30rem);
      aspect-ratio: 3 / 3.7;}
/* cobalt geometric block that breaks the grid */
.viggo-n2 .cobalt-block{position: absolute;
      top: -1.4rem;
      right: -1.4rem;
      width: 62%;
      height: 58%;
      background: var(--cobalt);
      z-index: 1;
      opacity: 0;
      transform: translate(2rem, -1rem);}
.viggo-n2 .cobalt-block::after{content: '';
      position: absolute;
      inset: .7rem;
      border: 1px solid rgba(243,234,214,.35);}
.viggo-n2.play .cobalt-block{animation: blockIn .9s var(--ease-out) .55s forwards;}
.viggo-n2 .portrait-frame{position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      background: var(--cobalt-ink);
      box-shadow: 0 30px 70px -25px var(--cobalt-shadow), 0 8px 22px rgba(15,26,77,.18);}
.viggo-n2 .portrait-frame img{width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 18%;
      opacity: 0;
      transform: scale(1.06);
      will-change: transform;}
.viggo-n2.play .portrait-frame img{animation: imgIn 1.1s var(--ease-out) .35s forwards;}
/* caption tab */
.viggo-n2 .portrait-tab{position: absolute;
      left: -1.1rem;
      bottom: 2.2rem;
      z-index: 3;
      background: var(--cream-light);
      border: 1px solid var(--rule);
      padding: .7rem 1rem;
      max-width: 14rem;
      box-shadow: 0 10px 30px -10px var(--cobalt-shadow);
      opacity: 0;
      animation: fadeUp .7s var(--ease-out) 1.3s forwards;}
.viggo-n2 .portrait-tab .q{font-family: var(--serif);
      font-optical-sizing: auto;
      font-style: italic;
      font-size: .92rem;
      line-height: 1.35;
      color: var(--ink);}
.viggo-n2 .portrait-tab cite{display: block;
      margin-top: .35rem;
      font-size: .58rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cobalt);
      font-style: normal;}
/* vertical edge caption */
.viggo-n2 .portrait-vcap{position: absolute;
      top: 0; right: -1.7rem;
      z-index: 3;
      writing-mode: vertical-rl;
      font-family: var(--serif);
      font-style: italic;
      font-size: .62rem;
      letter-spacing: .08em;
      color: var(--ink-muted);
      opacity: 0;
      animation: fadeUp .7s var(--ease-out) 1.4s forwards;}
/* ════════════════════════════════════════════════════════════════
       PRESS STRIP
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .press{background: var(--cream-dark);
      border-bottom: 1px solid var(--rule);
      padding: 2.1rem 0;}
.viggo-n2 .press-inner{display: flex;
      align-items: center;
      gap: clamp(1.2rem, 3vw, 3rem);
      flex-wrap: wrap;}
.viggo-n2 .press-label{font-size: .62rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--ink-muted); white-space: nowrap; flex-shrink: 0;}
.viggo-n2 .press-divider{width: 1px; height: 2.2rem; background: var(--rule); flex-shrink: 0;}
.viggo-n2 .press-logos{display: flex; align-items: center;
      gap: clamp(1.4rem, 3.4vw, 3.4rem); flex-wrap: wrap;}
.viggo-n2 .press-logo{display: inline-flex; align-items: center;
      opacity: .68; filter: saturate(0);
      transition: opacity var(--t-color) var(--ease-hover), filter var(--t-color) var(--ease-hover), transform var(--t-move) var(--ease-hover);}
.viggo-n2 .press-logo:hover{opacity: 1; filter: none; transform: translateY(var(--lift));}
.viggo-n2 .press-logo img{height: clamp(2.2rem, 3.4vw, 3.1rem); width: auto; object-fit: contain;}
.viggo-n2 .press-logo .txt{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 600;
      letter-spacing: -.01em; color: var(--ink);}
/* ════════════════════════════════════════════════════════════════
       SECTION CHROME
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .section-head{display: flex;
      align-items: baseline;
      gap: 1.2rem;
      margin-bottom: clamp(2.2rem, 4vw, 3.4rem);}
.viggo-n2 .section-title{font-family: var(--serif);
      font-optical-sizing: auto;
      font-size: clamp(1.7rem, 3vw, 2.6rem);
      font-weight: 600;
      letter-spacing: -.02em;
      color: var(--ink);
      white-space: nowrap;}
.viggo-n2 .section-title em{font-style: italic; color: var(--cobalt);}
.viggo-n2 .section-rule{flex: 1; height: 1px; background: var(--rule); position: relative; top: -.45rem;}
.viggo-n2 .section-link{font-size: .7rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--cobalt); white-space: nowrap;
      display: inline-flex; align-items: center; gap: .4rem;
      border-bottom: 1px solid currentColor; padding-bottom: 2px;
      transition: gap var(--t-move) var(--ease-hover), opacity var(--t-color) var(--ease-hover);}
.viggo-n2 .section-link:hover{gap: .7rem; opacity: .72;}
/* ════════════════════════════════════════════════════════════════
       NIEUWS — asymmetric editorial
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .nieuws{padding: clamp(4rem, 7vw, 7.5rem) 0; border-bottom: 1px solid var(--rule);}
.viggo-n2 .nieuws-grid{display: grid;
      grid-template-columns: 1.55fr 1fr;
      gap: 0;}
.viggo-n2 .cat-tag{display: inline-block;
      font-size: .6rem; font-weight: 600;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--cream-light); background: var(--cobalt);
      padding: .2rem .55rem; border-radius: 2px;}
.viggo-n2 .src-tag{font-size: .64rem; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--cobalt);}
.viggo-n2 .card-meta{display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem;}
/* lead */
.viggo-n2 .lead{grid-column: 1;
      border-right: 1px solid var(--rule);
      padding-right: clamp(1.5rem, 3vw, 3.5rem);}
.viggo-n2 .lead a{display: block;}
.viggo-n2 .lead-img{overflow: hidden;
      aspect-ratio: 16 / 10;
      margin-bottom: 1.4rem;
      border-radius: 3px;
      background: var(--cream-deep);
      transition: transform var(--t-move) var(--ease-hover), box-shadow var(--t-move) var(--ease-hover);}
.viggo-n2 .lead-img img{width: 100%; height: 100%;
      object-fit: cover;
      transition: transform var(--t-img) var(--ease-hover);}
.viggo-n2 .lead:hover .lead-img{transform: translateY(var(--lift)); box-shadow: var(--card-shadow);}
.viggo-n2 .lead:hover .lead-img img{transform: scale(1.035);}
.viggo-n2 .lead-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(1.5rem, 2.6vw, 2.5rem);
      font-weight: 600; line-height: 1.08; letter-spacing: -.02em;
      color: var(--ink); margin-bottom: 1rem;
      transition: color var(--t-color) var(--ease-hover);}
.viggo-n2 .lead:hover .lead-title{color: var(--cobalt);}
.viggo-n2 .lead-excerpt{font-size: clamp(.9rem, 1.1vw, 1rem);
      color: var(--ink-muted); line-height: 1.7; max-width: 54ch;}
.viggo-n2 .lead-excerpt::first-letter{font-family: var(--serif); font-optical-sizing: auto;
      font-size: 3.4em; font-weight: 600; color: var(--cobalt);
      float: left; line-height: .82; margin: .06em .12em 0 0;}
.viggo-n2 .read-more{display: inline-flex; align-items: center; gap: .45rem;
      margin-top: 1.3rem;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt);}
.viggo-n2 .read-more .arr{transition: transform var(--t-move) var(--ease-hover);}
.viggo-n2 .lead:hover .read-more .arr, .viggo-n2 .sec-item:hover .read-more .arr{transform: translateX(4px);}
/* secondary */
.viggo-n2 .secondary{display: flex; flex-direction: column;}
.viggo-n2 .sec-item{flex: 1;
      padding-left: clamp(1.5rem, 3vw, 3rem);
      display: flex; flex-direction: column;}
.viggo-n2 .sec-item:first-child{padding-bottom: 1.8rem; margin-bottom: 1.8rem;
      border-bottom: 1px solid var(--rule);}
.viggo-n2 .sec-item a{display: block;}
.viggo-n2 .sec-img{overflow: hidden; aspect-ratio: 3 / 2; margin-bottom: 1rem;
      border-radius: 3px;
      background: var(--cream-deep);
      transition: transform var(--t-move) var(--ease-hover), box-shadow var(--t-move) var(--ease-hover);}
.viggo-n2 .sec-img img{width: 100%; height: 100%; object-fit: cover;
      transition: transform var(--t-img) var(--ease-hover);}
.viggo-n2 .sec-item:hover .sec-img{transform: translateY(var(--lift)); box-shadow: var(--card-shadow);}
.viggo-n2 .sec-item:hover .sec-img img{transform: scale(1.035);}
.viggo-n2 .sec-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(1.05rem, 1.5vw, 1.4rem);
      font-weight: 600; line-height: 1.18; letter-spacing: -.01em;
      color: var(--ink); margin: .3rem 0 .55rem;
      transition: color var(--t-color) var(--ease-hover);}
.viggo-n2 .sec-item:hover .sec-title{color: var(--cobalt);}
.viggo-n2 .sec-excerpt{font-size: .86rem; color: var(--ink-muted); line-height: 1.6;}
/* ════════════════════════════════════════════════════════════════
       COLUMN — full-bleed cobalt
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .column{background: var(--cobalt);
      color: var(--cream-light);
      padding: clamp(4rem, 8vw, 9rem) 0;
      position: relative;
      overflow: hidden;}
.viggo-n2 .column::before{content: '\201C';
      position: absolute;
      top: -3rem; left: calc(var(--gutter) - 1rem);
      font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(15rem, 26vw, 32rem); font-weight: 600;
      color: rgba(243,234,214,.07); line-height: 1; pointer-events: none;}
.viggo-n2 .column::after{content: '';
      position: absolute;
      bottom: -25%; right: -8%;
      width: 45%; height: 70%;
      background: radial-gradient(ellipse, rgba(243,234,214,.10), transparent 65%);
      pointer-events: none;}
.viggo-n2 .column-inner{position: relative; z-index: 1;
      display: grid;
      grid-template-columns: .8fr 2.2fr;
      gap: clamp(2rem, 5vw, 6rem);
      align-items: start;}
.viggo-n2 .column-side{display: flex; flex-direction: column; gap: 1.4rem;}
.viggo-n2 .column-side .lbl{font-size: .65rem; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase;
      color: rgba(243,234,214,.6);}
.viggo-n2 .column-num{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(4.5rem, 9vw, 9rem); font-weight: 600;
      color: rgba(243,234,214,.16); line-height: 1; letter-spacing: -.04em;}
.viggo-n2 .column-side .rule{width: 2.5rem; height: 1.5px; background: rgba(243,234,214,.35);}
.viggo-n2 .column-side .meta{font-size: .66rem; font-weight: 500;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(243,234,214,.5);}
.viggo-n2 .column-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(2.4rem, 5vw, 5.6rem);
      font-weight: 600; font-style: italic;
      line-height: .96; letter-spacing: -.03em;
      color: var(--cream-light); margin-bottom: 1.8rem;}
.viggo-n2 .column-excerpt{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(1.05rem, 1.7vw, 1.5rem);
      line-height: 1.55; color: rgba(243,234,214,.82);
      max-width: 38ch;
      border-left: 2px solid rgba(243,234,214,.3);
      padding-left: 1.5rem; margin-bottom: 2.4rem;}
.viggo-n2 .column-cta{display: inline-flex; align-items: center; gap: .55rem;
      font-size: .76rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--cream-light);
      border: 1.5px solid rgba(243,234,214,.4);
      padding: .75rem 1.6rem; border-radius: 2px;
      transition: background .25s, border-color .25s, gap .3s var(--ease-out);}
.viggo-n2 .column-cta:hover{background: rgba(243,234,214,.12); border-color: var(--cream-light); gap: .9rem;}
.viggo-n2 .more-cols{margin-top: 2.6rem; padding-top: 1.8rem;
      border-top: 1px solid rgba(243,234,214,.16);}
.viggo-n2 .more-cols .lbl{font-size: .6rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(243,234,214,.45); margin-bottom: .9rem;}
.viggo-n2 .more-cols ul{list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;}
.viggo-n2 .more-cols a{font-family: var(--serif); font-optical-sizing: auto;
      font-style: italic; font-size: 1.02rem;
      color: rgba(243,234,214,.7);
      display: inline-flex; align-items: center; gap: .4rem;
      transition: color .2s;}
.viggo-n2 .more-cols a::before{content: '\2197'; font-style: normal; font-size: .8em;}
.viggo-n2 .more-cols a:hover{color: var(--cream-light);}
/* ════════════════════════════════════════════════════════════════
       OVER MIJ
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .over{padding: clamp(4.5rem, 8vw, 9.5rem) 0;
      background: var(--cream-light);
      border-bottom: 1px solid var(--rule);}
.viggo-n2 .over-grid{display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: clamp(2.5rem, 6vw, 6.5rem);
      align-items: center;}
.viggo-n2 .over-photo{position: relative;}
.viggo-n2 .over-photo .frame{position: relative; overflow: hidden;
      aspect-ratio: 3 / 4;
      background: var(--cream-deep);}
.viggo-n2 .over-photo .frame img{width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      transition: transform var(--t-img) var(--ease-hover);}
.viggo-n2 .over-photo:hover .frame img{transform: scale(1.035);}
/* offset cobalt outline */
.viggo-n2 .over-photo::before{content: '';
      position: absolute;
      inset: 0;
      border: 1.5px solid var(--cobalt);
      transform: translate(14px, 14px);
      transition: transform var(--t-move) var(--ease-hover);
      pointer-events: none;
      z-index: 2;}
.viggo-n2 .over-photo:hover::before{transform: translate(6px, 6px);}
.viggo-n2 .over-badge{position: absolute;
      right: -1.2rem; bottom: 1.8rem;
      z-index: 3;
      background: var(--cobalt);
      color: var(--cream-light);
      padding: 1rem 1.3rem;
      box-shadow: 0 14px 36px -12px var(--cobalt-shadow);}
.viggo-n2 .over-badge .n{font-family: var(--serif); font-optical-sizing: auto;
      font-size: 1.6rem; font-weight: 600; line-height: 1;}
.viggo-n2 .over-badge .l{font-size: .58rem; font-weight: 500;
      letter-spacing: .12em; text-transform: uppercase;
      opacity: .8; margin-top: .25rem; white-space: nowrap;}
.viggo-n2 .over-kicker-line{display: flex; align-items: center; gap: 1rem; margin-bottom: 1.3rem;}
.viggo-n2 .over-kicker-line .rule{width: 2.5rem; height: 1.5px; background: var(--cobalt);}
.viggo-n2 .over-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(2rem, 3.6vw, 3.6rem);
      font-weight: 600; line-height: 1; letter-spacing: -.03em;
      color: var(--ink); margin-bottom: 1.8rem;}
.viggo-n2 .over-title em{font-style: italic; color: var(--cobalt);}
.viggo-n2 .over-quote{font-family: var(--serif); font-optical-sizing: auto;
      font-style: italic;
      font-size: clamp(1.1rem, 1.7vw, 1.45rem);
      line-height: 1.55; color: var(--ink);
      border-left: 3px solid var(--cobalt);
      padding-left: 1.6rem; margin-bottom: 1.3rem;}
.viggo-n2 .over-attr{font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--cobalt); margin-bottom: 1.8rem;}
.viggo-n2 .over-bio{font-size: clamp(.9rem, 1.05vw, .98rem);
      color: var(--ink-muted); line-height: 1.75; max-width: 52ch;}
.viggo-n2 .over-tags{display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem;}
.viggo-n2 .over-tag{font-size: .64rem; font-weight: 500;
      letter-spacing: .08em; text-transform: uppercase;
      color: var(--cobalt-deep);
      border: 1px solid rgba(27,52,212,.28);
      background: rgba(27,52,212,.05);
      padding: .28rem .7rem; border-radius: 2px;}
/* ════════════════════════════════════════════════════════════════
       ABOUT + COLUMNS — merged two-column section
       (Over mij left · Columns right). Was two stacked sections.
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .about{padding: clamp(4.5rem, 8vw, 9.5rem) 0;
      background: var(--cream-light);
      border-bottom: 1px solid var(--rule);}
.viggo-n2 .about-grid{display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: clamp(2.5rem, 6vw, 5.5rem);
      align-items: start;}
/* LEFT column = Over mij; RIGHT column = Columns (cobalt card) */
.viggo-n2 .about-col{display: flex; flex-direction: column;}
.viggo-n2 .over-photo-wrap .over-photo{margin-bottom: clamp(2rem, 3.5vw, 3rem);}
/* keep the offset cobalt outline + badge inside the narrower column */
.viggo-n2 .over-photo-wrap .over-photo{margin-right: 14px;}
/* the cobalt column card — keeps the cobalt-on-cream pop without full bleed */
.viggo-n2 .col-card{position: relative;
      background: var(--cobalt);
      color: var(--cream-light);
      padding: clamp(2rem, 4vw, 3.2rem);
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 26px 60px -28px var(--cobalt-shadow), 0 8px 22px rgba(15,26,77,.16);}
.viggo-n2 .col-card::before{content: '\201C';
      position: absolute;
      top: -2.4rem; left: .4rem;
      font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(9rem, 18vw, 15rem); font-weight: 600;
      color: rgba(243,234,214,.08); line-height: 1; pointer-events: none;}
.viggo-n2 .col-card::after{content: '';
      position: absolute;
      bottom: -30%; right: -12%;
      width: 60%; height: 80%;
      background: radial-gradient(ellipse, rgba(243,234,214,.10), transparent 65%);
      pointer-events: none;}
.viggo-n2 .col-card-inner{position: relative; z-index: 1;}
.viggo-n2 .col-head{display: flex; align-items: center; flex-wrap: wrap;
      gap: .8rem 1.4rem; margin-bottom: 1.4rem;}
.viggo-n2 .col-head .lbl{font-size: .62rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(243,234,214,.6);}
.viggo-n2 .col-head .num{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600;
      color: rgba(243,234,214,.18); line-height: 1; letter-spacing: -.04em;}
.viggo-n2 .col-head .meta{font-size: .62rem; font-weight: 500;
      letter-spacing: .1em; text-transform: uppercase;
      color: rgba(243,234,214,.5);}
.viggo-n2 .col-card .column-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(2.1rem, 4vw, 3.4rem);
      font-weight: 600; font-style: italic;
      line-height: .98; letter-spacing: -.03em;
      color: var(--cream-light); margin-bottom: 1.4rem;}
.viggo-n2 .col-card .column-excerpt{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(1rem, 1.4vw, 1.25rem);
      line-height: 1.55; color: rgba(243,234,214,.85);
      border-left: 2px solid rgba(243,234,214,.32);
      padding-left: 1.3rem; margin-bottom: 1.8rem;}
.viggo-n2 .col-card .column-cta{display: inline-flex; align-items: center; gap: .55rem;
      font-size: .76rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--cream-light);
      border: 1.5px solid rgba(243,234,214,.4);
      padding: .7rem 1.5rem; border-radius: 2px;
      transition: background var(--t-color) var(--ease-hover), border-color var(--t-color) var(--ease-hover), gap var(--t-move) var(--ease-hover);}
.viggo-n2 .col-card .column-cta:hover{background: rgba(243,234,214,.12); border-color: var(--cream-light); gap: .85rem;}
.viggo-n2 .col-card .column-cta:focus-visible{outline-color: var(--cream-light);}
.viggo-n2 .col-card .more-cols{margin-top: 2rem; padding-top: 1.5rem;
      border-top: 1px solid rgba(243,234,214,.16);}
.viggo-n2 .col-card .more-cols .lbl{font-size: .6rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(243,234,214,.45); margin-bottom: .6rem;}
.viggo-n2 .col-card .more-cols ul{list-style: none; display: flex; flex-direction: column;}
.viggo-n2 .col-list-link{display: flex; align-items: center; gap: 1rem;
      padding: .9rem 0;
      border-top: 1px solid rgba(243,234,214,.14);
      transition: padding-left var(--t-move) var(--ease-hover);}
.viggo-n2 .col-card .more-cols li:last-child .col-list-link{border-bottom: 1px solid rgba(243,234,214,.14);}
.viggo-n2 .col-list-text{flex: 1; min-width: 0;}
.viggo-n2 .col-list-link .k{display: block;
      font-family: var(--sans);
      font-size: .56rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(243,234,214,.5);
      margin-bottom: .2rem;}
.viggo-n2 .col-list-link .t{display: block;
      font-family: var(--serif); font-optical-sizing: auto;
      font-style: italic; font-size: 1.12rem; line-height: 1.18;
      color: rgba(243,234,214,.85);
      transition: color var(--t-color) var(--ease-hover);}
.viggo-n2 .col-list-link .ex{display: block;
      font-family: var(--sans);
      font-size: .8rem; line-height: 1.5;
      color: rgba(243,234,214,.5);
      margin-top: .35rem;
      max-width: 60ch;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.viggo-n2 .col-list-link .arr{flex-shrink: 0;
      font-size: 1rem;
      color: rgba(243,234,214,.55);
      transition: transform var(--t-move) var(--ease-hover), color var(--t-color) var(--ease-hover);}
.viggo-n2 .col-list-link:hover{padding-left: .4rem;}
.viggo-n2 .col-list-link:hover .t{color: var(--cream-light);}
.viggo-n2 .col-list-link:hover .arr{color: var(--cream-light); transform: translateX(4px);}
.viggo-n2 .col-list-link:focus-visible{outline-color: var(--cream-light); outline-offset: 2px;}
.viggo-n2 .col-card .more-cols .all-cols{display: inline-flex; align-items: center; gap: .55rem;
      margin-top: 1.4rem;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--cream-light);
      border-bottom: 1px solid rgba(243,234,214,.4);
      padding-bottom: 3px;
      transition: gap var(--t-move) var(--ease-hover), border-color var(--t-color) var(--ease-hover);}
.viggo-n2 .col-card .more-cols .all-cols:hover{gap: .85rem; border-color: var(--cream-light);}
.viggo-n2 .col-card .more-cols .all-cols:focus-visible{outline-color: var(--cream-light);}
/* the columns card content must always fill the full card width (no leftover cobalt on the right):
   reset the inherited reading-measure caps and force the list rows to stretch edge-to-edge */
.viggo-n2 .col-card .column-excerpt{max-width: none;}
.viggo-n2 .col-card .more-cols > div{display: flex; flex-direction: column; width: 100%;}
.viggo-n2 .col-card .col-list-link{width: 100%;}
.viggo-n2 .col-card .col-list-link .ex{max-width: none;}
/* ════════════════════════════════════════════════════════════════
       CONTACT
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .contact{padding: clamp(4.5rem, 8vw, 9.5rem) 0;
      background: var(--cream-dark);
      border-bottom: 1px solid var(--rule);
      position: relative; overflow: hidden;}
.viggo-n2 .contact::before{content: '';
      position: absolute;
      bottom: -40%; left: -10%;
      width: 50%; height: 90%;
      background: radial-gradient(ellipse, rgba(27,52,212,.08), transparent 65%);
      pointer-events: none;}
.viggo-n2 .contact-inner{position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: clamp(2.5rem, 6vw, 7rem);
      align-items: center;}
.viggo-n2 .contact-title{font-family: var(--serif); font-optical-sizing: auto;
      font-size: clamp(2rem, 4.2vw, 4.4rem);
      font-weight: 600; line-height: 1.04; letter-spacing: -.03em;
      color: var(--ink); margin-bottom: 1rem;}
.viggo-n2 .contact-title em{font-style: italic; color: var(--cobalt);}
.viggo-n2 .contact-sub{font-size: clamp(.92rem, 1.1vw, 1.02rem);
      color: var(--ink-muted); line-height: 1.65; max-width: 44ch;}
.viggo-n2 .contact-form{display: flex; flex-direction: column; gap: .85rem;}
.viggo-n2 .field input{width: 100%;
      background: var(--cream-light);
      border: 1px solid var(--rule);
      border-radius: 2px;
      padding: .95rem 1.2rem;
      font-family: var(--sans);
      font-size: .92rem;
      color: var(--ink);
      outline: none;
      transition: border-color var(--t-color) var(--ease-hover), box-shadow var(--t-color) var(--ease-hover);}
.viggo-n2 .field input::placeholder{color: rgba(20,16,25,.4);}
.viggo-n2 .field input:focus{border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(27,52,212,.12);}
.viggo-n2 .form-submit{width: 100%;
      background: var(--cobalt);
      color: var(--cream-light);
      font-size: .78rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 1rem; border-radius: 2px;
      transition: background var(--t-color) var(--ease-hover), transform var(--t-move) var(--ease-hover), box-shadow var(--t-move) var(--ease-hover);}
.viggo-n2 .form-submit:hover{background: var(--cobalt-deep); transform: translateY(var(--lift)); box-shadow: 0 12px 28px -10px var(--cobalt-shadow);}
.viggo-n2 .form-note{font-size: .72rem; color: var(--ink-muted); text-align: center; opacity: .8;}
.viggo-n2 .form-note a{color: var(--cobalt); border-bottom: 1px solid currentColor;}
/* ════════════════════════════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════════════════════════════ */
.viggo-n2 .site-footer{background: var(--cobalt-ink);
      color: rgba(243,234,214,.55);
      padding: clamp(3rem, 5vw, 5rem) 0 2rem;}
.viggo-n2 .footer-grid{display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 2.5rem;
      padding-bottom: 2.6rem; margin-bottom: 2rem;
      border-bottom: 1px solid rgba(243,234,214,.1);}
.viggo-n2 .footer-brand .wordmark{color: rgba(243,234,214,.92); font-size: 1.4rem; margin-bottom: 1rem;}
.viggo-n2 .footer-brand .wordmark em{color: #8fa0ff;}
.viggo-n2 .footer-brand .wordmark .mark{background: #8fa0ff; box-shadow: 0 0 0 3px rgba(143,160,255,.2);}
.viggo-n2 .footer-brand p{font-size: .82rem; line-height: 1.7; max-width: 30ch;}
.viggo-n2 .footer-col h4{font-size: .6rem; font-weight: 600;
      letter-spacing: .16em; text-transform: uppercase;
      color: rgba(243,234,214,.4); margin-bottom: 1rem;}
.viggo-n2 .footer-col ul{list-style: none; display: flex; flex-direction: column; gap: .5rem;}
.viggo-n2 .footer-col a{font-size: .85rem; color: rgba(243,234,214,.55); display: inline-block;
      transition: color var(--t-color) var(--ease-hover), transform var(--t-move) var(--ease-hover);}
.viggo-n2 .footer-col a:hover{color: var(--cream-light); transform: translateX(3px);}
.viggo-n2 .footer-bottom{display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; flex-wrap: wrap;}
.viggo-n2 .footer-copy{font-size: .68rem; color: rgba(243,234,214,.32); letter-spacing: .03em;}
.viggo-n2 .footer-colophon{font-family: var(--serif); font-optical-sizing: auto;
      font-style: italic; font-size: .76rem; color: rgba(243,234,214,.32);
      transition: color var(--t-color) var(--ease-hover);}
.viggo-n2 a.footer-colophon:hover{color: rgba(243,234,214,.7);}
/* ════════════════════════════════════════════════════════════════
       KEYFRAMES
    ════════════════════════════════════════════════════════════════ */
@keyframes fadeUp{from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; }}
@keyframes lineUp{from { transform: translateY(105%); } to { transform: translateY(0); }}
@keyframes imgIn{from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); }}
@keyframes blockIn{from { opacity: 0; transform: translate(2rem,-1rem); } to { opacity: 1; transform: none; }}
/* ════════════════════════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════════════════════════ */
@media (max-width: 980px){.viggo-n2 .main-nav, .viggo-n2 .nav-cta{display: none;}
.viggo-n2 .hamburger{display: flex;}
.viggo-n2 .hero-grid{grid-template-columns: 1fr; min-height: 0;}
.viggo-n2 .hero-right{order: -1;
        padding: clamp(2rem,6vw,3rem) var(--gutter) 0;}
.viggo-n2 .hero-left{border-right: none;
        padding: clamp(2rem,5vw,3rem) var(--gutter) clamp(2.5rem,6vw,3.5rem);
        text-align: left;}
.viggo-n2 .portrait-stage{width: min(100%, 24rem); margin-inline: auto;}
.viggo-n2 .portrait-vcap{display: none;}
.viggo-n2 .nieuws-grid{grid-template-columns: 1fr;}
.viggo-n2 .lead{border-right: none; padding-right: 0;
        padding-bottom: 2.4rem; margin-bottom: 2.4rem;
        border-bottom: 1px solid var(--rule);}
.viggo-n2 .sec-item{padding-left: 0;}
.viggo-n2 .contact-inner{grid-template-columns: 1fr; gap: 2.4rem;}
.viggo-n2 .footer-grid{grid-template-columns: 1fr 1fr; gap: 2rem;}
.viggo-n2 .footer-brand{grid-column: 1 / -1;}}
/* About + Columns stack: Over mij first, then Columns */
@media (max-width: 760px){.viggo-n2 .about-grid{grid-template-columns: 1fr; gap: clamp(2.5rem, 8vw, 3.5rem);}
.viggo-n2 .over-photo-wrap .over-photo{max-width: 26rem;}}
@media (max-width: 560px){.viggo-n2 .section-head{flex-wrap: wrap; gap: .6rem;}
.viggo-n2 .section-rule{display: none;}
.viggo-n2 .hero-meta{flex-wrap: wrap; gap: 1.2rem 2rem;}
.viggo-n2 .footer-grid{grid-template-columns: 1fr 1fr;}
.viggo-n2 .over-badge{right: 0; bottom: .8rem; padding: .8rem 1rem;}
.viggo-n2 .portrait-tab{left: 0; max-width: 12rem;}}
@media (prefers-reduced-motion: reduce){.viggo-n2 *, .viggo-n2 *::before, .viggo-n2 *::after{animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;}
.viggo-n2 .reveal{opacity: 1; transform: none;}
.viggo-n2 .clip-reveal{clip-path: inset(0 0 0 0);}
.viggo-n2 .line > span{transform: none;}
.viggo-n2 .cobalt-block, .viggo-n2 .portrait-frame img{opacity: 1; transform: none;}
.viggo-n2 .kword{position: static; transform: none; opacity: 1;}
.viggo-n2 .kword:not(.active):not([data-first]){display: none;}}

/* ── site integration overrides (the live Oxygen header is position:fixed, 100px) ── */
.viggo-n2 .hero{padding-top:var(--navigatie-bar-hoogte,100px);}
.viggo-n2 .hero-grid{min-height:calc(100svh - var(--navigatie-bar-hoogte,100px));}
/* footer identity: Water Brush signature + link columns */
.viggo-n2 .footer-sig{display:inline-block;font-family:'Water Brush',cursive;font-weight:400;font-size:2.9rem;line-height:.8;color:var(--cream-light);transform:rotate(-4deg);transform-origin:left center;margin:.2rem 0 1.1rem;}
.viggo-n2 .footer-links{display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem;}
.viggo-n2 .site-footer .footer-col a{color:rgba(243,234,214,.6);}
.viggo-n2 .site-footer .footer-col a:hover{color:var(--cream-light);}
/* kinetic word slot animates its width so the trailing dot follows the active word */
.viggo-n2 .kwrap{transition:width .55s var(--ease-out);}
.viggo-n2 .kdot{display:inline-block;}
/* native Breakdance contact form sits in the cobalt-on-cream contact section */
.viggo-n2 .contact .breakdance-form-field input,
.viggo-n2 .contact .breakdance-form-field textarea{background:var(--cream-light);border:1px solid var(--rule);border-radius:2px;}
.viggo-n2 .contact .breakdance-form-button,
.viggo-n2 .contact button[type=submit]{background:var(--cobalt);color:var(--cream-light);}

/* ════════ Builder / no-JS visibility + responsive refinements ════════ */
/* (#34) The entrance + scroll-reveal CSS hides elements until JS adds html.viggo-js (set in
   <head>, before paint). The Oxygen builder canvas and JS-disabled visitors never get that
   class, so force everything visible for them — keeps the builder editable and the page
   readable without JS. (.kword is excluded: its slots are absolutely stacked and the active
   one already shows.) */
html:not(.viggo-js) .viggo-n2 .reveal,
html:not(.viggo-js) .viggo-n2 .clip-reveal,
html:not(.viggo-js) .viggo-n2 .line > span,
html:not(.viggo-js) .viggo-n2 .cobalt-block,
html:not(.viggo-js) .viggo-n2 .portrait-frame img,
html:not(.viggo-js) .viggo-n2 .hero-dateline,
html:not(.viggo-js) .viggo-n2 .hero-lede,
html:not(.viggo-js) .viggo-n2 .hero-ctas,
html:not(.viggo-js) .viggo-n2 .hero-meta,
html:not(.viggo-js) .viggo-n2 .portrait-tab,
html:not(.viggo-js) .viggo-n2 .portrait-vcap{
  opacity:1 !important;transform:none !important;clip-path:none !important;animation:none !important;}

/* (#32) the signature logo intro scales large out of the fixed header; on tablet/phone that big
   scale-in overlapped the hero heading — show the logo settled (no scale) below 900px. */
@media (max-width:900px){ .viggo-n2 body.logo-intro .sig-clip{transform:none;} }

/* (#29) section header ("Actueel · Nieuws · Alle artikelen"): on smaller screens drop the
   "Alle artikelen" link onto its own line so the title + link never crowd each other. */
@media (max-width:680px){
  .viggo-n2 .section-head{flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;}
  .viggo-n2 .section-rule{display:none;}
  .viggo-n2 .section-link{flex-basis:100%;margin-top:.1rem;}
}

/* (#30) press strip ("Te zien & gehoord bij"): stack the label above the logos on small screens
   and drop the divider so the logos get a clean full-width row instead of cramping. */
@media (max-width:600px){
  .viggo-n2 .press-inner{flex-direction:column;align-items:flex-start;gap:1rem;}
  .viggo-n2 .press-divider{display:none;}
  .viggo-n2 .press-logos{gap:1.4rem 2rem;width:100%;}
}