/* AxeliQ design tokens, 5 October 2026.
   The one place where colour, type, corner, translucency and motion-curve values are set. The other files refer to
   these names; a colour written anywhere else is a mistake. the style guide (a sandbox route) shows each token by reading this file live.
   Still written per component in layout.css: spacing between parts, card text sizes and some durations. */
:root{
  /* Colour primitives. Navy for ink and dark surfaces, a cool grey scale, one blue family built on Blue 600, and three
     status colours. Blue is light (D198, Zana, 14 October 2026: of Blue 500 #2D65DC, "i dont like that color, it looks
     ugly. but for particles, that is okay since it's gradient"): it is drawn (the drawings' strokes, rings round
     photographs), glows (the night's depth) or washes behind selected text. Blue 500 is retired. One blue is flat: Blue
     700, the accent (D214; Zana, 19 October 2026, of the blue that buttons turn when pointed at: "you dont have to
     use exactly the same shade of blue but make it very close, and aligned with axeliq family color so it is not
     random"). It is the Prussian's hue at the depth and strength of the sampled #1C19B5 (OKLCH .374 .226 at 267.8°,
     the sample at 268.8°), so it reads as the night's blue lit up. */
  --c-navy-950:#050E1A;
  --c-navy-900:#08182B;
  --c-navy-800:#0E223A;
  --c-navy-700:#11294A;
  --c-grey-50:#F6F7F8;                   /* D198: the lightest panel, alternate rows */
  --c-grey-100:#EEEFF1;
  --c-grey-200:#DDDFE2;
  --c-grey-300:#C2C5CA;
  --c-grey-400:#7F848B;
  --c-grey-500:#6E737B;                  /* D198: disabled text, placeholders */
  --c-grey-600:#5F656D;
  --c-grey-700:#454A52;
  --c-grey-800:#2E3238;                  /* D198: secondary ink on grey panels */
  --c-blue-100:#E8EEFC;                  /* the palest wash */
  --c-blue-200:#C9D6F6;                  /* behind selected text */
  --c-blue-300:#9DB4FF;                  /* the drawings' light, on white and on dark (was #8AABE8 and the engines' #9FB3EC) */
  --c-blue-400:#3F66D8;                  /* the drawings' middle */
  --c-blue-600:#1B50C4;                  /* set by Zana, 5 October: the drawings' strongest stroke; the family follows its hue */
  --c-blue-700:#181BB5;                  /* the accent (D214), flat, on light grounds only: 11.3:1 on white */
  --c-blue-800:#12317F;                  /* the deepest drawn line */
  --c-glow:#2F5BFF;                      /* the night's light, at low strength only (--depth-prussian) */
  --c-error:#B42330;
  --c-error-tint:#FBEBEC;
  --c-success:#1C7250;
  --c-success-tint:#E5F2EB;
  --c-caution:#8A5B0B;
  --c-caution-tint:#FBF0DC;
  --c-prussian:#071033;                  /* Prussian blue: the growth test's night, chosen by Zana for the mesh card, 5 October */
  --c-white:#FFFFFF;

  /* Colour roles. Components use these, not the primitives. */
  --text:var(--c-navy-900);              /* headings, paragraphs */
  --text-2:var(--c-grey-700);            /* small text on images and cards */
  --text-3:var(--c-grey-600);            /* section labels, captions, keywords, footer links */
  --text-4:var(--c-grey-400);            /* quiet text at 24px and larger only */
  --text-inverse:var(--c-white);
  --text-inverse-2:rgba(255,255,255,.6);
  --surface:var(--c-white);
  --surface-1:var(--c-grey-50);          /* the lightest panel: the sheets' figures (D216) */
  --surface-2:var(--c-grey-100);         /* light cards and chips on white */
  --surface-dark:var(--c-navy-900);
  --surface-dark-2:var(--c-navy-800);
  --surface-dark-3:var(--c-navy-700);
  --surface-deep:var(--c-navy-950);      /* dark sections */
  --surface-prussian:var(--c-prussian);  /* the curiosity card behind the mesh */
  --hairline:var(--c-grey-100);          /* rules on white */
  --border:var(--c-grey-200);            /* field underlines, quiet outlines */
  --divider:var(--c-grey-300);           /* stronger rules; list numbers, which are decorative */
  --indicator:var(--c-grey-400);         /* inactive map tab dots */
  --hairline-inverse:rgba(255,255,255,.1);
  --border-inverse:rgba(255,255,255,.2);
  --line-art:rgba(255,255,255,.7);       /* thin drawings on dark tiles */
  /* the interface's states: pointed at, open, selected and current take the accent, Blue 700 (D214), with the motion
     each part already has, as do words and figures picked out in a text; on dark, white (D198) */
  --accent:var(--c-blue-700);
  --accent-hover:var(--c-navy-950);
  --accent-inverse:var(--c-white);       /* the accent on navy */
  --focus:var(--c-navy-900);
  --focus-inverse:var(--c-white);
  --selection:var(--c-blue-200);         /* behind selected text, the text in ink */
  --line-drawn:var(--c-blue-600);        /* rings and lines drawn on white: the drawings' blue */
  --line-mid:color-mix(in srgb,var(--c-navy-900) 52%,transparent);   /* a figure's field of ticks: the ink at half (D216) */
  --line-faint:color-mix(in srgb,var(--c-navy-900) 22%,transparent); /* a figure's quiet ticks: the ink at a fifth (D216) */
  /* D236: a card drawn on the night (a sheet's way on): the drawings' light at two fifths, 2.45:1 on the Prussian, a
     boundary only, the card's words say what it is; white when it is pointed at or focused, as states on dark are; and
     inside it then, where it has no picture of where it leads, the same light at about the strength of the depth's wash */
  --line-night:color-mix(in srgb,var(--c-blue-300) 40%,transparent);
  --line-night-active:var(--accent-inverse);
  --plate-night:color-mix(in srgb,var(--c-blue-300) 8%,transparent);
  --tab-night:color-mix(in srgb,var(--c-blue-300) 9%,var(--c-prussian));        /* D260: a folder tab not chosen, solid on the night */
  --tab-night-hover:color-mix(in srgb,var(--c-blue-300) 17%,var(--c-prussian));  /* the same, pointed at */
  --error:var(--c-error);
  --error-tint:var(--c-error-tint);
  --success:var(--c-success);
  --success-tint:var(--c-success-tint);
  --caution:var(--c-caution);
  --caution-tint:var(--c-caution-tint);

  /* Translucency. One glass for every control over film and photos: navy, chosen by Zana on 5 October. */
  --glass:rgba(5,14,26,.57);             /* nav button, film control, hero buttons, team card button; white labels stay above 4.5:1 (4.6:1 over white) */
  --glass-hover:rgba(5,14,26,.72);
  --panel:rgba(5,14,26,.62);             /* cards over the film */
  --panel-hover:rgba(5,14,26,.9);
  --panel-on-dark:rgba(14,34,58,.6);     /* cards over the map */
  --panel-deep:rgba(5,14,26,.8);         /* the footer menu's card (D147): dark glass with no outline, 80% */
  /* (D237: --panel-light, --edge-light and --lift-light, the light glass, its edge drawn as a shadow and its lift, went
     with the ecosystem's glass topic cards, their only use; nothing on white is glass) */
  --scrim:rgba(5,14,26,.6);              /* behind dialogs and the menu, image shading */
  /* Over a full-bleed photograph with text: lighter in the middle, at least 84% navy at the foot, so 60% white text
     at 14px holds 4.5:1 over any photograph (the sector stage) */
  --shade-stage:linear-gradient(180deg,rgba(5,14,26,.6),rgba(5,14,26,.32) 40%,rgba(5,14,26,.62) 66%,rgba(5,14,26,.84) 82%,rgba(5,14,26,.86));
  /* Over a photograph with names on its left (the sectors' image scroll, D200): darker behind the names, light over the
     rest, so the photograph reads clean: 45% navy at the left edge, 15% from seven tenths of the width */
  --shade-side:linear-gradient(90deg,rgba(5,14,26,.45),rgba(5,14,26,.15) 70%);
  /* Behind white words on the paler photographs of that scroll (the speaker's wall, the turbines, the silver racks):
     a soft halo of the night around the letters, so they hold 3:1 where the shade above is light (25 October 2026) */
  --shade-words:0 0 .5em rgba(5,14,26,.72);
  /* Over a photograph with a large white name at its foot and left (a sheet's next topic, D224): dark enough behind the
     name over the brightest of his photographs, the rest of the photograph left light */
  --shade-band:linear-gradient(90deg,rgba(5,14,26,.8),rgba(5,14,26,.42) 55%,rgba(5,14,26,.18)),linear-gradient(0deg,rgba(5,14,26,.5),rgba(5,14,26,0) 60%);
  --neighbour-opacity:.3;                /* a carousel's neighbouring titles, waiting at the edges */
  --tint:rgba(8,24,43,.05);              /* quiet fill on white */
  --tint-2:rgba(8,24,43,.1);             /* watermark */
  --tint-inverse:rgba(255,255,255,.14);  /* quiet fill on dark: the open-button's square on the night */
  /* D236: over the picture of where a card on the night leads, under its words: the night at 78%, so white holds 9.5:1
     over the brightest of the photographs */
  --shade-card:color-mix(in srgb,var(--surface-prussian) 78%,transparent);
  --blur-glass:blur(18px) saturate(1.25);
  --blur-panel:blur(20px);
  --blur-scrim:blur(6px);                /* the page softened behind a dialog or the menu */
  /* The growth test's band depth over Prussian blue: a pale wash from the top, blue light from the top right and the
     bottom left, as copied with the mesh */
  --depth-prussian:linear-gradient(180deg,color-mix(in srgb,var(--c-blue-300) 7%,transparent),color-mix(in srgb,var(--c-blue-300) 0%,transparent) 32%),radial-gradient(60% 90% at 100% 0%,color-mix(in srgb,var(--c-glow) 22%,transparent),transparent 64%),radial-gradient(50% 70% at 0% 100%,color-mix(in srgb,var(--c-blue-600) 16%,transparent),transparent 62%);

  /* Lines and icons: one drawing language, taken from the hero intro's ring (icons in public/icons.svg) */
  --stroke-hair:1px;                     /* rules, rings, tile drawings, the two menu lines */
  --stroke-icon:1.5px;                   /* icons and ticks, at any icon size */
  --stroke-accent:2px;                   /* the short segment that ends in a dot */

  /* Shape: rounded rectangles at four sizes, one capsule, and circles. No shadows; edges are hairlines. */
  --r-sheet:1.25rem;                     /* 20px: the white sheet over the hero, the menu drawer */
  --r-card:.5rem;                        /* 8px: cards, frames, buttons */
  --r-card-hover:1rem;                   /* 16px: hero and map cards round further on hover */
  --r-chip:.375rem;                      /* 6px: chips, tags, small tiles */
  --r-inset:.25rem;                      /* 4px: an image inside a card */
  --r-round:50%;
  --r-pill:100rem;                       /* the tag's capsule (D225: Zana, 20 October 2026, from his reference pill); .tag alone uses it */

  /* Type: TWK Everett. Light for paragraphs at 16px and larger; Regular for titles, labels and smaller text.
     Sizes are in rem on the fluid root (16px at 1440 wide, 18px above 1920, about 15px on a phone). */
  --font:'TWK Everett','Helvetica Neue',Arial,sans-serif;
  --w-regular:400;
  --w-light:300;
  --fs-display:3.875rem;  --lh-display:.98;   --ls-display:-.04em;    /* section titles */
  --fs-statement:2rem;    --lh-statement:1.18; --ls-statement:-.02em; /* text-only statements */
  --fs-title-m:1.875rem;  --lh-title-m:1.2;   --ls-title-m:-.02em;    /* list, accordion and work titles */
  --fs-title-s:1.25rem;   --lh-title-s:1.2;   --ls-title-s:-.015em;   /* subheads in dialogs; accordion titles on phones */
  --fs-body:1rem;         --lh-body:1.5;      --ls-body:0;
  --fs-body-s:.875rem;    --lh-body-s:1.45;
  --fs-kicker:.875rem;    --lh-kicker:1.4;                             /* section labels, sentence case */
  --fs-caption:.75rem;    --lh-caption:1.5;
  --fs-chip:.75rem;       --lh-chip:1.2;
  --fs-label:max(.66rem,10.5px); --lh-label:1.2; --ls-label:.15em;     /* capitals: buttons, map tabs and status */
  --fs-number:1.25rem;
  --measure-statement:47.2rem;                                         /* about 46 characters a line */

  /* Spacing scale for new components. Existing sections keep the template's spacing in layout.css. */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:5rem; --s-9:8rem;
  /* The menu button's distance from the top of the window and its height (layout.css); the menu drawer lines up with it */
  --nav-top:1.15rem; --nav-h:1.92rem;
  /* A section's rhythm, as the accordion keeps it in layout.css: from the intro to the content (4rem on phones), and
     between two columns */
  --gap-intro:6rem; --gap-intro-s:4rem; --gap-columns:4rem;
  --measure-body:28rem;                                                /* a paragraph beside a drawing or an image */
  --measure-text:36rem;                                                /* body text in a column: about 70 characters a line (D215) */
  --way-card-min:14rem;                                                /* D236: a row of cards beside the next topic, at least */
  --way-equal-min:10rem;                                               /* D236: a card among equals, at least */
  /* D237: focus and targets, in pixels so they hold on every size of the fluid root (at .125rem the focus ring fell to
     a pixel on every screen under 1440 wide) */
  --focus-width:2px;                     /* D237: the focus outline's weight, on every surface */
  --focus-offset:4px;                    /* D237: the focus outline's distance from the control */
  --target-min:24px;                     /* D237: a control's least target, the extra area transparent */
  --target-touch:44px;                   /* D237: the same on a coarse pointer and under 768px wide */
  /* D237: the ecosystem's drawing on white (vision.js reads these). Its joined field strokes are the field step and a
     hairline long; ticks closer on screen than the crowding multiple times the tick fade with how close they stand */
  --eco-field-strength:.75;              /* D237: the field's lines against the platforms' full strength */
  --eco-field-far-strength:.06;          /* D237: the field at the loops' far sides, before the line strength */
  --eco-layer-back-strength:.6;          /* D237: a platform's back against its front, as the view tilts it away */
  --eco-crowding-multiple:2;             /* D237: the crowding distance, in ticks (--stroke-icon) */
  --eco-crowding-min-strength:1;       /* D237: the least strength crowded ticks fade to */
  --eco-field-step:8px;                  /* D237: the field's lines sampled every so many pixels */

  /* Motion. The curves and timings of the motion approved on 5 October, each named
     for its job. src/scripts/motion.js reads the named motions; CSS uses them, e.g. transition:transform var(--motion-respond).
     A new component picks a named motion; a new curve or timing is a design decision, not a fix.
     New motion animates only transform, opacity or clip-path, so the browser moves pixels without recalculating the page.
     Three inherited animations still change size (the What we do and Working together photo frames, and the accordion
     panel opening); the line drawings and the film ring trace a stroke, which repaints it. README explains why. */
  --ease-arrive:cubic-bezier(.19,1,.22,1);      /* arriving: fast start, long settle */
  --ease-move:cubic-bezier(.77,0,.175,1);       /* drawing, opening, the menu sliding in */
  --ease-slide:cubic-bezier(.455,.03,.515,.955);/* panels sliding into place together */
  --ease-respond:cubic-bezier(.165,.84,.44,1);  /* answering a hover or a press */
  --ease-hover:cubic-bezier(.25,.46,.45,.94);   /* cards answering the pointer */
  --ease-snap:cubic-bezier(1,0,0,1);            /* copy settling under a title; work chips parting */
  --ease-trace:cubic-bezier(.33,0,.2,1);        /* line drawings tracing in */
  /* the fast in-out curve (D148), sampled from its path: half the way in the first fifth, nine tenths by a third,
     then a long settle. The vision section's titles gliding to the next item */
  --ease-glide:linear(0,0.007 2%,0.018 4%,0.034 6%,0.057 8%,0.091 10%,0.140 12%,0.212 14%,0.305 16%,0.403 18%,0.497 20%,0.582 22%,0.657 24%,0.720 26%,0.774 28%,0.817 30%,0.851 32%,0.876 34%,0.896 36%,0.918 38%,0.936 40%,0.961 45%,0.974 50%,0.982 55%,0.988 60%,0.991 65%,0.994 70%,0.996 75%,0.998 80%,0.999 85%,1.000 90%,1.000 95%,1);
  --motion-rise:2s var(--ease-arrive);          /* text arriving: up 3rem, fading in over .5s */
  --motion-lift:.8s var(--ease-slide);          /* cards, panels and labels sliding into place */
  --motion-swap:.9s var(--ease-arrive);         /* cards changing in a feed */
  --motion-draw:2s var(--ease-move);            /* rules drawing across */
  --motion-trace:4s var(--ease-trace);          /* line drawings tracing in */
  --motion-open:2s var(--ease-move);            /* images and frames opening */
  --motion-settle:2.5s var(--ease-arrive);      /* a photo easing from 1.1 to 1 */
  --d-respond:.35s;
  --motion-respond:var(--d-respond) var(--ease-respond); /* hover and press: labels fading, the menu button's logo */
  --motion-nudge:.6s var(--ease-arrive);        /* small controls answering: arrows stepping forward, the plus turning */
  --motion-hover:.25s var(--ease-hover);        /* a card answering the pointer */
  --d-page:.75s;                                /* how long the menu takes to slide in over the page */
  --motion-page:var(--d-page) var(--ease-move); /* the menu sliding in over the page, the scrim fading in behind it */
  /* The footer menu (D147): the menu opening, at Zana's request of 8 October 2026, on its own curves, which
     are move and respond (GSAP's power3). At the page's end the card grows from its foot, and its label and button fade
     in .3s later; its links rise into place, .02s apart. As the page leaves its end the words fold away while the card
     shrinks on unfold. */
  --motion-unfold:.5s var(--ease-move);
  --motion-unfold-links:.8s var(--ease-move);
  --motion-fold:.5s var(--ease-respond);
  /* The vision section (D148): the row of titles, at Zana's request of 8 October 2026. Its row of titles
     glides to the next item; its lines and labels rise out of their masks, on the arrive curve, which is its expo out */
  --motion-glide:1.2s var(--ease-glide);
  --motion-reveal:1.1s var(--ease-arrive);
  /* Following: a value that moves part of the way to its target every moment, so it eases in behind whatever it
     follows. Each time below covers about two thirds of the remaining distance. The template moved a fixed share per
     frame, so it ran faster on 120 Hz screens; these are its 60 Hz speeds, the same on every screen. */
  --follow-pointer:.158s;                       /* the team photo following the pointer (a tenth per frame) */
  --follow-pointer-slow:.2s;                    /* the map, which is larger (8% per frame) */
  --follow-scroll:.058s;                        /* the hero film, its shade and the intro text trailing the scroll (a quarter per frame) */
  --d-quick:.3s;                                /* colour changes on buttons */
  --d-ticks:1.4s;                               /* a ring of ticks drawing in, as the loader's draw phase (intro.js T.draw) */
  /* D237: the ecosystem's own timings (vision.js reads them) */
  --d-eco-lines:1.2s;                           /* D237: a topic's two field lines drawing out of the stack */
  /* The footer reveal (Motion UI, D145): as the page lifts off the footer, the footer grows from this size, fades in
     and sharpens from the scrim blur, over its own height of scrolling; the scroll drives it, so it has no duration */
  --reveal-scale:.9;

  /* Muted text reaches full strength in this theme (read by src/scripts/motion.js) */
  --muted-opacity:1;
}
/* Smaller screens: the same roles at the sizes layout.css uses for its headings */
@media (max-width:767px){:root{--fs-display:3rem;--fs-title-m:1.8rem;--fs-statement:1.6rem}}
@media (max-width:479px){:root{--fs-display:2.4rem;--fs-statement:1.45rem}}

