/* GENERATED from data/theme.json — do not edit by hand (use the CMS → Theme) */
:root{
--ink:#16324F;--ink-soft:#4A6178;--paper:#FFF8EE;--butter:#FFEBC9;--coral:#FF6B4A;--coral-deep:#D6402A;
--tangerine:#FFB03B;--teal:#0F8C8C;--teal-soft:#D6F0EE;--blush:#FFDCD2;--gold:#C8922E;--toyota-red:#EB0A1E;--white:#FFFFFF;
--r-card:24px;--r-pill:999px;--r-sm:14px;
--sticker:5px 5px 0 var(--ink);--sticker-hi:8px 8px 0 var(--ink);--sticker-lo:2px 2px 0 var(--ink);
--soft:0 10px 24px rgba(22,50,79,.10);
--sand:#FBE7C6;--speck-a:rgba(198,160,102,.18);--speck-b:rgba(198,160,102,.11);--speck-c:rgba(198,160,102,.07);--speck-d:rgba(198,160,102,.14);--ripple:rgba(198,160,102,.34);
--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;
--gutter:clamp(1.25rem,5vw,4rem);--ease-pop:cubic-bezier(.34,1.56,.64,1);--ease-settle:cubic-bezier(.22,1,.36,1);
}

/* INTERACTION — the export expressed these as style-hover="" / style-active="",
   which are Claude Design authoring attributes that no browser honours. They are
   real CSS here, keyed off the classes this renderer stamps. */
.btn-primary{display:inline-flex;align-items:center;gap:10px;min-height:52px;background:var(--coral-deep);color:var(--white);text-decoration:none;font-weight:700;font-size:1.0625rem;padding:14px 26px;border-radius:var(--r-pill);border:2px solid var(--ink);box-shadow:var(--sticker);transition:transform 200ms var(--ease-pop),box-shadow 200ms var(--ease-pop);cursor:pointer}
.btn-primary:hover{transform:translateY(-2px);box-shadow:8px 8px 0 var(--ink),0 0 0 6px rgba(255,176,59,.45);color:var(--white)}
.btn-primary:active{transform:translateY(2px);box-shadow:2px 2px 0 var(--ink)}
.btn-secondary{display:inline-flex;align-items:center;min-height:52px;background:transparent;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.0625rem;padding:14px 26px;border-radius:var(--r-pill);border:2px solid var(--ink);transition:transform 200ms var(--ease-pop),box-shadow 200ms var(--ease-pop);cursor:pointer}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--sticker);color:var(--ink)}
.btn-nav{display:inline-flex;align-items:center;gap:8px;background:var(--coral-deep);color:var(--white);text-decoration:none;font-weight:700;padding:11px 18px;border-radius:var(--r-pill);border:2px solid var(--ink);box-shadow:var(--sticker-lo);transition:transform 180ms var(--ease-pop),box-shadow 180ms var(--ease-pop)}
.btn-nav:hover{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink);color:var(--white)}
.btn-nav:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--ink)}
.card-lift{transition:transform 220ms var(--ease-pop),box-shadow 220ms var(--ease-pop)}
/* !important on the shadow only. .card-lift sits on cards that rest at different
   depths (--sticker on the credential cards, --sticker-lo on the social pills), so
   the resting value has to stay inline — and an inline value outranks a :hover
   rule, which is exactly why these never lifted. .card-tilt below has one resting
   depth and takes the cleaner route of owning the property outright. */
.card-lift:hover{transform:translateY(-4px) rotate(0deg);box-shadow:var(--sticker-hi)!important}
/* Cards the export drew at rest with a rotation and hovered to a DIFFERENT one.
   Both angles ride in as custom properties — --r at rest, --rh on hover — and the
   transform and shadow are owned here rather than written inline on the element.
   That is the whole point: an inline transform or box-shadow outranks a :hover
   rule, so a card styled inline can never move on hover no matter what the
   stylesheet says.

   How far a card rises and how much it grows are variables too (--lift, --pop),
   because the How-it-works cards are asked to pop harder than the rest. The
   hovered card is raised in the stacking order so its enlarged corner passes over
   its neighbours instead of under them. */
