/* ============================================================
   Glentio Lab — production stylesheet
   Palette: cream #F2EEE6 · ink #151412 · orange #F0521E
   Type: Archivo (sans) · Instrument Serif · Caveat (hand)
   One job per face. Archivo carries every heading, plainly. The serif
   italic is the voice of a promise ("Ends with a decision…") and appears
   once as display type, in the hero. Caveat is the hand in the margin.
   ============================================================ */

:root{
  --cream:#F2EEE6;
  --cream-2:#F7F4EE;
  --paper:#FBF9F4;
  --ink:#151412;
  --ink-soft:#3A3833;
  --muted:#8B867C;
  --line:rgba(21,20,18,.15);
  --line-soft:rgba(21,20,18,.12);
  --orange:#F0521E;
  --orange-hot:#FF6A35;
  --orange-deep:#DC440F;
  --orange-text:#BE3D0B;   /* AA on cream at small sizes (measured, not assumed) */
  --orange-cta:#CE3C0C;    /* solid-button bg: deep enough for white text to pass AA */
  --orange-on-dark:#FF7A45;/* orange for small text on ink */
  --muted-ink:#6B665A;     /* AA-contrast muted for small text on cream */
  --blue:#2563EB;
  --green:#00C566;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px, 4.4vw, 56px);
  --container:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
html,body{margin:0;padding:0;background:var(--cream)}
body{
  font-family:'Archivo',sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
h1,h2,h3,p,ul,ol,li{margin:0;padding:0}
ul,ol{list-style:none}
em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
::selection{background:var(--orange);color:#fff}
::-webkit-scrollbar{width:12px;background:var(--cream)}
::-webkit-scrollbar-thumb{background:#C9C3B6;border-radius:6px;border:3px solid var(--cream)}
section[id],footer{scroll-margin-top:92px}
.container{max-width:var(--container);margin:0 auto}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:10001;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:4px;
  transform:translateY(-200%);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:none}

/* ---------- keyframes ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* hero words rise from behind their line's overflow mask and settle level */
@keyframes wordRise{
  from{transform:translateY(118%) rotate(4deg)}
  to{transform:translateY(0) rotate(0)}
}
@keyframes ideaPop{
  from{opacity:0;transform:scale(.3)}
  60%{transform:scale(1.15)}
  to{opacity:1;transform:scale(1)}
}
/* ---------- reveal system ---------- */
.js [data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s);
}
.js [data-reveal].is-on{opacity:1;transform:none}

/* ---------- hand-drawn scribble underline ---------- */
.u-scribble{position:relative;display:inline-block;white-space:nowrap}
.u-scribble svg{
  position:absolute;left:-1%;bottom:-.06em;width:102%;height:.18em;
  overflow:visible;pointer-events:none;
}
.u-scribble path{
  fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* Drawn *by* the spark as it passes: linear, and exactly its pass duration.
   Revealed with a clip rather than a dash: Chrome measures dashes in screen
   space under non-scaling-stroke, so a dash-drawn underline stopped short of
   any word wider than about three ems. */
.js .u-scribble svg{clip-path:inset(-60% 102% -60% -2%)}
.is-ready .hero__title .u-scribble svg{
  transition:clip-path .28s linear 1.32s;clip-path:inset(-60% -2% -60% -2%);
}

/* ---------- shared type ---------- */
.h2{
  font-weight:800;font-size:clamp(33px,5.2vw,72px);line-height:1;letter-spacing:-.04em;
  text-wrap:balance;
}
.lead{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:19px 38px;border-radius:4px;
  font-size:18px;font-weight:600;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.btn__label{display:inline-block;overflow:hidden;vertical-align:middle}
.btn__t{display:inline-block;position:relative;transition:transform .45s var(--ease)}
.btn--solid{
  background:var(--orange-cta);color:#fff;
}
.btn--solid:hover{background:var(--ink);color:#fff}
.link-underline{
  font-size:18px;font-weight:500;padding-bottom:4px;position:relative;
}
.link-underline::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--orange);transform-origin:right;
  transition:transform .45s var(--ease);
}
.link-underline:hover{color:var(--orange)}
.link-underline:hover::after{transform:scaleX(0);transform-origin:right;animation:underlineBack .45s var(--ease) .1s forwards}
@keyframes underlineBack{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);position:sticky;top:0;z-index:50;
  background:rgba(242,238,230,.82);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(21,20,18,.08);
  transition:padding .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-scrolled{padding-top:14px;padding-bottom:14px;box-shadow:0 10px 30px rgba(21,20,18,.06)}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__dot{width:26px;height:26px;border-radius:50%;background:var(--orange);display:inline-block;transition:transform .5s var(--ease-pop)}
.nav__brand:hover .nav__dot{transform:scale(1.18)}
.nav__name{font-weight:800;font-size:19px;letter-spacing:.06em}
.nav__links{display:flex;align-items:center;gap:40px;font-size:15px;font-weight:500;letter-spacing:.01em}
.nav__links a:not(.nav__cta):hover{color:var(--orange)}
.nav__links a.is-active:not(.nav__cta){color:var(--orange)}
.nav__cta{
  border:1px solid var(--ink);padding:13px 26px;border-radius:4px;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.nav__cta:hover{background:var(--ink);color:var(--cream)}
/* ---------- language switcher ---------- */
.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;
}
/* ---------- language switcher ----------
   A raised paper chip sliding in a milled groove: the page is about ideas
   leaving paper, so the one control the visitor touches is made of it too.
   The chip is the only moving part — labels just shift weight beneath it. */
.lang{
  position:relative;display:inline-flex;align-items:center;
  margin-left:26px;padding:3px;border-radius:999px;
  background:rgba(21,20,18,.05);
  box-shadow:inset 0 1px 2px rgba(21,20,18,.07),0 1px 0 rgba(255,255,255,.5);
}
.lang__thumb{
  position:absolute;top:3px;left:3px;z-index:0;
  width:calc((100% - 6px) / 2);height:calc(100% - 6px);
  border-radius:999px;background:var(--paper);
  box-shadow:0 1px 1px rgba(21,20,18,.05),0 2px 7px rgba(21,20,18,.10);
  transition:transform .55s var(--ease-pop);
}
/* Anchors, not buttons: each locale is a real indexable URL, so the
   switcher navigates and works with JavaScript disabled. */
.lang__btn{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  color:var(--muted-ink);background:none;border:0;margin:0;
  padding:7px 13px;line-height:1;border-radius:999px;text-decoration:none;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color .4s var(--ease);
}
.lang__btn.is-on{color:var(--ink)}
.lang__btn:not(.is-on):hover{color:var(--ink-soft)}
/* the chip follows whichever label is active — no JS beyond the class */
.lang__btn[data-lang="es"].is-on ~ .lang__thumb{transform:translateX(100%)}
/* the chip is placed before the opening starts; without this it would be
   seen sliding across on a plain page load */
.js:not(.is-ready) .lang__thumb{transition:none}
.lang__btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (max-width:1040px){.lang{display:none}} /* lives in the mobile menu instead */
/* sits below the nav row: at a 44px tap size the pair no longer fits beside
   the wordmark on a phone */
.menu__lang{
  position:absolute;top:84px;right:var(--pad);z-index:70;
  display:none;align-items:center;padding:3px;border-radius:999px;
  background:rgba(242,238,230,.09);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28);
}
@media (max-width:1040px){.menu__lang{display:inline-flex}}
/* the only way to change language on a phone — give it a real tap target */
.menu__lang .lang__btn{
  color:#A8A499;font-size:12px;
  min-width:52px;min-height:44px;padding:6px 10px;
  display:flex;align-items:center;justify-content:center;
}
.menu__lang .lang__btn.is-on{color:var(--ink)}
.menu__lang .lang__btn:not(.is-on):hover{color:var(--cream)}
.menu__lang .lang__thumb{
  background:var(--cream);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.25);
}

.nav__burger{
  display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;z-index:70;
}
.nav__burger span{
  width:26px;height:2px;background:var(--ink);display:block;
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* ---------- mobile menu ---------- */
.menu{
  position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s var(--ease),visibility 0s .6s;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease)}
.menu__links{display:flex;flex-direction:column;gap:6px}
.menu__links a{
  font-size:clamp(38px,9vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.15;
  display:flex;align-items:baseline;gap:18px;
  opacity:0;transform:translateY(28px);
}
.menu.is-open .menu__links a{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease) calc(.15s + var(--i)*.06s),transform .55s var(--ease) calc(.15s + var(--i)*.06s);
}
.menu__links a:hover{color:var(--orange)}
.menu__foot{
  position:absolute;bottom:34px;left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:14px;color:#A8A499;
}
.menu__foot a:hover{color:var(--orange)}
body.menu-locked{overflow:hidden}
/* Locking body scroll turns it into a scroll container, which drops the
   sticky nav back to its static position — open the menu below the fold and
   the close button scrolls away with it, trapping phone users (no Esc key).
   Pin it to the viewport instead; the menu is a fullscreen overlay anyway. */
body.menu-locked .nav{
  position:fixed;top:0;left:0;right:0;
  z-index:70;background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
body.menu-locked .nav__name{color:var(--cream)}
body.menu-locked .nav__burger span{background:var(--cream)}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,4.5vw,64px) var(--pad) clamp(56px,8vw,110px);position:relative}
.hero__grid{
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;
}
.hero__grid > *{min-width:0}
.hero__title{
  font-weight:800;font-size:clamp(42px,7vw,94px);line-height:.96;letter-spacing:-.042em;
  margin:0 0 36px;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
/* "notebook." is the one word written by hand: the same pen as the page
   beside it. Everything else in the sentence is set in solid type. It sits
   at a writer's slant, and it does not rise from a mask like the typeset
   lines: the spark writes it, left to right, then underlines it. */
.hero__title em{
  display:inline-block;
  font-family:'Caveat',cursive;font-style:normal;font-weight:600;color:var(--ink);
  font-size:1.3em;line-height:.74;letter-spacing:-.01em;
  transform:rotate(-2.2deg);transform-origin:0 80%;
}
.hero__title .line:last-child{overflow:visible;padding-top:.1em;padding-bottom:.16em}
.js .hero__title em .hw,.js .hero__title.is-split em .hw{transform:none;animation:none}
.js .hero__title em{clip-path:inset(-40% 100% -40% -3%)}
.is-ready .hero__title em{
  clip-path:inset(-40% -4% -40% -3%);transition:clip-path .34s linear .9s;
}
.hero__title .hw{
  display:inline-block;white-space:pre;
  transform-origin:0 100%;
}
.js .hero__title .hw{transform:translateY(118%) rotate(4deg)}
.js .hero__title.is-split .hw{
  animation:wordRise .75s cubic-bezier(.16,1,.3,1) var(--wd,0s) both;
}

/* ============ hero opening — "The Spark" ============
   One orange spark (built in main.js, flight path measured against the real
   layout) authors the page, and every rule below is timed to its pass.
   Gated on .is-ready — set as soon as the webfonts are in (see main.js):

     0.00  stage settles in · the spark drops out of the logo's dot
     0.30  the wireframe draws itself down the notebook page (to ~1.6)
     0.40  the two typeset lines rise as the spark sweeps down them (0.61)
     0.90  the spark writes the handwritten word, left to right (to 1.24)
     1.32  it flicks back and underlines the word (to 1.60)
     0.85  subheading rises · 0.95 primary CTA · 1.05 link · 1.25 underline
     1.60  spark arcs across to the notebook…
     1.95  …lands on the sketch's edge and becomes the handle, then
           sweeps to rest: what it has passed is the live product

   The spark is decorative: the copy's own animations carry the reveal, so
   the hero reads correctly if requestAnimationFrame or WAAPI never runs. */

@keyframes heroRise{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
@keyframes heroSettle{
  from{opacity:0;transform:translateY(18px) scale(1.015)}
  to{opacity:1;transform:none}
}
@keyframes underlineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}


/* The entrance rules live only while the opening plays: JS adds .hero-done
   ~2.9s after the opening starts, retiring every rule below so fills never
   fight the normal hover states. End states equal natural states, so retiring is invisible. */
.js:not(.hero-done) .hero__sub{opacity:0}
.is-ready:not(.hero-done) .hero__sub{animation:heroRise .6s cubic-bezier(.16,1,.3,1) .85s both}

.js:not(.hero-done) .hero__actions > *{opacity:0}
.is-ready:not(.hero-done) .hero__actions > :nth-child(1){animation:heroRise .55s cubic-bezier(.16,1,.3,1) .95s both}
.is-ready:not(.hero-done) .hero__actions > :nth-child(2){animation:heroRise .55s cubic-bezier(.16,1,.3,1) 1.05s both}
.js:not(.hero-done) .hero__actions .link-underline::after{transform:scaleX(0);transform-origin:0 50%}
.is-ready:not(.hero-done) .hero__actions .link-underline::after{animation:underlineIn .4s var(--ease) 1.25s both}

.js:not(.hero-done) .hero__stage{opacity:0}
.is-ready:not(.hero-done) .hero__stage{animation:heroSettle .8s cubic-bezier(.16,1,.3,1) .1s both}


/* the flying spark — the idea itself, authoring the page */
.hero__spark{
  position:absolute;top:0;left:0;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF7A45,var(--orange) 70%);
  box-shadow:0 0 18px 5px rgba(240,82,30,.45);
  pointer-events:none;z-index:5;opacity:0;will-change:transform;
}
/* Waypoints must be measured in final geometry, never mid-animation: the
   rule is still scaling and the stage still settling when the spark launches,
   and either would drag its targets off by tens of pixels. */
