/* ==========================================================================
   Decopro — belevingslaag, mobiele laag (index3)
   Wordt enkel geladen onder 760px. Staande video's, kortere trajecten,
   ruimere raakvlakken en een tekstmaat die op een telefoon leesbaar blijft.
   ========================================================================== */

/* ------------------------------------------------------------ kopregel */
.xp-on .nav-bar { padding: .7rem 1.15rem; }
.xp-on .site-header .logo-mark { width: 38px; height: 26px; }
.xp-on .site-header .nav-toggle { padding: .5rem; }
.xp-on .site-header .nav-toggle span { width: 24px; margin: 6px 0; }

/* -------------------------------------------------------- videovlakken */
/* korter traject: een telefoonscherm is hoog, dus dezelfde beleving vraagt
   minder scrollafstand voordat het vlak is uitgespeeld */
.xp-on .xp-track { height: 170svh; }
/* staand beeld hoeft minder te overmaten: minder bijsnijden aan de zijkant */
.xp-on .xp-video { top: -6%; height: 112%; }

.xp-on .xp-caption { padding-bottom: 6.5rem; }        /* ruimte voor de vraagknop */
.xp-on .xp-caption h1 { font-size: clamp(1.95rem, 9.2vw, 2.7rem); max-width: 15ch; }
.xp-on .xp-caption h2 { font-size: clamp(1.5rem, 6.8vw, 2rem); max-width: 17ch; }
.xp-on .xp-caption p { font-size: .98rem; max-width: 30ch; margin-top: .9rem; }
.xp-on .xp-caption .btn { margin-top: 1.4rem; }
.xp-on .xp-stage.center .xp-caption { padding-bottom: 4rem; }

/* lange uitleg is op een telefoon boven bewegend beeld onleesbaar:
   daar tonen we de korte variant */
.only-desk { display: none; }
.only-mob  { display: block; }

/* ------------------------------------------------------------- slogans */
.xp-on main > section.slogan { min-height: 88svh; padding: 5rem 0; }
.xp-on .slogan-text { font-size: clamp(2.1rem, 10.5vw, 3.1rem); line-height: .96; max-width: 13ch; }
.xp-on .slogan-rule { width: 3rem; margin-bottom: 1.5rem; }
.xp-on .slogan-sub { font-size: .98rem; max-width: 34ch; margin-top: 1.5rem; }

/* --------------------------------------------------------- inhoudsblok */
/* extra kopruimte zodat titels niet onder het zwevende monogram schuiven */
.xp-on main > section.xp-content { padding: 6.5rem 0 4.5rem; }
.xp-on .section-head { margin-bottom: 2.2rem; }
.xp-on .svc-line { grid-template-columns: 1fr; gap: .3rem; padding: 1.5rem 0; }
.xp-on .svc-line:hover { padding-left: 0; background: none; }
.xp-on .svc-line .num { display: block; margin-bottom: .2rem; }
.xp-on .svc-line h3 { font-size: 1.35rem; }
.xp-on .svc-line p { font-size: .95rem; max-width: none; }
.xp-on .svc-line .go { margin-top: .8rem; opacity: .75; }

/* projecten onder elkaar, met wat lucht */
.xp-on .project-grid { gap: 1.4rem; }

/* ------------------------------------------------------------ instagram */
.xp-on .ig-head { gap: 1.2rem; }
.xp-on .ig-head .btn { align-self: flex-start; }