/* Join the team: the careers hero (2 Oct 2026, Xavi's brief). No video and no scroll story: one interactive hero, Tomás's
   dotted globe of the cities we work from (directions/tomas-demo/; six since 6 Oct 2026, with Miami and New York), in his place and at his size, over the home's moving silk, with
   the title on the left at the web mock's scale. Hover to turn the globe; rest on a city and it stops, and a white vector
   panel draws out of it.
   The book's rules hold: the tokens and their pairs, PP Neue Montreal at 400 and 500, no shadows, no opacity on brand
   colour. What moves is drawn, wiped or turned, never faded. */

/* PP Neue Montreal from homepage/fonts/ (git-ignored; the web licence is unconfirmed). These come after base.css's, whose
   paths are relative to the homepage page itself, so they're the ones used here. */
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Book.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{--ease:cubic-bezier(.2,.7,.2,1)}
/* The ground's family. Deep Teal is the try (Xavi, 2 Oct 2026: "instead of the main Fathom blue … the Deep Teal family");
   ?tone=fathom (data-ground on html, set in the page's head) brings Fathom back to compare. --hue is the hero's ground and
   the panel's; --hue-line the panel's hairlines, a lighter step of the same family; --hue-kicker the eyebrow. Sea Mist on
   Deep Teal isn't one of the book's pairs, so on teal the eyebrow is Sea Foam (8.55:1, a listed pair). */
:root{--hue:var(--deep);--hue-line:#668E95;--hue-kicker:var(--foam)}        /* Deep Teal 500 and its step 700 (§6); Sea Foam */
:root[data-ground=fathom]{--hue:var(--fathom);--hue-line:var(--deep);--hue-kicker:var(--mist)}
body{overflow-x:clip}
/* the page is the hero and nothing else, so what shows past it is its ground too: a pull past the top or the foot of the
   page (a phone's rubber band, where a swipe on the globe is now the page's) no longer bares the white of the base */
html,body{background:var(--hue)}

/* ---------- the hero ---------- */
/* the page is this one screen (Xavi, 6 Oct 2026: "without scroll, the experience will be only this"): the hero is the
   window's height and nothing comes after it. On a window too short to hold it, it keeps 560 px and the page scrolls that
   little, so nothing is cut */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--hue);color:var(--white);touch-action:pan-y}
/* The ground: the home's silk on its own (silk-bg.js; Xavi, 2 Oct 2026), full-bleed. It replaced the gradient file, which
   read grainy and pixelated drawn this large. Until it draws, or without WebGL, the hero's plain ground shows (--hue). */