/* The fluid root. 18px at 1920 and above, 16px at 1440, about 15.3px on a 390px phone. Every size below is in rem, so type, spacing and cards scale together. */
html{font-size:1.125rem}
@media screen and (max-width:1920px){html{font-size:calc(.625rem + .41666666666666674vw)}}
@media screen and (max-width:1440px){html{font-size:calc(.8126951092611863rem + .20811654526534862vw)}}
@media screen and (max-width:479px){html{font-size:calc(.7494769874476988rem + .8368200836820083vw)}}

/* Side margin and the template's grey names; the theme points the names at tokens.css, which also holds the motion curves */
:root{--gs:1.375rem;--dark:#1c1c1c;--grey-100:#e5e4e4;--grey-200:#bfbfbf;--grey-300:#666;--grey-400:#8d8d8d}
@media (max-width:767px){:root{--gs:1.25rem}}
@media (max-width:479px){:root{--gs:1rem}}
/* D277: the page stops growing at 1920, where the type stops. A wider window shows the 1920 layout centred: --gx, the
   sections' side margin, takes the rest, so backgrounds and full-bleed photographs still fill the window. --gs stays
   the window's own margin, for what stands at the window's edge (the home page's hero, the menu button: Zana,
   2 November 2026, "the home page hero should not have any max") and for every margin at a top or a foot. --page is the
   window's width up to the limit, for what is sized from the window */
:root{--page-max:1920px;--page:min(100vw,var(--page-max));--gx:max(var(--gs),calc((100vw - var(--page-max)) / 2 + var(--gs)))}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--dark);color:#000;font-family:var(--font);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;transition:background-color 0s}
body.has-dialog{overflow:hidden;overflow:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
p,h1,h2,h3,h4{margin:0}
h1,h2,h3,h4{font-weight:400}
[hidden]{display:none!important}
/* D237: the focus ring in pixels (--focus-width, --focus-offset), so it never falls to a pixel under 1440 wide */
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
::selection{background:var(--accent);color:#fff}
.skip-link{position:fixed;top:.5rem;left:.5rem;z-index:1000;background:#fff;color:#000;padding:var(--s-3);transform:translateY(-150%)}
.skip-link:focus{transform:none}
main[tabindex="-1"]:focus,section[tabindex="-1"]:focus{outline:none}
.feed-slide:focus-visible{outline:none}
.home-hero_feed-item:has(.feed-slide:focus-visible){outline:var(--focus-width) solid var(--focus);outline-offset:2px}
.text-size-regular{text-wrap:pretty}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Type */
.heading-style-h2{font-size:3.875rem;font-weight:300;line-height:.95;letter-spacing:-.025em}
.heading-style-h2.is-weight-regular{font-weight:400}
.heading-style-h3{font-size:2.25rem;font-weight:400;line-height:1.1;letter-spacing:-.02em}
.heading-style-h4{font-size:1.875rem;font-weight:400;line-height:1.2;letter-spacing:-.02em}
.text-size-small{font-size:.875rem;letter-spacing:.01em}
.text-size-regular{font-size:1rem;line-height:1.3}
.text-style-muted{opacity:.6}
.animated-underline{position:relative}
.animated-underline::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease-in-out}
.animated-underline:hover::after{transform:scaleX(1)}

/* Spacing */
.padding-global{padding-left:var(--gx);padding-right:var(--gx)}
.padding-section-xlarge{padding:12rem 0}
.spacer-medium{padding-top:var(--s-6)}

/* Grain: moving noise at 4.5% */
.is-grain{pointer-events:none}
.is-grain::after{content:'';position:absolute;inset:0;background-image:url('/media/grain.png');background-repeat:repeat;opacity:.045;animation:noise .25s infinite}
@keyframes noise{0%{background-position:0 0}5%{background-position:5% 2%}10%{background-position:-5% -10%}15%{background-position:-3% 10%}20%{background-position:-10% 5%}25%{background-position:8% -8%}30%{background-position:7% -25%}35%{background-position:-6% 15%}40%{background-position:-20% 20%}45%{background-position:10% -10%}50%{background-position:15% -15%}55%{background-position:0 7%}60%{background-position:0 15%}65%{background-position:-8% 0}70%{background-position:-25% 10%}75%{background-position:5% 5%}80%{background-position:20% 0}85%{background-position:-10% 8%}90%{background-position:10% 5%}95%{background-position:15% 0}100%{background-position:0 0}}

/* Page loader */
.page-loader{position:fixed;inset:0;z-index:999;background:var(--dark);pointer-events:none}
html:not(.js) .page-loader,html.reduce .page-loader{display:none}

/* The page. The menu floats over it (menu.css). */
.main-wrapper{position:relative;background:#fff}

/* Nav button: since D231 the pill holds two controls, the wordmark (a link home) and the menu button, each taking its
   part of the pill's height and padding, so the whole pill is one or the other to the pointer. The wordmark is as tall
   as the name it replaced was in type (.95rem Everett: 11px at 1440, 46px wide), and as wide. */
.nav-button{position:fixed;top:0;right:0;z-index:98;display:flex;align-items:stretch;height:var(--nav-h);margin:var(--nav-top) var(--gs) 0 0;border-radius:.5rem;overflow:hidden;color:#fff}
.nav-button_background{position:absolute;inset:0;background:#000;opacity:.76;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:opacity var(--motion-respond)}
.nav-button_selection{position:absolute;z-index:1;top:0;bottom:0;right:.35rem;width:3rem;height:1.4rem;margin:auto 0;border-radius:.3rem;background:#000}
.nav-button_logo{position:relative;z-index:2;display:flex;align-items:center;padding:0 var(--s-2) 0 .8rem;color:inherit;text-decoration:none}
.nav-button_wordmark{display:block;width:auto;height:.69rem;transition:transform var(--motion-respond)}
.nav-button_menu{position:relative;z-index:2;display:flex;align-items:center;margin:0;padding:0 var(--s-4) 0 var(--s-2);border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.nav-button_burger{position:relative;z-index:2;display:flex;flex-direction:column;gap:.4rem}
.nav-button_burger i{display:block;width:1.8rem;height:1px;background:#fff;transition:transform var(--motion-page)}
.nav-button:hover .nav-button_background{opacity:.55}
.nav-button_logo:hover .nav-button_wordmark{transform:translateX(-.1rem)}
body.menu-open .nav-button_burger i:first-child{transform:translateY(calc(.2rem + .5px))}
body.menu-open .nav-button_burger i:last-child{transform:translateY(calc(-.2rem - .5px))}

/* Hero */
.section_home-hero{position:relative;background:var(--dark)}
/* The hero stays pinned on desktop while the white sheet slides over it */
@media (min-width:992px){.section_home-hero{position:sticky;top:0}}
.home-hero_component{position:relative;display:flex;justify-content:space-between;align-items:flex-end;width:100%;height:100vh;overflow:hidden;color:#fff}
.home-hero_video-element{position:absolute;inset:0 0 auto;width:100%;height:100%;will-change:transform}
.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{display:none;background:linear-gradient(#000,#0000 25vh);opacity:.3}
.hero_dark-overlay{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.home-hero_middle{position:absolute;bottom:25rem;left:0;width:100%;padding:0 var(--gs);z-index:1}
.home-hero_middle-text{max-width:18rem;margin-top:var(--s-4);font-family:var(--font);font-size:.95rem;line-height:1.35;letter-spacing:.01rem;color:#fff}
.film-control{position:absolute;left:var(--gs);top:1.15rem;z-index:3;display:flex;align-items:center;gap:.6rem;height:1.92rem;padding:0 .85rem;border-radius:.5rem;background:#0000004d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;font-size:.7rem;letter-spacing:.02em}
.film-icon{font-size:.6rem}

/* Hero feed */
.home-hero_feed{position:absolute;z-index:1;right:var(--gs);bottom:var(--gs);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 2.3rem auto;grid-template-areas:"top top" "btns right" "tile right";gap:.8rem;width:30rem}
.home-hero_feed-item{position:relative;overflow:hidden;border-radius:.5rem;background:#0009;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;transition:background-color .25s,border-radius .25s;perspective:1200px}
.home-hero_feed-item.top-swiper{grid-area:top;aspect-ratio:2.5}
.home-hero_feed-item.bottom-swiper{grid-area:right;aspect-ratio:1;align-self:start}
.home-hero_feed-item.is-bottom{grid-area:tile}
.feed_button{flex:1;display:flex;align-items:center;justify-content:center;border-radius:5rem;background:#fff3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#fff;font-size:.95rem;line-height:1;transition:background-color .3s}
.feed_button:hover{background:#ffffff59}
.feed-slide{position:absolute;inset:0;display:block;opacity:.1;transform:translate3d(0,125%,-500px) scale(1.1);transition:transform var(--motion-swap),opacity var(--motion-swap);backface-visibility:hidden}
.feed-slide.is-active{opacity:1;transform:none}
.feed-slide.is-prev{transform:translate3d(0,-125%,-500px) scale(1.1)}
.feed-slide.no-tr{transition:none}
.feed-slide_wrapper{display:flex;gap:var(--s-4);height:100%;padding:.6rem}
.feed-slide_image{flex:0 1 50%;min-width:0;height:100%;overflow:hidden;border-radius:.2rem;transition:border-radius .25s,transform var(--motion-hover)}
.feed-slide_image img,.feed-slide_inner img{width:100%;height:100%;object-fit:cover;max-width:none}
.feed-slide_text{display:flex;flex-direction:column;gap:.6rem;flex:1 1 0;padding:.35rem .1rem}
.feed-slide_headline,.feed-slide_title{position:relative;display:flex;justify-content:space-between;gap:var(--s-2);font-size:.85rem;line-height:1.25}
.feed-slide_title{font-size:1rem;font-weight:500}
.feed-arrow{flex:none;font-size:1rem;line-height:1;margin-top:-.15rem;transition:transform .5s var(--ease-arrive)}
.feed-slide_body{max-width:14rem;font-size:1rem;line-height:1.25;opacity:.75;transition:opacity .2s}
.feed-slide_inner{position:absolute;inset:.6rem;display:flex;align-items:flex-end;padding:.65rem;overflow:hidden;border-radius:.2rem;transition:border-radius .25s,transform var(--motion-hover)}
.feed-slide_inner img{position:absolute;inset:0}
.feed-slide_inner::after{content:'';position:absolute;inset:0;background:linear-gradient(#0000 45%,#0000008c)}
.feed-slide_inner .feed-slide_title{z-index:1;width:100%}
@media (min-width:992px){
  .home-hero_feed-item:hover{background:#000000e6;border-radius:1rem}
  .home-hero_feed-item:hover .feed-slide_image,.home-hero_feed-item:hover .feed-slide_inner{border-radius:.5rem;transform:scale(.98)}
  .home-hero_feed-item:hover .feed-slide_body{opacity:1}
  .home-hero_feed-item:hover .feed-arrow{transform:translate(.15rem,-.15rem)}
}

/* Intro: a white sheet over the hero */
.section_home-intro{position:relative;z-index:3;margin-top:calc(-1 * var(--s-2));background:#fff;border-radius:.5rem .5rem 0 0}
.home-intro_text{width:47.2rem;max-width:100%;will-change:transform}

/* Section intros: rule, small label, typed heading */
.intro_component{position:relative;z-index:1;display:flex;flex-direction:column}
.divider_horizontal{width:100%;height:1px;background:var(--grey-200)}
.divider_horizontal.is-grey300{background:var(--grey-300)}
.divider_horizontal.is-home-team{background:var(--text);opacity:.25}
.intro_text{display:flex;flex-direction:column;gap:var(--s-4);padding-top:var(--s-1);overflow:visible;clip-path:inset(0 -1rem -1rem -1rem)}
.intro_text.is-flex-horizontal{flex-direction:row;justify-content:space-between}
.intro_text.is-home-team{flex-direction:row;justify-content:space-between;margin-bottom:var(--s-3)}
.text-size-small.is-home-team{opacity:.6;color:#102227}

/* What we do */
.section_home-list{position:relative;z-index:1;background:#fff}
.home-list_component{display:flex;flex-direction:column}
.home-list_wrapper{display:flex;justify-content:space-between;gap:4rem;padding:var(--s-4) 0;border-top:1px solid var(--grey-100)}
.home-list_first-wrapper{display:flex;gap:var(--s-7)}
.home-list_second-wrapper{display:flex;gap:var(--s-5);flex:0 1 60%;min-width:0}
.home-list_number{width:1.75rem;flex:none}
.home-list_number-text{padding-bottom:var(--s-1);font-size:1.25rem;color:var(--grey-200)}
.home-list_text{display:flex;flex-direction:column;gap:var(--s-6);width:40rem;max-width:20rem}
/* The row's tags: the work section's tags (Zana, 12 October 2026), in place of a line of keywords */
.home-list_image{width:calc(var(--page) * .3);height:calc(var(--page) * .2);object-fit:cover;object-position:24% 50%;border-radius:.5rem}
@media screen and (min-width:992px){.home-list_wrapper{height:calc(var(--page) * .2 + 2rem)}}
/* On wide screens a title may run past the paragraph's measure into the room before the photograph, so a two-word
   title such as "Established businesses" stays on one line (Zana's copy, 12 October 2026) */
@media screen and (min-width:992px){.home-list_text .heading-style-h4{width:max-content;max-width:30rem}}

/* Where we work */
.section_map{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--s-4);height:100vh;min-height:42rem;padding-top:var(--s-7);overflow:hidden;color:#fff}
.section_map > .padding-global{position:relative;z-index:1}
/* The image sphere (D163, Zana, 12 October 2026). On wide screens it lies under the title as a layer of its own, the
   card and the caption over it; home.js sizes it to the section's height below the title and keeps it clear of the
   card. Narrower, it sits in the flow between the title and the card, as wide as the column allows. image-sphere.js
   places the photographs and the ring round the one at the front. Without script it is not shown. These rules are kept
   to the section (and the style guide's sample), so the sandbox's own spheres on /orbs and /mesh-concepts keep theirs. */
.map_component{position:relative;z-index:0;width:100%;flex:none}
.section_map .isph{position:relative;width:min(78%,28rem);aspect-ratio:1;margin:0 auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
@media (min-width:992px){
  .map_component{position:absolute;inset:0}
  .section_map .isph{position:absolute;width:auto;margin:0;aspect-ratio:auto}
}
html:not(.js) .section_map .isph{display:none}
.section_map .isph.is-dragging,.section_map .isph.is-dragging .isph_item{cursor:grabbing}
.section_map .isph_item{position:absolute;left:50%;top:50%;width:var(--isph-d,6rem);height:var(--isph-d,6rem);margin:calc(var(--isph-d,6rem) / -2) 0 0 calc(var(--isph-d,6rem) / -2);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;will-change:transform,opacity}
:is(.section_map,.sg-isph) .isph_face{position:relative;display:block;width:100%;height:100%;border-radius:50%;overflow:hidden}
:is(.section_map,.sg-isph) .isph_face img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
:is(.section_map,.sg-isph) .isph_ring{position:absolute;left:50%;top:50%;z-index:1000;width:var(--ring-d,8rem);height:var(--ring-d,8rem);max-width:none;margin:calc(var(--ring-d,8rem) / -2) 0 0 calc(var(--ring-d,8rem) / -2);overflow:visible;pointer-events:none}
.map_feed{position:absolute;z-index:2;left:var(--gx);bottom:var(--gs);display:flex;flex-direction:column;gap:.8rem;width:calc(var(--page) * .25);min-width:30rem;max-width:40rem}
.map_card{position:relative;overflow:hidden;aspect-ratio:1.2;border-radius:.5rem;perspective:1200px;transition:background-color .25s,border-radius .25s}
/* The card is twice its old height (Zana, 12 October 2026): the photograph across the top, the words under it */
.map_caption{position:absolute;z-index:2;right:var(--gx);bottom:var(--gs);max-width:24rem;font-size:.75rem;text-align:right}

/* Working together: accordion with a stacked image column */
/* An answer in two columns, each a small title in capitals over its lines (D169, after Zana's reference) */

/* Selected work */
.home-work_block:not(.is-wide) .home-work_bottom{grid-template-columns:1fr;row-gap:1.25rem}
.home-work_block:not(.is-wide) .home-work_bottom-text{order:2}
.home-work_block:not(.is-wide) .home-work_bottom-tags{order:3}
.tag{padding:.45rem .8rem;border-radius:3rem;background:#f6f6f6;font-size:.7rem;line-height:1.2}
.button{display:flex;align-items:center;color:#fff;font-size:.85rem;font-weight:600;line-height:1.4;border-radius:99rem}

/* Built through curiosity */
.section_home-team{position:relative;z-index:1;background:#fff}
.home-team_component{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100vh;min-height:40rem;max-height:80rem;padding:var(--s-6);overflow:hidden;border-radius:.5rem;background:#c9d2de}
.home-team_component .intro_component{z-index:3;color:#102227}
.home-team_circle{position:relative;display:flex;justify-content:center;align-items:center;width:calc(var(--page) * .28);height:calc(var(--page) * .28);overflow:hidden;border-radius:50rem}
.team_button{display:flex;align-items:center;color:#fff;font-size:.85rem;font-weight:600}
.team_button-text{padding:.3rem .85rem .35rem;border-radius:99rem;background:#264f6899;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.team_button-arrow{display:flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;margin-left:.1rem;border-radius:99rem;background:#264f6899;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:transform var(--motion-nudge)}
.team_button-arrow svg{width:.9rem;height:.9rem}

/* Footer */
.footer{position:relative;z-index:1;padding:var(--s-5) 0 .4rem;overflow:hidden;background:#fff}
.footer_top-furniture{display:flex;justify-content:space-between;padding-top:var(--s-2);border-top:1px solid var(--grey-100);font-size:.875rem;color:var(--grey-400)}
.footer_top-txt{display:flex;padding:4rem 0 10rem}
.footer_link-txt{font-size:.9rem;white-space:nowrap;opacity:.55;transition:opacity var(--motion-respond),color .2s}
.footer_link-txt:hover{opacity:1;color:var(--dark)}
.footer_bottom{display:flex;align-items:flex-end;padding-left:40%}
.footer_bottom-second{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);width:100%;padding-bottom:var(--s-1);font-size:.875rem;line-height:1.25}
.footer_bottom-link{color:var(--grey-300);transition:color .2s}
.footer_bottom-link:hover{color:var(--dark)}
.footer_bottom-time{display:flex;align-items:center;gap:.4rem;color:var(--grey-400)}
#local-time{font-variant-numeric:tabular-nums}

/* Dialogs: case studies, enquiry, privacy */
dialog{padding:0;border:0;max-height:calc(100svh - 2.5rem);overscroll-behavior:contain}
dialog::backdrop{background:#0008;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog[open]{animation:dialog-in .5s var(--ease-arrive)}
@keyframes dialog-in{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}
.content-dialog{width:min(52rem,calc(100% - 2rem));border-radius:.5rem;background:#fff;color:#000}
.dialog-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:1.25rem 1.75rem;border-bottom:1px solid var(--grey-100);background:#fff}
.eyebrow{font-size:.875rem;letter-spacing:.01em;color:var(--grey-300)}
.close-button{display:inline-flex;align-items:center;gap:var(--s-4);padding:.3rem;font-size:.8rem}
.close-button span{font-size:1.8rem;font-weight:300;line-height:1}
.dialog-body{padding:var(--s-7)}
.dialog-body h2{font-size:3.875rem;font-weight:300;line-height:.95;letter-spacing:-.025em;margin-top:var(--s-3)}
.dialog-lead{margin-top:var(--s-5);font-size:1.5rem;line-height:1.25;letter-spacing:-.015em}
.dialog-body>p:not(.eyebrow){margin-bottom:1.75rem}
input,textarea{width:100%;padding:var(--s-3);border:1px solid #bbb;border-radius:3px;background:#fafafa;font-size:1rem;color:#000}
textarea{resize:vertical;min-height:6rem}

/* Motion: starting states. Only applied when the script runs and motion is allowed. */
.js:not(.reduce) .home-hero_middle-text{transform:translateY(3rem);opacity:0}
.js:not(.reduce) .home-hero_cue{opacity:0}
.js:not(.reduce) .home-hero_feed{transform:translateY(100%)}
.js:not(.reduce) .home-hero_feed-item.top-swiper{opacity:0}
.js:not(.reduce) .home-hero_feed-item.bottom-swiper{opacity:0;transform:translateY(3rem)}
.js:not(.reduce) .home-hero_feed-item.is-bottom{opacity:0;transform:translateY(6rem)}
.js:not(.reduce) [data-divider]{transform:scaleX(0);transform-origin:0 50%}
.js:not(.reduce) .intro_text .text-size-small{transform:translateY(-110%)}
.js:not(.reduce) .section_map .isph{opacity:0}
@media (min-width:992px){
  .js:not(.reduce) [data-list]:not(.is-revealed) .home-list_image{width:calc(var(--page) * .2);height:calc(var(--page) * .2)}
  .js:not(.reduce) [data-list]:not(.is-revealed) .heading-style-h4{opacity:.25}
  .js:not(.reduce) [data-list]:not(.is-revealed) .text-size-regular,.js:not(.reduce) [data-list]:not(.is-revealed) .home-list_tags,.js:not(.reduce) [data-list]:not(.is-revealed) .home-list_links{opacity:0;transform:translateY(1.5rem)}
}

/* Tablet: 991 and below */
@media screen and (max-width:991px){
  .padding-section-xlarge{padding:6rem 0}
  .home-hero_feed-item:hover{background:#0009}
  .home-intro_text{width:100%}
  .home-list_component{gap:var(--s-7);padding-bottom:4rem}
  .home-list_wrapper{flex-direction:column;gap:var(--s-6);height:auto}
  .home-list_second-wrapper{flex-direction:column}
  .home-list_image{width:100%;height:auto;aspect-ratio:3/2}
  .section_map{height:auto;min-height:100vh;gap:4rem;justify-content:space-between}
  .map_component{padding:var(--s-6) 0 var(--s-7)}
  .map_feed{width:calc(100% - 2*var(--gs))}
  .map_caption{position:static;padding:0 var(--gs) var(--gs);text-align:left}
  .home-team_circle{width:75vw;height:75vw;margin-top:var(--s-7)}
  .footer_top-txt{flex-direction:column;padding-bottom:6rem}
}

/* Phone landscape: 767 and below */
@media screen and (max-width:767px){
  .heading-style-h2{font-size:3rem}
  .heading-style-h3{font-size:1.5rem}
  .heading-style-h4{font-size:1.8rem}
  .padding-section-xlarge{padding:4rem 0}
  .home-hero_component{justify-content:flex-end}
  .hero-shade{display:block}
  .home-hero_middle-text{max-width:17rem;font-size:.9rem;line-height:1.3}
  .home-hero_feed{left:var(--gs);width:auto}
  .feed-slide{transform:translate3d(125%,0,-500px) scale(.8)}
  .feed-slide.is-prev{transform:translate3d(-125%,0,-500px) scale(.8)}
  .feed-slide.is-active{transform:none}
  .home-list_number{display:none}
  .map_feed{position:relative;left:auto;bottom:auto;width:auto;min-width:0;margin:0 var(--gs)}
  .map_component{padding:var(--s-5) 0 var(--s-6)}
  .home-work_block:not(.is-wide) .home-work_bottom{grid-template-columns:1fr;row-gap:1.25rem}
  .home-team_component{height:80vh;min-height:40rem}
  .home-team_circle{width:70vw;height:70vw}
  .dialog-body{padding:2.2rem var(--s-5)}
  .dialog-body h2{font-size:2.7rem}
  .dialog-top{padding:var(--s-4) 1.25rem}
}

/* Phone portrait: 479 and below */
@media screen and (max-width:479px){
  .heading-style-h2{font-size:2.4rem}
  .hide-mobile-portrait{display:none}
  .home-hero_component{justify-content:flex-start;height:100svh}
  .home-hero_feed{left:1rem;right:1rem;bottom:1rem;gap:.4rem}
  .home-hero_feed-item.top-swiper{aspect-ratio:2.6}
  .home-hero_feed-item.bottom-swiper{aspect-ratio:1.15}
  .feed-slide_body{font-size:.8rem}
  .feed-slide_title{font-size:.85rem}
  .feed_button{font-size:.8rem}
  .home-intro_text{display:flex;align-items:center;min-height:15rem;margin-top:var(--s-7)}
  .home-list_component{gap:var(--s-6)}
  .home-list_wrapper{gap:var(--s-4);padding-top:.8rem}
  .home-list_text{gap:var(--s-4);max-width:none}
  .section_map{gap:6vh;justify-content:flex-start}
  .map_card{aspect-ratio:1}
}

/* Tablet: the map feed sits in the flow so the caption never crosses it; the team card grows with its content */
@media (min-width:768px) and (max-width:991px){
  .map_feed{position:relative;left:auto;bottom:auto;margin:0 var(--gs)}
  .home-team_component{height:auto;min-height:100vh}
}
@media (max-width:767px){
  .home-team_component{height:auto;min-height:max(80vh,40rem)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .is-grain::after{animation:none}
}
/* AxeliQ styling over the template layout (layout.css). Layout and spacing stay in layout.css; this layer sets type, colour,
   corners and component styling, and takes every value from tokens.css. Each text role is defined once below, in a
   selector group that lists the page elements in that role; a new component joins a role through its .t- class. */
@font-face{font-family:'TWK Everett';src:url('/fonts/everett/TWKEverett-Light.woff2') format('woff2');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'TWK Everett';src:url('/fonts/everett/TWKEverett-Regular.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap}

/* The layout variables, pointed at the tokens */
:root{--dark:var(--surface-dark);--grey-100:var(--hairline);--grey-200:var(--divider);--grey-300:var(--text-3);--grey-400:var(--text-3)}

body{font-family:var(--font);font-weight:var(--w-regular);color:var(--text);letter-spacing:var(--ls-body)}
::selection{background:var(--selection);color:var(--text)}
:focus-visible{outline-color:var(--focus)}
/* Light surfaces follow the surface token */
.main-wrapper,.section_home-intro,.section_home-list,.section_home-team,.section_home-closing,.content-dialog,.dialog-top,.skip-link{background-color:var(--surface)}

/* ---------- Type roles ---------- */

/* Display: section titles */
.t-display,.heading-style-h2,.dialog-body h2,.vision_heading{font-size:var(--fs-display)}
.t-display,.heading-style-h2,.heading-style-h2.is-weight-regular,.dialog-body h2,.vision_heading{font-weight:var(--w-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-wrap:balance}

/* Title M: list, accordion, work and menu titles. Title S: subheads in dialogs, the menu's second list; accordion and menu titles take it on phones */
.t-title-m,.heading-style-h4,.menu-card_link.is-main{font-size:var(--fs-title-m);font-weight:var(--w-regular);line-height:var(--lh-title-m);letter-spacing:var(--ls-title-m)}
.t-title-s{font-size:var(--fs-title-s);font-weight:var(--w-regular);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
@media (max-width:479px){.menu-card_link.is-main{font-size:var(--fs-title-s)}}

/* Body: paragraphs, in Light at line height 1.5, in ink; set so a paragraph's last line is never one word alone, as the
   statement, the entries' lines and the cards' lines already are (21 October 2026: the sheets' paragraphs ended on a
   single word at every size) */
.t-body,.text-size-regular,.page-body p{text-wrap:pretty}
.t-body,.text-size-regular{font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.text-style-muted{color:var(--text);opacity:1}
.dialog-lead{font-weight:var(--w-light)}

/* Body small: footer, menu and small print, in Regular */
.footer_link-txt,.footer_bottom-second{font-size:var(--fs-body-s);font-weight:var(--w-regular);line-height:var(--lh-body-s);letter-spacing:0;text-transform:none}

/* Statement: text-only statements. The second paragraph continues at the same size in a quieter grey */
.t-statement,.home-intro_text>.heading-style-h3,.vision_sectors-statement{font-size:var(--fs-statement);font-weight:var(--w-regular);line-height:var(--lh-statement);letter-spacing:var(--ls-statement);max-width:var(--measure-statement);text-wrap:pretty}
.t-statement.is-quiet{color:var(--text-4);opacity:1}
/* Under 768px the statement is below 24px, so the quiet part takes the small-text grey */
@media (max-width:767px){.t-statement.is-quiet{color:var(--text-3)}}
/* the home page's closing text over the footer (D194): its box as wide as it was, in the middle, its lines centred */
/* the pixel above it in white: where two white sections meet on part of a pixel, the pinned hero's blue showed as a hairline */
.section_home-closing{position:relative;z-index:1;box-shadow:0 -1px 0 var(--surface)}

/* Kicker: section labels and captions. Sentence case */
.t-kicker,.intro_text .text-size-small,.text-size-small.is-home-team,.eyebrow,.footer_top-furniture{font-size:var(--fs-kicker);font-weight:var(--w-regular);line-height:var(--lh-kicker);letter-spacing:0;text-transform:none;color:var(--text-3);opacity:1}
.text-size-small.is-home-team{color:var(--text-inverse-2)}

/* Caption: small notes */
.t-caption,.map_caption{font-size:var(--fs-caption);line-height:var(--lh-caption);font-weight:var(--w-regular);letter-spacing:0}

/* Label: capitals, for buttons, map tabs and map status, the frame index and the labels inside its drawings, the footer menu's label, three words at most */
.t-label,.feed_button,.film-control,.close-button,.team_button-text,.menu-card_title{font-size:var(--fs-label);font-weight:var(--w-regular);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}

/* Chip: tags; the number chip beside a work title uses the same size */
/* Tag (D225, Zana, 20 October 2026): a word that classifies the thing beside it, its kind (Insight, Company profile) or
   where a name files (the area or topic after it), in an outlined capsule: the hairline in the word's own colour, no
   fill, no shadow, no state. The row or card it sits in answers the pointer; the tag does not. Never a control, a
   heading, a count or a byline: those keep their roles. (Before D225 a filled Grey 100 chip with 6px corners, D164.)
   Since D257 (24 October 2026, Zana, of the tags on the sheets' foot cards: "my design is not even visible for these
   pill shaped texts", with an outlined "Next" capsule as the reference) one size, the kicker's, with room round the
   word and the icons' stroke; ink on white, full white on the night, on dark glass and over a photograph; before it the
   chip size beside a name, a hairline, and the quiet white on the night. */
.tag{display:inline-flex;align-items:center;vertical-align:middle;padding:.5em 1.05em;border:var(--stroke-icon) solid currentColor;border-radius:var(--r-pill);background:none;font-size:var(--fs-kicker);font-weight:var(--w-regular);line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--text)}
.tag.is-inverse{color:var(--text-inverse)}
/* a tag inside a card, over its photograph (D227, Zana, 20 October 2026): the capsule filled
   white, the word in ink, no edge, so it reads on any picture; .card-tag places it in the photograph's top left */
.tag.is-solid{border-color:transparent;background:var(--surface);color:var(--text)}
/* Filters (D227): a collection's categories as quiet type in one row, the one chosen in
   ink, each with its count raised to the capitals' top. The medium title size, so the quiet grey keeps to its rule (24px
   and larger); the counts, small, in the darker quiet grey. No line, no box, no capsule: buttons with aria-pressed in a
   group, or links with aria-current. For listings once there is more content to sort. */
.filter{display:inline-flex;align-items:flex-start;gap:.2em;margin:0;padding:0;border:0;background:none;font:inherit;font-size:var(--fs-title-m);font-weight:var(--w-regular);line-height:var(--lh-title-m);letter-spacing:var(--ls-title-m);color:var(--text-4);text-decoration:none;cursor:pointer;transition:color var(--motion-respond)}
.filter:is(:hover,:focus-visible,[aria-pressed="true"],[aria-current]){color:var(--text)}
.filter:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--r-inset)}

/* Number: list counters, decorative */
.home-list_number-text{font-size:var(--fs-number);color:var(--divider);font-weight:var(--w-regular)}

/* Text on the film and on dark cards keeps the existing card sizes: titles in Regular, running text in Light */
.home-hero_middle-text{font-family:inherit;font-weight:var(--w-light);font-size:var(--fs-body);line-height:1.35;letter-spacing:0}
.feed-slide_headline,.feed-slide_title{font-weight:var(--w-regular)}
.feed-slide_body{font-weight:var(--w-light)}

/* ---------- Icons: drawn, never typed (public/icons.svg) ---------- */
.icon{display:inline-block;flex:none;width:1rem;height:1rem;stroke-width:var(--stroke-icon);overflow:visible;vertical-align:-.15em}
.icon.is-s{width:.75rem;height:.75rem}
.feed-arrow{width:1rem;height:1rem;margin-top:.1rem}
.close-button .icon{width:1rem;height:1rem;transition:transform .25s}
/* Film control: a ring that fills as the film plays, around play or pause */
.film-icon{width:1rem;height:1rem;flex:none;overflow:visible;stroke-width:var(--stroke-icon)}
.film-icon_track{fill:none;stroke:currentColor;stroke-width:var(--stroke-hair);opacity:.35;vector-effect:non-scaling-stroke}
.film-icon_progress{fill:none;stroke:currentColor;stroke-width:var(--stroke-icon);stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%}
.film-control .film-icon_pause,.film-control.is-playing .film-icon_play{display:none}
.film-control.is-playing .film-icon_pause{display:inline}

/* ---------- Rules and lines ---------- */
.divider_horizontal{background:var(--divider)}
.divider_horizontal.is-grey300{background:var(--border-inverse)}
.divider_horizontal.is-home-team{background:var(--border-inverse);opacity:1}
.home-list_wrapper{border-top-color:var(--hairline)}

/* ---------- Corners ---------- */
.nav-button,.home-hero_feed-item,.home-list_image,.map_card,.home-team_component,.content-dialog{border-radius:var(--r-card)}
@media (min-width:992px){.home-hero_feed-item:hover{border-radius:var(--r-card-hover)}.home-hero_feed-item:hover .feed-slide_image,.home-hero_feed-item:hover .feed-slide_inner{border-radius:var(--r-card)}}
.map_card:hover{border-radius:var(--r-card-hover)}
.feed-slide_image,.feed-slide_inner{border-radius:var(--r-inset)}
.home-team_circle{border-radius:var(--r-round)}
.section_home-intro{border-radius:var(--r-sheet) var(--r-sheet) 0 0;margin-top:calc(-1 * var(--r-sheet))}

/* A plain page body under a page header (privacy, not found) */
.page-body{max-width:var(--measure-statement)}
.page-body p{font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body)}
.page-body p + p{margin-top:var(--s-4)}
.page-body .dialog-lead{font-size:var(--fs-title-s);font-weight:var(--w-regular);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}

/* A page shorter than the window still fills it: the page stretches, so the footer meets the bottom of the window with no
   band under it */
.main-wrapper{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
#main{flex:1 0 auto}


/* ---------- Navigation ---------- */
/* Nav button: frosted bar with a solid tile behind the lines */
.nav-button_background{background:var(--glass);opacity:1;-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);transition:background-color var(--d-quick)}
.nav-button:hover .nav-button_background{background:var(--glass-hover);opacity:1}
.nav-button_selection{background:var(--surface-dark);border-radius:var(--r-chip)}
/* the wordmark and the menu button focused: a ring inside the pill, which clips anything outside it (D231) */
.nav-button_logo:focus-visible,.nav-button_menu:focus-visible{outline:var(--focus-width) solid var(--focus-inverse);outline-offset:calc(-1 * var(--focus-offset));border-radius:var(--r-chip)}
.film-control{border-radius:var(--r-card);background:var(--glass);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);transition:background-color var(--d-quick)}
.film-control:hover{background:var(--glass-hover)}

/* ---------- Hero ---------- */
.hero_dark-overlay{background:var(--surface-deep)}
/* Until AxeliQ's own film exists the hero stands on the curiosity card's blue with its depth, as Section 2, the night
   card and the footer do (D175); the intro opens onto it */
.home-hero_video-element{background-color:var(--surface-prussian);background-image:var(--depth-prussian)}
/* The curiosity card's mesh over the hero's blue (D181), under the shade that narrow screens draw at the top */
.home-hero_mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* The page's headline (D197): in the middle of the hero, in the section titles' display type, white, centred and
   balanced on two lines; home.js sets its height in the hero (--headline-y), the middle of the hero where that is
   clear, else the middle of the room above the hero's line (or, on phones, between the sentence and the cards), and
   brings its words in as the phases' sentence does */
.home-hero_headline{position:absolute;left:50%;top:var(--headline-y,50%);z-index:1;width:min(11em,calc(100% - 2 * var(--gs)));margin:0;transform:translate(-50%,-50%);font-size:var(--fs-display);font-weight:var(--w-regular);line-height:var(--lh-display);letter-spacing:var(--ls-display);color:var(--text-inverse);text-align:center;text-wrap:balance;pointer-events:none}
.home-hero_headline-word{display:inline-block}
.js:not(.reduce) .home-hero_headline:not(.is-split),.js:not(.reduce) .home-hero_headline-word{opacity:0}
.home-hero_feed-item{background:var(--panel);-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel)}
.feed_button{border-radius:var(--r-card);background:var(--glass);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass)}
.feed_button:hover{background:var(--glass-hover)}
/* About us and Contact are the site's pair in the navy glass (D175), one above the other: two pairs side by side are
   wider than the column at every size. Their row is exactly the two pairs (1.9rem each and the .4rem between), so the
   tile under them takes the rest of the right-hand card's height. */
/* The feed without the About us and Contact buttons (D183): the top card, then the tile and the square card side by side */
.home-hero_feed{grid-template-rows:auto auto;grid-template-areas:"top top" "tile right"}
/* On a phone the hero keeps two cards, About and Where we help, side by side: the featured card, which changes its
   story by itself, stays out, so the cards take about a fifth of the window, not two fifths (22 October 2026, Zana:
   "those content cards ... capture half of the hero ... remove the vertical content one. So we just use two") */
@media (max-width:767px){
  .home-hero_feed-item.top-swiper{display:none}
  .home-hero_feed{grid-template-rows:auto;grid-template-areas:"tile right"}
}
.feed-slide_inner::after{background:linear-gradient(rgba(5,14,26,0) 45%,var(--scrim))}
@media (min-width:992px){.home-hero_feed-item:hover{background:var(--panel-hover)}}
@media (max-width:991px){.home-hero_feed-item:hover{background:var(--panel)}}

/* ---------- Where we work ---------- */
/* On white (D180, Zana, 13 October 2026: "can you change the BG of section 3 (image sphere) to white"), where it had
   the curiosity card's night since D158: the opening as every section's on white, the card a light card in ink, the
   caption in the labels' grey */
.section_map{background:var(--surface);color:var(--text)}
/* its title on two lines, balanced (Zana: "the title of sphere section is too wide. need to be 2 lines") */
.map_title{max-width:11em}
/* The sectors' merge into this section (D189): the section stands a window height over the end of Section 2's stage,
   where vision.js holds it at the top of the window while its parts come in (its card rising from the window's foot to
   its place at the foot of the left side, shown as it rises rather than faded in) and lets the stage show through it
   until the blue has gone; the sphere's strokes in a layer over the window, under the section's words, its card and
   its photographs */
.section_map.is-merged{margin-top:-100svh}
.map_merge{position:fixed;inset:0 0 auto;height:100svh;z-index:0;pointer-events:none;visibility:hidden}
/* The image sphere (D163): a hairline round each photograph, pointing at one grows it a little, and the ring round the
   card's photograph, the film control's: a fine track and the stroke that fills until the next photograph takes over
   (its strength and place are set by image-sphere.js). On white the hairline is ink at a tenth, as it was white at a
   tenth on the night, and the ring is in the accent, as the site's rings on white are (the intro's, the ecosystem's) */
.section_map .isph_face{transition:transform var(--motion-respond)}
:is(.section_map,.sg-isph) .isph_face::after{content:"";position:absolute;inset:0;border-radius:inherit;border:var(--stroke-hair) solid var(--tint-2)}
@media (hover:none){.section_map .isph_item:hover .isph_face{transform:none}}
.section_map .isph_ring{opacity:0}
:is(.section_map,.sg-isph) .isph_ring-track{fill:none;stroke:var(--line-drawn);stroke-width:var(--stroke-hair);opacity:.35}
.map_caption{color:var(--text-3)}
.map_card{background:var(--surface-2)}

/* ---------- The frame index (D146) ---------- */
/* the tick is a rule, which the browser sets on whole pixels, so every tick in an index draws at the same weight on
   any screen (a box 1.5px high landed between pixels and drew lighter or heavier by where it stood) */
.frames_index:has(.frames_tab:is(:hover,:focus-visible)) .frames_tab.is-active:not(:hover,:focus-visible) .frames_tick{opacity:.5;transform:scaleX(.7)}
.frames_index:has(.frames_tab:is(:hover,:focus-visible)) .frames_tab.is-active:not(:hover,:focus-visible) .frames_tab-label{opacity:0;transition-delay:0s}

/* ---------- Selected work ---------- */
.button{font-weight:var(--w-regular);font-size:var(--fs-chip);letter-spacing:.02em;border-radius:var(--r-chip)}

/* ---------- Built through curiosity ---------- */
/* Prussian blue with the growth test's band depth, and the mesh behind the text (D142) */
.home-team_component{background-color:var(--surface-prussian);background-image:var(--depth-prussian)}
.mesh_canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.home-team_component .intro_component{color:var(--text-inverse)}
.team_button{font-weight:var(--w-regular)}
.team_button-text,.team_button-arrow{border-radius:var(--r-chip);background:var(--glass);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);transition:background-color var(--d-quick),color var(--d-quick),transform var(--motion-nudge)}
.team_button-text{display:flex;align-items:center;height:1.9rem;padding:0 .85rem}
.team_button-arrow{width:1.9rem;height:1.9rem}
.team_button-arrow .icon{width:1rem;height:1rem}
/* The pair as a button of its own (D161), the closing cards' actions: the chips are the button, which has no box. Its
   colour follows what it sits on: the navy glass over photographs, as on the curiosity card, darker when pointed at;
   solid navy on light surfaces and white on dark surfaces (D162), both turning to the accent, Blue 700, with a white
   label (D214). Pointing steps the arrow forward. The arrow chip alone takes the
   same colours (the sector arrows). */
.team_button.is-action{margin:0;padding:0;border:0;border-radius:var(--r-chip);background:none;font:inherit;color:var(--text-inverse);white-space:nowrap;cursor:pointer}
.team_button.is-action:hover .team_button-text,.team_button.is-action:hover .team_button-arrow{background:var(--glass-hover)}
.team_button.is-action:hover .team_button-arrow{transform:translateX(.25rem)}
.team_button.is-solid .team_button-text,.team_button.is-solid .team_button-arrow{background:var(--surface-dark);-webkit-backdrop-filter:none;backdrop-filter:none}
.team_button.is-solid:hover .team_button-text,.team_button.is-solid:hover .team_button-arrow{background:var(--accent)}
.team_button.is-inverse .team_button-text,.team_button.is-inverse .team_button-arrow,.team_button-arrow.is-inverse{background:var(--surface);color:var(--text);-webkit-backdrop-filter:none;backdrop-filter:none}
.team_button.is-inverse:hover .team_button-text,.team_button.is-inverse:hover .team_button-arrow,.team_button-arrow.is-inverse:hover{background:var(--accent);color:var(--text-inverse)}
/* The stage widens from a rounded panel set in from the sides to the full width as it scrolls in (--open, home.js).
   Horizontal swipes belong to it; vertical ones still scroll the page. */
html.js:not(.reduce) .sectors_stage{--open:0}
/* The tick ruler (D159): the progress bar's ticks with a station per item and the raised group at the current one
   (home.js draws them), with the arrow chip at each end, white on the stage's dark foot (D162). Over a photograph the ticks are white: the row at the neighbour
   opacity, the stations stronger. Each station is a button as wide as its stretch of the ruler, at least 24px tall. */
/* Without the script the stage is a plain list of the sectors over the first photograph */
html:not(.js) .sectors_stage{height:auto;max-height:none;min-height:0}
html:not(.js) .sectors_row,html:not(.js) .sectors_track,html:not(.js) .sectors_slide{position:static;width:auto;height:auto;margin:0;transform:none;opacity:1}
html:not(.js) .sectors_track{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-8) var(--gs) 11rem}
html:not(.js) .sectors_title{font-size:var(--fs-title-m);text-align:left}
html:not(.js) .sectors_controls{display:none}

/* ---------- The vision section (Section 2, D173) ---------- */
/* Its title first, as before (D148): the heading with its count in superscript, on the page. Then the five
   phases, the /vision-card preview (D171) on the curiosity card's blue, at Zana's word of 12 October 2026, and after
   them the ecosystem as it was (D150, D152). Plain, for no script, reduced motion and a window under 480px high: the
   title over the phases listed on the blue, then the ecosystem's statement and groups on white. */
.section_vision{--settle:.6;--eco:5.0;--eco-sectors:5.7;--eco-merged:6.7;position:relative;background:var(--surface);color:var(--text-inverse)}
@media (max-width:1024px){.section_vision{--settle:.66}}
@media (max-width:767px){.section_vision{--settle:.75}}
/* A label to refer to the section by while the page is reviewed (D165), at its top left like the other sections'
   labels; it stays out of the pinned part and is removed with the others */
.vision_heading-hold{display:flex;justify-content:center;padding:var(--s-9) var(--gs) var(--s-8);color:var(--text)}
.vision_heading{display:flex;align-items:flex-start;gap:.1em;margin:0;text-align:center}
.vision_count{align-self:flex-start;font-size:.6em;line-height:1;vertical-align:baseline}
.vision_lead{display:none}
.phases{--ink:var(--text-inverse);--ink-2:var(--text-inverse-2);position:relative;background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--ink)}
.phases :focus-visible{outline-color:var(--focus-inverse)}
.phases_stage{position:relative}
.phases_window,.phases_words,.phases_row,.phases_texts,.phases_ticks,.phases_marks{display:none}
.phases_list{display:grid;gap:var(--s-7);max-width:calc(var(--measure-body) + 2 * var(--gs));margin:0;padding:var(--s-9) var(--gs);list-style:none}
.phases_item-title{margin:0 0 var(--s-3)}
.phases_item-text{margin:0;color:var(--ink-2)}
/* Pinned, when vision.js runs in a window at least 480px high: the title is held in the middle of the window from the
   section's start, over a window height of its own, and set larger by the share it shrinks by, so it settles at the
   Display size (--settle: .6, and .66 on tablets; on phones .75, so it starts at their 48px and keeps
   to one line). Then the blue opens from a tile to the full screen over a window height, as the photograph did, the
   phases hold the window for a window height of scroll each (--ph-len, which vision.js sets: since 21 October 2026, with
   Validation's a little longer; three fifths of one before), and the ecosystem takes the window heights after them
   (--eco); vision.js places their parts and draws the opening and the closing (the blue is the window's,
   so the page shows round the tile and round the ring). The phases' words stand together (.phases_words) so they fade
   as one when the blue starts to close. The list stays for screen readers only. */
.is-pinned .vision_heading-hold{position:sticky;top:0;height:100svh;margin-bottom:-100svh;align-items:center;padding:0 var(--gs);pointer-events:none}
.is-pinned .vision_heading{font-size:calc(var(--fs-display) / var(--settle));white-space:nowrap}
@media (max-width:479px){.is-pinned .vision_heading{font-size:min(calc(var(--fs-display) / var(--settle)),12vw)}}
.is-pinned .vision_lead{display:block;height:100svh}
/* the stage's own window and the opening, then the phases' stretch (--ph-len: a window of scroll a phase since 21
   October 2026, set by vision.js; three fifths of one before, D219), then the ecosystem's */
.is-pinned .phases{height:calc(200svh + var(--ph-len, 300svh) + var(--eco) * 100svh);background:none}
.is-pinned .phases_stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
.is-pinned .phases_window{display:block;position:absolute;inset:0;background-color:var(--surface-prussian);background-image:var(--depth-prussian)}
.phases_shape{position:absolute;pointer-events:none}
.phases_canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.is-pinned .phases_words{display:block;position:absolute;inset:0;pointer-events:none}
.is-pinned .phases_row{display:block;position:absolute;left:0;right:0;pointer-events:none}
.phases_titles{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform}
.phases_titles.is-faint{opacity:.1}
.phases_titles .phases_title{position:absolute;top:0}
.phases_title{margin:0;line-height:1;letter-spacing:var(--ls-display);font-weight:var(--w-regular);color:var(--ink)}
.is-pinned .phases_texts{display:block;position:absolute;margin:0}
/* the area's sentence runs to three lines at Title S: its lines a little more open than a subhead's (1.32 for 1.2) so
   it reads as a sentence, not a block (21 October 2026) */
.phases_text{position:absolute;left:0;top:0;width:100%;margin:0;color:var(--ink);line-height:1.32;opacity:0;text-wrap:balance;transform:translateY(-50%)}
.phases_texts.is-top .phases_text{transform:none}
.phases_text.is-on{opacity:1}
.phases_word{position:relative;display:inline-block}
.is-pinned .phases_ticks{display:block;position:absolute;overflow:visible;fill:var(--ink)}
.is-pinned .phases_marks{display:block;position:absolute;inset:0;pointer-events:none}
.phases_marks ol{margin:0;padding:0;list-style:none}
.phases_mark{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;color:var(--ink);font-family:inherit;white-space:nowrap;cursor:pointer;pointer-events:auto;opacity:.5;transition:opacity var(--motion-hover)}
.phases_mark:hover,.phases_mark:focus-visible,.phases_mark[aria-current]{opacity:1}
/* on a phone the current area's label alone, over its place on the bar (22 October 2026) */
.phases_marks.is-narrow .phases_mark:not([aria-current]){visibility:hidden}
.is-pinned .phases_list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The ecosystem (D179, recomposed in D185; D237, 21 October 2026: its words on the system's parts, its names the
   quietest open-button). In the plain layout (reduced motion, a window under 480px high, or one the stage cannot fit)
   its opening and the three topics on white after the phases. The layers' names are left out there by a rule as strong
   as the open-button's own display (until 21 October 2026 they came back as a row of overlapping words) */
.vision_eco-centre,.vision_eco-mesh,.vision_eco .vision_eco-layer-name{display:none}
.vision_eco{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-7);padding:var(--s-9) var(--gs);background:var(--surface);color:var(--text)}
.vision_eco-statement{grid-column:1/span 5;margin:0}
.vision_eco-topics{grid-column:8/-1;display:flex;flex-direction:column;gap:var(--s-6);margin:0;padding:0;list-style:none}
/* The opening, as every section's opens (D180, D213): a hairline in the divider grey, the copy's label under it as the
   kicker (as the sectors' "Our combined experience" on this stage), the copy's headline in the statement role in two
   lines, and the link to the ecosystem's sheet at the body size, as every other open-button on the page. Until 21
   October 2026 the label stood alone at the statement size, the link at Title S, the headline only in the ring. When a
   key takes the page off the opening's controls the headline takes the focus (vision.js), as a place to read on from,
   not a control: it shows no ring */
/* (the opening's hairline over its label went on 21 October 2026, Zana: "no hairline needed here") */
.vision_eco-statement-in{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.vision_eco-label{margin:0 0 var(--s-3)}
.vision_eco-title{margin:0;max-width:var(--measure-body);text-wrap:balance}
.vision_eco-title:focus{outline:none}
.vision_eco-link{margin:var(--s-5) 0 0;font-size:var(--fs-body)}
/* Each topic a small card (Zana, 15 October 2026: "i think these should be a small card each, of them, you know the one
   we have in our system"): the system's caption card, as the sectors' stands on this same stage, a hairline over its
   words with no fill, no edge and no shadow. The hairline is in the drawings' blue, as each topic is a pair of the
   drawing's lines, and draws across from the drawing's side as they draw out (vision.js); the title in Title S, the
   sentence at the body size in the quiet grey, in Light at 16px and larger and Regular below, as the tokens set a
   paragraph (the body is 16px at 1440 wide on the fluid root, smaller under it). It leads nowhere, so it has no mark and
   no state. Until 21 October 2026 white glass (a 20px blur, its edge an inset shadow), the only glass on white */
.vision_eco-topic{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-4)}
.vision_eco-topic-rule{position:absolute;left:0;right:0;top:0;height:var(--stroke-hair);background:var(--line-drawn);transform-origin:0 50%}
.vision_eco-topic-title{margin:0;color:var(--text)}
.vision_eco-topic-text{margin:0;font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--text-3);text-wrap:pretty}
@media (max-width:1439px){.vision_eco-topic-text{font-weight:var(--w-regular)}}
@media (max-width:991px){.vision_eco-statement,.vision_eco-topics{grid-column:1/-1}}
/* Pinned: the five layers and the field through them, drawn by vision.js with the forms engine over the stage
   (.vision_eco-mesh), in the middle of the window. The headline stands in the ring's middle before the view tilts, in
   the statement role and never scaled (D237; until then a size of its own from the drawing's, scaled with the view);
   then each name stands in the middle of its layer. */
.is-pinned .vision_eco{position:absolute;inset:0;display:block;padding:0;background:none;pointer-events:none}
.is-pinned .vision_eco-mesh{display:block;position:absolute;inset:0;visibility:hidden}
.is-pinned .vision_eco-centre{display:flex;flex-direction:column;align-items:center;position:absolute;left:50%;top:50%;margin:0;white-space:nowrap;font-size:var(--fs-statement);font-weight:var(--w-regular);line-height:var(--lh-statement);letter-spacing:var(--ls-statement);color:var(--text);text-align:center;transform:translate(-50%,-50%)}
.vision_eco-phase{display:block;opacity:0}
/* The names in their layers (D184, D204; D237), each opening its area's sheet: the system's button for what opens a
   sheet in its quietest form, at body small (the size the system gives words anchored in a drawing, the figures'
   labels), Regular, in ink; vision.js places each by its word's middle, so the word, not the button, stands on the
   drawing's axis. The white patch behind the word alone, so the lines pass behind it (the figures' label method), and
   as much room before the ring as the circle's place after the name, so the ring and the name stand centred in the
   layer at rest (D239, 21 October 2026). Its target is at least --target-min, and --target-touch on a coarse pointer or
   a narrow window, by a transparent area round it */
.vision_eco-layer-name{font-weight:var(--w-regular);letter-spacing:var(--ls-body)}
.is-pinned .vision_eco-layer-name{display:inline-flex;position:absolute;left:0;top:0;font-size:var(--fs-body-s);color:var(--text);pointer-events:auto;opacity:0}
.is-pinned .vision_eco-layer-name{padding:0 0 0 2.35em;background:none}
.is-pinned .vision_eco-layer-name .go-label{background:var(--surface);box-shadow:0 0 0 .2em var(--surface)}
.vision_eco{--eco-target:var(--target-min)}
@media (pointer:coarse),(max-width:767px){.vision_eco{--eco-target:var(--target-touch)}}
.is-pinned .vision_eco-link .open-button{position:relative}
.is-pinned :is(.vision_eco-layer-name,.vision_eco-link .open-button)::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,var(--eco-target));height:max(100%,var(--eco-target));transform:translate(-50%,-50%)}
/* On the page's grid (21 October 2026): the opening from the left gutter and the topics to the right gutter, three of
   the twelve columns each, over the outer loops' far sides where they are faintest; under 1200px, where the side
   arrangement still fits (D237), the opening four columns (vision.js sets is-eco-narrow). Both from one top line, the
   topics' column with all three in centred on the window's middle (vision.js sets --eco-top). Until 21 October 2026
   both were placed from the drawing's widest layer, on no column, each centred on the window's middle */
.is-pinned .vision_eco-statement,.is-pinned .vision_eco-topics{position:absolute;top:var(--eco-top, 30%);width:calc((100% - 2 * var(--gs) + var(--s-5)) / 4 - var(--s-5))}
.is-pinned.is-eco-narrow .vision_eco-statement{width:calc((100% - 2 * var(--gs) + var(--s-5)) / 3 - var(--s-5))}
.is-pinned .vision_eco-statement{left:var(--gs)}
/* beside the drawing, the opening stands centred on the window's height (Zana, 21 October 2026: "position this center
   left not top left"), the topics on their own line */
.is-pinned:not(.is-eco-stacked) .vision_eco-statement{top:50%;transform:translateY(-50%)}
.is-pinned .vision_eco-topics{right:var(--gs)}
.is-pinned .vision_eco-statement-in{opacity:0}
.is-pinned .vision_eco-topic{opacity:0}
/* Stacked where the side arrangement does not fit (vision.js sets the class): the opening above the drawing, centred
   and without its rule, the statement's measure off; the topics at the foot, from 768px in a row of three, each staying
   once it has come in, and on a phone the one last introduced, centred, in the place of the one before; the row as
   tall as the tallest topic, so nothing moves as they come */
.is-eco-stacked.is-pinned .vision_eco-statement{left:var(--gs);right:var(--gs);top:calc(var(--nav-top) + var(--nav-h) + var(--s-6));width:auto;text-align:center}
.is-eco-stacked.is-pinned .vision_eco-statement-in{align-items:center;padding-top:0}
.is-eco-stacked.is-pinned .vision_eco-title{max-width:none}
.is-eco-stacked.is-pinned .vision_eco-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-5);left:var(--gs);right:var(--gs);top:auto;bottom:var(--gs);width:auto}
@media (max-width:767px){
  .is-eco-stacked.is-pinned .vision_eco-topics{grid-template-columns:minmax(0,1fr);text-align:center}
  .is-eco-stacked.is-pinned .vision_eco-topic{grid-area:1/1;align-items:center;justify-self:center;width:min(100%,26rem)}
}
/* The ecosystem stands on white inside the blue's section, so its controls take the focus ring for white, at the
   system's weight and offset (D237: --focus-width, --focus-offset), its corners the inset's */
.vision_eco :focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset);border-radius:var(--r-inset)}
/* The sectors (D188), ten circles since D196. In the plain layout, on white after the ecosystem: their title as every
   section's opens, a statement, then the circles in rows, each a ring of ticks in the accent round the sector's
   photograph under a frost, its name inside with a plus under it, opening to a short text under it (details, one
   open at a time). Pinned on wide screens
   they stand on the white over the ecosystem's engine, which draws the circles (vision.js): the title at the sections'
   place, top left; the statement on the left, on the ring's middle, as narrow as keeps it clear of the ring; each name
   in its circle, the whole circle its button; the text of the one open in the ring's middle. vision.js sets the
   ring's places and sizes (--ring-*). Under 1200px they are left out of the pinned stage */
.vision_sectors{position:relative;display:flex;flex-direction:column;gap:var(--s-7);padding:var(--s-9) var(--gs);background:var(--surface);color:var(--text)}
.vision_sectors-statement{margin:0}
.vision_sectors-statement-in{display:block}
.vision_sector{position:relative;justify-self:center;width:min(100%,12rem);min-width:0}
.vision_sector-card{color:var(--text)}
.vision_sector-top{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:18%;border-radius:50%;list-style:none;text-align:center;cursor:pointer}
.vision_sector-top::-webkit-details-marker{display:none}
.vision_sector-top:focus-visible{outline:.125rem solid var(--focus);outline-offset:2px}
/* the sector's photograph inside the circle under a frost (Zana, 14 October 2026: "We can perhaps have a frost overlay
   so you can't really see the image, but you can maybe a little bit"): blurred and veiled in the page's white, so its
   colours and shapes show only faintly; pointed at, the frost thins, and open, thinner still; pinned, it turns with the
   ring (--ring-spin) */
.vision_sector-photo{position:absolute;inset:9%;z-index:0;overflow:hidden;border-radius:50%;pointer-events:none}
.vision_sector-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(var(--frost-blur,5px)) saturate(1.3) brightness(1.06);transform:rotate(var(--ring-spin,0deg)) scale(calc(var(--zoom,1) * 1.2))}
.vision_sector-photo::after{content:"";position:absolute;inset:0;background:var(--surface);opacity:var(--frost,.5);transition:opacity var(--motion-respond)}
.vision_sector-top:hover .vision_sector-photo,.vision_sector-top:focus-visible .vision_sector-photo{--frost:.34}
.vision_sector-card[open] .vision_sector-photo{--frost:.24}
/* the name, on two lines where it is long, balanced, and the plus the ecosystem's names carry (D184) centred under it,
   so a name of two or three lines stays centred in its circle; pointed at or focused, both take the accent and the plus
   turns; open, the plus is a minus */
.vision_sector-name{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.45em;font-size:var(--fs-body)}
.vision_sector-label{font-weight:var(--w-regular);line-height:1.2;letter-spacing:0;text-wrap:balance;transition:color var(--motion-hover)}
.vision_sector-top:hover .vision_sector-label,.vision_sector-top:focus-visible .vision_sector-label,.vision_sector-card[open] .vision_sector-label{color:var(--accent)}
.vision_sector-card:not([open]) .vision_sector-top:hover .vision_sector-plus{transform:rotate(90deg)}
.vision_sector-body{padding:var(--s-3) 0 0;text-align:center}
.vision_sector-body p{margin:0;color:var(--text-3)}
.vision_sectors-detail{display:none}
.is-pinned .vision_sectors{position:absolute;inset:0;display:block;padding:0;background:none;pointer-events:none;visibility:hidden}
.is-pinned .vision_sectors-intro{position:absolute;top:3rem;left:var(--gs);right:var(--gs);margin:0;opacity:0}
.is-pinned .vision_sectors-rule{transform-origin:0 50%}
.is-pinned .vision_sectors-statement{position:absolute;left:var(--gs);top:var(--ring-y,50%);width:var(--ring-statement-w,min(24rem,30%));transform:translateY(-50%)}
.is-pinned .vision_sectors-statement-in{opacity:0}
.is-pinned .vision_sector{position:absolute;left:0;top:0;width:var(--ring-d);height:var(--ring-d);margin:calc(var(--ring-d) / -2) 0 0 calc(var(--ring-d) / -2);border-radius:50%;pointer-events:auto;will-change:transform}
.is-pinned .vision_sector-card,.is-pinned .vision_sector-top{width:100%;height:100%}
.is-pinned .vision_sector-top{padding:0}
.is-pinned .vision_sector-top:focus-visible{outline-offset:calc(var(--ring-tick, .5rem) + .3rem)}
.is-pinned .vision_sector-photo{inset:3.5%;opacity:0}
.is-pinned .vision_sector-name{font-size:var(--ring-fs);opacity:0}
.is-pinned .vision_sector-label{max-width:var(--ring-w);line-height:1.15}
/* the open circle's text is read where it is, and shown in the ring's middle */
.is-pinned .vision_sector-body{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.is-pinned .vision_sectors-detail{display:block;position:absolute;left:var(--ring-x,50%);top:var(--ring-y,50%);width:var(--ring-detail-w,22rem);transform:translate(-50%,-50%);text-align:center}
.is-pinned .vision_sectors-detail-in{opacity:0}
.vision_sectors-detail-title{margin:0 0 var(--s-2);color:var(--text)}
.vision_sectors-detail-text{margin:0;color:var(--text-3)}
.is-eco-stacked.is-pinned .vision_sectors{display:none}

/* ---------- The sectors as an image scroll (D200 to D203) ---------- */
/* The sectors' image scroll, at Zana's request of 14 October 2026; since D202 a part of Section 2's stage
   (SectorScroll.astro says what stands where). In the plain layout (no script, reduced motion, a window under 480px
   high), on the white after the ecosystem's statement and topics: the title in the middle, then the ten sectors in a
   grid, each with its photograph, name and text */
.sector-scroll{position:relative;padding:var(--s-9) var(--gs);background:var(--surface);color:var(--text)}
.sector-scroll_title{margin:0 0 var(--s-8);text-align:center}
.sector-scroll_block,.sector-scroll_lines,.sector-scroll_label,.sector-scroll_card{display:none}
.sector-scroll .is-mirrored{scale:-1 1}
.sector-scroll_list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-5);row-gap:var(--s-7);margin:0;padding:0;list-style:none}
.sector-scroll_entry-photo{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-card);background:var(--surface-2)}
.sector-scroll_entry-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.sector-scroll_entry-name{margin:var(--s-4) 0 var(--s-2)}
@media (max-width:991px){.sector-scroll_list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* On a phone the stage leaves the sectors out and they follow Section 2 in the page's flow (vision.js, is-flow, 22 October
   2026): the label over the title, as the ecosystem's, then the ten two to a row, each photograph a card of 7 to 5 as the
   small photographs are, the names at the list titles' phone size; the plain layout on a phone the same */
.sector-scroll.is-flow{display:flex;flex-direction:column}
.sector-scroll.is-flow .sector-scroll_label{display:block;order:-1;margin:0 0 var(--s-3);text-align:center}
@media (max-width:767px){
  .sector-scroll{padding:var(--s-8) var(--gs)}
  .sector-scroll_title{margin-bottom:var(--s-7)}
  .sector-scroll_list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4);row-gap:var(--s-6)}
  .sector-scroll_entry-photo{aspect-ratio:7/5}
  .sector-scroll_entry-name{margin:var(--s-3) 0 0;font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s);text-wrap:balance}
}
/* In Section 2's pinned stage (vision.js says where the reader is, sector-scroll.js places each part): the sectors stand
   over the stage while they are on (.is-on). The title's two words stand on the window's middle line, the script placing
   each by its middle (in a portrait window, one over the other in the middle). The list is for screen readers there */
.is-pinned .sector-scroll{position:absolute;inset:0;z-index:3;padding:0;background:none;pointer-events:none;visibility:hidden}
.is-pinned .sector-scroll.is-on{visibility:visible}
.is-pinned .sector-scroll_title{position:absolute;left:0;right:0;top:50%;height:0;margin:0}
.is-pinned .sector-scroll_half{position:absolute;left:0;top:0;white-space:nowrap;translate:0 -50%;transform-origin:50% 50%}
.is-pinned .sector-scroll_half.is-last{will-change:transform}
.is-pinned .is-portrait .sector-scroll_half{right:0;text-align:center}
/* the photograph inside the stage's shape, and outside the angle the page's white: the script shapes it, and grows the
   photographs and their shade with it from the point between the title's words; a piece of the night until the
   photograph is in. The photographs stack among themselves only (the script raises each new one), under the shade, the
   names and the small photographs */
.is-pinned .sector-scroll_block{display:block;position:absolute;inset:0;background:var(--surface-deep);clip-path:polygon(0 0,0 0,0 0)}
.sector-scroll_photos,.sector-scroll_shade{position:absolute;inset:0;transform-origin:0 0}
.sector-scroll_photos{will-change:transform}
.sector-scroll_photos{z-index:0;isolation:isolate}
.sector-scroll_photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.sector-scroll_photo:first-child{opacity:1}
.sector-scroll_shade{background:var(--shade-side)}
.is-portrait .sector-scroll_shade{background:var(--shade-stage)}
/* the angle's two lines, in the drawings' blue */
.is-pinned .sector-scroll_lines{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--line-drawn);stroke-width:var(--stroke-hair)}
.is-pinned .sector-scroll_label{display:block;position:absolute;left:0;top:0;margin:0;white-space:nowrap}
.sector-scroll_wedge{position:absolute;inset:0;color:var(--text-inverse)}
.sector-scroll_names{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:1em;margin:0;padding:0;list-style:none;will-change:transform}
/* a name rests at half strength and is at full strength when current, pointed at or focused, as Section 2's phase marks */
.sector-scroll_name{display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;white-space:nowrap;cursor:pointer;pointer-events:auto;opacity:.5;text-shadow:var(--shade-words);transition:opacity var(--motion-hover)}
.sector-scroll_name:hover,.sector-scroll_name:focus-visible,.sector-scroll_name[aria-current]{opacity:1}
.is-portrait .sector-scroll_names{flex-direction:row;align-items:center}
.is-portrait .sector-scroll_name{width:max-content;max-width:6.5em;white-space:normal;text-align:center;text-wrap:balance}
/* the small photographs (Zana, 15 October 2026: "[the study's] small image card are more visible and just
   better looking than ours?"; they were round, 6rem across, with a hairline, fading out away from the middle): cards of
   7 to 5, with a card's corners, at full strength */
.sector-scroll_thumbs{--thumb:9.5rem;margin:0;padding:0;list-style:none}
.sector-scroll_thumb{position:absolute;left:0;top:0;width:var(--thumb);aspect-ratio:7/5;overflow:hidden;border-radius:var(--r-card);background:var(--surface-deep);visibility:hidden}
.sector-scroll_thumb-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.is-portrait .sector-scroll_thumbs{display:none}
/* the caption: the sector's number and text under a hairline, on the white under the lower line; in a portrait window
   at the foot of the photograph, in white */
.is-pinned .sector-scroll_card{display:block;position:absolute;left:0;bottom:var(--gs);width:22rem;padding-top:var(--s-4);border-top:var(--stroke-hair) solid var(--divider)}
.sector-scroll_card-num{margin:0 0 var(--s-2)}
.is-portrait .sector-scroll_card{border-top-color:var(--border-inverse)}
.is-portrait .sector-scroll_card-num{color:var(--text-inverse-2)}
.is-pinned .sector-scroll_list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Footer ---------- */

/* ---------- The footer and its reveal (D145) ---------- */
/* The page is a white sheet that lifts off the footer: the footer waits underneath, held at the bottom of the window
   behind the page (Motion UI's footer reveal), and the page's last edge takes the large-surface corner. The footer is
   night, Prussian blue with its depth, as the curiosity card and the sector stage; its text takes the dark-surface roles.
   The corner is drawn, never clipped: the hero stays pinned behind the sections, and clipping the whole page to a
   rounded shape made Chrome draw the hero over later sections while scrolling. The page's own background and its last
   section take the corner instead; nothing in the page may clip around the hero. */
.main-wrapper{isolation:isolate}
#main{position:relative;z-index:1;background:var(--surface);border-radius:0 0 var(--r-sheet) var(--r-sheet)}
#main > section:last-of-type{border-bottom-left-radius:var(--r-sheet);border-bottom-right-radius:var(--r-sheet)}
.footer{position:sticky;bottom:0;z-index:-1;background-color:var(--surface-prussian);background-image:var(--depth-prussian);color:var(--text-inverse)}
.footer > .padding-global{position:relative;z-index:1;transform-origin:50% 100%}
/* the curiosity card's field behind it all (D195) */
.footer_mesh{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* on a phone the field reached the foot's row and its dashes crossed Terms, Sweden and the clock: it fades out behind
   that row (25 October 2026) */
@media (max-width:767px){.footer_mesh{-webkit-mask-image:linear-gradient(0deg,transparent 4.5rem,#000 7.5rem);mask-image:linear-gradient(0deg,transparent 4.5rem,#000 7.5rem)}}
.footer_top-furniture{justify-content:flex-end;border-top-color:var(--hairline-inverse);color:var(--text-inverse-2)}
.footer_link-txt{opacity:1;color:var(--text-inverse-2)}
.footer_link-txt:hover{color:var(--text-inverse)}
.footer_bottom-link,.footer_bottom-time{color:var(--text-inverse-2)}
.footer_bottom-link:hover{color:var(--text-inverse)}
.footer :focus-visible{outline-color:var(--focus-inverse)}
/* A footer taller than the window cannot wait under the page, as its top would never show: it follows the page
   instead (site.js sets is-tall) */
.footer.is-tall{position:relative}

/* ---------- The footer menu (D147) ---------- */
/* The footer menu, at Zana's request of 8 October 2026. The footer is half again as tall as it was with the
   sitemap (31.8rem on desktop, 36.2rem from 992 to 1279 wide, 43.1rem on tablets, 53.8rem on phones) and never taller
   than the window, so it shows whole when the page lifts off it. The card stands centred just above the footer's bottom
   line and the back-to-top chip. Revised the same day after Zana's
   comparison: the card is dark glass (--panel-deep, 80%) with no outline, its label in capitals and
   its action the button over images, so the five names stay the brightest thing in it. Inside, the order:
   the label, the five sections at the menu's title size, a quieter list in two columns (pages, then contact) and the
   action across the card. The card is as wide as the longest section name needs, so every name keeps one line. */
/* Where it fills the window its top line would sit under the menu button, so it starts below the button, as the drawer's content does */
.footer{--footer-h:47.7rem;display:flex;flex-direction:column;min-height:min(var(--footer-h),100svh);padding:calc(var(--nav-top) + var(--nav-h) + var(--s-4)) 0 var(--s-5)}
@media (max-width:1279px){.footer{--footer-h:54.3rem}}
@media (max-width:991px){.footer{--footer-h:64.7rem}}
@media (max-width:767px){.footer{--footer-h:80.6rem}}
.footer > .padding-global{flex:1;display:grid;grid-template:auto 1fr auto / minmax(0,1fr)}
/* The line at the left and the card share the band between the company line and the bottom line: the line at its top
   left, the card at its foot in the middle, so a short window never stacks them */
.footer_top-txt{grid-area:2 / 1;align-self:start;justify-self:start;padding-bottom:0}
/* The menu card (D147), at Zana's request of 8 October 2026, and since 14 October the menu's too (D199):
   a dark glass card, the five sections large, a quieter list in two columns and the main action. Its placements set
   where it stands and the corner it grows from: the footer's centred over the footer, growing from its foot; the
   menu's at the top right, growing from the menu button */
.menu-card{--fm-pad:var(--s-7);position:relative;isolation:isolate;width:min(29rem,100%);padding:var(--fm-pad)}
.footer-menu{grid-area:2 / 1;align-self:end;justify-self:center}
.footer_bottom{grid-area:3 / 1}
@media (max-width:767px){.menu-card{--fm-pad:var(--s-6)}}
.menu-card_background{position:absolute;inset:0;z-index:-1;border-radius:var(--r-card);background:var(--panel-deep);-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);transform-origin:50% 100%}
.menu .menu-card_background{transform-origin:100% 0}
.menu-card_title{margin-bottom:var(--s-4);color:var(--text-inverse-2)}
:where(.menu-card ul){list-style:none;margin:0;padding:0}
.menu-card_mask{display:flex}
.menu-card_link{display:inline-block}
.menu-card_link.is-main{color:var(--text-inverse)}
.menu-card_sub{column-count:2;column-gap:var(--s-5);margin:var(--s-6) 0}
.menu-card_sub .menu-card_mask{padding:calc(var(--s-1) / 2) 0;break-inside:avoid}
.menu-card_mask.is-break{break-after:column}
/* The action is the button over images, one step lighter than the card so it shows as a button on the night footer */
.menu-card .menu-card_button{width:100%;height:2.3rem;background:var(--surface);color:var(--text);transition:background-color var(--d-quick),color var(--d-quick)}
/* white on the night since 21 October 2026; pointed at, the accent with a white label, as the white pair takes it on
   the night (D214) */
@media (hover:hover){.menu-card .menu-card_button:hover{background:var(--accent);color:var(--text-inverse)}}
/* The bottom line: privacy at the left, the back-to-top chip in the middle under the card, the clock at the right. The
   chip is the arrow chip in the card's own glass */
.footer_bottom{display:block;padding:0}
.footer_bottom-second{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);margin-top:var(--s-2);padding:0}
.footer_bottom-link{justify-self:start}
.footer_bottom-time{justify-self:end}
.footer_up{margin:0;background:var(--panel-deep);-webkit-backdrop-filter:var(--blur-panel);backdrop-filter:var(--blur-panel);color:var(--text-inverse)}
.footer_up:hover{background:var(--surface-dark-2)}
/* Closed, the card waits shrunk to nothing at its foot, its words below their masks and its label and action faded
   out; site.js opens it at the page's end on the unfold motions. The masks clip until the card has settled open, so a
   focus ring shows in full once it is still. Without script, under reduced motion and when the footer is taller than
   the window, the card is simply open. */
@media (prefers-reduced-motion:no-preference){
  html.js .footer:not(.is-tall) .footer-menu:not(.is-open) .menu-card_background{transform:scale(0)}
  html.js .footer:not(.is-tall) .footer-menu:not(.is-open) .menu-card_link{transform:translateY(150%)}
  html.js .footer:not(.is-tall) .footer-menu:not(.is-open) :is(.menu-card_title,.menu-card_button,.menu-card_sublabel){opacity:0}
  html.js .footer:not(.is-tall) .footer-menu:not(.is-open) :is(a,button){pointer-events:none}
  html.js .footer:not(.is-tall) .footer-menu:not(.is-settled) .menu-card_mask{overflow:hidden}
}

/* Surfaces are clean: no grain */
.is-grain::after{display:none}

/* ---------- Dialogs and form ---------- */
.content-dialog{color:var(--text)}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:var(--blur-scrim);backdrop-filter:var(--blur-scrim)}
.close-button span{font-weight:var(--w-regular)}
input,textarea{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;color:var(--text);font-weight:var(--w-regular);padding:.6rem 0}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
/* What opens a panel (D204; Zana, 15 October 2026: "more elements will need modal trigger on the site also, so i think
   we need a distinct cta button here"): its name, and after it the plus on the tinted square of the system's plus
   button (the accordion's), in ink; pointed at or focused, the square fills with the accent, Blue 700 (D214), and the
   plus, in white, turns */
/* The site's text call to action, for what opens a sheet (.open-button) and what leads to a page or another site
   (.go-text), since 21 October 2026 (Zana: "all our cta buttons with + i feel like are
   bad looking. and very confusing"; "i like this, let's do that instead of angled arrow text"; "but the hover arrow
   should be on right side, which then also hides the symbol on default state on left"). At rest a small ring on the
   left, the name, and a hairline under it at two fifths. Pointed at or focused, the ring goes, the name slides into its
   place, the hairline draws away to the right, and on the right a circle grows and the arrow comes into it: the accent
   with a white arrow on white, white with an ink arrow on the night (D198, D214). One motion for all of it, the unfold
   motion (.5s on the move curve), reversed as the pointer leaves. The
   circle has its own place after the name in the line (.go-dot, as wide as the circle and a line high, the circle drawn
   round its middle), drawn back by the name's own slide, so it never covers the name whatever padding a place gives the
   link, and nothing beside the link is covered either. */
.open-button,.go-text{position:relative;display:inline-flex;align-items:center;margin:0;padding:0;border:0;background:none;color:var(--text);font:inherit;line-height:1.15;white-space:nowrap;cursor:pointer}
.go-ring{flex:none;width:.42em;height:.42em;margin-right:.5em;border:1px solid currentColor;border-radius:50%;transition:transform var(--motion-unfold),opacity var(--motion-unfold)}
.go-label{position:relative;padding-bottom:.14em;transition:transform var(--motion-unfold)}
.go-label::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4;transform-origin:100% 50%;transition:transform var(--motion-unfold)}
.go-dot{position:relative;flex:none;width:1.9em;height:1em;margin-left:.45em;color:var(--text-inverse);transform:translateX(-.92em)}
.go-dot::before{content:'';position:absolute;left:0;top:50%;width:1.9em;height:1.9em;margin-top:-.95em;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform var(--motion-unfold)}
/* the arrow fades in a little after the circle starts to grow, so it is never seen outside it; it goes at once */
.go-dot .icon{position:absolute;left:50%;top:50%;width:.7em;height:.7em;margin:-.35em 0 0 -.35em;opacity:0;transform:translateX(-.4em);transition:transform var(--motion-unfold),opacity .15s linear}
/* D274: the expand mark, on what opens a sheet, opens out from half its size as the circle comes, where the arrow to a
   page slides in from the left */
.go-dot.is-sheet .icon{transform:scale(.5)}
:is(.open-button,.go-text,.map_entry-link):focus-visible .go-dot .icon{transition:transform var(--motion-unfold),opacity .25s linear .15s}
@media (hover:hover){:is(.open-button,.go-text,.map_entry-link):hover .go-dot .icon{transition:transform var(--motion-unfold),opacity .25s linear .15s}}
:is(.open-button,.go-text,.map_entry-link):focus-visible :is(.go-ring){opacity:0;transform:scale(0)}
:is(.open-button,.go-text,.map_entry-link):focus-visible .go-label{transform:translateX(-.92em)}
:is(.open-button,.go-text,.map_entry-link):focus-visible .go-label::after{transform:scaleX(0)}
:is(.open-button,.go-text,.map_entry-link):focus-visible .go-dot::before{transform:scale(1)}
:is(.open-button,.go-text,.map_entry-link):focus-visible .go-dot .icon{opacity:1;transform:none}
/* a text link's own focused look marks its focus, the circle with the arrow at full contrast on either ground; the
   browser's ring round the line was square and cut through the circle (D272) */
:is(.open-button,.go-text):focus-visible{outline:none}
@media (hover:hover){
  :is(.open-button,.go-text,.map_entry-link):hover .go-ring{opacity:0;transform:scale(0)}
  :is(.open-button,.go-text,.map_entry-link):hover .go-label{transform:translateX(-.92em)}
  :is(.open-button,.go-text,.map_entry-link):hover .go-label::after{transform:scaleX(0)}
  :is(.open-button,.go-text,.map_entry-link):hover .go-dot::before{transform:scale(1)}
  :is(.open-button,.go-text,.map_entry-link):hover .go-dot .icon{opacity:1;transform:none}
}
.skip-link{color:var(--text)}

/* ---------- Focus rings on every surface ---------- */
/* Over images the focus ring is two-tone, white with a navy edge, so it reads on dark film, bright snow and white sections alike */
/* (D237: at the ring's former 2px offset, so the navy edge stays outside the white ring at the 4px default) */
.home-hero_feed-item:has(.feed-slide:focus-visible),.sector-scroll_name:focus-visible,.film-control:focus-visible,.feed_button:focus-visible,.home-hero_feed-item.is-bottom:focus-visible{outline-color:var(--text-inverse);outline-offset:2px;box-shadow:0 0 0 .375rem var(--surface-dark)}

/* ---------- Touch targets (21 October 2026) ---------- */
/* On a touch screen every control answers a tap over at least --target-touch, as the ecosystem's names and the LinkedIn
   marks already do (D237, D238): a transparent area centred on the control, so nothing it shows moves or grows. The
   pair's chips, the text links, the bar's Close and Back, the menu's and the footer's links were 18 to 29px tall on
   phones and tablets. The menu card's links stand flush on a desktop; on a touch screen the menu's stand a target
   apart (--link-pitch), and the footer's, which share the window with the name, a little apart. The pill lets its two
   controls' areas past its edge, its ground keeping the corners itself */
.nav-button_background{border-radius:inherit}
@media (pointer:coarse){
  .team_button.is-action,.footer_up,.footer_bottom-link,.close-button,.menu-card_link,.menu-card_button,.sector-scroll_name{position:relative}
  :is(.nav-button_logo,.nav-button_menu,.open-button,.go-text,.team_button.is-action,.footer_up,.footer_bottom-link,.close-button,.menu-card_link,.menu-card_button,.sector-scroll_name,.phases_mark)::before{content:'';position:absolute;left:50%;top:50%;width:max(100%,var(--target-touch));height:max(100%,var(--target-touch));transform:translate(-50%,-50%)}
  .nav-button{overflow:visible}
  .menu-card{--link-pitch:var(--target-touch)}
  .footer-menu{--link-pitch:var(--s-6)}
  .menu-card_main .menu-card_link{margin-block:max(0px,calc((var(--link-pitch) - var(--lh-title-m) * 1em) / 2))}
  .menu-card_sub .menu-card_link{margin-block:max(0px,calc((var(--link-pitch) - var(--lh-body-s) * 1em) / 2 - var(--s-1) / 2))}
  /* the bar's start as high as the bar, so Back's area is not cut by the row that shortens a long name */
  .sheet_start{align-self:stretch}
}

/* ---------- Layout fixes kept from the reviews of 4 and 5 October ---------- */
/* The 20px sheet overlap needs the hero cards and line lifted by .75rem */
.home-hero_feed{bottom:calc(var(--gs) + .75rem)}
/* The cards a size smaller on wide screens (22 October 2026, Zana: "the hero cards, are a bit too large even on
   desktop"): 24rem across, not 30, so they stand under two fifths of a laptop window's height, not nearly half, and clear
   the headline; the top card a little taller for its width so its words still fit, its text at .875rem */
@media (min-width:992px){
  .home-hero_feed{width:24rem}
  .home-hero_feed-item.top-swiper{aspect-ratio:2.2}
  .feed-slide_body{font-size:.875rem}
}
/* The orientation at the hero's foot (21 October 2026, in place of the line on the cards' top edge, D216): centred, its
   double chevron under it, level with the cards' foot; where the window is too narrow for it to clear the cards (under
   1264px), at the left gutter; on phones centred just above the cards (home.js sets --hero-middle-bottom from them) */
.home-hero_middle{top:auto;bottom:calc(var(--gs) + .75rem);left:50%;display:flex;flex-direction:column;align-items:center;gap:var(--s-3);width:max-content;max-width:calc(100% - 2 * var(--gs));padding:0;transform:translateX(-50%);text-align:center}
.home-hero_middle-text{max-width:none;margin:0}
.home-hero_cue{width:1rem;height:1rem;color:var(--text-inverse-2)}
@media (min-width:768px) and (max-width:1263px){.home-hero_middle{left:var(--gs);align-items:flex-start;transform:none;text-align:left}}
@media (max-width:767px){.home-hero_middle{bottom:var(--hero-middle-bottom,45%)}}
.home-list_text{min-width:0}
/* List rows keep the image height and grow when the text needs more room */
@media (min-width:992px){.home-list_wrapper{height:auto;min-height:calc(var(--page) * .2 + 2rem)}}
/* The region names stay on one line each and the row wraps instead, up to tablet width */
/* Phones */
@media (max-width:479px){
  .feed_button{letter-spacing:.1em}
  .feed_button{white-space:nowrap}
  /* Hero and map cards: narrower image and a taller card, so the text fits down to 320px */
  .feed-slide_image{width:40%}
  .home-hero_feed-item.top-swiper{aspect-ratio:2.2}
  .map_card{aspect-ratio:.8}
}

/* ---------- D216: the parts the complete site adds, from the system's own ---------- */
/* A statement's quieter second half, in words: the statement's grey (as .t-statement.is-quiet) */
.t-quiet{color:var(--text-4)}
@media (max-width:767px){.t-quiet{color:var(--text-3)}}
/* the call to action on the night (Section 2's areas): white, its circle white with the arrow in ink (D198) */
.open-button.is-inverse,.go-text.is-inverse{color:var(--text-inverse)}
:is(.open-button,.go-text).is-inverse .go-dot{color:var(--text)}
:is(.open-button,.go-text).is-inverse .go-dot::before{background:var(--surface)}

/* The three activities: where each leads, under its text */
.home-list_links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin:0;font-size:var(--fs-body)}

/* The hero's top card: the entry's kind over its title */
/* the entry's kind, a tag over the title (D225); a flex item in the card's column, so it keeps its own width */
.feed-slide_kind{align-self:flex-start;margin:0}

/* Section 2: each phase's links under its sentence (vision.js places them); in the plain layout under each phase */
.phases_ctas,.phases_cta{margin:0}
.phases_ctas{display:none}
.phases_item-links{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin:var(--s-6) 0 0;font-size:var(--fs-body)}
.is-pinned .phases_item-links{display:none}
.is-pinned .phases_ctas{display:block;position:absolute;top:0;pointer-events:none}
.is-pinned .phases_cta{position:absolute;left:0;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);font-size:var(--fs-body);opacity:0;visibility:hidden}
.is-pinned .phases_cta.is-on{visibility:visible}
.is-pinned .phases_cta .open-button{pointer-events:auto}
/* the ecosystem's link to its sheet, reachable over the pinned stage (its opening is set with the stage, above) */
.is-pinned .vision_eco-link .open-button{pointer-events:auto}

/* An area's call to action with its topics (GoTopics.astro, go-topics.js, D256): the white circle flows into a white
   panel under the link; the panel itself is clear, the shape behind it is its ground. While it is open the link keeps
   the look it has when pointed at, so the circle stays whole as the pointer moves down to the topics. */
.go-topics{position:relative;display:inline-flex}
.go-topics.is-shown{z-index:3}
.go-topics>.open-button{position:relative;z-index:2}
.go-topics_blob{position:absolute;top:0;left:0;z-index:0;max-width:none;overflow:visible;fill:var(--surface);pointer-events:none;visibility:hidden}
.go-topics.is-shown .go-topics_blob{visibility:visible}
.go-topics.is-open .go-topics_blob path{pointer-events:visiblePainted}
.go-topics_panel{position:absolute;top:0;left:0;z-index:1;width:max-content;padding:var(--s-1);border-radius:var(--r-card-hover);color:var(--text);pointer-events:auto}
.go-topics_panel[hidden]{display:none}
.go-topics_panel.is-measuring{visibility:hidden;clip-path:none !important}
.go-topics_list{position:relative;display:grid;margin:0;padding:0;list-style:none}
/* the plate under the topic pointed at, travelling from one to the next once it is showing */
.go-topics_list::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--plate-h,0px);border-radius:calc(var(--r-card-hover) - var(--s-1));background:var(--surface-2);opacity:0;transform:translateY(var(--plate-y,0px));transition:transform var(--motion-hover),height var(--motion-hover),opacity .15s linear;pointer-events:none}
.go-topics_list.is-plate::before{opacity:1}
.go-topics_list.is-plate-jump::before{transition:opacity .15s linear}
.go-topics_list>li{position:relative}
.go-topics_item{display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);min-height:var(--target-touch);padding:var(--s-2) var(--s-3);border-radius:calc(var(--r-card-hover) - var(--s-1));color:var(--text);font-size:var(--fs-body);line-height:1.25;text-decoration:none;white-space:nowrap;opacity:0;transform:translateY(.5rem);transition:opacity .12s linear,transform var(--motion-respond)}
.go-topics.is-open .go-topics_item{opacity:1;transform:none;transition:opacity .25s linear calc(.08s + var(--i) * .04s),transform var(--motion-respond) calc(.08s + var(--i) * .04s)}
.go-topics_name{display:flex;flex-direction:column}
.go-topics_note{font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--text-3)}
.go-topics_item .icon{flex:none;width:.8em;height:.8em;opacity:0;transform:scale(.5);transition:opacity .15s linear,transform var(--motion-respond)}
.go-topics_item:is(:hover,:focus-visible) .icon{opacity:1;transform:none}
.go-topics_item:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:calc(-1 * var(--focus-width))}
.go-topics.is-open>.open-button .go-ring{opacity:0;transform:scale(0)}
.go-topics.is-open>.open-button .go-label{transform:translateX(-.92em)}
.go-topics.is-open>.open-button .go-label::after{transform:scaleX(0)}
.go-topics.is-open>.open-button .go-dot::before{transform:scale(1)}
.go-topics.is-open>.open-button .go-dot .icon{opacity:1;transform:none}
html.reduce .go-topics_item,html.reduce .go-topics_list::before{transition:none}

/* The invitation over the footer (D216): the question at the display size, its line at the title size in light, the
   pair under them, all centred */
.closing_component{display:flex;flex-direction:column;align-items:center;gap:var(--s-5);padding:var(--s-9) 0 calc(var(--s-9) + var(--s-6));text-align:center}
.closing_title{margin:0;max-width:12em}
.closing_text{margin:0;font-size:var(--fs-title-s);font-weight:var(--w-light);line-height:1.4;color:var(--text-3)}
.closing_action{margin-top:var(--s-3)}

/* The menu card: the quieter list's label, as the card's own */
.menu-card_sublabel{margin:var(--s-6) 0 0;font-size:var(--fs-label);font-weight:var(--w-regular);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-inverse-2)}
.menu-card_sublabel+.menu-card_sub{margin-top:var(--s-3)}
.menu-card button.menu-card_link{color:var(--text-inverse)}

/* The footer's particulars (the copy's Footer): the company's name, city, address and organization number */
.footer_company{display:flex;flex-direction:column;gap:var(--s-1);font-style:normal;font-size:var(--fs-body-s);line-height:var(--lh-body-s);color:var(--text-inverse-2)}
.footer_company-name{color:var(--text-inverse)}
/* the wordmark in place of the name (21 October 2026): 150px on a phone, growing with the window to 250px on a wide one */
.footer_wordmark{display:block;width:clamp(150px,calc(var(--page) * .11),250px);height:auto}
.footer_company .footer_link-txt{width:max-content}
/* Worth a closer look's opening has its title and no label: the title a step of the scale under the rule */
.section_map .intro_text{padding-top:var(--s-4)}

/* ---- D224: Worth a closer look, the elevation of 20 October 2026 ----
   The entries as an index above the card: the number, the title at the medium title
   size and the kind after it, the current in ink and the others quiet; a line under the current one filling over the
   six seconds the sphere holds it (home.js). The entries' photographs on the sphere take the pointer; the world round
   them does not. */
.section_map .isph_item{cursor:grab}
.section_map .isph_item.is-entry{cursor:pointer}
/* a shorter window keeps the card shorter, so the index and the card stay clear of the title */
@media (min-width:992px) and (max-height:860px){.map_card{aspect-ratio:1.5}}
/* since the review of the same day: on wide screens the index and the card are one column beside the sphere, from its
   top to its foot (home.js: placeSphere), the card taking what the index leaves and its photograph what the words
   leave; the column a little wider on large screens. On phones and tablets the sphere takes the content's width (the
   photographs reach about .37 of the stage's width from its middle, so the stage is wider than the content). */
@media (min-width:992px){
  .section_map .map_feed{width:clamp(30rem,calc(var(--page) * .28),46rem);min-width:0;max-width:none}
  .section_map.is-fit .map_card{flex:1 1 auto;aspect-ratio:auto;min-height:0}
}
@media (max-width:991px){.section_map .isph{width:min(128%,40rem);margin:calc(-.12 * min(128%,40rem)) calc(50% - min(64%,20rem))}}
/* the entries' photographs on the sphere carry a fine ring of the selected line's blue, so they read as the ones to
   choose among the world round them; the card's own has the filling ring instead (image-sphere.js: is-held) */
.section_map .isph_item.is-entry.is-eligible:not(.is-held) .isph_face{outline:1px solid var(--line-drawn);outline-offset:.2rem}
/* D233: a photograph's name while it is pointed at, on a hairline of the same blue drawn out from beside it to just
   outside the sphere (image-sphere.js places it, level with the photograph's middle, and draws it); on the left of
   the sphere it runs the other way */
.section_map .isph_label-line{display:block;flex:none;height:var(--stroke-hair);background:var(--line-drawn);transform-origin:0 50%}
.section_map .isph_label-name{flex:none;color:var(--text);white-space:nowrap}

/* ---- D226: Worth a closer look, the sphere left, three tabs and the cards right (Zana, 20 October 2026; the spec in working/closer-look-spec-2026-10-20.json) ----
   Wide screens: the column at the right gutter (home.js places its top and height and the sphere's box), the system's
   tabs as its first row, the chosen tab's panel under them. A card is one link with the plate of the held entry behind
   it; its photograph above its words while its slot is over 22rem, a row at 22rem or less, its paragraph left out under
   11rem. Phones and tablets: the title, the sphere, the tabs and the cards in the page's flow. Without script: the three
   panels one after another, each with its name, the sphere hidden. */
.map_title-line{display:block}
.map_tabs .sheet_tab-line{width:0;transform:none;transition:none}
.map_panels{position:relative;margin:0;padding:0;aspect-ratio:auto;overflow:visible;border-radius:0;perspective:none;background:none;transition:none;opacity:1;transform:none}
.section_map .map_card.map_panels{aspect-ratio:auto;background:none}
.map_panel{display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.map_panel.is-empty{justify-content:flex-start}
.map_panel-name{margin:0 0 var(--s-4)}
.section_map.is-ready .map_panel-name{display:none}
.map_empty{margin:0;color:var(--text)}
.map_panel.is-empty:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.map_list{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-3);min-height:0;margin:0;padding:0;list-style:none}
.map_entry{display:flex;flex-direction:column;min-height:0;max-height:100%}
.map_entry-link{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--s-4);min-height:0;padding:var(--s-3);border:var(--stroke-hair) solid var(--hairline);border-radius:var(--r-card);color:var(--text);text-decoration:none}
.map_entry-link::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--surface-2);opacity:0;transition:opacity var(--motion-respond)}
.map_entry.is-current .map_entry-link::before,.map_entry.is-preview .map_entry-link::before{opacity:1}
.map_panels.has-preview .map_entry.is-current:not(.is-preview) .map_entry-link::before{opacity:0}
.map_entry-link:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--focus-offset)}
.map_entry-photo{display:block;flex:0 1 auto;min-height:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-inset);background:var(--surface-2)}
.map_entry-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.map_entry-text{display:flex;flex:none;flex-direction:column;align-items:flex-start;gap:var(--s-3);min-width:0}
.map_entry-kind{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4)}
.map_entry-meta{color:var(--text-3)}
.map_entry-title{margin:0;font-size:var(--fs-title-m);font-weight:var(--w-regular);line-height:var(--lh-title-m);letter-spacing:var(--ls-title-m);text-wrap:balance}
.map_entry-body{margin:calc(var(--s-2) - var(--s-3)) 0 0;max-width:var(--measure-text);font-size:var(--fs-body);font-weight:var(--w-light);line-height:var(--lh-body);color:var(--text-3);text-wrap:pretty}
/* the card's call to action, the site's (above), answering when the card is pointed at or focused */
.map_entry-cta{position:relative;display:inline-flex;align-items:center;margin-top:calc(var(--s-4) - var(--s-3));font-size:var(--fs-body);line-height:1.2;color:var(--text)}
.section_map.is-rows .map_panel,.section_map.is-rows .map_list{justify-content:flex-start}
.section_map.is-rows .map_entry-link{flex-direction:row;align-items:flex-start;gap:var(--s-5)}
.section_map.is-rows .map_entry-text{flex:1 1 auto}
.section_map.is-rows .map_entry-photo{flex:none;width:5rem;height:5rem;aspect-ratio:1}
.section_map.is-rows .map_entry-title{font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
.section_map.is-compact .map_entry-body{display:none}
/* the ring: two drawings of the same circle in a box at its largest, moved and scaled by transform; the fill shown
   through a clip as the dwell fills (image-sphere.js); the strokes not scaled */
:is(.section_map,.sg-isph) .isph_ring>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:is(.section_map,.sg-isph) .isph_ring circle{fill:none;vector-effect:non-scaling-stroke}
:is(.section_map,.sg-isph) .isph_ring-track circle{stroke:var(--line-drawn);stroke-width:var(--stroke-hair)}
:is(.section_map,.sg-isph) .isph_ring-fill circle{stroke:var(--line-drawn);stroke-width:var(--stroke-icon)}
/* the column waits for its entrance (home.js) or for the hand-over to raise it (vision.js) */
.js:not(.reduce) .section_map:not(.is-merged) .map_feed:not(.is-shown){opacity:0}
@media (min-width:992px){
  .section_map .map_feed{left:auto;right:var(--gx);bottom:auto;gap:var(--s-5);width:clamp(26rem,calc(var(--page) * .28),46rem);min-width:0;max-width:none}
  .section_map .map_panels{flex:1 1 auto;min-height:0}
  .section_map .map_panel{position:absolute;inset:0}
  .map_tabs{gap:var(--s-7)}
}
@media (min-width:992px) and (max-width:1199px){.map_tabs{gap:var(--s-6)}}
@media (max-width:991px){
  /* sized to its content here: the closing section's 1px of white above it covered the last card's bottom edge, so the
     cards end a step short of it (25 October 2026) */
  .section_map{gap:var(--s-5);justify-content:flex-start;min-height:0;padding-bottom:var(--s-1)}
  .section_map .map_component{padding:0}
  .section_map .map_feed{position:relative;left:auto;right:auto;bottom:auto;width:auto;min-width:0;max-width:none;margin:0 var(--gs);gap:var(--s-5)}
  .map_tabs{gap:var(--s-5)}
  .section_map .map_panel{position:relative}
  .map_entry-photo{aspect-ratio:3/2}
  .map_entry-title{font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
}
/* without script (or before it has started): the panels one after another in the page, each with its name */
.section_map:not(.is-ready){height:auto;min-height:0}
.section_map:not(.is-ready) .map_feed{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:0 var(--gx) var(--s-8);opacity:1}
.section_map:not(.is-ready) .map_tabs{display:none}
.section_map:not(.is-ready) .map_panel{position:relative;inset:auto;margin-bottom:var(--s-7)}
/* a wide screen whose cards would not fit beside the sphere (a short window, text set large; home.js: is-flow): the
   section in the page's flow as on a tablet, the sphere above, the tabs and cards under it, no hand-over */
@media (min-width:992px){
  .section_map.is-flow{height:auto;min-height:0;gap:var(--s-5);justify-content:flex-start}
  .section_map.is-flow .map_component{position:relative;inset:auto;padding:0}
  .section_map.is-flow .isph{position:relative;width:min(100%,40rem);aspect-ratio:1;margin:calc(-.12 * min(100%,40rem)) auto}
  .section_map.is-flow .map_feed{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;margin:0 var(--gx) var(--s-8)}
  .section_map.is-flow .map_panel{position:relative;inset:auto}
}
/* the cards in the page's flow (a wide window whose cards would not fit beside the sphere, home.js: is-flow; tablets
   and phones): side by side in a grid, each photograph at 3 to 2, never one card across the page with its photograph
   at full width (News, with three entries, had each 1370 by 1713 at 1440 by 900; 21 October 2026); on phones a list,
   each photograph a small square beside its words, as the rows beside the sphere are. The grid has as many columns as
   the fullest tab has cards (WhereWeWork.astro: --closer-cols; two at most on a tablet, --closer-cols-s), so every tab's
   cards are one size: the columns had closed round a tab's single card, so Invest showed OmegaNova's across the whole
   row, its photograph 980 by 650 at 1024 wide, and the panels, which keep the tallest tab's height, left that much
   white under News's cards (21 October 2026). From 992 to 1199 wide, where three cards share the row, their titles a
   step smaller, as on tablets */
@media (min-width:600px){
  :is(.section_map.is-flow,.section_map:not(.is-fit)) .map_list{display:grid;grid-template-columns:repeat(var(--closer-cols-s,2),minmax(0,1fr));align-items:start;gap:var(--s-5)}
  :is(.section_map.is-flow,.section_map:not(.is-fit)) .map_entry-photo{width:100%;aspect-ratio:3/2}
}
@media (min-width:992px){
  :is(.section_map.is-flow,.section_map:not(.is-fit)) .map_list{grid-template-columns:repeat(var(--closer-cols,3),minmax(0,1fr))}
}
@media (min-width:992px) and (max-width:1199px){
  .section_map.is-flow .map_entry-title{font-size:var(--fs-title-s);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
}
@media (max-width:599px){
  .section_map .map_entry-link{flex-direction:row;align-items:flex-start;gap:var(--s-4)}
  .section_map .map_entry-photo{flex:none;width:5rem;height:5rem;aspect-ratio:1}
  .section_map .map_entry-text{flex:1 1 auto}
}

/* The legal pages, Privacy and Terms of use (21 October 2026): each part's heading at the title size over its
   paragraphs, the date under the lead in the quiet grey, links underlined in the text's own colour; the cookie list
   that Cookiebot writes into Privacy kept to the text's measure. In the footer, the three utilities side by side, and
   Cookie settings (shown once Cookiebot is there) a button set as the links are */
.page-body h2{margin:var(--s-7) 0 var(--s-3);font-size:var(--fs-title-s);font-weight:var(--w-regular);line-height:var(--lh-title-s);letter-spacing:var(--ls-title-s)}
.page-body .legal_date{margin-top:var(--s-3);color:var(--text-3)}
.page-body a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:var(--stroke-hair)}
.legal_cookies{max-width:100%;overflow-x:auto;font-size:var(--fs-body-s);font-weight:var(--w-light);line-height:var(--lh-body-s)}
.legal_button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.footer_legal{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-self:start}
button.footer_bottom-link{padding:0;border:0;background:none;font:inherit;cursor:pointer}