/* P1L shared styles for experience pages: tokens, type, nav, buttons, enquiry form, footer.
   Mirrors the homepage so every page shares one identity. Paths are relative to this file. */

/* Tungsten Condensed Bold. Note: a web licence from Hoefler&Co is needed before launch. */
@font-face{font-family:"Tungsten Cond";src:url("fonts/TungstenCond-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{
  --red:#FF0030;
  --paper:#F2F0EC;
  --ink:#111111;
  --white:#FFFFFF;
  --ink-2:#4F4D49;            /* body copy on paper, 7.3:1 */
  --ink-3:#6B6964;            /* small notes on paper, 4.9:1 */
  --mist:#B4B2AD;             /* body copy on near black, 9:1 */
  --rule-paper:rgba(17,17,17,.16);
  --rule-ink:rgba(255,255,255,.16);
  --field-ink:rgba(255,255,255,.42);  /* input borders on near black, 3.7:1 */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --f-head:"Tungsten Cond","Arial Narrow",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,80px);
  --max:1440px;
  --sec:clamp(88px,10vw,160px);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 16px/1.4 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--ink);color:var(--white);padding:12px 18px;font-weight:600;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
.wrap{width:min(var(--max),100% - 2*var(--pad));margin-inline:auto}

/* ---------- type system ---------- */
.h{margin:0;font-family:var(--f-head);font-weight:700;text-transform:uppercase;line-height:.78;letter-spacing:.004em;font-kerning:normal}
.h .r{color:var(--red)}
.h-xl{font-size:clamp(4.2rem,11.4vw,13.5rem)}
.h-l{font-size:clamp(3.4rem,7.2vw,8rem)}
.h-m{font-size:clamp(3rem,6.2vw,6.6rem)}
.h-s{font-size:clamp(1.5rem,1.9vw,1.85rem);line-height:.86}
.kicker{margin:0 0 18px;font:600 11px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.kicker.red{color:var(--red)}
.copy{margin:28px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.4;max-width:38ch}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:0 26px;border:0;border-radius:2px;background:var(--red);color:var(--white);font:600 14px/1 var(--f-body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:background-color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:#E0002B}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.pill{border-radius:999px;min-height:40px;padding:0 20px;font-size:13px}
.tlink{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 0 8px;font:600 14px/1 var(--f-body);text-decoration:none}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left}
.tlink:hover::after{animation:redraw .8s var(--ease-io)}
@keyframes redraw{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.tlink svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--pad);color:var(--white);transition:background-color .5s var(--ease),color .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);border-bottom:1px solid transparent}
.nav::before{content:"";position:absolute;inset:0 0 -60px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(14,12,10,.5),rgba(14,12,10,0));transition:opacity .5s var(--ease)}
.nav.solid{background:var(--paper);color:var(--ink);padding-block:14px;border-color:var(--rule-paper)}
.nav.solid::before{opacity:0}
.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;min-height:44px}
.brand svg{width:58px;height:auto;color:var(--red)}
.brand span{font:500 12px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.nav ul{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
.nav ul a:not(.btn){position:relative;font-size:14px;font-weight:500;text-decoration:none;padding:12px 0}
.nav ul a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav ul a:not(.btn):hover::after,.nav ul a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* ---------- enquiry (near black) ---------- */
.enquire{background:var(--ink);color:var(--white);padding-block:var(--sec)}
.enquire .grid{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,8fr);gap:clamp(32px,5vw,96px);align-items:start}
.enquire .kicker{color:var(--mist)}
.enquire .copy{color:rgba(255,255,255,.88);font-size:clamp(17px,1.35vw,20px);max-width:28ch}
form.req{display:grid;gap:28px}
.f{display:flex;flex-direction:column;gap:12px;border:0;margin:0;padding:0;min-width:0}
.f label,.f legend{padding:0;font:600 11px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.f label small{font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.62);text-transform:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.f input[type=text],.f input[type=email],.f input[type=tel],.f input[type=number],.f textarea,.f select{width:100%;min-height:52px;padding:14px 16px;background:transparent;border:1px solid var(--field-ink);border-radius:2px;font-size:16px;transition:border-color .3s var(--ease)}
.f select{appearance:none;-webkit-appearance:none;padding-right:44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center/14px no-repeat;cursor:pointer}
.f select option{color:var(--ink);background:var(--white)}
.f textarea{min-height:120px;resize:vertical;line-height:1.45}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.5);opacity:1}
.f input:focus,.f textarea:focus,.f select:focus{outline:none;border-color:var(--white)}
.f input:focus-visible,.f textarea:focus-visible,.f select:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.f input[type=number]{-moz-appearance:textfield}
.f input[type=number]::-webkit-inner-spin-button,.f input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.submit{width:100%;min-height:56px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.form-note{margin:-6px 0 0;color:rgba(255,255,255,.62);font-size:13px}
.err{margin:0;color:#FF8A9E;font-size:14px}
.sent{display:none}
form.req.is-sent > :not(.sent){display:none}
form.req.is-sent .sent{display:block}
.sent h3{margin:0}
.sent p{margin:16px 0 0;color:rgba(255,255,255,.88);max-width:44ch}

/* ---------- footer ---------- */
.foot{background:var(--paper);color:var(--ink);padding-block:clamp(48px,5vw,72px) 40px}
.foot .row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot .brand svg{color:var(--ink);width:64px}
.foot ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:13.5px}
.foot ul a{text-decoration:none}
.foot ul a:hover{text-decoration:underline;text-underline-offset:4px}
.social{display:flex;align-items:center;gap:18px}
.social a{display:grid;place-items:center;width:44px;height:44px}
.social svg{width:19px;height:19px}
.social a[hidden]{display:none}
.sign{padding-left:28px;border-left:1px solid var(--rule-paper);text-align:right;font-size:12.5px;line-height:1.6}
.sign small{display:block;color:var(--ink-3);font-size:11.5px}
.fine{margin:40px 0 0;color:var(--ink-3);font-size:11.5px;line-height:1.5;max-width:90ch}
.fine + .fine{margin-top:8px}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- the red line signature ---------- */
.lap{position:relative}
.lap > svg.line{position:absolute;left:0;top:0;width:100%;pointer-events:none;overflow:visible;z-index:3}
.line path{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.line .head{fill:var(--red);opacity:0}
.line .pulse{fill:none;stroke:var(--red);stroke-width:1;transform-box:fill-box;transform-origin:center;opacity:0}
.line.live .pulse{animation:pulse 4.2s var(--ease) -1.3s infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(4.2);opacity:0}}
.over{position:relative;z-index:4}      /* things the line passes behind */

/* ---------- motion: every start state lives under html.motion ---------- */
.ln{display:block;overflow:hidden;padding:.1em .06em .1em;margin:-.1em -.06em -.1em}
.ln > span{display:block}
.wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .03em .1em;margin:-.1em -.03em -.1em}
.wd > span{display:inline-block}
.motion [data-reveal] [data-split]:not(.split){opacity:0}
/* headline lines rise out of a mask */
.motion [data-reveal] .ln > span{transform:translateY(118%);transition:transform 1.2s var(--ease) calc(var(--i,0)*120ms)}
/* word by word, with a slight lean */
.motion [data-reveal] .wd > span{transform:translateY(118%) rotate(6deg);transform-origin:0 100%;transition:transform 1.05s var(--ease) calc(var(--i,0)*85ms)}
/* lines wipe in from the left */
.motion [data-reveal=wipe] .ln > span{transform:none;clip-path:inset(-.1em 100% -.1em 0);transition:clip-path 1.3s var(--ease-io) calc(var(--i,0)*170ms)}
.motion [data-reveal=wipe].in .ln > span{clip-path:inset(-.1em 0 -.1em 0)}
.motion [data-reveal].in .ln > span,.motion [data-reveal].in .wd > span{transform:none}
/* supporting lines follow the headline */
.motion [data-reveal] .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) calc(var(--i,0)*90ms + 160ms),transform 1.1s var(--ease) calc(var(--i,0)*90ms + 160ms)}
.motion [data-reveal].in .rv{opacity:1;transform:none}
/* the still section: a quiet fade, nothing travels */
.motion [data-reveal=fade] .fade{opacity:0;transition:opacity 1.6s var(--ease)}
.motion [data-reveal=fade].in .fade{opacity:1}
.motion [data-reveal=fade] .rv{transform:none;transition-duration:1.4s}
/* once an entrance is over, retire every stagger delay so hovers answer at once */
.motion [data-reveal].done .ln > span,.motion [data-reveal].done .wd > span,.motion [data-reveal].done .rv{transition-delay:0s}

@media (max-width:1180px){
  .enquire .grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .two,.three{grid-template-columns:1fr}
  .foot .row{flex-direction:column;align-items:flex-start}
  .sign{padding-left:0;border-left:0;text-align:left}
}
@media (max-width:720px){
  .nav{padding:14px 16px}
  .nav ul{gap:0}
  .nav ul li:not(.keep){display:none}
  .brand span{display:none}
  .foot ul{flex-wrap:wrap;gap:18px 26px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}