.silk{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the nav is the home's: components/nav/nav.css, linked before this file (Xavi, 2 Oct 2026: "follow suit the nav on the home") */

/* the globe: Tomás's box, size and place (a square min(64vw,118vh) wide, 6vw past the right edge, centred on the height).
   The globe's radius is .48 of the box. */
.globe{position:absolute;z-index:1;aspect-ratio:1;width:min(64vw,118vh);top:50%;right:-6vw;transform:translateY(-50%)}
/* the canvas runs past the box (globe.js sizes it), so the arcs stay whole beside the globe; the box takes the pointer */
.globe canvas{position:absolute;left:0;top:0;display:block;width:100%;height:100%;pointer-events:none}

/* the vector layer: reticle and lead line, 1 px white, drawn on (globe.js) */
.hud{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;visibility:hidden}
.hud.on{visibility:visible}
.hud circle,.hud line,.hud path{fill:none;stroke:var(--white);stroke-width:1;vector-effect:non-scaling-stroke}
.hud .tip{fill:var(--white);stroke:none}

/* the panel: the ground's colour (--hue) under the type, framed in white vector. Corner brackets, as the home's nav draws on
   hover; a hairline of a lighter step between them (--hue-line); caps detail lines and figures that hold their width. It wipes open from its lead line. */
.panel{position:absolute;z-index:4;left:0;top:0;width:clamp(260px,21vw,320px);padding:20px 22px 18px;background:var(--hue);color:var(--white);border:1px solid var(--hue-line)}
.panel[hidden]{display:none}
.panel .br{position:absolute;width:12px;height:12px;border:0 solid var(--white)}
.panel .tl{left:-1px;top:-1px;border-top-width:1px;border-left-width:1px}
.panel .tr{right:-1px;top:-1px;border-top-width:1px;border-right-width:1px}
.panel .bl{left:-1px;bottom:-1px;border-bottom-width:1px;border-left-width:1px}
.panel .bk{right:-1px;bottom:-1px;border-bottom-width:1px;border-right-width:1px}
.panel .k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.panel .t{margin-top:10px;font-size:clamp(20px,1.46vw,24px);line-height:1.2;letter-spacing:-.01em}
.panel .b{margin-top:8px;font-size:15px;line-height:1.5;color:var(--grey)}
.panel .rows{margin-top:14px;padding-top:12px;border-top:1px solid var(--hue-line);display:flex;flex-direction:column;gap:6px}
.panel .rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.panel dt{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.panel dd{margin:0;font-size:13px;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* the copy: the web mock's hero at its scale (the eyebrow in Sea Mist on Fathom, the view's one dose, or Sea Foam on teal; the headline at 60 to 1920; one
   white pill), on the silk's deeper side */
.hero-in{position:relative;z-index:2;height:100%;display:flex;align-items:center;pointer-events:none}
.hero-copy{pointer-events:auto;max-width:min(36rem,46vw);padding-top:calc(var(--nav) * .6)}
.hero .detail{color:var(--hue-kicker)}
.hero h1{margin:clamp(16px,1.25vw,24px) 0 clamp(16px,1.25vw,24px)}
.hero .lead{color:var(--grey);max-width:34ch}
.hero .ctas{margin-top:clamp(28px,2.5vw,48px)}
/* the white pill takes the ground's colour where the home's takes Fathom: its text, and its hover */
.hero .btn.light{color:var(--hue)}
.hero .btn.light:hover{background:var(--hue);color:var(--white)}
/* the offices as buttons: out of sight until the keyboard reaches them, then a row of outline tags under the pill */
.offices{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.offices:focus-within{position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.offices button{all:unset;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--grey);border-radius:var(--r);color:var(--white)}
.offices button:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* ---------- the phone's menu wears this page's ground (Xavi, 6 Oct 2026: "the BG for that view has to be the green palette
   like the hero bg for that view"): Deep Teal and its hairline here, and the silk in the Deep Teal family (data-silk="teal"
   on the dialog; components/base/silkband.js). The home's is navy. ---------- */
.menu{background:var(--hue)}
.menu nav a,.menu-meta{border-color:var(--hue-line)}

/* ---------- the sheet: "Join the team", the home's Get started sheet with this page's words (components/form/form.css, linked
   before this file). Its close sits over the picture's band on a phone, as on the home. Nothing of it is restyled here. ---------- */

/* the tour's block: the cities as cards to swipe, under a rail of six. Only where the copy sits over the globe (below) */
.tour{display:none}
.globe,.tour{-webkit-tap-highlight-color:transparent}      /* both take taps: no grey flash over the globe or a card */

/* ---------- phones and upright screens: the copy on top, the globe rising from the bottom edge, and between them the
   cities to swipe (Xavi, 6 Oct 2026). Nobody steers the globe here: a swipe up or down on a phone is the page's, so to
   see Buenos Aires meant a drag the browser took away. The card in turn is where the globe flies, and it tours the six
   by itself until someone takes over (globe.js, "the tour"). The globe isn't turned by hand: the hero gives every touch back
   to the page, and the globe itself keeps only what goes sideways, which turns it (touch-action, below; globe.js sets its tilt).
   - The rail: six rules; the one of the city in turn fills while the tour rests on it. A tap goes to that city.
   - The row: the desktop panel as a card, the same ground and hairline; the one in turn takes the white corner
     brackets. A card is 78% of the column, so the next shows at the edge; the row runs to the screen's edges and snaps.
     (From 520 px of width the card in turn sits in the middle instead: the rule after this one.)
   - Under the cards the globe has what's left of the screen, where the city in turn lands, and never less than 104 px:
     on a screen too short for it all, the hero is taller than the screen and the page scrolls that little.
   - A phone's browser shows less than its screen: 629 to 664 px of height on most iPhones, 739 to 746 on the largest,
     where the screens are 812 to 932. So the card gives its room to the globe in two steps (below). ---------- */
@media (max-width:900px),(orientation:portrait){
  .hero{height:auto;min-height:100vh;min-height:100svh;touch-action:auto}
  .hero-in{height:auto;flex-direction:column;align-items:stretch;padding-top:calc(var(--nav) + 32px);padding-bottom:104px}
  .hero-copy{max-width:none}
  .offices,.offices:focus-within{display:none}             /* the rail's six are the keyboard's way there */
  .tour{display:block;pointer-events:auto;margin-top:24px}
  .tour-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:6px;margin-bottom:4px}
  .tour-rail button{all:unset;position:relative;height:28px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .tour-rail button::before,.tour-rail button::after{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:var(--hue-line)}
  .tour-rail button::after{background:var(--white);transform:scaleX(0);transform-origin:0 50%}
  .tour-rail button.on::after{transform:scaleX(1)}
  .tour-rail button.run::after{transition:transform 4.5s linear}
  .tour-rail button:focus-visible{outline:2px solid var(--white);outline-offset:-4px}
  .tour-row{position:relative;display:flex;gap:12px;margin:0 calc(-1*var(--m));padding:0 0 0 var(--m);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tour-row::-webkit-scrollbar{display:none}
  .tour-row::after{content:"";flex:0 0 calc(var(--m) - 12px)}   /* the margin after the last card, as an item of the row: every browser counts it, which isn't so for padding there */
  .tour-card{position:relative;display:flex;flex-direction:column;flex:0 0 min(calc((100% - var(--m))*.78),320px);box-sizing:border-box;scroll-snap-align:start;padding:16px 18px 14px;background:var(--hue);color:var(--white);border:1px solid var(--hue-line)}
  .tour-card .br{position:absolute;width:12px;height:12px;border:0 solid var(--white);transform:scale(0);transition:transform .22s var(--ease)}
  .tour-card.on .br{transform:none;transition-delay:.2s}
  .tour-card .tl{left:-1px;top:-1px;border-top-width:1px;border-left-width:1px;transform-origin:0 0}
  .tour-card .tr{right:-1px;top:-1px;border-top-width:1px;border-right-width:1px;transform-origin:100% 0}
  .tour-card .bl{left:-1px;bottom:-1px;border-bottom-width:1px;border-left-width:1px;transform-origin:0 100%}
  .tour-card .bk{right:-1px;bottom:-1px;border-bottom-width:1px;border-right-width:1px;transform-origin:100% 100%}
  .tour-card .k{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .tour-card .t{margin-top:8px;font-size:18px;line-height:1.25;letter-spacing:-.01em}
  .tour-card .b{margin-top:6px;font-size:14px;line-height:1.45;color:var(--grey)}
  /* the local time sits at the foot of every card, so the six read as one row whatever their sentence takes: its hairline
     is drawn 12 px into its own box, which keeps that air over it when the card has none to spare */
  .tour-card .row{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:auto;padding-top:23px;
    font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
  .tour-card .row::before{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--hue-line)}
  .tour-card .time{font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--white)}
  /* the globe: its centre on the foot of the hero, so its top half shows. --fit (globe.js) keeps it no larger than fits
     under the row of cards, so that on a short screen its top and its arcs don't show over them */
  .globe{--g:min(150vw,110vh,var(--fit,9999px));width:var(--g);top:auto;right:auto;left:50%;bottom:calc(var(--g) * -.5);transform:translateX(-50%);
    touch-action:pan-y}                                       /* up and down are the page's; sideways is ours: it turns the globe (globe.js) */
  .panel{width:min(300px,calc(100vw - 32px))}
}
/* a wider upright screen (a tablet, a narrow window): a card is 320 px at most, so several show. The one in turn sits in
   the middle, over its city, with its neighbours at either side; the row's ends leave room for the first and the last
   to get there. (At the left edge, as on a phone, the city's line would run up to the next card, and the last cards
   could never be swiped to.) */
@media (min-width:520px) and (max-width:900px),(min-width:520px) and (orientation:portrait){
  .tour-row{padding-left:calc(50% + var(--m) - 160px);scroll-padding-inline:calc(50% - 160px)}   /* both are half the screen less half a card: the padding counts from the column, the snap from the row */
  .tour-row::after{flex-basis:calc(100% - 332px)}        /* what's left of the row's inside after one card and its gap: the same room as before the first */
  .tour-card{flex-basis:320px}
}
/* a shorter upright screen gives its room to the globe, in two steps.
   Under 800 px of height (a large phone's browser): the cards lose their sentence and the copy sits a little higher.
   Under 700 (most phones' browsers): the local time moves up beside the city, so a card is two lines: where, when, what. */
@media (max-width:900px) and (max-height:800px),(orientation:portrait) and (max-height:800px){
  .hero-in{padding-top:calc(var(--nav) + 20px)}
  .tour{margin-top:16px}
  .tour-card .b{display:none}
}
@media (max-width:900px) and (max-height:700px),(orientation:portrait) and (max-height:700px){
  .tour-card{padding:14px 18px}
  .tour-card .k{padding-right:64px}                        /* the time's place */
  .tour-card .row{position:absolute;top:14px;right:18px;margin:0;padding:0}
  .tour-card .row::before,.tour-card .row span:first-child{display:none}
}
@media (prefers-reduced-motion:reduce){.tour-rail button.run::after,.tour-card .br{transition:none}}
/* a phone held sideways: too short for the copy over the globe, so it takes the wide layout again, the copy at the left
   and the globe at the right, tightened to the window's height. One screen there too. No tour: the globe is whole, and a
   sideways drag turns it */
@media (max-height:520px) and (orientation:landscape){
  .hero{height:100vh;height:100svh;min-height:0;touch-action:pan-y}
  .tour{display:none}
  .hero-in{height:100%;flex-direction:row;align-items:center;padding-top:var(--nav);padding-bottom:0}
  .hero-copy{max-width:min(36rem,46vw);padding-top:0}
  .hero h1{margin:12px 0}
  .hero .ctas{margin-top:20px}
  .globe{width:min(64vw,118vh);top:50%;right:-6vw;left:auto;bottom:auto;transform:translateY(-50%)}
}