@font-face{font-family:Hanken;src:url('assets/hanken.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  --carbon:#141414;
  --panel:#1B1C1E;
  /* Dark grounds are anthracite and graphite, not black: easier on the eye over a long scroll. */
  --ground:#2A2D32;
  --graphite:#32363C;
  --white:#fff;
  --orange:#FB6A34;
  --steel:#9A9EA4;
  --studio:#F4F4F2;
  --ink-soft:#5B5F64;
  --gutter:clamp(20px,5vw,96px);
  --chrome:84px;
  --font:Hanken,'Trebuchet MS',sans-serif;
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ground);color:var(--white);font:400 17px/1.55 var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ol,ul,figure,dl,dd{margin:0;padding:0}
h1,h2,h3{font-weight:600;letter-spacing:-.05em;line-height:.96;text-wrap:balance}
p{text-wrap:pretty}
ol,ul{list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--carbon)}
:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.skip{position:fixed;top:12px;left:12px;z-index:100;background:var(--white);color:var(--carbon);padding:12px 16px;transform:translateY(-160%)}
.skip:focus{transform:none}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 24px;font-size:15px;font-weight:600;border:0;border-radius:2px;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),background-color .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn--accent{background:var(--orange);color:var(--carbon)}
.btn--dark{background:var(--carbon);color:var(--white)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-2px)}}

