/* The Tide hero on reef black under the paper header. */
.hero{position:relative}

.hero.hero--tide{--g-bg:#1E1D1B;--g-panel:#292825;--g-raise:#262522;--g-body:#EEDCA8;--g-hi:#F6EEE2;--g-mute:#A89F8A;--g-display:#F76E71;--g-lit:#00A7A6;--g-fact:#00AA5A;--g-line:rgba(238,220,168,.14);--g-line2:rgba(238,220,168,.3);--g-tint:rgba(238,220,168,.07);
--cream:var(--g-bg);--ink:var(--g-body);--muted:var(--g-mute);--line:var(--g-line);--navy:var(--g-display);
background:var(--g-bg);color:var(--g-body);color-scheme:dark;box-shadow:0 0 0 100vmax var(--g-bg);clip-path:inset(0 -100vmax)}
.hero.hero--tide .hero-actions .text-link{color:var(--g-body)}
/* Hero actions: Talk to us (primary) and Request early access (outline) in one row; the outline opens the email form in place of the row. */
.hero .hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .hero-ctas[hidden],.hero .hero-access[hidden]{display:none}
.hero .hero-ctas>.button{min-height:48px;margin:0;padding:0 24px;white-space:nowrap}
.hero .hero-ctas>.button.line{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;border:0;border-radius:4px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--g-line2);color:var(--g-body);font-family:var(--sans);font-weight:500;line-height:1.2;text-decoration:none;transform:none;transition:box-shadow .15s}
.hero .hero-ctas>.button.line:hover{box-shadow:inset 0 0 0 2px var(--g-body)}
.hero .availability{flex-wrap:wrap}
.hero .availability-more{white-space:nowrap}
.hero .availability-more>a{color:var(--g-body);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--g-lit);text-underline-offset:4px}
.hero .availability-more>a:hover{text-decoration-thickness:2px}
@media(max-width:760px){
.hero .hero-ctas{flex:1 1 100%;flex-direction:column}
.hero .hero-ctas>.button{width:100%;justify-content:center}
}
.hero.hero--tide .status-pill{color:var(--g-body);border-color:var(--g-line2)}
.hero.hero--tide .hero-art{overflow:visible}
.tide-stage{position:absolute;inset:0}
.tide-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tide-caps{position:absolute;left:16%;top:64px;margin:0;padding:0;list-style:none;display:flex;gap:28px;font:400 16px/1.4 "Fragment Mono",ui-monospace,monospace;color:var(--g-mute)}
.tide-caps li{transition:color .5s ease}
.tide-caps li span{color:var(--g-mute)}
.tide-caps li.is-on{color:var(--g-hi)}
.tide-caps li.is-on span{color:var(--g-lit)}
/* Decision chips: one per landing, positioned and faded from hero-tide.js (transform and opacity only). */
.tide-chips{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tide-chip{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;white-space:nowrap;padding:var(--s-1,4px) var(--s-2,8px);border:1px solid var(--g-line2);border-radius:var(--r-tag,3px);background:var(--g-bg);font:400 13px/1.3 var(--mono,"Fragment Mono",ui-monospace,monospace);color:var(--g-body)}
.tide-chip span,.tide-call span:first-child{color:var(--g-mute)}
.tide-call{display:none}
.tide-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:760px){
.hero.hero--tide .hero-art{height:320px;margin-top:24px}
.hero.hero--tide .hero-art{margin-bottom:40px}
.tide-chips{display:none}
.tide-call{display:block;position:absolute;left:0;top:100%;margin:var(--s-2,8px) 0 0;font:400 14px/1.4 var(--mono,"Fragment Mono",ui-monospace,monospace);color:var(--g-body);opacity:0;transition:opacity .3s ease}
.tide-call.is-on{opacity:1}
.tide-call.is-on>span:last-child{display:inline-block;animation:tide-call-a .35s ease}
.tide-call.is-on.is-flip>span:last-child{animation-name:tide-call-b}
.tide-caps{left:0;top:0}
.tide-caps li:not(.is-on){display:none}
}
@keyframes tide-call-a{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes tide-call-b{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
.tide-caps li{transition:none}
.tide-call,.tide-call.is-on>span:last-child{transition:none;animation:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:760px){
.tide-caps{flex-direction:column;gap:2px}
.tide-caps li:not(.is-on){display:block}
.hero.hero--tide .hero-art{height:360px}
}
.tide-land{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.tide-veil{position:absolute;z-index:3;display:none;background:var(--g-bg);pointer-events:none}
.tide-veil.is-on{display:block}

@media(max-width:400px){
.hero h1{font-size:min(53px,13.9vw)}
}

/* The hero fills the first screen on desktop so the next section never peeks above the fold. */
@media (min-width:761px){.hero{min-height:min(calc(100svh - 67px),1100px)}}

/* Hero title cycle: the broad line is the h1 text; hero-tide.js adds one template line (aria-hidden), "Let your [type] agent
   [verb] the [object].", whose slots swap while the fixed words stay still. Both lines share one grid cell, so the h1 keeps
   the broad line's height and nothing below it moves. */
.hero h1.hero-cycle{display:grid}
.hero h1.hero-cycle>.hc-line{grid-area:1/1;align-self:start}
.hero h1.hero-cycle span{color:inherit}
.hero h1.hero-cycle .hero-accent{color:var(--g-body)}
@media (min-width:761px){
.hero .hero-copy h1.hero-cycle>.hc-line{white-space:normal}
.hero h1 .hc-seg{display:block;white-space:nowrap}
}
/* The template sets in three rows at every width, each row starting on a fixed word; its size keeps the longest row
   ("Let your incident") inside the copy column, clear of the water. */
.hero h1 .hc-tpl{font-size:min(1em,4.85vw)}
@media (max-width:760px){.hero h1 .hc-tpl{font-size:min(1em,calc((100vw - 32px) / 7.8))}}
.hero h1 .hc-row{display:block;white-space:nowrap}
/* a slot is as wide as its longest option, its options stacked in one cell; the period glides to the end of the object */
.hero h1 .hc-slot{display:inline-grid;vertical-align:baseline}
.hero h1 .hc-slot>*{grid-area:1/1;justify-self:start}
.hero h1 .hc-dot{transform:translateX(var(--hc-x,0));transition:transform .4s cubic-bezier(.2,.7,.2,1) .12s}
.hero h1 .hc-opt{opacity:0;transform:translateY(.32em);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.hero h1 .hc-opt.is-on{opacity:1;transform:none;transition:opacity .35s ease .08s,transform .4s cubic-bezier(.2,.7,.2,1) .04s}
.hero h1 .hc-opt.is-out{transform:translateY(-.32em)}
.hero h1 .hc-job>.hc-opt{transition-delay:.12s}
.hero h1 .hc-job>.hc-opt.is-on{transition-delay:.2s,.16s}
.hero h1.hc-snap *{transition:none!important}
/* whole-line crossfade between the broad line and the template */
.hero h1.hero-cycle.is-cycling>.hc-line{opacity:0;transform:translateY(.28em);pointer-events:none;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.hero h1.hero-cycle.is-cycling>.hc-line.is-on{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s ease .1s,transform .5s cubic-bezier(.2,.7,.2,1) .05s}
.hero h1.hero-cycle.is-cycling>.hc-line.is-off{transform:translateY(-.28em)}
@media (prefers-reduced-motion:reduce){.hero h1.hero-cycle>.hc-line[aria-hidden]{display:none}}