.card-tilt{position:relative;transform:rotate(var(--r,0deg));box-shadow:var(--sticker);transition:transform 220ms var(--ease-pop),box-shadow 220ms var(--ease-pop)}
.card-tilt:hover{transform:translateY(var(--lift,-4px)) scale(var(--pop,1)) rotate(var(--rh,var(--r,0deg)));box-shadow:var(--sticker-hi);z-index:3}
.row-tilt{box-shadow:var(--sticker);transition:transform 220ms var(--ease-pop),box-shadow 220ms var(--ease-pop)}
.row-tilt:hover{transform:translateY(-3px) rotate(var(--rh,0deg));box-shadow:var(--sticker-hi)}

/* Testimonial marquee. It is a real scroll container so touch panning and the
   keyboard arrows work for free and it degrades to an ordinary scroller with JS
   off — the scrollbar is hidden because the mask already signals "more this way".
   Text selection is suppressed only while a drag is in progress, so a visitor can
   still select a quote to copy it. */
[data-marquee]{scrollbar-width:none;-ms-overflow-style:none}
[data-marquee]::-webkit-scrollbar{width:0;height:0;display:none}
[data-marquee][data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}
[data-marquee]:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.link-arrow{font-weight:700;text-decoration:none;color:var(--teal);display:inline-flex;align-items:center;gap:6px;transition:gap 180ms var(--ease-settle)}
.link-arrow:hover{gap:12px}

/* Form controls — the export drew these inline on inputs that only ever appeared
   in a static preview. They need real focus and invalid states on a live form. */
.f-field{display:flex;flex-direction:column;gap:6px}
.f-field label{font-size:.875rem;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.f-field input,.f-field textarea,.f-field select{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--white);border:2px solid var(--ink);border-radius:var(--r-sm);padding:12px 14px;min-height:48px;width:100%}
.f-field textarea{min-height:120px;resize:vertical}
.f-field input:focus-visible,.f-field textarea:focus-visible,.f-field select:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.f-field[data-invalid] input,.f-field[data-invalid] textarea,.f-field[data-invalid] select{border-color:var(--coral-deep)}
.f-err{font-size:.8125rem;font-weight:700;color:var(--coral-deep);min-height:1em}
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-note{font-size:.8125rem;color:var(--ink-soft)}

/* The drawer and the form success panel both carry inline display values, which
   beat the [hidden] attribute's UA rule. Without this the drawer renders open on
   every page load. */
[hidden]{display:none!important}

/* Spine mount points. The static asset is what ships in the HTML; the rig is
   swapped in on top of it once the runtime resolves. Both fill the same box so
   the swap is invisible and a failed load leaves the static art in place. */
.rig{display:block;position:relative;line-height:0;aspect-ratio:var(--rig-ar,auto)}
.rig>img,.rig>spine-skeleton{display:block;width:100%;height:100%}
/* The static fallback is the raw atlas PAGE, not a picture of the asset, so it
   has to be contained inside the skeleton-shaped box rather than fill it. */
.rig>img{object-fit:contain}
.rig>spine-skeleton{position:absolute;inset:0;height:100%}
.rig[data-rig-ready]>img{visibility:hidden}

[data-sand]{--palm-w:410px;--palm-right:calc(100% - 443px);--palm-y:-80%;--palm-z:3;--car-lane-h:77px;--car-w:300px;--car-bottom:-6px}
/* The palm's pixels are drawn by a body-level <spine-overlay>, so this — not
   --palm-z — is what actually decides its depth. Stated explicitly at both
   breakpoints so the /sandbox z slider means one thing everywhere. */
[data-palm]{--rig-layer-z:3}
@media (max-width:1099px){[data-sand]{--palm-w:clamp(190px,26vw,420px);--palm-right:clamp(12px,6vw,110px);--palm-y:-62%;--car-lane-h:110px;--car-w:clamp(150px,19vw,300px)}}