.hero.measure .hero__stage{
  animation:none!important;transform:none!important;
}
/* Spanish copy runs ~20% longer than English; ease the largest display
   sizes so headlines keep their intended line breaks */
html[lang="es"] .hero__title{font-size:clamp(38px,6.4vw,86px)}
html[lang="es"] .case__name{font-size:clamp(22px,2vw,29px)}
html[lang="es"] .footer__email{font-size:clamp(24px,3.3vw,46px)}

.hero__sub{
  font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--ink-soft);
  max-width:520px;margin:0 0 44px;text-wrap:pretty;
}
.hero__actions{display:flex;align-items:center;gap:36px;flex-wrap:wrap}

/* ---------- the notebook — authored at 640×770, scaled by main.js ----------
   Sketch below, live product above, and the idea (the dot) between them. */
.hero__stage{justify-self:end;width:min(100%,640px)}
/* side by side, the notebook is sized to the window's height as well, so the
   whole page of it (and the idea you are asked to drag) sits on the first screen */
@media (min-width:1281px){
  .hero__stage{width:min(100%,640px,max(440px,calc((100vh - 150px) * .831)))}
  @supports (height:100svh){
    .hero__stage{width:min(100%,640px,max(440px,calc((100svh - 150px) * .831)))}
  }
}
.nb{position:relative;width:640px;height:770px;transform-origin:top left}
.nb__page{
  position:absolute;left:8px;top:30px;width:624px;height:728px;border-radius:5px;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(21,20,18,.13) 1px,transparent 1.2px);
  background-size:16px 16px;background-position:4px 10px;
  /* the pad's thickness: three sheet edges showing at the foot and the right */
  box-shadow:
    1px 2px 0 #F6F2EA,2px 3px 0 rgba(21,20,18,.13),
    2px 5px 0 #F1ECE2,3px 6px 0 rgba(21,20,18,.13),
    3px 8px 0 #ECE6DA,4px 9px 0 rgba(21,20,18,.15),
    0 30px 60px rgba(21,20,18,.15);
  transform:rotate(-1.4deg);
}
.nb__spiral{position:absolute;left:0;top:-16px;width:624px;height:44px;overflow:visible}
.nb__hole{fill:#D8D2C4}
.nb__loop{fill:none;stroke:#3A3833;stroke-width:1.6}

/* handwriting at the top of the page */
.nb__notes{
  position:absolute;left:46px;right:40px;top:40px;height:160px;
  display:grid;grid-template-columns:190px 96px 1fr;align-items:start;
  font-family:'Caveat',cursive;color:#55524A;
}
.nb__h{
  font-size:34px;font-weight:600;line-height:1;display:inline-flex;align-items:center;gap:14px;
  padding-bottom:2px;border-bottom:2px solid #2B2A26;color:#2B2A26;
}
.nb__badge{
  width:30px;height:30px;border:1.5px solid var(--blue);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:17px;font-weight:500;color:var(--blue);transform:rotate(8deg);
  margin-bottom:-2px;
}
.nb__notes ul{margin-top:8px;font-size:22px;font-weight:500;line-height:1.22}
.nb__idea li::before{content:'· '}
.nb__plan li{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:210px}
.nb__tick{width:18px;height:18px;flex:none;overflow:visible}
.nb__tick path{fill:none;stroke:#55524A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nb__tick .nb__tickmark{stroke:var(--blue);stroke-width:2.2}
.nb__arrow{width:84px;height:36px;margin-top:34px;overflow:visible}
.nb__arrow path{fill:none;stroke:#55524A;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* the frame: wireframe underneath, the real window clipped over it */
.nb__frame{
  position:absolute;left:32px;top:220px;width:560px;height:426px;
  --wipe:58%;
}
.nb__sketch{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:10px}
.nb__sketch path{stroke:#2B2A26;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nb__sketch .hv{stroke:var(--ink);stroke-width:2.6}
.nb__sketch .lt{stroke:rgba(21,20,18,.34)}
.nb__sketch .go{stroke:rgba(21,20,18,.42);stroke-width:1.6}
.nb__sketch .ht{stroke:rgba(21,20,18,.55);stroke-width:1.5}
.nb__sketch .ht.or{stroke:var(--orange);stroke-width:1.7}
.nb__sketch .or{stroke:var(--orange);stroke-width:2.6}
.nb__sketch text{font-family:'Caveat',cursive;font-weight:600;fill:#2B2A26}
/* the shadow lives on the wrapper so it follows the clipped edge */
.nb__lift{position:absolute;inset:0;filter:drop-shadow(0 14px 20px rgba(21,20,18,.2));pointer-events:none}
.nb__real{
  position:absolute;inset:0;border-radius:10px;overflow:hidden;background:#fff;
  clip-path:inset(0 calc(100% - var(--wipe)) 0 0);
}
.nb__chrome{
  height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;
  background:#F1EEE8;border-bottom:1px solid rgba(21,20,18,.1);
}
.nb__chrome i{width:8px;height:8px;border-radius:50%;background:#E6604A}
.nb__chrome i:nth-child(2){background:#E8BE4C}
.nb__chrome i:nth-child(3){background:#68B558}
.nb__chrome span{
  margin-left:10px;flex:1;height:18px;line-height:18px;border-radius:9px;
  background:#fff;font-size:9.5px;color:#6B665A;padding:0 10px;
}
.nb__view{height:392px;overflow:hidden}
.nb__view img{width:100%;height:auto;display:block}

/* the idea. A real range input does the work; the dot is its face. */
.nb__range{
  position:absolute;inset:-12px 0;width:100%;height:calc(100% + 24px);margin:0;
  opacity:0;cursor:ew-resize;touch-action:pan-y;
  -webkit-appearance:none;appearance:none;background:transparent;
}
/* a hairline thumb, so the value maps 1:1 to the pointer and the dot sits
   exactly under it; pressing anywhere on the track starts a drag from there */
.nb__range::-webkit-slider-thumb{-webkit-appearance:none;width:2px;height:450px}
.nb__range::-moz-range-thumb{width:2px;height:450px;border:0;background:transparent}
.nb__handle{
  position:absolute;top:-12px;bottom:-12px;left:var(--wipe);width:0;pointer-events:none;
}
.nb__handle::before{
  content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;border-radius:1px;
  background:var(--orange);
}
.nb__dot{
  position:absolute;top:50%;left:-15px;width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 5px var(--paper),0 6px 16px rgba(21,20,18,.28);
  transition:transform .3s var(--ease-pop);
}
/* Touch: a thumb scrolling past must not move the idea. There the slider
   ignores pointers (it stays keyboard- and screen-reader-operable) and only
   the dot can be dragged: a 48px target at phone scale, which owns its own
   touches so a sideways drag is never stolen by the page's scroll. Everywhere
   else on the notebook, swipes scroll the page as usual. */
.nb__grab{
  position:absolute;top:50%;left:-44px;width:88px;height:88px;margin-top:-44px;
  border-radius:50%;pointer-events:none;
}
@media (pointer:coarse){
  .nb__range{pointer-events:none}
  .nb__grab{pointer-events:auto;touch-action:none}
}
.nb__frame:hover .nb__dot{transform:scale(1.14)}
.nb__range:active ~ .nb__handle .nb__dot{transform:scale(.92)}
.nb__range:focus-visible ~ .nb__handle .nb__dot{outline:2px solid var(--ink);outline-offset:7px}
.nb__hint{
  position:absolute;left:346px;top:660px;margin:0;display:flex;align-items:flex-end;gap:4px;
  font-family:'Caveat',cursive;font-size:24px;font-weight:500;line-height:1;color:var(--orange-text);
  transform:rotate(-2deg);
}
.nb__hint svg{width:42px;height:28px;overflow:visible;margin-bottom:6px}
.nb__hint path{fill:none;stroke:var(--orange-text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nb__hint span{padding-bottom:0}

/* On a phone the stage is scaled to about half, which took the notes down
   to 12px. There the pad is taller and both notes are written large, one
   under the other, so nothing the desktop page says is missing. This block
   must stay below the base .nb__frame / .nb__hint rules it overrides. */
@media (max-width:600px){
  .nb{height:934px}
  .nb__page{height:892px}
  .nb__arrow{display:none}
  .nb__notes{display:block;top:44px;height:auto}
  .nb__h{font-size:54px;gap:20px;border-bottom-width:3px}
  .nb__badge{width:46px;height:46px;font-size:26px;border-width:2px}
  .nb__notes ul{margin-top:14px;font-size:36px;line-height:1.2}
  .nb__idea ul{display:flex;gap:28px}
  .nb__plan{margin-top:26px}
  .nb__plan ul{display:grid;grid-template-columns:.86fr 1.14fr;gap:6px 30px}
  .nb__plan li{max-width:none;white-space:nowrap}
  .nb__tick{width:28px;height:28px}
  .nb__frame{top:386px}
  .nb__hint{top:828px;font-size:34px}
  .nb__hint svg{width:56px;height:38px}
}

/* without scripts the wipe cannot move: show the resting state, no affordance */
html:not(.js) .nb__range,html:not(.js) .nb__hint{display:none}

/* opening: the sketch draws itself, notes settle, then the idea arrives.
   Keyed on .is-live, which main.js sets when the notebook can be seen. */
.js .nb .dr{stroke-dasharray:1;stroke-dashoffset:1}
.js .nb .fd,.js .nb__notes > div{opacity:0}
.nb.is-live .dr{animation:sketchDraw .55s ease var(--sd,.3s) both}
.nb.is-live .fd{animation:fadeIn .5s ease var(--sd,.6s) both}
.nb.is-live .nb__notes > div{animation:fadeIn .6s ease .35s both}
.nb.is-live .nb__notes > .nb__plan{animation-delay:.75s}
.js .nb__handle,.js .nb__hint{opacity:0}
.js .nb__frame.wipe-on .nb__handle{opacity:1;transition:opacity .25s var(--ease)}
.js .nb__frame.wipe-on .nb__dot{animation:ideaPop .5s var(--ease-pop) both}
.js .nb__frame.wipe-on ~ .nb__hint{opacity:1;transition:opacity .6s var(--ease) 1.4s}
.js .nb__frame.is-touched ~ .nb__hint{opacity:0;transition:opacity .4s var(--ease)}

/* ---------- sections ---------- */
.section{padding:clamp(64px,8vw,110px) var(--pad)}

/* ventures */
.ventures{padding-bottom:clamp(64px,7vw,100px)}
.ventures__head{
  display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:end;margin-bottom:clamp(56px,6vw,88px);
}
.cases{display:flex;flex-direction:column;gap:clamp(72px,8vw,120px)}
.case{
  display:grid;grid-template-columns:1.15fr 1fr;
  column-gap:clamp(32px,5vw,80px);row-gap:34px;
  align-items:center;position:relative;
}
/* On one column the label is the widest thing in the row, and `nowrap` made
   its min-content the column's floor — a long category (any Spanish one, or
   either language on a 320px phone) stretched the whole case past the
   viewport and the mockup and body copy were clipped by body's overflow.
   Let it wrap, and cap the column so no future child can do this again. */
@media (max-width:1000px){
  .case{grid-template-columns:minmax(0,1fr)}
  .case > *{min-width:0}
  .case__cat{white-space:normal}
}
.case--flip .case__media{order:2}
.case--flip .case__body{order:1}
.case__media{position:relative;z-index:1}
.browser{
  display:block;border-radius:12px;overflow:hidden;background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(21,20,18,.06),0 18px 40px rgba(21,20,18,.10);
}
.browser--dark{background:#0A0A0A}
.browser__bar{
  display:flex;align-items:center;gap:7px;padding:11px 14px;
  background:#F1EEE8;border-bottom:1px solid rgba(21,20,18,.1);
}
.browser--dark .browser__bar{background:#181818;border-bottom-color:rgba(255,255,255,.08)}
.browser__tl{width:9px;height:9px;border-radius:50%}
.browser__tl--r{background:#E6604A}.browser__tl--y{background:#E8BE4C}.browser__tl--g{background:#68B558}
.browser__url{
  margin-left:10px;flex:1;background:#fff;border-radius:20px;
  font-size:11px;color:#6B665A;padding:5px 12px;
}
.browser--dark .browser__url{background:#242424;color:#A8A499}
.browser__viewport{display:block;height:clamp(280px,34vw,500px);overflow:hidden}
.par{display:block}
.par img{width:100%;height:auto;object-fit:cover;object-position:top}
.case__body{position:relative;z-index:1;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.case__name{font-size:clamp(24px,2.2vw,31px);font-weight:800;letter-spacing:-.03em;margin:0}
/* "Eventpassreader.com" is one unbreakable word: next to the logo it runs
   past the edge of a 320px screen, so ease it down and let it break if a
   narrower device ever appears */
@media (max-width:400px){
  .case__name{font-size:21px;min-width:0;overflow-wrap:anywhere}
  html[lang="es"] .case__name{font-size:21px}
}
.case__desc{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.case__features{display:flex;flex-direction:column;gap:10px}
.case__features li{display:flex;gap:12px;align-items:baseline;font-size:15.5px;line-height:1.5;color:var(--ink-soft)}
.case__visit{font-size:16px;margin-top:6px}

/* services */
.services{background:var(--ink);color:var(--cream)}
.services__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(72px,8vw,112px);flex-wrap:wrap}
/* footer */
.footer{background:var(--ink);color:#A8A499;padding:64px var(--pad) 40px}
/* four columns since the services column was added: brand + three navs.
   Below 1200px the navs keep a row of three and the brand spans above
   them; below 1000px everything stacks (existing rule). */
.footer__grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(36px,4vw,64px);
  padding-bottom:48px;border-bottom:1px solid rgba(242,238,230,.15);
}
@media (max-width:1200px){
  .footer__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid > div:first-child{grid-column:1 / -1;max-width:540px}
}
.footer__brand{
  display:flex;align-items:center;gap:10px;margin-bottom:18px;
  font-weight:700;font-size:17px;color:var(--cream);letter-spacing:.02em;
}
.footer__brand .nav__dot{width:20px;height:20px}
.footer__desc{font-size:15px;line-height:1.65;max-width:400px}
.footer__col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.footer__label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8B867C;
  font-weight:600;margin-bottom:4px;
}
.footer__col a:hover{color:var(--cream)}
.footer__ext span{
  display:inline-block;font-size:.85em;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
  opacity:.5;
}
.footer__ext:hover span{transform:translate(4px,-4px);opacity:1}

/* closing CTA: the email is the footer's most valuable element, so it leads */
.footer__cta{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
  padding:44px 0;border-bottom:1px solid rgba(242,238,230,.15);
}
.footer__email{
  display:inline-flex;align-items:baseline;gap:14px;margin-top:10px;
  font-size:clamp(26px,3.6vw,50px);font-weight:800;letter-spacing:-.035em;
  color:var(--cream);line-height:1.05;
  transition:color .35s var(--ease);
}
.footer__email span{
  font-size:.46em;transition:transform .4s var(--ease);
}
.footer__email:hover{color:var(--orange)}
.footer__email:hover span{transform:translate(7px,-7px)}
.footer__top{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:#A8A499;border:1px solid rgba(242,238,230,.22);
  border-radius:999px;padding:15px 24px; /* keeps the tap target >=44px */
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.footer__top span{transition:transform .35s var(--ease)}
.footer__top:hover{color:var(--ink);background:var(--cream);border-color:var(--cream)}
.footer__top:hover span{transform:translateY(-3px)}

.footer__base{
  display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;
  padding-top:28px;font-size:13px;color:#8B867C;
  border-top:1px solid rgba(242,238,230,.12);
}
@media (max-width:760px){
  .footer__base{justify-content:flex-start;text-align:left}
}
.footer__base a:hover{color:var(--cream)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stage{justify-self:center}
}
@media (max-width:1000px){
  .ventures__head{grid-template-columns:1fr;gap:20px}
  .case{grid-template-columns:1fr;gap:32px}
  .case--flip .case__media,.case--flip .case__body{order:initial}
  .footer__grid{grid-template-columns:1fr;gap:40px}
}
@media (max-width:1040px){
  .nav__links{display:none}
  .nav__burger{display:flex}
}
@media (max-width:760px){
  .hero__actions{gap:24px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .hero__title .hw{transform:none}
  .js:not(.hero-done) .hero__sub,
  .js:not(.hero-done) .hero__actions > *,.js:not(.hero-done) .hero__stage{opacity:1}
  .js:not(.hero-done) .hero__actions .link-underline::after{transform:none}
  .js .u-scribble svg,.js .hero__title em{clip-path:none}
  .js .nb .dr{stroke-dashoffset:0}
  .js .nb .fd,.js .nb__notes > div,.js .nb__handle,.js .nb__hint{opacity:1}
}

/* ============================================================
   NEW SECTIONS — audience · engagements · FAQ · enquiry
   Built from the existing tokens: same cream/ink/orange, same
   kicker + h2 rhythm, same 1px rules. Orange stays reserved for
   primary actions, active states and brand moments.
   ============================================================ */

/* ---------- product links inside the hero paragraph ---------- */
.hero__sub a{
  color:var(--ink);border-bottom:1px solid rgba(21,20,18,.32);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hero__sub a:hover{color:var(--orange-text);border-bottom-color:var(--orange-text)}

/* ---------- engagements (on ink) ---------- */
.services__lead{
  font-size:clamp(15px,1.3vw,17px);line-height:1.6;
  color:rgba(242,238,230,.72);max-width:420px;
}
.svc__label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(242,238,230,.5);margin-top:4px;
}
.svc__list{display:flex;flex-direction:column;gap:9px}
.svc__list li{
  display:flex;gap:10px;font-size:14.5px;line-height:1.5;
  color:rgba(242,238,230,.9);
}
.svc__tick{color:var(--orange-hot);flex:none;font-size:12px;line-height:1.6}
/* ---------- FAQ ---------- */
.faq__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.faq__head{position:sticky;top:104px}
.faq__list{display:flex;flex-direction:column}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font-size:clamp(16.5px,1.5vw,19px);font-weight:600;letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--orange)}
.faq__icon{
  position:relative;width:15px;height:15px;flex:none;
}
.faq__icon::before,.faq__icon::after{
  content:'';position:absolute;top:50%;left:0;width:100%;height:1.5px;
  background:var(--ink);transition:transform .35s var(--ease);
}
.faq__icon::after{transform:rotate(90deg)}
details[open] .faq__icon::after{transform:rotate(0)}
details[open] .faq__q{color:var(--orange)}
.faq__a{padding:0 0 24px;max-width:62ch}
.faq__a p{font-size:16px;line-height:1.65;color:var(--ink-soft)}

/* ---------- enquiry ---------- */
.start{background:var(--cream-2);border-top:1px solid var(--line)}
.start__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,76px);align-items:start}
.start__intro{position:sticky;top:104px}
.start__lead{font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:var(--ink-soft);margin-top:22px;max-width:44ch}
.start__alt{margin-top:26px;font-size:15px;color:var(--muted-ink)}

.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 20px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.fld--full{grid-column:1 / -1}
.fld label{font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
.fld__opt{font-weight:400;color:var(--muted-ink)}
.fld__req{color:var(--orange);margin-left:3px}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{
  font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--paper);border:1px solid rgba(21,20,18,.18);border-radius:6px;
  padding:13px 14px;width:100%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fld textarea{resize:vertical;min-height:120px;line-height:1.55}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236B665A' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(240,82,30,.16);
}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:none}
.fld__hint{font-size:13px;color:var(--muted-ink);line-height:1.45}
.fld__err{font-size:13px;color:#C0300B;font-weight:500;display:flex;gap:6px;align-items:center}
/* display:flex would otherwise defeat the [hidden] attribute */
.fld__err[hidden],.form__done[hidden]{display:none}
.fld__err::before{content:'!';flex:none;width:15px;height:15px;border-radius:50%;background:#C0300B;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{border-color:#C0300B}
.fld--check{flex-direction:row;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:4px}
.fld--check input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:20px;height:20px;margin-top:2px;border-radius:4px;cursor:pointer;
  border:1px solid rgba(21,20,18,.28);background:var(--paper);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.fld--check input:checked{background:var(--orange);border-color:var(--orange)}
.fld--check input:checked::after{
  content:'';position:absolute;width:10px;height:6px;margin:5px 0 0 5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.fld--check label{font-size:14px;font-weight:400;color:var(--ink-soft);line-height:1.5;flex:1;min-width:0;cursor:pointer}
.fld--check .fld__err{flex-basis:100%}
/* honeypot: off-screen rather than display:none so bots still fill it */
.fld--trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;margin-top:6px}
.form__status{font-size:14px;color:var(--muted-ink)}
.form__status.is-bad{color:#C0300B}
.form .btn{border:0;cursor:pointer;font-family:inherit}
.form__done{
  border:1px solid var(--orange);border-radius:10px;background:var(--paper);
  padding:34px 32px;display:flex;flex-direction:column;gap:12px;
}
.form__done-title{font-size:clamp(20px,1.8vw,24px);font-weight:800;letter-spacing:-.02em}
.form__done-body{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:52ch}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .faq__inner,.start__inner{grid-template-columns:1fr}
  .faq__head,.start__intro{position:static}
}
@media (max-width:760px){
  .form{grid-template-columns:1fr}
  .fld--full{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .faq__icon::before,.faq__icon::after{transition:none}
}

/* closing CTA: primary into the form, email as the quieter alternative */
.contact__actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}

/* ---------- touch targets ----------
   Inline CTAs and the consent box are real controls; give them a
   comfortable hit area without changing how they read. */
.path__cta{padding-top:14px;padding-bottom:13px}
.fld--check input{width:24px;height:24px}
.fld--check input:checked::after{margin:7px 0 0 7px}

/* ============================================================
   DETAIL PAGES — services · ventures · about
   Same tokens as the home page; these read as the same site,
   not as a sub-site with its own rules.
   ============================================================ */
.page__head{padding:clamp(40px,5vw,64px) var(--pad) clamp(40px,5vw,60px)}
.crumbs{margin-bottom:clamp(26px,3vw,38px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.06em;color:var(--muted-ink)}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li+li::before{content:'/';color:rgba(21,20,18,.3)}
.crumbs a{border-bottom:1px solid transparent;padding-bottom:1px}
.crumbs a:hover{color:var(--orange);border-bottom-color:var(--orange)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.page__owned{
  display:inline-block;margin-bottom:18px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--orange-text);
}
.page__title{
  font-weight:800;font-size:clamp(36px,5.6vw,74px);line-height:1;letter-spacing:-.04em;
  max-width:16ch;
}
.page__title--wide{max-width:22ch}
.page__tagline{
  margin-top:18px;font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(20px,2.2vw,30px);color:var(--orange);line-height:1.25;
}
.page__lead{
  margin-top:22px;font-size:clamp(17px,1.6vw,21px);line-height:1.6;
  color:var(--ink-soft);max-width:56ch;text-wrap:pretty;
}
.page__facts{display:flex;flex-wrap:wrap;gap:36px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.page__facts dt{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted-ink);margin-bottom:7px}
.page__facts dd{margin:0;font-size:17px;font-weight:600;color:var(--ink)}
.page__for{margin-top:26px;font-size:16.5px;line-height:1.6;color:var(--ink);max-width:58ch}
.page__status{margin-top:26px;margin-bottom:30px;font-size:16px;color:var(--ink-soft)}
.page__status span{
  display:inline-block;margin-right:10px;padding:4px 11px;border-radius:999px;
  background:rgba(0,197,102,.14);color:#06663A;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  transform:rotate(-2deg);
}

.page__band{background:var(--cream-2);border-block:1px solid var(--line);padding:clamp(44px,5vw,72px) var(--pad)}
.page__two{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(24px,4vw,64px);align-items:start}
.page__body{font-size:clamp(16px,1.4vw,18px);line-height:1.68;color:var(--ink-soft);max-width:66ch}
.page__body + .page__body{margin-top:18px}
.page__body--lead{margin-bottom:30px}
/* the honest aside is a handwritten note pinned to the page — the same
   paper-and-Caveat language as the hero diagram's idea note */
.page__honest{
  margin-top:26px;padding:18px 22px 16px;max-width:46ch;
  font-family:'Caveat',cursive;font-weight:500;
  font-size:clamp(21px,1.9vw,24px);line-height:1.35;color:#2B2A26;
  background:var(--paper);border-radius:6px;
  background-image:radial-gradient(rgba(21,20,18,.09) 1px,transparent 1px);
  background-size:14px 14px;
  box-shadow:0 12px 28px rgba(21,20,18,.10);
  transform:rotate(-.6deg);
  position:relative;
}
.page__honest::before{
  content:'';position:absolute;top:-7px;left:26px;width:44px;height:14px;
  background:rgba(240,82,30,.28);transform:rotate(-2deg);border-radius:2px;
}
.page__h2{margin-bottom:clamp(32px,4vw,52px);max-width:18ch}
.h3{font-size:clamp(21px,2.1vw,28px);font-weight:800;letter-spacing:-.028em;line-height:1.15}

.psteps{display:flex;flex-direction:column;gap:0;counter-reset:s}
.pstep{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);
  padding:26px 0;border-top:1px solid var(--line);
}
.pstep:last-child{border-bottom:1px solid var(--line)}
.pstep__n{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(24px,2.4vw,32px);color:var(--orange);line-height:1;
}
.pstep h3{font-size:clamp(18px,1.7vw,22px);font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.pstep p{font-size:16px;line-height:1.62;color:var(--ink-soft);max-width:62ch}

.page__gets{background:var(--cream-2);border-block:1px solid var(--line)}
.page__gets .svc__label{color:var(--muted-ink)}
.page__list li{color:var(--ink-soft);font-size:15.5px}
.page__list .svc__tick{color:var(--orange)}

.page__shotwrap{padding:0 var(--pad) clamp(20px,3vw,40px)}
.page__shotwrap .browser{display:block;max-width:1000px;margin:0 auto;transform:none}

.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:26px}
.othercard{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  padding:24px 24px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.othercard:hover{border-color:var(--orange);transform:translateY(-4px)}
.othercard__name{font-size:18px;font-weight:700;letter-spacing:-.02em;grid-column:1}
.othercard__meta{grid-column:1;font-size:14px;color:var(--muted-ink);line-height:1.45}
.othercard__go{grid-column:2;grid-row:1 / span 2;color:var(--orange);font-size:20px}

.pagecta{
  background:var(--ink);color:var(--cream);
  padding:clamp(56px,7vw,96px) var(--pad);text-align:center;
  position:relative;overflow:hidden;
}
.pagecta .container{position:relative}
.pagecta__title{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1.12;max-width:22ch;margin:0 auto}
.pagecta__body{margin:20px auto 0;font-size:17px;line-height:1.6;color:rgba(242,238,230,.78);max-width:52ch}
.pagecta .contact__actions{margin-top:36px}
.pagecta__ask{font-size:16px;font-weight:500;color:rgba(242,238,230,.85);padding-top:14px;padding-bottom:13px}
.pagecta__ask::after{background:rgba(242,238,230,.55)}
.pagecta__ask:hover{color:#fff}

@media (max-width:900px){
  .page__two{grid-template-columns:1fr;gap:18px}
  .page__facts{gap:24px}
  .pstep{grid-template-columns:1fr;gap:10px}
  .pstep__n{font-size:22px}
}

/* ============================================================
   LEGAL PAGES + EXPANDED FOOTER
   ============================================================ */
.legal__container{max-width:820px}
.legal .page__title{max-width:none}
.legal__body{padding:0 var(--pad) clamp(56px,7vw,90px)}
.legal__sec{padding-top:clamp(30px,3.5vw,44px)}
.legal__sec .h3{margin-bottom:14px}
.legal__sec p{font-size:16.5px;line-height:1.7;color:var(--ink-soft);max-width:70ch}
.legal__sec p + p{margin-top:14px}
/* an unresolved business or legal decision, deliberately visible */
mark.todo{
  display:inline-block;background:#FDF3D0;color:#6A4B00;
  border:1px dashed #C9A227;border-radius:4px;
  padding:2px 8px;font-size:.94em;font-weight:500;
}
.legal__updated{margin-top:clamp(34px,4vw,48px);padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted-ink)}
.legal__contact{margin-top:8px;font-size:15px;color:var(--ink-soft)}
.contact__actions--left{justify-content:flex-start;margin-top:32px}

/* footer additions */
.footer__legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer__legal a{font-size:14px;color:#A8A499;border-bottom:1px solid transparent;padding-bottom:1px}
.footer__legal a:hover{color:var(--cream);border-bottom-color:var(--cream)}
.footer__lang{display:flex;align-items:center;gap:10px;font-size:14px;color:#A8A499}
.footer__lang a{color:#A8A499;border-bottom:1px solid transparent;padding-bottom:1px}
.footer__lang a:hover{color:var(--cream);border-bottom-color:var(--cream)}

/* ---------- contrast corrections (axe-verified) ----------
   Orange on ink needs to go lighter, not darker: the same token cannot
   serve both surfaces. */
.svc__tick{color:var(--orange-on-dark)}
/* the open FAQ row was pure --orange on cream (3.05:1); the +/- icon already
   signals state, so colour is not carrying the meaning alone */
details[open] .faq__q{color:var(--orange-text)}
.faq__q:hover{color:var(--orange-text)}
.pstep__n{color:var(--orange-text)}
.page__tagline{color:var(--orange-text)}
/* the recessed track darkens the effective background, so the inactive
   label needs to be a shade deeper than --muted-ink to clear AA (4.46 -> 4.8) */
.nav .lang .lang__btn:not(.is-on){color:#666155}


/* ============================================================
   SERVICE-PAGE SCENES — one hand-drawn sketch per engagement,
   drawing itself on load like the process scenes.
   ============================================================ */
.page__headgrid{
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,4vw,72px);align-items:center;
}
.page__headgrid > *{min-width:0}
.sketch{max-width:460px;justify-self:end;width:100%}
.sketch__svg{width:100%;height:auto;display:block}
/* strokes hidden until drawn — but only when JS will run the reveal */
.js .sketch .dr{stroke-dasharray:1;stroke-dashoffset:1}
.js .sketch .fd{opacity:0}
.is-ready .sketch .dr{animation:sketchDraw .6s ease var(--sd,.4s) both}
.is-ready .sketch .fd{animation:fadeIn .45s ease var(--sd,1s) both}
@keyframes sketchDraw{to{stroke-dashoffset:0}}
@media (max-width:900px){
  .page__headgrid{grid-template-columns:1fr}
  .sketch{justify-self:center;max-width:400px;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .js .sketch .dr{stroke-dashoffset:0}
  .js .sketch .fd{opacity:1}
}

/* ============================================================
   FOUNDER — renders only supplied facts: no photograph has been
   supplied, so none is drawn in its place.
   ============================================================ */
.founder__title{font-size:clamp(24px,2.6vw,34px);margin-top:10px}
.founder__card{
  display:flex;align-items:center;gap:20px;margin-bottom:24px;
  padding-bottom:22px;border-bottom:1px solid var(--line);
}
.founder__photo{border-radius:50%;object-fit:cover;flex:none}
.founder__name{font-size:22px;font-weight:800;letter-spacing:-.02em}
.founder__meta{margin-top:4px;font-size:14.5px;color:var(--muted-ink)}
.founder__link{font-size:15px;margin-top:8px;display:inline-block}
.founder__note{max-width:40ch}
/* svc__label was designed for the dark engagement cards; on the founder's
   cream band it needs the ink-muted variant, same as .page__gets */
.founder .svc__label{color:var(--muted-ink)}
/* venture rows carry their domain as a quiet second line, so the reader
   can still see where the product lives without it reading as a separate item */
.footer__col a .footer__host{
  display:block;font-size:12.5px;color:#8B867C;margin-top:2px;letter-spacing:.01em;
}
.footer__col a:hover .footer__host{color:#A8A499}

/* ============================================================
   EDITORIAL PASS — the page is organised around the reader's
   situation and the studio's own evidence, not a service menu.
   No numbered kickers, no accent word per heading, no ticker,
   no badge: structure and real material carry the design.
   ============================================================ */

/* one quiet label, marked with the brand's own dot */
.label{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--muted-ink);
}
.label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- where are you with it? (on ink) ---------- */
.services .h2{max-width:13ch}
.path{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(242,238,230,.2);
}
.path__step{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:38px clamp(22px,2.8vw,44px) 6px 0;
}
.path__step + .path__step{
  padding-left:clamp(22px,2.8vw,44px);
  border-left:1px solid rgba(242,238,230,.12);
}
.path__situation{
  font-size:clamp(25px,2.4vw,34px);font-weight:800;letter-spacing:-.032em;line-height:1.08;
  color:var(--cream);
}
.path__now{font-size:16px;line-height:1.62;color:rgba(242,238,230,.74);max-width:38ch}
/* the engagement sits at the foot of each column, so the three line up
   however long the situation copy runs */
.path__fit{
  margin-top:auto;padding-top:24px;
  border-top:1px dashed rgba(242,238,230,.22);
  display:flex;flex-direction:column;gap:9px;
}
.path__meta{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(242,238,230,.62);
}
.path__dur{color:var(--orange-on-dark)}
.path__name{
  width:fit-content;font-size:20px;font-weight:700;letter-spacing:-.018em;color:var(--cream);
  border-bottom:1px solid rgba(242,238,230,.3);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.path__name:hover{color:var(--orange-on-dark);border-color:var(--orange-on-dark)}
.path__ends{
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:19px;line-height:1.35;color:rgba(242,238,230,.86);max-width:30ch;
}
.path__cta{align-self:flex-start;font-size:15px;font-weight:600;color:var(--cream)}
.path__cta::after{background:var(--orange-on-dark)}
.path__cta:hover{color:var(--orange-on-dark)}
/* hand-written hand-offs drawn across each column rule */
.path__then{
  position:absolute;top:-60px;left:-66px;width:132px;
  display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;
}
.path__then span{
  font-family:'Caveat',cursive;font-size:21px;line-height:1;white-space:nowrap;
  color:var(--orange-on-dark);transform:rotate(-3deg);
}
.path__then svg{width:92px;height:31px;overflow:visible}
.path__then path{
  fill:none;stroke:rgba(242,238,230,.6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.js .path__then path{stroke-dasharray:1;stroke-dashoffset:1}
.js .path.is-on .path__then path{transition:stroke-dashoffset .7s var(--ease) .5s;stroke-dashoffset:0}
.js .path.is-on .path__step:nth-child(3) .path__then path{transition-delay:.8s}
@media (max-width:1000px){
  .path{grid-template-columns:1fr;border-top:0}
  .path__step,.path__step + .path__step{
    padding:30px 0 22px;border-left:0;border-top:1px solid rgba(242,238,230,.2);
  }
  .path__then{display:none}
}

/* ---------- ventures: the evidence, shown straight ---------- */
.ventures__head .h2{max-width:15ch}
.ventures__head .lead{max-width:46ch}
.case__cat{
  font-size:13.5px;letter-spacing:.01em;text-transform:none;font-weight:600;
  color:var(--muted-ink);white-space:normal;
}
.case__name{font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.case__body{gap:18px}
.case__features{width:100%;gap:0;border-top:1px solid var(--line)}
.case__features li{
  display:block;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.45;color:var(--ink-soft);
}
html[lang="es"] .case__name{font-size:clamp(28px,2.7vw,38px)}
@media (max-width:400px){.case__name,html[lang="es"] .case__name{font-size:28px}}

/* ---------- the studio, and who you actually work with ---------- */
.studio{border-top:1px solid var(--line)}
.studio__grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(40px,6vw,112px);align-items:center;
}
.studio .h2{margin:18px 0 30px;max-width:12ch}
.studio__p{font-size:clamp(16px,1.35vw,18px);line-height:1.66;color:var(--ink-soft);max-width:56ch}
.studio__p + .studio__p{margin-top:16px}
.studio__more{display:inline-block;margin-top:30px;font-size:16px}
/* the founder as an index card from the same notebook as the hero's
   idea note, pinned with the same tape as the service pages' asides */
.studio__card{
  margin:0;padding:38px 36px 32px;position:relative;
  background:var(--paper);border-radius:6px;
  background-image:radial-gradient(rgba(21,20,18,.08) 1px,transparent 1px);
  background-size:14px 14px;
  box-shadow:0 1px 2px rgba(21,20,18,.05),0 22px 48px rgba(21,20,18,.11);
  transform:rotate(.9deg);
}
.studio__card::before{
  content:'';position:absolute;top:-8px;left:50%;width:64px;height:16px;
  background:rgba(240,82,30,.26);transform:translateX(-50%) rotate(-2deg);border-radius:2px;
}
.studio__name{font-size:clamp(26px,2.4vw,32px);font-weight:800;letter-spacing:-.032em;line-height:1.1}
.studio__role{margin-top:8px;font-size:14px;color:var(--muted-ink)}
.studio__bio{
  margin-top:22px;padding-top:22px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.64;color:var(--ink-soft);
}
.studio__note{
  margin-top:22px;font-family:'Caveat',cursive;font-weight:500;
  font-size:clamp(23px,2vw,27px);line-height:1.2;color:var(--orange-text);
  transform:rotate(-2deg);transform-origin:0 50%;
}
@media (max-width:1000px){
  .studio__grid{grid-template-columns:1fr}
  .studio__card{transform:none;max-width:560px}
}

/* two-column sections take a smaller heading than full-width ones */
.faq .h2,.start .h2{font-size:clamp(30px,3.7vw,52px)}

/* ============================================================
   ONE NOTEBOOK — the hand from the hero carried down the page,
   lightly: the dark section is a dark page of the same pad, each
   engagement is headed by its own drawing (the one that greets
   you on its service page, in chalk), the product screenshots sit
   on pencil-hatched shadows.
   ============================================================ */

/* a dark page of the same dot-grid pad */
.services{
  background-image:radial-gradient(rgba(242,238,230,.075) 1px,transparent 1.2px);
  background-size:16px 16px;
}

/* chalk drawings heading each engagement; they draw when they are reached */
.path__sketch{width:min(100%,300px);margin:-6px 0 6px -14px}
.path__sketch .sketch__svg{width:100%;height:auto;display:block;overflow:visible}
/* drawn for a 460px column on the service pages; at this size chalk needs a
   slightly heavier line to hold against the dark page */
.path__sketch [stroke-width="1.5"]{stroke-width:2}
.js .path__sketch .dr{stroke-dasharray:1;stroke-dashoffset:1}
.js .path__sketch .fd{opacity:0}
.js .path__sketch.is-on .dr{animation:sketchDraw .6s ease var(--sd,.4s) both}
.js .path__sketch.is-on .fd{animation:fadeIn .45s ease var(--sd,1s) both}
/* the wrapper is a reveal target only so it knows when it is seen: it must
   not also fade and slide, or the drawing would start under a dissolve */
.js .path__sketch[data-reveal]{opacity:1;transform:none;transition:none}
@media (max-width:1000px){
  .path__sketch{width:min(100%,270px);margin:0 0 4px -10px}
}

/* product screenshots: a pencil-hatched shadow instead of a soft blur */
.case__media .hatch{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform:translate(-13px,13px);z-index:0;
}
.case__media .hatch path{vector-effect:non-scaling-stroke;stroke-linecap:round}
.case__media .hatch .ht{stroke:rgba(21,20,18,.42);stroke-width:1.2}
.case__media .hatch .ed{stroke:rgba(21,20,18,.6);stroke-width:1.4}
.case__media .browser{position:relative;z-index:1;box-shadow:none}
@media (max-width:600px){.case__media .hatch{transform:translate(-9px,9px)}}

@media (prefers-reduced-motion:reduce){
  .js .path__sketch .dr{stroke-dashoffset:0}
  .js .path__sketch .fd{opacity:1}
}