/* ---------- Chrome: logo and one action, ink follows the ground ---------- */
.chrome{position:fixed;inset:0 0 auto;z-index:50;height:var(--chrome);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);pointer-events:none}
.chrome>*{pointer-events:auto}
/* Content scrolls under a soft backdrop matched to the ground below. */
/* Solid under the bar itself, then a 28px fade. Hidden over the hero and the case, which own their ground. */
.chrome::before{content:'';position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#2A2D32 calc(100% - 28px),#2A2D3200);transition:opacity .3s}
.chrome[data-ink=dark]::before{background:linear-gradient(180deg,#F4F4F2 calc(100% - 28px),#f4f4f200)}
.chrome.over-stage::before{opacity:0}
.brand{display:grid;width:clamp(132px,10vw,172px)}
.brand-logo{grid-area:1/1;width:100%;transition:opacity .25s}
.brand-logo--dark,.chrome[data-ink=dark] .brand-logo--light{opacity:0}
.chrome[data-ink=dark] .brand-logo--dark{opacity:1}
.chrome-cta{min-height:44px;padding:10px 18px;font-size:14px}

/* ---------- Drafting ruler: section index and reader position ---------- */
.ruler{display:none}
@media (min-width:1024px){
  .motion .ruler{display:block;position:fixed;right:calc(var(--gutter)*.42);top:50%;height:44vh;transform:translateY(-50%);z-index:45;color:var(--white);transition:color .3s}
  .ruler[data-ink=dark]{color:var(--carbon)}
  .ruler-track{position:absolute;right:0;top:0;bottom:0;width:1px;background:currentColor;opacity:.22}
  .ruler-marker{position:absolute;right:-4px;top:0;width:9px;height:2px;background:var(--orange);transform:translateY(-1px)}
  .ruler ol{position:absolute;inset:0}
  .ruler li{position:absolute;right:0;transform:translateY(-50%)}
  .ruler a{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:28px;padding-left:12px;font-size:12px;font-weight:500}
  .ruler a::after{content:'';width:8px;height:1px;background:currentColor;opacity:.5;transition:width .2s var(--ease),opacity .2s}
  .ruler a span{opacity:0;transform:translateX(6px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
  .ruler a:is(:hover,:focus-visible) span{opacity:1;transform:none}
  .ruler li.is-active a::after{width:14px;opacity:1}
  /* Keep content clear of the ruler's labels. */
  .motion :is(.quiet,.services,.auto,.process,.packs,.cap,.close){padding-right:calc(var(--gutter) + 92px)}
}

/* ---------- The pen ---------- */
.pen{display:none}
.motion .pen{display:block;position:fixed;left:0;top:0;z-index:60;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;opacity:0}
.pen::before,.pen::after{content:'';position:absolute;background:var(--orange);opacity:.55}
.pen::before{left:0;right:0;top:50%;height:1px}
.pen::after{top:0;bottom:0;left:50%;width:1px}
.pen i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--orange);box-shadow:0 2px 6px #0006}

/* ---------- 1 · Hero ---------- */
.hero-stage{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--ground)}
.hero-grid{position:absolute;inset:-60px;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 40% 50%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 40% 50%,#000 25%,transparent 78%)}
.hero-copy{position:relative;padding:calc(var(--chrome) + 4vh) var(--gutter) 8vh;width:100%}
.kicker{font-size:15px;color:var(--steel);margin-bottom:3vh}
/* Bounded by height too, so the whole hero (and its action) fits a short laptop screen. */
.hero-title{font-size:clamp(48px,min(9.8vw,13.6svh),178px);letter-spacing:-.065em;line-height:.86}
.ht-line{display:block;overflow:hidden;padding:0 .04em .07em 0;margin-bottom:-.07em}
.ht-line>span{display:inline-block}
/* The line the loop circles starts at the left edge: room on every side so the hand-drawn ring is never clipped. */
.ht-line:has(.ht-idea){padding:.08em .04em .16em .45em;margin:-.08em 0 -.16em -.45em}
.ht-idea{position:relative;display:inline-block}
.idea-loop{position:absolute;left:-7%;top:-4%;width:116%;height:114%;overflow:visible;fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.idea-loop path{vector-effect:non-scaling-stroke}
.ht-line>.ht-word{display:inline-grid;position:relative}
/* Hand-drawn underline the pen signs "realidad." with on small screens. */
.real-under{display:none}
.ht-word::before,.ht-solid{grid-area:1/1}
.ht-word::before{content:attr(data-t);content:attr(data-t) / "";color:transparent;-webkit-text-stroke:1.4px #ffffff70}
.motion .ht-solid{clip-path:inset(-10% 100% -10% 0)}
.hero-sub{max-width:34ch;margin-top:4vh;font-size:clamp(17px,1.35vw,21px);line-height:1.42;color:#d0d1d3}
.hero-cta{margin-top:3.6vh}
/* The bar already carries the main action, so the hero offers the next step instead: see the work. */
.hero-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--white);font-size:16px;font-weight:600;text-decoration:none;border-bottom:1px solid #ffffff38}
.hero-link::after{content:'';width:9px;height:9px;border:solid var(--orange);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.hero-link:hover::after{transform:translateY(1px) rotate(45deg)}}
/* Large screens only: two columns of delivered work fill the hero's empty right half. They start where the
   headline ends (its widest line, "de tu oficina", is ~4.8em of the title size) and stop short of the ruler. */
.hero-work{display:none}
@media (min-width:1101px) and (min-height:561px){
  .hero-work{display:block;position:absolute;top:calc(var(--chrome) + 2vh);bottom:0;right:calc(var(--gutter) + 56px);left:max(47%,calc(var(--gutter) + min(9.8vw,13.6svh,178px) * 4.8 + 56px),calc(100% - var(--gutter) - 56px - 900px));overflow:hidden;container-type:inline-size;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent)}
  .hw-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .hw-col{animation:hw-up 70s linear infinite}
  .hw-down{animation-name:hw-down}
  .hero-work.is-off .hw-col{animation-play-state:paused}
  /* Spacing as a margin, not a gap: the doubled list is then exactly two periods tall. */
  .hero-work figure{margin-bottom:22px}
  .hw-ph{aspect-ratio:4/3;overflow:hidden;background:#dcdcd8;border-radius:2px}
  .hw-ph img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.14)}
  .hero-work figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;color:#9a9da3}
  .hero-work figcaption b{color:#e6e7e8;font-weight:600}
  /* Message cards between the projects: same width and 4:3 box, the figure sized to the column. */
  .hw-col{container-type:inline-size}
  /* At least the 4:3 of a photo; taller if a narrow column needs it (no overflow clip, so the ratio yields to content). */
  .hw-box{aspect-ratio:4/3;display:flex;flex-direction:column;gap:8px;padding:8% 9%;background:var(--graphite);border:1px solid #ffffff14;border-radius:2px}
  .hw-k{margin-bottom:auto;padding-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--orange)}
  .hw-n{font-size:clamp(44px,26cqi,128px);font-weight:600;letter-spacing:-.06em;line-height:.9;color:var(--orange)}
  .hw-l{max-width:24ch;font-size:clamp(14px,5.6cqi,20px);line-height:1.3;color:#d0d1d3}
  .hw-x{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;font-size:12.5px;color:#9a9da3}
  .hw-x i{display:inline-flex;align-items:center;gap:6px;font-style:normal}
  .hw-x i::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--orange)}
  .hw-q{font-size:clamp(18px,8.4cqi,32px);font-weight:600;letter-spacing:-.035em;line-height:1.12;color:var(--white)}
  .hw-q em{font-style:normal;color:var(--orange)}
  @container (max-width:460px){.hw-grid{grid-template-columns:1fr}.hw-down{display:none}}
}
@keyframes hw-up{to{transform:translateY(-50%)}}
@keyframes hw-down{from{transform:translateY(-50%)}to{transform:none}}

/* ---------- 2 · Quiet ---------- */
.quiet{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:14vh var(--gutter);background:var(--ground)}
.quiet-line{font-size:clamp(36px,5.8vw,104px);font-weight:500;letter-spacing:-.05em;line-height:1.02;max-width:17ch}
.motion .quiet-line .w{opacity:.14}

/* ---------- 3 · Case (the peak) ---------- */
/* Four full-screen layers (idea, CAD, prototype, product) on a stage that sticks with CSS, not a script pin.
   Each change is an outer box rising while its content moves down by the same amount: the picture stays put and
   only an orange edge travels up with the finger. Every move is a transform, so phones keep it smooth. */
.xc{position:relative}
.xc-stage{position:sticky;top:0;height:100svh;overflow:hidden;color:var(--white);--zt:calc(var(--chrome) + 64px);--zb:6vh;--zh:calc(100svh - var(--zt) - var(--zb))}
.xc-stage[data-ink=dark]{color:var(--carbon)}
.xc-track{position:absolute;inset:0}
.xc-layer{position:absolute;inset:0;overflow:hidden}
.xc-in{position:absolute;inset:0;background:var(--ground);color:var(--white)}
.xc-cad .xc-in{background:var(--studio);color:var(--carbon)}
.motion .xc-layer,.motion .xc-in,.motion .xc-frame,.motion .xc-pic img{will-change:transform}
/* The drone is sized and centred in the free band between the step bar and the bottom margin, in the same place on
   the idea and CAD layers, so the drawing becomes the render where it stands. Part geometry (from the render): its
   height is 0.561 of the frame width and its centre sits 0.34 of the frame width below the frame's top edge. */
.xc-frame{--fw:min(66vw,calc(var(--zh) * 1.72));position:absolute;left:58%;width:var(--fw);margin-left:calc(var(--fw) / -2);aspect-ratio:1448/1086;top:calc(var(--zt) + var(--zh) / 2 - var(--fw) * .34)}
.xc-frame img{width:100%;height:100%}
.uav-lines{position:absolute;inset:0}
.uav-lines svg{width:100%;height:100%;overflow:visible;fill:none;stroke-linejoin:round;stroke-linecap:round}
.uav-lines .uav-outline{stroke:var(--orange);stroke-width:2;vector-effect:non-scaling-stroke}
.uav-lines .uav-surface{stroke:#ffffff8c;stroke-width:1;vector-effect:non-scaling-stroke}
.xc-pic{position:absolute;inset:0;overflow:hidden}
.xc-pic picture{display:contents}
.xc-pic img{width:100%;height:100%;object-fit:cover}
.xc-proto img{object-position:52% 62%;filter:saturate(.82) contrast(1.05) brightness(.82)}
.xc-expo img{object-position:0% 40%;filter:saturate(.9) contrast(1.04) brightness(.86)}
.xc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#2A2D32b8 0%,#2A2D3200 calc(var(--chrome) + 90px)),linear-gradient(90deg,#2A2D32e8 0%,#2A2D3290 30%,#2A2D3200 56%),linear-gradient(0deg,#2A2D32d9 0%,#2A2D3200 40%)}
.xc-edge{position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);box-shadow:0 0 18px #FB6A3480;z-index:2}
/* Captions: with motion they leave their layers (so the edge never cuts the text) and roll inside one mask each. */
.xc-cap{position:absolute;left:var(--gutter);bottom:13vh;width:min(36rem,40vw)}
.xc-label{font-size:14px;font-weight:600;color:var(--orange);margin-bottom:14px}
.xc-cap h3{font-size:clamp(38px,4.6vw,80px)}
.xc-cap p:not(.xc-label){margin-top:16px;font-size:clamp(16px,1.2vw,19px);max-width:32ch;opacity:.84}
.xc-cap .xc-note{font-size:13px!important;opacity:.6!important}
.xc-caps{position:absolute;left:var(--gutter);bottom:13vh;width:min(36rem,40vw);height:22rem;pointer-events:none}
.xc-capmask{position:absolute;left:0;right:0;bottom:0;overflow:hidden;padding-top:.12em}
.xc-caps .xc-cap{position:relative;inset:auto!important;width:auto}
.case-steps{position:absolute;left:var(--gutter);top:calc(var(--chrome) + 8px);display:flex;gap:clamp(14px,2vw,30px);font-size:13px;font-weight:500}
.case-steps li{position:relative;padding-top:12px;opacity:.42;transition:opacity .3s}
.case-steps li::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;opacity:.35}
.case-steps li.is-on{opacity:1}
.case-steps li.is-on::before{background:var(--orange);opacity:1}

/* ---------- 4 · Projects rail ---------- */
.projects{background:var(--studio);color:var(--carbon)}
.motion .projects{height:calc(var(--rail-d,0px) + 100svh)}
.motion .rail-stage{position:sticky;top:0;height:100svh}
.rail-stage{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;padding:calc(var(--chrome) + 4vh) 0 6vh;perspective:1600px}
/* The zigzag between cards shrinks on short screens so image and texts always fit the height. */
.projects{--lift:clamp(0px,(100svh - 560px) * .3,11vh)}
.work:nth-of-type(even){margin-top:var(--lift)}
.work:nth-of-type(odd){margin-bottom:calc(var(--lift) * .64)}
.rail{display:flex;align-items:center;gap:clamp(24px,4vw,72px);padding:0 var(--gutter);width:max-content}
.rail-intro{width:clamp(280px,34vw,560px)}
.rail-intro h2{font-size:clamp(46px,5.6vw,102px);letter-spacing:-.06em;line-height:.92}
.rail-intro p{margin-top:28px;font-size:clamp(17px,1.3vw,21px);color:var(--ink-soft);max-width:30ch}
.work{width:min(33vw,560px,calc((100svh - var(--chrome) - 7vh - var(--lift) - 215px) * 1.333));transform-style:preserve-3d;will-change:transform}
.work figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#dcdcd8}
.work img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14)}
.work figcaption{position:absolute;left:14px;top:14px;font-size:12px;color:#eceded;background:#141414b3;padding:5px 10px;border-radius:2px}
.work-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:14px;color:var(--ink-soft)}
.work-meta span:first-child{color:#C2410C;font-weight:600}
.work h3{font-size:clamp(28px,2.4vw,42px);margin-top:10px}
.work p:not(.work-meta){margin-top:12px;font-size:16px;color:var(--ink-soft);max-width:38ch}
.rail-end{width:clamp(280px,30vw,480px);display:grid;gap:28px;justify-items:start}
.rail-end h3{font-size:clamp(36px,3.8vw,68px);letter-spacing:-.055em}

/* ---------- 5 · Services: three data sheets, one per service ---------- */
/* --room: the height a whole sheet may take, under the bar with a margin. */
.services{--room:calc(100svh - var(--chrome) - clamp(20px,5svh,40px));background:var(--graphite);padding:16vh var(--gutter) 14vh;display:grid;gap:8vh}
.svc-head{display:grid;gap:18px;max-width:900px}
.svc-kicker{font-size:15px;color:var(--steel)}
.svc-title{font-size:clamp(46px,5.4vw,96px);letter-spacing:-.06em}
.svc-lead{font-size:clamp(18px,1.6vw,26px);line-height:1.3;color:#d0d1d3;max-width:40ch}
.cards,.tags,.auto-soft,.auto-list{list-style:none}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px)}
/* A sheet never outgrows the screen: on short screens the drawing gives up height first, the text stays whole. */
.card{display:grid;grid-template-rows:minmax(80px,1fr) auto;max-height:var(--room);border:1px solid #ffffff1f;background:#2E3237;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.card-art{min-height:0;padding:min(9%,4.5svh) 8%;border-bottom:1px solid #ffffff1f}
.card-art .sheet-art{height:100%}
.card-body{display:grid;gap:clamp(8px,2.4svh,16px);align-content:start;padding:clamp(16px,min(2vw,3.6svh),30px)}
.card-n{display:flex;justify-content:space-between;font-size:13px;color:var(--steel);font-variant-numeric:tabular-nums}
.card-n>span:first-child{color:var(--orange);font-weight:600}
.card h3{font-size:clamp(26px,2.1vw,36px)}
.card-line{font-size:17px;color:#e3e4e5;line-height:1.4}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:6px 11px;border:1px solid #ffffff2e;border-radius:2px;font-size:14px;color:#e3e4e5}
.fit{font-size:15px;color:#c8c9cc}
.fit b{color:var(--orange);font-weight:600}
.more{justify-self:start;min-height:44px;display:inline-flex;align-items:center;gap:10px;font-weight:600;border-bottom:1px solid #ffffff38}
.more::after{content:'→';color:var(--orange)}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:#FB6A3499;transform:translateY(-4px)}}
.sheet-art{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:#ECEDED;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.sheet-art .thin{stroke-width:.9;opacity:.7}
.sheet-art .link path{stroke-dasharray:3 4;opacity:.45}
.sheet-art .accent{stroke:var(--orange);stroke-width:1.6}
.sheet-art .fine{stroke-width:1}
.sheet-art .micro{stroke-width:.7}
.sheet-art .dim{stroke:var(--orange);stroke-width:1}
.sheet-art .dim text,.sheet-art .tb-text text,.sheet-art .label text{stroke:none}
.sheet-art .dim text{fill:var(--orange);font:600 12px var(--font);text-anchor:middle}
.sheet-art .center path{stroke:var(--orange);stroke-width:.8;stroke-dasharray:10 3 2 3}
.sheet-art .tb-text text{fill:#ECEDED;font:500 8.5px var(--font)}
.sheet-art .tb-text .tab{font-size:11px}
/* Card 03 is a code window: the pen draws the frame, then the routine types itself in. */
.sheet-art .code{stroke:none;fill:#ECEDED;font:500 12px ui-monospace,'Cascadia Code',Consolas,monospace;white-space:pre}
.sheet-art .code .k{fill:var(--orange)}
.sheet-art .code .c{fill:#8C9096}
.sheet-art .code.out{fill:var(--orange);font-weight:600}
/* Card 01 tells its story in steps: labels and people fade in, the orange gear meshes in. */
.sheet-art .o-line{stroke:var(--orange)}
.sheet-art .ppl{stroke-width:1.1}
.sheet-art .lab{stroke:none;fill:#ECEDED;font:500 11px var(--font)}
.sheet-art .lab.mid{text-anchor:middle}
.sheet-art .lab.big{font-size:14px;font-weight:600}
.sheet-art .dim-text{fill:#9a9da3;font-size:10px}
.sheet-art .o-text{fill:var(--orange)}
.motion .sheet-art .fadein{opacity:0;transition:opacity .5s var(--ease)}
.motion .sheet-art .fadein.on{opacity:1}
.motion .sheet-art :is(.link,.accent,.dim,.center,.tb-text){opacity:0;transition:opacity .5s var(--ease)}
.motion .sheet-art.is-done :is(.link,.accent,.dim,.center,.tb-text){opacity:1}

/* ---------- 5b · CAD automation ---------- */
.auto{background:#E9EAE8;color:var(--carbon);padding:16vh var(--gutter) 15vh;display:grid;grid-template-columns:1fr 1.05fr;gap:6vh 6vw;align-items:center}
.auto-copy{display:grid;gap:26px;align-content:start}
.auto-kicker{font-size:15px;font-weight:600;color:#C2410C}
.auto h2{font-size:clamp(40px,4.6vw,84px);letter-spacing:-.06em}
.auto-lead{font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:var(--ink-soft);max-width:46ch}
.auto-soft{display:flex;flex-wrap:wrap;gap:8px}
.auto-soft li{padding:7px 12px;border-radius:2px;background:#1414140f;font-size:14px;font-weight:600}
.auto-list{display:grid;gap:10px;font-size:16px}
.auto-list li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.auto-list li::before{content:'';width:12px;height:7px;margin-top:6px;border:solid #C2410C;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.auto-value{font-size:17px;font-weight:600;max-width:40ch}
.auto-price{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;justify-self:start;margin:0;padding:16px 22px;border:1.5px solid var(--carbon);position:relative}
.auto-price::before{content:"";position:absolute;left:-1.5px;top:-1.5px;width:12px;height:12px;border:solid var(--orange);border-width:2px 0 0 2px}
.auto-price b{font-size:clamp(34px,3vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1}
.auto-price span{font-size:15px;color:var(--ink-soft)}
.auto-copy .btn{justify-self:start;white-space:normal;text-align:left}
.term{background:var(--carbon);color:#d8dadc;border-radius:6px;box-shadow:0 30px 70px #14141433;overflow:hidden;font:400 13.5px/1.6 ui-monospace,'Cascadia Code',Consolas,monospace;min-width:0}
.term-bar{display:flex;align-items:center;gap:8px;padding:0 6px 0 14px;background:#202226;border-bottom:1px solid #ffffff12}
.term-dots{display:flex;gap:6px;margin-right:6px}
.term-dots i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.term-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.term-tab{min-height:44px;padding:0 14px;border:0;background:none;color:#9a9da3;font:600 13px var(--font);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.term-tab[aria-pressed=true]{color:var(--white);border-color:var(--orange)}
.term-tag{margin-left:auto;padding-right:10px;font:500 12px var(--font);color:#7d8187;white-space:nowrap}
.term-body{padding:20px 22px 24px;min-height:360px;white-space:pre;overflow-x:auto}
.term-body .c{color:#7f868f}
.term-body .k{color:var(--orange)}
.term-body .s{color:#9fd3a8}
.term-out{display:block;color:var(--white)}
.term-out .ok{color:#9fd3a8}
.caret{display:inline-block;width:8px;height:1.1em;margin-left:1px;vertical-align:-2px;background:var(--orange);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:1100px){.cards{grid-template-columns:1fr;max-width:640px}}
/* Side by side the sheets share their rows, so the drawings shrink together and the art lines stay level. */
@media (min-width:1101px){.cards{grid-template-rows:minmax(80px,1fr) auto;max-height:var(--room)}.card{grid-row:span 2;grid-template-rows:subgrid;row-gap:0}}
/* Short laptop screens: tighter sheets, so the drawing keeps a fair share of the height. */
@media (min-width:821px) and (max-height:760px){.card-art{padding:min(9%,3svh) 8%}.card-body{gap:10px}.card-line{font-size:15px}.tags{gap:6px}.tags li{padding:4px 9px;font-size:13px}.fit{font-size:14px}}
@media (max-width:900px){.auto{grid-template-columns:1fr;padding:12vh var(--gutter) 11vh}.term-body{min-height:300px;font-size:12px;padding:16px}.term-tag,.term-dots{display:none}.term-bar{padding-left:4px}.term-tab{padding:0 11px}}

/* ---------- 6 · Process ---------- */
.process{background:var(--studio);color:var(--carbon);padding:18vh var(--gutter) 16vh}
.process-head h2{font-size:clamp(46px,6.4vw,116px);letter-spacing:-.06em}
.process-head p{margin-top:28px;max-width:34ch;font-size:clamp(17px,1.4vw,22px);line-height:1.4;color:var(--ink-soft)}
.route{position:relative;margin-top:12vh}
.route-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;pointer-events:none}
.route-base{stroke:#14141424;stroke-width:1.5}
.route-ink{stroke:var(--orange);stroke-width:2.5;stroke-linecap:round}
.steps{display:grid;gap:15vh;position:relative}
.step{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}
.step-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;border:2px solid var(--carbon);background:var(--studio);transition:background-color .35s,border-color .35s,transform .35s var(--ease)}
.step.is-on .step-dot,html:not(.motion) .step-dot{background:var(--orange);border-color:var(--orange);transform:scale(1.15)}
.step>div{padding:0 clamp(40px,5vw,90px)}
.step:nth-child(odd)>div{grid-column:1;text-align:right;justify-self:end}
.step:nth-child(even)>div{grid-column:2}
.step h3{font-size:clamp(28px,3vw,52px);letter-spacing:-.05em}
.step p{margin-top:12px;font-size:17px;color:var(--ink-soft);max-width:30ch}
.step:nth-child(odd) p{margin-left:auto}
.motion .step>div{opacity:.25;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.motion .step.is-on>div{opacity:1;transform:none}

/* ---------- 7 · Close ---------- */
.close{display:grid;grid-template-columns:1.1fr 1fr;gap:5vh 6vw;align-items:center;padding:16vh var(--gutter) 14vh;background:var(--ground)}
.close .idea-form{align-self:end;max-width:560px;width:100%;justify-self:end}
.close-mark{grid-column:1/-1;width:clamp(120px,15vw,240px);aspect-ratio:506/355;position:relative}
.close-mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.close-mark .x-piece{stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;fill-opacity:0;transition:fill-opacity .6s var(--ease)}
.close-mark .x-accent{stroke:var(--orange);fill:var(--orange)}
.close-mark .x-ink{stroke:var(--white);fill:var(--white)}
.close-mark.is-filled .x-piece{fill-opacity:1}
.close-mark-img{width:100%;height:100%;object-fit:contain}
.motion .close-mark-img{display:none}
.close-copy h2{font-size:clamp(44px,min(5.8vw,11svh),116px);letter-spacing:-.065em;line-height:.92}
.cl-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cl-line>span{display:block}
.close-copy>p{margin-top:32px;max-width:30ch;font-size:clamp(18px,1.5vw,24px);line-height:1.35;color:#d0d1d3}
.close-email{display:inline-block;margin-top:36px;font-size:clamp(22px,2.2vw,36px);font-weight:500;letter-spacing:-.03em;border-bottom:2px solid var(--orange);padding-bottom:4px}
.idea-form{background:var(--studio);color:var(--carbon);padding:clamp(26px,3vw,48px);display:grid;gap:20px}
.idea-form label:not(.consent){display:grid;gap:6px}
.idea-form label>span{font-size:13px;color:var(--ink-soft)}
.idea-form em{font-style:normal}
.idea-form input:not([type=checkbox]),.idea-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #14141440;border-radius:0;padding:8px 0 11px;font-size:17px;outline:none;transition:border-color .2s}
.idea-form textarea{resize:vertical;min-height:104px;line-height:1.45}
.idea-form textarea::placeholder{color:#14141466}
.idea-form :is(input,textarea):focus-visible{border-bottom-color:var(--orange);box-shadow:0 1px 0 var(--orange)}
.consent{display:flex;align-items:flex-start;gap:12px;font-size:14px;cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--orange);flex:none}
.consent a{text-decoration:underline;text-underline-offset:3px}
.idea-form .btn{width:100%}
.form-note{font-size:13px;color:var(--ink-soft)}

.footer{display:flex;justify-content:space-between;align-items:center;gap:4px 20px;flex-wrap:wrap;padding:22px var(--gutter) 28px;border-top:1px solid #ffffff1f;font-size:14px;color:var(--steel)}
.footer nav{display:flex;gap:4px 26px;flex-wrap:wrap}
.footer p,.footer a{display:inline-flex;align-items:center;min-height:44px}
.footer a:hover{color:var(--orange)}

/* ---------- Static document (no script or reduced motion) ---------- */
html:not(.motion) .chrome{position:absolute}
html:not(.motion) .xc-stage{position:static;height:auto;overflow:visible;padding:14vh var(--gutter)}
html:not(.motion) :is(.xc-idea,.xc-shade,.case-steps){display:none}
html:not(.motion) .xc-track{position:static;display:grid;gap:40px}
html:not(.motion) :is(.xc-layer,.xc-in){position:static;display:grid;gap:24px;background:none;color:inherit}
html:not(.motion) :is(.xc-frame,.xc-pic){position:relative;inset:auto;left:auto;top:auto;width:100%;height:auto;margin:0;aspect-ratio:4/3;background:var(--studio);-webkit-mask-image:none;mask-image:none}
html:not(.motion) .xc-cap{position:static;width:auto;order:-1}
html:not(.motion) .rail-stage{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter)}
html:not(.motion) .rail>*{scroll-snap-align:start}
html:not(.motion) .uav-lines{display:block;inset:8%}
html:not(.motion) .xc-idea .xc-frame{background:var(--ground)}

/* ---------- Phones and portrait tablets ---------- */
/* ---------- 7 · Hour packages ---------- */
/* Technical-sheet cards: square corners, hairlines, micro labels. The way in (the setup) is the light card. */
.sec-k{font:500 12px/1 ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.tbd{display:inline-block;padding:3px 8px;border:1px dashed currentColor;font:500 12px/1.2 ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.04em;font-style:normal;opacity:.75}
.btn--line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
@media (hover:hover) and (pointer:fine){.btn--line:hover{color:var(--orange)}}
.packs{padding:16vh var(--gutter) 14vh;background:var(--ground)}
.packs-head{display:grid;gap:22px;max-width:62ch}
.packs-head h2{font-size:clamp(40px,5vw,92px);letter-spacing:-.06em}
.packs-head>p:last-child{font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:#d0d1d3;max-width:52ch}
.packs-list{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,22px);margin-top:9vh}
.pack{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2vw,30px);background:var(--graphite);border:1px solid #ffffff1a}
.pack-tag{padding-bottom:12px;border-bottom:1px solid #ffffff1f;font:500 12px/1 ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.pack-h{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.pack-h b{font-size:clamp(64px,6vw,112px);font-weight:300;letter-spacing:-.06em;line-height:.84;font-variant-numeric:tabular-nums}
.pack-h span{font-size:15px;color:var(--steel)}
.pack-for{font-size:15px;line-height:1.4;color:#c9cbce;min-height:2.8em}
.pack-price{margin-top:auto;padding-top:14px;color:#d0d1d3}
.pack .btn{width:100%;white-space:normal;text-align:center}
.pack--intro{background:var(--studio);color:var(--carbon);border-color:var(--studio)}
.pack--intro .pack-tag{color:#C2410C;border-bottom-color:#14141426}
.pack--intro .pack-h span,.pack--intro .pack-for,.pack--intro .pack-price{color:var(--ink-soft)}
.pack--intro::before,.pack--intro::after{content:'';position:absolute;width:12px;height:12px;border:solid var(--orange)}
.pack--intro::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.pack--intro::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
/* The setup is a word, not a number of hours: smaller, so it fits the card. */
.pack--setup .pack-h b{font-size:clamp(46px,4.2vw,78px);font-weight:400}
.packs-inc{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:4vh;padding-top:22px;border-top:1px solid #ffffff1a;font-size:14px;color:var(--steel)}
.packs-inc li{display:flex;align-items:center;gap:10px}
.packs-inc li::before{content:'';width:6px;height:6px;background:var(--orange)}
.packs-terms{margin-top:14px;font-size:13px;line-height:1.5;color:var(--steel)}
@media (max-width:1100px){.packs-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.packs-list{grid-template-columns:1fr}.pack-for{min-height:0}}

/* ---------- 8 · Capacity: a guide to how busy the coming weeks are, in % ---------- */
.cap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:6vh 6vw;align-items:center;padding:16vh var(--gutter) 14vh;background:var(--studio);color:var(--carbon)}
.cap-copy{display:grid;gap:22px}
.cap-copy h2{font-size:clamp(40px,4.6vw,84px);letter-spacing:-.06em}
.cap-copy>p:not(.sec-k){font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:var(--ink-soft);max-width:40ch}
.cap .sec-k{color:#C2410C}
.cap-how{counter-reset:h;display:grid;gap:10px;margin-top:4px}
.cap-how li{counter-increment:h;display:flex;gap:14px;align-items:baseline;font-size:16px;font-weight:500}
.cap-how li::before{content:counter(h,decimal-leading-zero);font:500 12px ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#C2410C}
.cap-chart{display:grid;gap:16px;padding:clamp(22px,2.6vw,40px);background:var(--white);border:1px solid #14141414;box-shadow:0 30px 70px #1414140f}
.cap-nav{display:flex;align-items:center;gap:12px;font:500 12px ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.cap-tag{margin-right:auto;color:#C2410C;text-transform:none;letter-spacing:0}
.cap-tag.is-live{color:#2E7D4F}
.cap-tag.is-live::before{content:'';display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:1px}
.cap-nav button{width:40px;height:40px;border:1px solid #14141433;background:none;color:var(--carbon);font-size:16px;cursor:pointer}
.cap-nav button:disabled{opacity:.3;cursor:default}
.cap-nav button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cap-weeks{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.cap-wk{display:grid;gap:10px}
.cap-lab{font:500 11.5px ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.cap-col{position:relative;height:clamp(170px,30vh,280px);border:1px solid #14141426;background:repeating-linear-gradient(0deg,#1414140d 0 1px,transparent 1px 25%);overflow:hidden}
.cap-busy{position:absolute;inset:0;background:var(--orange);transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease)}
.cap-col b{position:absolute;left:8px;top:8px;font-size:13px;font-weight:600}
.cap-free{font-size:14px;font-weight:600}
.cap-wk.full .cap-free{color:var(--steel)}
.cap-legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--ink-soft)}
.cap-legend i{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:-1px;background:var(--orange)}
.cap-legend i.free{background:transparent;border:1px solid #14141466}
.cap-empty{font-size:15px;color:var(--ink-soft)}
.js .cap-empty{display:none}
html:not(.js) :is(.cap-nav,.cap-weeks,.cap-axis,.cap-legend){display:none}
@media (max-width:1000px){.cap{grid-template-columns:1fr}}
@media (max-width:640px){.cap-weeks{grid-template-columns:repeat(4,minmax(0,1fr))}.cap-col{height:150px}.cap-nav{flex-wrap:wrap}.cap-tag{flex-basis:100%}.cap-range{margin-right:auto}}


/* Prices: the figure, then the rate and the tax note. */
.pack-price{display:grid;gap:4px}
.pack-price b{font-size:clamp(24px,2vw,32px);font-weight:600;letter-spacing:-.03em;color:var(--white)}
.pack-price span{font-size:12.5px;color:var(--steel)}
.pack-price i{font-style:normal}
.pack--intro .pack-price b,.pb-panel .pack-price b{color:var(--carbon)}
.pack--intro .pack-price span,.pb-panel .pack-price span{color:var(--ink-soft)}

/* Monthly plans and fixed-price automation, under the packages. */
.plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:3vh 4vw;align-items:start;margin-top:10vh;padding-top:5vh;border-top:1px solid #ffffff1a}
.plans-head{display:grid;gap:16px}
.plans-head h3{font-size:clamp(28px,2.6vw,46px);letter-spacing:-.05em}
.plans-list{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}
.plan{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2vw,30px);border:1px solid #ffffff33}
.plan-h{display:flex;align-items:baseline;gap:10px}
.plan-h b{font-size:clamp(52px,4.6vw,84px);font-weight:300;letter-spacing:-.06em;line-height:.84}
.plan-h span{font-size:15px;color:var(--steel)}
.plan-for{font-size:15px;line-height:1.4;color:#c9cbce}
.plan-price{display:grid;gap:4px;margin-top:auto;padding-top:10px}
.plan-price b{font-size:clamp(24px,2vw,32px);font-weight:600;letter-spacing:-.03em}
.plan-price span{font-size:12.5px;color:var(--steel)}
.plan .btn{width:100%;white-space:normal}
.plans-auto{grid-column:1/-1;font-size:15px;color:#c9cbce}
.plans-auto b{color:var(--white)}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
@media (max-width:560px){.plans-list{grid-template-columns:1fr}}

/* Every package and plan card is a light sheet with orange drafting corners; the trial keeps the orange button. */
.pack,.plan{position:relative;background:var(--studio);color:var(--carbon);border-color:var(--studio)}
.pack .pack-tag{color:#C2410C;border-bottom-color:#14141426}
:is(.pack .pack-h span,.pack .pack-for,.pack .pack-price span,.plan .plan-h span,.plan .plan-for,.plan .plan-price span){color:var(--ink-soft)}
.pack .pack-price b,.plan .plan-price b{color:var(--carbon)}
:is(.pack,.plan)::before,:is(.pack,.plan)::after{content:'';position:absolute;width:12px;height:12px;border:solid var(--orange)}
:is(.pack,.plan)::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
:is(.pack,.plan)::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}

@media (max-width:820px){
  :root{--chrome:66px}
  .chrome-cta{font-size:13px;padding:9px 14px;min-height:44px}
  /* Content sits in the lower part of the first screen, so the page continues straight after the button. */
  /* Phones: the copy starts right under the bar and the hero is only as tall as its copy. */
  .hero-stage{min-height:0;align-items:flex-start}
  .hero-copy{padding:calc(var(--chrome) + 5vh) var(--gutter) 7vh}
  .hero-title{font-size:clamp(52px,min(16.4vw,12svh),150px)}
  /* Bolder marks: at phone size the desktop's hairline circle barely reads. */
  .idea-loop{stroke-width:4.5}
  .ht-word::before{-webkit-text-stroke:1.6px #ffffff8c}
  .ht-real{padding-bottom:.26em;margin-bottom:-.26em}
  .motion .real-under{display:block;position:absolute;left:-1%;right:4%;bottom:-.19em;width:auto;height:.2em;overflow:visible;fill:none;stroke:var(--orange);stroke-width:5;stroke-linecap:round;pointer-events:none}
  .motion .real-under path{vector-effect:non-scaling-stroke}
  .kicker{font-size:13px;margin-bottom:2.4vh}
  .hero-sub{max-width:30ch;margin-top:3.2vh}
  .hero-cta{margin-top:3vh}
  /* No full-screen hold here: a phone reads the line in one glance, and the empty band read as a gap. */
  .quiet{min-height:0;padding:6vh var(--gutter) 11vh}
  .quiet-line{font-size:clamp(34px,10vw,72px)}

  /* Case: the drone and the photos share the band between the step bar and the caption. */
  .xc-stage{--zt:calc(var(--chrome) + 52px);--caph:clamp(9.5rem,24svh,12rem);--zb:calc(7vh + var(--caph))}
  .xc-cap,.xc-caps{left:var(--gutter);right:var(--gutter);width:auto;bottom:7vh}
  .xc-caps{height:calc(var(--caph) + 4rem)}
  .xc-frame{--fw:min(108vw,calc(var(--zh) * 1.72));left:50%}
  /* The photos sit in the same band, framed on the drone (and the top of its stand). */
  .xc-pic{inset:auto 0;top:calc(var(--zt) + (var(--zh) - 75vw) / 2);height:75vw;-webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 9%,#000 88%,transparent)}
  .xc-proto img{object-position:50% 62%}
  .xc-expo img{object-position:50% 34%}
  .xc-shade{background:linear-gradient(180deg,#2A2D32b8 0%,#2A2D3200 calc(var(--chrome) + 80px)),linear-gradient(0deg,#2A2D32f2 0%,#2A2D32c7 calc(7vh + var(--caph) * .7),#2A2D3200 calc(7vh + var(--caph) + 70px))}
  .xc-cap h3{font-size:clamp(32px,8.6vw,54px)}
  .xc-label{margin-bottom:10px}
  .xc-cap p:not(.xc-label){margin-top:12px;font-size:16px}
  .case-steps{right:var(--gutter);justify-content:space-between;gap:8px;font-size:12px}
  .case-steps li{flex:1}

  /* Projects: the heading stays at the top of the pinned screen while the cards travel under it. */
  .rail-stage{flex-direction:column;align-items:stretch;justify-content:center;gap:4vh;padding:calc(var(--chrome) + 2vh) 0 4vh}
  .rail-head{width:auto;padding:0 var(--gutter)}
  .rail-head h2{font-size:clamp(38px,10vw,64px)}
  .rail-head p{margin-top:14px;font-size:16px}
  .rail{align-items:flex-start;gap:7vw}
  .work,.rail-end{width:min(80vw,calc((100svh - var(--chrome) - 380px) * 1.333))}
  .work:nth-of-type(even),.work:nth-of-type(odd){margin:0}
  .work-meta{margin-top:16px}
  .work h3{font-size:clamp(24px,6.4vw,34px)}
  .rail-end{align-self:center}
  .rail-end h3{font-size:clamp(32px,8.6vw,52px)}
  html:not(.motion) .rail-intro{width:80vw}

  /* Services: titles in a stable list, the active description in one fixed slot below them. */
  .services{padding:12vh var(--gutter) 10vh;gap:6vh}
  .svc-title{font-size:clamp(38px,10vw,64px)}
  .svc-lead{font-size:17px}

  .process{padding:13vh var(--gutter) 12vh}
  .route{margin-top:9vh}
  .steps{gap:9vh}
  .step{grid-template-columns:1fr}
  .step-dot{left:9px}
  .step>div,.step:nth-child(odd)>div,.step:nth-child(even)>div{grid-column:1;text-align:left;justify-self:start;padding:0 0 0 46px}
  .step:nth-child(odd) p{margin-left:0}
  .step p{font-size:16px}
  .close{grid-template-columns:1fr;gap:5vh;padding:13vh var(--gutter) 9vh}
  .close .idea-form{max-width:none;justify-self:stretch}
  .close-copy h2{font-size:clamp(42px,11.4vw,80px)}
  .close-copy>p{margin-top:24px}
  .close-email{margin-top:28px}
  .footer{flex-direction:column;align-items:flex-start;gap:0}
}
/* Portrait tablets: same structure, more presence. */
@media (min-width:600px) and (max-width:820px){
  .hero-sub{font-size:20px}
  .card-line,.step p,.rail-head p{font-size:18px}
  .xc-cap p:not(.xc-label){font-size:18px}
  .work,.rail-end{width:min(64vw,calc((100svh - var(--chrome) - 400px) * 1.333))}
}

/* ---------- Short landscape screens (phones on their side, small laptop windows) ---------- */
@media (max-height:560px) and (orientation:landscape){
  :root{--chrome:58px}
  .chrome-cta{min-height:40px;padding:8px 14px;font-size:13px}
  .motion .kicker{display:none}
  .hero-copy{padding:calc(var(--chrome) + 1vh) var(--gutter) 4vh}
  .hero-title{font-size:min(8vw,14svh)}
  .hero-sub{margin-top:2.5vh;font-size:15px;max-width:44ch}
  .hero-cta{margin-top:2.5vh;min-height:44px}
  .xc-stage{--zt:calc(var(--chrome) + 46px);--zb:4vh}
  .case-steps{top:calc(var(--chrome) + 2px)}
  .xc-cap,.xc-caps{bottom:6vh;width:min(28rem,36vw)}
  .xc-frame{--fw:min(54vw,calc(var(--zh) * 1.72));left:69%}
  .xc-cap h3{font-size:clamp(24px,7.4svh,40px)}
  .xc-label{margin-bottom:6px}
  .xc-cap p:not(.xc-label){margin-top:8px;font-size:14px}
  .rail-stage{padding:calc(var(--chrome) + 2vh) 0 3vh}
  .rail-intro h2{font-size:clamp(30px,10svh,52px)}
  .rail-intro p{margin-top:12px;font-size:15px}
  .work,.rail-end{width:min(36vw,calc((100svh - var(--chrome) - 170px) * 1.333))}
  .work:nth-of-type(even),.work:nth-of-type(odd){margin:0}
  .motion .work p:not(.work-meta){display:none}
  /* Short wide windows keep the three sheets side by side (narrower ones: one per row, see below). */
  .cards{grid-template-columns:repeat(3,1fr);max-width:none}
  .card h3{font-size:20px}
  .card-line,.fit{font-size:14px}
  .tags li{font-size:12px;padding:4px 8px}
  .work h3{font-size:22px;margin-top:6px}
  .work-meta{margin-top:10px;font-size:13px}
}
/* Phones on their side: three columns leave the text no width, so one sheet per row, drawing beside the text. */
@media (max-height:560px) and (orientation:landscape) and (max-width:1100px){
  .cards{grid-template-columns:1fr}
  .card{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:minmax(80px,1fr)}
  .card-art{padding:3svh 4%;border-bottom:0;border-right:1px solid #ffffff1f}
  .card-body{gap:8px;padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Prices: «sin IVA» next to every amount ---------- */
:is(.pack-price,.plan-price) b small{font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-soft);white-space:nowrap}
.pack--setup .pack-price b small{color:var(--ink-soft)}
.plans-head h3 span{display:block;font-size:.55em;font-weight:500;letter-spacing:-.01em;color:var(--steel);margin-bottom:.35em}

/* ---------- Capacity: the section keeps the light ground; only the chart sits on a dark panel ---------- */
.cap-chart{background:var(--carbon);border-color:var(--carbon);box-shadow:0 30px 70px #1414141f;color:var(--white)}
.cap-tag{color:var(--orange)}
.cap-tag.is-live{color:#5BC48A}
.cap-chart .cap-nav,.cap-legend{color:#c9cbce}
.cap-nav button{border-color:#ffffff40;color:var(--white)}
.cap-col{border-color:#ffffff2e;background:repeating-linear-gradient(0deg,#ffffff12 0 1px,transparent 1px 25%)}
.cap-wk{align-content:start}

/* ---------- Packs: step 1 (setup) and step 2 (the three packs, under one line) ---------- */
.packs-list{row-gap:18px}
.pack-step{grid-row:1;display:flex;align-items:center;gap:16px;font:500 12px/1 ui-monospace,'SFMono-Regular',Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.pack-step--1{grid-column:1}
.pack-step--2{grid-column:2/-1}
.pack-step--2::before,.pack-step--2::after{content:'';flex:1;height:1px;background:#ffffff38}
.pack-tag{display:flex;align-items:center;gap:10px}
.pack-tag .off{display:inline-flex;align-items:center;padding:4px 8px;margin:-4px 0;border-radius:2px;background:#FB6A3424;color:#B23A0B;font:600 12px/1 var(--font);font-style:normal;letter-spacing:0}
/* Best price per hour: same card as the others, a small orange label on its top-right corner. */
.pack-best{position:absolute;top:-12px;right:18px;z-index:1;padding:6px 10px;background:var(--orange);color:var(--carbon);font:600 12px/1 var(--font);white-space:nowrap}
.pp-row{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap}
.pp-row i{font-style:normal;font-size:15px;font-weight:600;color:var(--carbon);white-space:nowrap}
.pack-price>span{margin-top:2px}
.plans-head .plans-terms{font-size:15.5px;line-height:1.45;color:#c9cbce;max-width:38ch}
/* Step 1, the setup, is a wide sheet on its own row; step 2, the three packs, sits under it. */
.packs-list{grid-template-columns:repeat(3,1fr)}
.pack-step--1,.pack-step--2,.pack--setup{grid-column:1/-1;grid-row:auto}
.pack-step--1{order:0}.pack--setup{order:1}.pack-step--2{order:2;margin-top:14px}.pack:not(.pack--setup){order:3}
.pack-step--2::before{display:none}
.pack-step--1::after{content:"";flex:1;height:1px;background:#ffffff38}
@media (min-width:900px){
  .pack--setup{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1.1fr) auto;align-items:center;gap:14px clamp(24px,3vw,56px)}
  .pack--setup .pack-tag{grid-column:1/-1}
  .pack--setup .pack-h{margin-top:0}
  .pack--setup .pack-for{min-height:0;max-width:46ch}
  .pack--setup .pack-price{margin-top:0;padding-top:0}
  .pack--setup .btn{width:auto;min-width:220px}
}
@media (max-width:700px){.packs-list{grid-template-columns:1fr}.pack--best{margin-top:10px}}

/* ---------- Capacity: one reading per week (bar = room left) ---------- */
.cap-how{font-size:16px;line-height:1.45;color:var(--ink-soft);max-width:40ch}
.cap-wk .cap-free{font-size:13.5px;font-weight:600}
.cap-wk.ok .cap-free{color:var(--white)}
.cap-wk.low .cap-free{color:var(--orange)}
.cap-wk.full .cap-free{color:var(--steel)}

/* Steps not reached yet stay readable. */
.motion .step>div{opacity:.45}

/* ---------- Labels in the brand face (monospace only for data: agenda, terminal) ---------- */
.sec-k,.pack-tag,.pack-step{font:600 15px/1.2 var(--font);letter-spacing:0;text-transform:none}
.pack-tag .off{font-size:12.5px}
.pack-h b,.plan-h b{letter-spacing:-.045em}
.cap-lab{font-size:12.5px}
/* Small screens: the terminal keeps every line inside the frame. */
@media (max-width:560px){.term-body{font-size:11px;padding:14px 12px}}
.consent{min-height:44px;padding:4px 0}.consent input{width:22px;height:22px;margin:0}

/* ---------- Navigation: «Precios» always one tap away on phones; the ruler names the section you are in ---------- */
.chrome-actions{display:flex;align-items:center;gap:18px}
.chrome-link{display:none;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.chrome-link{display:inline-flex}
.chrome[data-ink=light] .chrome-link{color:var(--white)}
.chrome[data-ink=dark] .chrome-link{color:var(--carbon)}
@media (min-width:1024px){.ruler li.is-active a span{opacity:1;transform:none}}
/* Contact: the hidden field only bots fill, and the result of sending. */
.idea-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note.is-ok{color:#5BC48A}
.form-note.is-error{color:#FF9A73}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* Room left: a light orange fill with a strong top edge, so a free agenda reads calm, not alarming. */
.cap-busy{background:#FB6A3433;border-top:2px solid var(--orange)}
.cap-wk.low .cap-busy{background:#FB6A3466}
.cap-lab{font-size:12px;white-space:nowrap}

/* ---------- Taste review: fewer tells, readable text, one pair of margins ---------- */
/* Project cards: title first, the sector line under it. */
.work h3{margin-top:22px}
.work-meta{margin-top:8px}
@media (max-width:820px){.work h3{margin-top:16px}}
/* Surfaces separate by tone, not by shadow. */
.term,.cap-chart{box-shadow:none}
/* Nothing meant to be read under 13px; the agenda speaks in the text face. */
.ruler a,.term-tag,.cap-nav,.cap-lab{font-family:var(--font);font-size:13px;letter-spacing:0;text-transform:none}
.cap-nav{font-weight:500}
.pack-price span,.plan-price span{font-size:13.5px}
.pack-tag .off,.pack-best{font-size:13px}
@media (min-width:1024px){.hw-k,.hw-x{font-size:13px}}
@media (max-width:820px){.case-steps,.tags li{font-size:13px}}
/* Running text on light grounds one step darker. */
:root{--ink-soft:#4B4F55}
/* The price headline gets the width it needs (two lines, not four). */
.packs-head{max-width:none}
.packs-head h2{max-width:15ch}
.packs-head>p:last-child{max-width:52ch}
/* Same margin on both sides: the ruler's room is shared left and right on wide screens. */
@media (min-width:1024px){
  .motion :is(.quiet,.services,.auto,.process,.packs,.cap,.close){padding-left:calc(var(--gutter) + 56px);padding-right:calc(var(--gutter) + 56px)}
  .motion .ruler{right:18px}
}

/* ---------- 5b · CAD automation, second version: proof first, one list, one offer ---------- */
.auto{display:block}
.au-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px 6vw;align-items:end}
.au-head h2{font-size:clamp(40px,4.6vw,84px);letter-spacing:-.05em;line-height:.98;text-wrap:balance}
.au-head h2 em{font-style:normal;color:#C2410C}
.au-lead{font-size:clamp(17px,1.3vw,21px);line-height:1.45;color:var(--ink-soft);max-width:44ch}
.au-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 6vw;margin-top:8vh;align-items:stretch}
.auto .term{display:flex;flex-direction:column}
.auto .term-body{flex:1;min-height:340px}
.au-what{display:grid;gap:26px;align-content:center}
.au-what h3{font-size:clamp(22px,1.8vw,28px);letter-spacing:-.03em}
.au-progs{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.au-progs li{padding:8px 13px;border:1px solid #14141426;background:#F4F4F2;font-size:14px;font-weight:600}
/* «Y otros programas» is a promise, not a footnote: the strongest chip. */
.au-progs li.others{border-color:var(--carbon);background:var(--carbon);color:var(--white)}
.au-progs li.others::before{content:'+ ';color:var(--orange)}
.au-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;list-style:none}
.au-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center;font-size:16px;font-weight:500}
.au-list li::before{content:'';width:22px;height:22px;border-radius:50%;background:#FB6A3426 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5' fill='none' stroke='%23C2410C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.au-offer{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 40px;align-items:center;margin-top:7vh;padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,40px);background:var(--carbon);color:var(--white)}
.au-offer::before,.au-offer::after{content:'';position:absolute;width:12px;height:12px;border:solid var(--orange)}
.au-offer::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.au-offer::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.au-price b{display:block;font-size:clamp(44px,4vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--white)}
.au-price span{display:block;margin-top:6px;font-size:14px;color:#c9cbce}
.au-offer p{font-size:16.5px;line-height:1.45;color:#d7d9dc;max-width:46ch}
.au-offer .btn{white-space:normal}
@media (max-width:980px){.au-head,.au-body{grid-template-columns:1fr}.au-offer{grid-template-columns:1fr}.au-offer .btn{justify-self:start}}
@media (max-width:560px){.au-list{grid-template-columns:1fr}.auto .term-body{min-height:0}}

/* Headings that exist for structure and screen readers only. */
.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}

/* ---------- Accessibility review ---------- */
/* Focus: the orange ring passes 3:1 on dark grounds only; light grounds take the darker orange. */
:root{--focus:var(--orange)}
[data-ink=dark],.pack,.plan,.idea-form,.au-what{--focus:#C2410C}
.cap-chart,.au-offer{--focus:var(--orange)}
:focus-visible{outline-color:var(--focus)}
[tabindex="-1"]:focus{outline:none}
html{scroll-padding-top:calc(var(--chrome) + 24px)}
/* Form: readable messages, visible fields, a light checkbox. */
.idea-form{color-scheme:light;accent-color:#C2410C}
.idea-form input:not([type=checkbox]),.idea-form textarea{border-bottom-color:#1414148c}
.idea-form :is(input,textarea):focus-visible{border-bottom-color:#C2410C;box-shadow:0 1px 0 #C2410C}
.idea-form textarea::placeholder{color:#141414a6}
.form-note.is-ok{color:#1E7A46}
.form-note.is-error{color:#B42318}
/* Small orange text that sits on light or mid grounds. */
.fit b{color:#FF7A4A}
.xc-cad .xc-label{color:#C2410C}
.term-tag{color:#9a9da3}
.case-steps li{opacity:.6}
/* «Así trabajamos»: steps not yet reached stay readable; the dot and the line carry the progress. */
.motion .step>div{opacity:1}
.motion .step:not(.is-on) h3{opacity:.6}
.footer nav a[href="?static"]{opacity:.75}

/* Services: how each one is paid, in the card's top corner. */
.card{position:relative}
.card-price{position:absolute;top:14px;right:14px;z-index:1;padding:6px 10px;border:1px solid #ffffff33;background:#2E3237;color:#e6e7e8;font:600 13px/1 var(--font);white-space:nowrap}
.card-price--fixed{border-color:#FF7A4A;color:#FF7A4A}

/* Plans: the name, one line on how a plan differs from a pack, and the conditions in small print. */
.plans-head .plans-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:#d0d1d3;max-width:34ch}
.plans-head .plans-terms{font-size:13.5px;line-height:1.6;color:var(--steel);max-width:36ch}
.plans-head .plans-terms{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.plans-head .plans-terms li{display:flex;align-items:center;gap:10px}
.plans-head .plans-terms li::before{content:'';flex:none;width:5px;height:5px;background:var(--orange)}

/* ---------- 5c · Automation: the numbers (steps on the left, the weekly sum on the right) ---------- */
.au-math{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px 6vw;align-items:start;margin-top:14vh}
.au-math h3{font-size:clamp(30px,3.2vw,56px);letter-spacing:-.05em;line-height:1;max-width:20ch}
.au-math h4{margin:0}
.m-lead{margin-top:18px;font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--ink-soft);max-width:48ch}
/* Steps on a drafting line that joins their numbers. */
.m-steps{display:grid;list-style:none;padding:0;margin-top:clamp(32px,5vh,48px)}
.m-steps li{position:relative;display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:start;padding-bottom:26px}
.m-steps li:last-child{padding-bottom:0}
.m-steps li:not(:last-child)::before{content:'';position:absolute;left:15px;top:34px;bottom:4px;width:1px;background:#14141433}
.m-steps h4{font-size:20px;line-height:30px;letter-spacing:-.02em}
.m-steps p{margin-top:2px;font-size:16px;line-height:1.45;color:var(--ink-soft);max-width:46ch}
.m-n{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;background:#E9EAE8;font-size:13px;font-weight:600}
.m-steps li:last-child .m-n{background:var(--orange);border-color:var(--orange)}
/* The sum: a light sheet with orange corners, so the 250 € strip stays the section's one dark slab. */
.au-math .calc{position:relative;background:var(--studio);color:var(--carbon);border:1px solid #14141426;padding:clamp(24px,2.6vw,40px);display:grid;gap:20px;--focus:#C2410C;accent-color:#C2410C}
.au-math .calc::before,.au-math .calc::after{content:'';position:absolute;width:12px;height:12px;border:solid var(--orange)}
.au-math .calc::before{left:-1px;top:-1px;border-width:2px 0 0 2px}
.au-math .calc::after{right:-1px;bottom:-1px;border-width:0 2px 2px 0}
.calc h4{font-size:20px;letter-spacing:-.02em}
.calc .field{display:grid;gap:4px}
.calc .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc .field label{font-size:15px;color:var(--ink-soft)}
.calc output{font-size:20px;font-weight:600;color:var(--carbon);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Drawn sliders: a 2 px line and a square orange handle, the same in every browser. */
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;margin:-6px 0;background:none;cursor:pointer}
.calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--carbon)}
.calc input[type=range]::-moz-range-track{height:2px;background:var(--carbon)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;background:var(--orange);border:2px solid var(--carbon);border-radius:0}
.calc input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--orange);border:2px solid var(--carbon);border-radius:0}
.calc input[type=range]:focus-visible{outline-offset:1px}
html:not(.js) .calc input[type=range],html:not(.js) .calc .btn{display:none}
/* Bars on one shared grid, so both are drawn to the same scale. */
.calc .bars{display:grid;grid-template-columns:auto minmax(0,1fr) 8ch;gap:10px 12px;padding-top:18px;border-top:1px solid #14141426}
.calc .bar{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;font-size:15px;color:var(--ink-soft)}
.calc .bar i{display:flex;height:14px;background:#1414140d}
.calc .bar i span{display:block;height:100%;transition:width .3s var(--ease)}
.seg-task{background:var(--carbon)}
.seg-err{background:var(--orange);box-shadow:inset 2px 0 0 var(--studio)}
.seg-script{background:#9A9EA4}
.calc .bar b{font-size:20px;text-align:right;color:var(--carbon);white-space:nowrap;font-variant-numeric:tabular-nums}
.calc .legend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;color:var(--ink-soft)}
.calc .legend span{display:inline-flex;align-items:center;gap:8px}
.calc .legend span::before{content:'';width:10px;height:10px;background:var(--c)}
.calc .legend b{color:var(--carbon);font-weight:600}
.calc .verdict{font-size:clamp(22px,1.7vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.calc .verdict em{font-style:normal;color:#C2410C}
.calc .btn{justify-self:start;white-space:normal}
.au-math+.au-offer{margin-top:12vh}
@media (max-width:1100px){.calc .bars{grid-template-columns:minmax(0,1fr) 8ch;row-gap:6px}.calc .bar>span{grid-column:1/-1}}
@media (max-width:980px){.au-math{grid-template-columns:1fr}}
@media (forced-colors:active){.calc .bar i{border:1px solid CanvasText}.calc .bar i span,.calc .legend span::before{forced-color-adjust:none}.idea-form select{appearance:auto;background-image:none}}
/* Form: «¿Qué necesitas?» drawn like the other fields; its empty state reads as a placeholder. */
.idea-form select{width:100%;background:transparent;border:0;border-bottom:1px solid #1414148c;border-radius:0;padding:8px 0 11px;font:inherit;font-size:17px;color:var(--carbon);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:12px 8px}
.idea-form select:invalid{color:#141414a6}
.idea-form select option{color:var(--carbon)}
.idea-form select:focus-visible{outline:none;border-bottom-color:#C2410C;box-shadow:0 1px 0 #C2410C}

/* 5c · Automation in motion: a carbon line fills the grey one between the steps; numbers light as it arrives. */
.motion .m-steps li:not(:last-child)::after{content:'';position:absolute;left:15px;top:34px;bottom:4px;width:1px;background:var(--carbon);transform:scaleY(var(--fill,1));transform-origin:top}
.m-n{transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.m-steps h4{transition:opacity .35s var(--ease)}
.motion .m-steps li .m-n{color:#14141473;border-color:#14141440}
.motion .m-steps li:last-child:not(.is-on) .m-n{background:#E9EAE8}
.motion .m-steps li.is-on .m-n{background:var(--carbon);border-color:var(--carbon);color:var(--white)}
.motion .m-steps li:last-child.is-on .m-n{background:var(--orange);border-color:var(--orange);color:var(--carbon);transform:scale(1.12)}
.motion .m-steps li:not(.is-on) h4{opacity:.45}
.rw{display:inline-block}

/* A small label that says the topic changes: automation at a closed price, then the hourly technical office. */
.sec-label,.process-head .sec-label{margin:0 0 18px;max-width:none;font:600 15px/1.2 var(--font);letter-spacing:0;color:#C2410C}
/* Así trabajamos without its intro line: the steps start a little closer to the title. */
.process-head+.route{margin-top:9vh}
/* The script decides how many weeks fit; the grid makes one equal column for each. */
.cap-weeks{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
/* Step 1 points at the form it mentions. */
.m-link{color:#C2410C;text-decoration:underline;text-underline-offset:3px}
.m-link:hover{color:var(--carbon)}

/* The case opens on its own short band now that it comes after the projects. */

/* ---------- Grounds after the new section order: light and dark alternate again ---------- */
/* Servicios on a light ground; its three data sheets stay dark. */
.services{background:#E9EAE8;color:var(--carbon)}
.services .card{border-color:#2E3237}
/* Así trabajamos on the dark ground. */
.process{background:var(--ground);color:var(--white)}
.process .sec-label{color:var(--orange)}
.process .step p{color:#c9cbce}
.process .route-base{stroke:#ffffff2e}
.process .step-dot{border-color:#9a9ea4;background:var(--ground)}
.process .step.is-on .step-dot,html:not(.motion) .process .step-dot{background:var(--orange);border-color:var(--orange)}
/* Proyectos on the dark ground; the renders keep their light studio backdrop. */
.projects{background:var(--graphite);color:var(--white)}
.projects .rail-intro p,.projects .work p:not(.work-meta),.projects .work-meta{color:#c9cbce}
.projects .work-meta span:first-child{color:var(--orange)}
.projects .rail-end .btn{background:var(--white);color:var(--carbon)}
.services .card{color:var(--white)}
/* Two services now: product design (hourly) and CAD automations (closed price). */
@media (min-width:1101px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1180px}}
@media (max-height:560px) and (orientation:landscape) and (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Packs split around «Así trabajamos»: title, the four steps, then setup, packs and plans, on one dark run. */
.packs--head{padding-bottom:0}
.packs--head+.process{padding-top:10vh;padding-bottom:6vh}
.process+.packs--rest{padding-top:6vh}
.packs--rest .packs-list{margin-top:0}
/* The automations card shows its price, like the offer strip further down. */
.card-cost{font-size:15px;color:#c8c9cc}
.card-cost b{margin-right:6px;font-size:clamp(20px,1.6vw,26px);font-weight:700;letter-spacing:-.03em;color:var(--white)}
/* «Así trabajamos» now sits under the packs title: a smaller heading in orange. */
.process-head h2{font-size:clamp(30px,3.2vw,52px);color:var(--orange)}
/* The four steps follow the packs title straight away. */
.packs--head+.process{padding-top:9vh}
.process>.route:first-child{margin-top:0}
/* The code sheet's endless writing: result lines in orange, a cursor at the end of the line being typed. */
.sheet-art .code .ok{fill:var(--orange);font-weight:600}
.sheet-art .code .cur{fill:var(--orange)}

/* ---------- Extensions and monthly plans, compact: name, hours, the price as the largest figure, «Contratar» ---------- */
.packs--rest .pack:not(.pack--setup),.plan{gap:8px;padding:clamp(18px,1.6vw,24px)}
.packs--rest .pack:not(.pack--setup) .pack-tag{order:1}
.packs--rest .pack:not(.pack--setup) .pack-h{order:2;margin:0}
.packs--rest .pack:not(.pack--setup) .pack-price{order:3;margin:0;padding:0}
.packs--rest .pack:not(.pack--setup) .btn{order:4;margin-top:8px}
.plan .pack-tag{color:#C2410C;border-bottom-color:#14141426}
.plan .plan-price{margin:0;padding:0}
.plan .btn{margin-top:8px}
/* The hours read clearly, just below the name. */
:is(.packs--rest .pack:not(.pack--setup) .pack-h,.plan .plan-h){align-items:baseline;gap:7px;margin:4px 0 2px}
:is(.packs--rest .pack:not(.pack--setup) .pack-h,.plan .plan-h) b{font-size:clamp(24px,1.9vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--carbon)}
:is(.packs--rest .pack:not(.pack--setup) .pack-h,.plan .plan-h) span{font-size:17px;font-weight:600;color:var(--carbon)}
:is(.packs--rest .pack:not(.pack--setup),.plan) .pp-row b{font-size:clamp(34px,2.8vw,46px)}
/* Without a separate hours line, the name is the card's title. */
.packs--rest .pack:not(.pack--setup) .pack-tag,.plan .pack-tag{font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.02em;padding-bottom:14px}
/* Agenda on graphite: rounded bars that show how full each week is (the fuller, the less room), the % inside.
   The bar slides up from below the track, so its rounded top and its figure never stretch. */
.cap-chart{background:var(--graphite);border-color:var(--graphite)}
.cap-col{border:0;border-radius:10px;background:#ffffff0d}
.cap-busy{inset:auto 0 0;border-top:0;font-style:normal;border-radius:10px 10px 0 0;background:linear-gradient(to top,#FB6A3426,#FB6A3499);box-shadow:inset 0 2px 0 var(--orange);transform:translateY(101%);transition:transform .9s var(--ease)}
.cap-wk.low .cap-busy{background:linear-gradient(to top,#FB6A3426,#FB6A3499)}
.cap-weeks.is-filled .cap-busy{transform:none}
.cap-col .cap-busy b{left:0;right:0;top:8px;text-align:center;font-size:13px;font-weight:600;color:var(--white)}
.cap-legend i{border-radius:2px;background:linear-gradient(to top,#FB6A3426,#FB6A3499);box-shadow:inset 0 2px 0 var(--orange)}
/* Each column says it is a week: a small «Semana» over its date. */
.cap-lab{display:grid;gap:2px;color:var(--white);font-weight:600}
.cap-lab small{font-size:11.5px;font-weight:500;color:#9a9ea4}
/* The chart says what it shows: a title, the axis named «Semanas», and the live tag beside the legend. */
.cap-title{margin-right:auto;font:600 clamp(18px,1.4vw,22px)/1.2 var(--font);letter-spacing:-.02em;color:var(--white);text-transform:none}
.cap-axis{display:flex;align-items:center;gap:10px;font-size:13px;color:#9a9ea4}
.cap-axis::after{content:'';flex:1;height:1px;background:#ffffff2e}
.cap-legend{align-items:center}
.cap-legend .cap-tag{margin:0 0 0 auto;font-size:13px}
.cap-lab{font-size:14px}
@media (max-width:640px){.cap-title{flex-basis:100%}.cap-legend .cap-tag{margin-left:0}}
/* A long range («30 ago–3 sept») may take two lines; the weeks share their rows so the bars stay level. */
.cap-weeks{grid-template-rows:auto auto auto}
.cap-wk{grid-row:span 3;grid-template-rows:subgrid}
.cap-lab{white-space:normal;align-content:end}
/* The case opens with a real title, sized like «Proyectos entregados.». It overlaps the empty strip at the top of
   the drawing's stage (the header's height), so the step bar follows the title closely. */
.case-head{position:relative;z-index:1;padding:10vh var(--gutter) 0;margin-bottom:calc(36px - var(--chrome));background:var(--ground);color:var(--white)}
.motion .case-head{padding-right:calc(var(--gutter) + 92px)}
.case-head h2{font-size:clamp(46px,5.6vw,102px);letter-spacing:-.06em;line-height:.92}
@media (max-width:820px){.case-head{padding-top:7vh}.case-head h2{font-size:clamp(38px,11vw,60px)}}
/* Automations on graphite, like every other dark surface on the page (agenda, packs, project images): the terminal,
   the offer strip and the calculator's task bar. Black stays for titles, buttons and small tags. */
.term{background:var(--graphite);box-shadow:0 30px 70px #1414142b}
.term-bar{background:var(--ground)}
.term-body .c{color:#a3a9b0}
.au-offer{background:var(--graphite)}
.seg-task{background:var(--graphite)}
/* Section rhythm: one spacing scale instead of a different vh pair per section. --sec-y grows with width and height
   (74 px on a phone, ~140 px on a laptop, 152 px at most) and a section always has more room above its heading than
   below its last line. Blocks that belong to one topic (prices: title, steps, cards) join at a tighter interval. */
:root{--sec-y:clamp(64px,calc(6vw + 6svh),152px);--sec-end:calc(var(--sec-y) * .85);--sec-join:calc(var(--sec-y) * .45)}
.services,.cap,.auto,.close{padding-top:var(--sec-y);padding-bottom:var(--sec-end)}
.packs--head{padding-top:var(--sec-y)}
.packs--head+.process{padding-top:var(--sec-join);padding-bottom:calc(var(--sec-join) * .7)}
.process+.packs--rest{padding-top:calc(var(--sec-join) * .7);padding-bottom:var(--sec-end)}
.case-head{padding-top:var(--sec-y)}
/* Agenda and automations share one light ground (the services one); a drawn hairline marks where one ends. */
.cap{background:#E9EAE8}
.cap+.auto{position:relative}
.cap+.auto::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#14141424}
@media (max-width:820px){
  .quiet{padding-bottom:var(--sec-end)}
  .case-head{padding-top:var(--sec-y)}
}
/* Projects: the hours each one took, stamped on the picture, as a reference of how much work it was. */
.work-h{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:2px;background:#141414cc;color:#e6e7e8;font-size:13px;line-height:1.2}
.work-h b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--orange)}
@media (max-width:820px){.work-h{left:10px;bottom:10px;padding:6px 10px;font-size:12px}.work-h b{font-size:18px}}
/* Sent: the form gives way to its confirmation, in the same box. */
.form-done{display:none}
.idea-form.is-sent>:not(.form-done){display:none}
.idea-form.is-sent .form-done{display:grid;gap:14px;justify-items:start;padding:clamp(8px,2vw,24px) 0;outline:none}
.form-done svg{width:44px;height:44px;fill:none;stroke:#C2410C;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.form-done h3{font-size:clamp(26px,2.2vw,34px);letter-spacing:-.03em}
.form-done p{font-size:16px;line-height:1.5;color:var(--ink-soft);max-width:36ch;overflow-wrap:anywhere}
.form-done .btn{width:auto;margin-top:8px;color:var(--carbon);border-color:#14141459}
/* Over the full-width scenes (projects, case) the ruler shows only its marks, so its labels never sit on pictures or titles. */
.ruler.is-quiet li a span{opacity:0!important;transform:translateX(6px)!important}
.ruler.is-quiet a:is(:hover,:focus-visible) span{opacity:1!important;transform:none!important}
/* Review fixes. Narrow tablets (three cards side by side at 701–900 px): the extension names keep to one line. */
@media (min-width:701px) and (max-width:900px){
  .packs--rest .pack:not(.pack--setup) .pack-tag{font-size:18px;gap:6px}
  .packs--rest .pack:not(.pack--setup) .pack-tag .off{padding:3px 6px;font-size:11.5px}
}
/* Between 1024 and 1279 px the ruler sits tight against the content: marks only, names on hover. */
@media (min-width:1024px) and (max-width:1279px){.ruler li.is-active a span{opacity:0;transform:translateX(6px)}}
/* The current week's label reads at the same minimum size as the rest of the chart. */
.cap-lab small{font-size:12px}

/* Language switch: a quiet two-letter link beside «Precios», no underline so it reads as a toggle, not a section. */
.chrome-link.chrome-lang{border-bottom:0;font-size:13px;letter-spacing:.06em;opacity:.8;min-width:44px;justify-content:center}
.chrome-link.chrome-lang:hover,.chrome-link.chrome-lang:focus-visible{opacity:1}
@media (max-width: 380px){.chrome-actions{gap:10px}.chrome-link.chrome-lang{min-width:36px}}