/* ── S6 · "Tell us what takes too much time." — The moving world ──
   The panel stays still; the world moves. A macro-scale landscape of work (sheets,
   checklists, ledgers, routes) slides right → left behind the panel. Everything that
   passes under it comes out resolved: duplicates collapse, detours straighten, manual
   marks fold into one thread-violet route. In the world, orange marks only where a
   person had to step in; the button is the page's last orange, the visitor's decision.
   The canvas draws the world (JS). Reduced motion: one still frame. No JS (body.no-js,
   as index.html sets it): the plain overlay ground, the panel and the footer. */
:where(.s6),:where(.s6) *{box-sizing:border-box}
.s6{--body:clamp(16px,1.12vw,18px);--gutter:var(--page-inset);   /* the page grid's edge */
  --soft:rgb(var(--paper-rgb) / .8);   /* body + contact line: see the contrast pairs in the S6 report */
  position:relative;isolation:isolate;overflow:clip;max-width:2560px;margin:auto;padding:0;background:var(--overlay);color:var(--paper);
  font-family:var(--sans);font-size:var(--body);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
.s6 :is(h2,p){margin:0}
.s6 a:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

/* The stage: one screen. The world fills it; the panel sits on the left, calm. */
.s6 .s6-stage{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:clamp(88px,15vh,160px) 0}
.s6 .s6-world{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none}

/* The panel: the gate. What passes behind it reads as faint shapes. No backdrop blur: over a
   canvas that redraws every frame it failed the frame budget (S6 report), so the panel is
   opaque enough on its own. */
.s6 .s6-panel{position:relative;z-index:1;width:min(46vw,840px);margin-left:var(--gutter);
  padding:clamp(36px,3.6vw,64px) clamp(28px,3.4vw,60px) clamp(32px,3.2vw,56px);
  background:rgb(var(--overlay-rgb) / .9);border:1px solid rgb(var(--paper-rgb) / .12);
  box-shadow:0 40px 120px -40px rgb(0 0 0 / .8)}
/* A thread edge on the panel's left: where the route leaves it. */
.s6 .s6-panel::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--thread)}
.s6 h2{max-width:10.5em;font-size:clamp(38px,4.3vw,76px);line-height:1.02;letter-spacing:-.045em;font-weight:500;text-wrap:balance}
.s6 .s6-body{max-width:31em;margin-top:var(--space-2);font-size:clamp(16px,1.18vw,19px);color:var(--soft);text-wrap:pretty}
.s6 .s6-button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin-top:var(--space-3);padding:12px 28px;border-radius:3px;
  background:var(--orange);color:var(--ink);font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .2s}
.s6 .s6-button:hover{background:var(--paper)}
.s6 .s6-button:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:3px}
/* Contact: one quiet line under the button: the address, then WhatsApp as its glyph,
   centred on the address's line. */
.s6 .s6-contact{display:flex;align-items:center;flex-wrap:wrap;gap:0 .75em;margin-top:var(--space-2);font-size:.9em;color:var(--soft)}
.s6 .s6-contact a{color:var(--paper);white-space:nowrap;text-decoration:underline;text-decoration-color:rgb(var(--paper-rgb) / .35);text-underline-offset:.25em;transition:text-decoration-color .2s}
.s6 .s6-contact a:hover{text-decoration-color:currentColor}
/* The glyph is 20px; its padding makes a 44px target, and the margins give the room back, so the
   line keeps the address's height. It brightens on hover, as the address's rule does. */
.s6 .s6-contact .s6-wa{display:inline-flex;padding:12px;margin:-12px;color:var(--soft);text-decoration:none;transition:color .2s}
.s6 .s6-contact .s6-wa:hover{color:var(--paper)}
.s6 .s6-contact .s6-wa:focus-visible{outline-offset:-4px}
.s6 .s6-wa svg{display:block;width:20px;height:20px}

/* Footer: on the overlay, under the stage. One row on the page grid: the links from the
   left edge, the legal line on the right. */
.s6 .s6-end{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 32px;
  padding:var(--space-3) var(--gutter);border-top:1px solid rgb(var(--paper-rgb) / .12);font-size:.85em;color:rgb(var(--paper-rgb) / .72)}
.s6 .s6-nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px 32px}
.s6 .s6-nav a{color:inherit;text-decoration:none;transition:color .2s}
.s6 .s6-nav a:hover{color:var(--paper)}
.no-js .s6 .s6-world{display:none}

/* Short laptop screens: tighter panel so the world keeps its bands above and below. */
@media(min-width:768px) and (max-height:820px){
  .s6 .s6-stage{padding:72px 0}
  .s6 h2{font-size:clamp(36px,3.8vw,64px)}
}
/* Phones: the world takes the top of the screen, the panel sits under it. */
@media(max-width:767px){
  .s6 .s6-stage{flex-direction:column;align-items:stretch;justify-content:flex-end;padding:max(46svh,300px) var(--gutter) 24px}
  .no-js .s6 .s6-stage{min-height:0;padding-top:48px}
  .s6 .s6-panel{width:auto;margin:0;padding:32px 22px 28px}
  .s6 .s6-button{display:flex;width:100%}
  .s6 .s6-end{grid-template-columns:1fr;justify-items:start}
  .s6 .s6-nav{gap:8px 24px}
}
/* ── Phones: the ask arrives sooner, and every way in is a full tap ──────────────
   The moving world took the first 46% of the screen before the heading; 30% (never under
   200px) keeps it as the section's ground. The contact line is one row of 44px targets: the
   address, then WhatsApp's glyph in its own 44px box (the "·" is dropped). The footer links
   get 44px rows too. */
@media(max-width:767px){
  .s6 .s6-stage{padding-top:max(30svh,200px)}
  /* A native jump to #contact (no JS, or a fresh load before the script lands it) skips the world
     band to the panel, as the nav script does; with JS it also clears the fixed bar. */
  #contact{scroll-margin-top:calc(16px - max(30svh,200px))}
  body:not(.no-js) #contact{scroll-margin-top:calc(var(--bar) + 16px - max(30svh,200px))}
  .s6 .s6-contact{gap:0 4px;margin-top:var(--space-1)}
  .s6 .s6-contact a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
  .s6 .s6-sep{display:none}
  .s6 .s6-contact .s6-wa{margin:0}
  .s6 .s6-end{padding-block:16px}
  .s6 .s6-nav{gap:0 24px}
  .s6 .s6-nav a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
  /* No carry runs on a phone, so the scroll anchoring it needs off can come back (it keeps a
     /#section landing steady while the font swaps). */
  html{overflow-anchor:auto}
}
/* Without JS, keep a /#section landing steady while the font swaps (the carry, which needs
   scroll anchoring off, only runs with JS). */
html:has(> body.no-js){overflow-anchor:auto}
/* Section jumps focus the section itself; it is not a control, so no ring. */
:is(#example,#how-we-work,#about,#contact):focus{outline:none}