/* Ingenuity Group public site — local design prototype.
   Every measurement here was read from the supplied Ingenuity-Website.fig (1280px desktop frames),
   not estimated: positions, sizes, colours, gradients and shadows are the design's own.
   Below 1280px the layout reflows; the design draws no other widths. */

@font-face{font-family:'Host Grotesk';src:url('/site/assets/fonts/HostGrotesk-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url('/site/assets/fonts/HostGrotesk-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url('/site/assets/fonts/HostGrotesk-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url('/site/assets/fonts/HostGrotesk-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Host Grotesk';src:url('/site/assets/fonts/HostGrotesk-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}

:root{
  --bg:#fffefd;--ink:#000;--ink2:#343434;--hair:#d9d9d9;--field:#cfd1d7;--line:rgba(52,52,52,.2);--muted:#707070;--ph:#b1b3b8;
  --sh-sm:0 1px 4px rgba(12,12,13,.05);
  --sh-md:0 4px 4px -4px rgba(12,12,13,.05),0 16px 32px -4px rgba(12,12,13,.10);
  --sh-step:0 4px 4px -4px rgba(12,12,13,.05),0 16px 16px -8px rgba(12,12,13,.10);
  --sh-flip:0 16px 32px -8px rgba(12,12,13,.40);
  --g:clamp(16px,3.75vw,48px);
  --pad:clamp(0px,3.906vw,50px);
  --font:'Host Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;letter-spacing:var(--ls,.1em)}
/* Figma tracking is a percentage of each text run's own size. Plain inheritance would freeze body's 1.3px onto everything, so
   every element recomputes it; components the design sets to 0% switch it off with --ls:0 (custom properties do inherit). */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 13px/27px var(--font);overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul{list-style:none}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
hr{border:0}
:focus-visible{outline:2px solid #000;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#000;color:#fff;padding:8px 14px;border-radius:20px}
.skip:focus{left:16px}
[hidden]{display:none!important}

.w{width:min(1184px,calc(100% - 2*var(--g)));margin-inline:auto}
/* The design's grid is 12 columns of 72px with 20px gutters, centred: 1084px of content inside .w's 50px padding. A
   1280px window with a classic scrollbar has 1265px of page, which used to shrink the content to 1069px and every
   column to 71px. From 1280px the side margin gives way first, so the grid holds. */
@media (min-width:1280px){.w{width:min(1184px,calc(100% - 32px))}}
.in{padding-inline:var(--pad)}

/* the small triangles the design draws as vectors */
.tri{display:block;flex:none;background:currentColor}
.tri--r{width:4.24px;height:8.49px;clip-path:polygon(0 0,100% 50%,0 100%)}
.tri--l{width:4.24px;height:8.49px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.tri--d{width:8.49px;height:4.24px;clip-path:polygon(0 0,100% 0,50% 100%)}
.tri--u{width:8.49px;height:4.24px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tri--r8{width:5.66px;height:11.31px;clip-path:polygon(0 0,100% 50%,0 100%)}
.tri--l8{width:5.66px;height:11.31px;clip-path:polygon(100% 0,0 50%,100% 100%)}
.tri--d8{width:11.31px;height:5.66px;clip-path:polygon(0 0,100% 0,50% 100%)}
.tri--u8{width:11.31px;height:5.66px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tri--c8{width:8px;height:8px;clip-path:polygon(100% 0,0 100%,100% 100%)}
.speck{position:absolute;width:6px;height:6px;background:var(--ink2);pointer-events:none}
.speck--c,.speck--band{clip-path:polygon(100% 0,0 100%,100% 100%)}
.speck--tl{clip-path:polygon(0 100%,100% 0,0 0)}
.mark{position:relative}
.mark::before{content:'';position:absolute;left:-13px;top:-7px;width:6px;height:6px;background:var(--ink2);clip-path:polygon(100% 0,0 100%,100% 100%)}

.eyebrow{font-weight:800;font-size:11px;line-height:15px;text-transform:uppercase}
.eyebrow--27{line-height:27px}

.lang,.pill,.hero__copy h1,.slot,.radio,.field,.btn-line,.btn-solid,.news__field,.thanks__h,.thanks__when,.ways__value,.menu__list,.talk__list,.pcard__tags,.dot{--ls:0}
.pill--tab,.btn-pill{--ls:.1em}

/* ─────────── header ─────────── */
.head{height:107px;position:relative;z-index:40}
.head__row{display:flex;justify-content:space-between;align-items:flex-start;padding-top:19px}
.head__logo img{width:170px;height:50px}
.head__tools{display:flex;align-items:center;gap:38px;margin-top:9px}
.lang{display:flex;align-items:center;height:34px;font:700 15px/1 var(--font);color:var(--ink2)}
.lang a{display:block;line-height:34px}
.lang a:first-child{width:30px;text-align:center}
.lang a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lang a:last-child{position:relative;width:27px;text-align:right;margin-left:3px}
.lang a:last-child::before{content:'';position:absolute;left:0;top:1px;height:33px;border-left:1px solid var(--field)}
.lang a[data-pending]{opacity:.55;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;justify-content:center;height:34px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:var(--ink2);font:700 15px/1 var(--font)}
.pill:hover{border-color:rgba(52,52,52,.55)}
.pill--menu{width:72px}
.menu{position:relative}
.menu__list,.talk__list{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:210px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--sh-md)}
.menu__list a,.talk__list a{display:block;padding:7px 16px;border-radius:12px;font:700 15px/27px var(--font);color:var(--ink2)}
.menu__list a:hover,.talk__list a:hover,.menu__list a:focus-visible,.talk__list a:focus-visible{background:#f2f2f2}

/* ─────────── hero ─────────── */
.hero{position:relative}
.hero__media{position:relative;height:545px;border-radius:23px;overflow:hidden;background:#313d40}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 59.3%}
.hero__shade{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 63%)}
.hero__copy{position:absolute;inset:0;padding:0 0 3px var(--hl,102px);display:flex;flex-direction:column;justify-content:center;color:#fff}
.hero__copy h1{max-width:855px;font:700 49px/55px var(--font);text-shadow:0 4px 14px rgba(0,0,0,.25)}
.hero__copy p{max-width:725px;margin-top:16px;font:700 18px/24px var(--font);text-shadow:0 4px 12px rgba(0,0,0,.25)}
/* The page scroller: the design draws it beside the hero, and it is the page's, not the video's (designer's notes,
   2026-10-12). It stays where the design puts it on the screen while the page moves, 9px outside the content's right
   edge, and its thumb follows the page. Only drawn where there is room for it outside the content. */
.page-scroll{position:fixed;left:calc(50% + 601px);top:273px;z-index:50;width:4px;height:241px;border-radius:30px;background:var(--hair);cursor:pointer}
.page-scroll i{position:absolute;left:0;top:0;width:4px;height:44px;border-radius:20px;background:#000;cursor:grab}
.page-scroll.is-dragging i{cursor:grabbing}
.page-scroll::before{content:'';position:absolute;inset:0 -10px}
.talk-row{margin-top:48px;display:flex;justify-content:flex-end;position:relative;z-index:5}
.talk{position:relative;margin-right:1px}
.pill--talk{position:relative;width:212px;height:46px;justify-content:flex-start;padding-left:28px;border-radius:42px;font-size:19px}
.pill--talk .tri{position:absolute;right:20px;top:20px}

/* ─────────── adopt / solve / rescue ─────────── */
.intro{position:relative;text-align:center;margin-top:-19px;padding-inline:var(--g)}
.intro__drone{width:461px;height:305px;margin:0 auto;position:relative;left:-17.5px}
.intro__title{position:relative;padding-left:.1em;max-width:811px;margin:-39px auto 0;font:300 32px/43px var(--font);text-transform:uppercase}
.intro__title .speck{left:26px;top:-3px}
.intro__lead{width:727px;max-width:100%;margin:17px auto 0;text-align:left}
.intro__body{position:relative;max-width:823px;margin:0 auto}
.intro__body .speck{left:832px;top:27px}
.zone{position:relative;margin-top:41px;padding-bottom:171px}
.zone.is-open{padding-bottom:111px}
.tabs{display:flex;justify-content:center;gap:32px}
.pill--tab{width:97px;box-shadow:var(--sh-sm)}
.pill--tab[aria-expanded=true]{border-color:#000;box-shadow:var(--sh-md)}
.connector{position:absolute;left:0;top:42px;width:100%;height:34px;overflow:visible;pointer-events:none}
.connector line{stroke:#000;stroke-width:1.6;stroke-dasharray:0 5.4;stroke-linecap:round}
.panel{margin:50px auto 0}
.panel h3{width:381px;max-width:100%;margin:0 auto;text-align:center}
.panel h3+p+.dots+h3{width:554px}
.panel__a{max-width:576px;margin:0 auto}
/* each panel's text widths, from its own artboard */
.panel__b{max-width:637px}
.panel--solve h3{width:711px}.panel--solve h3+p+.dots+h3{width:716px}.panel--solve .panel__a{max-width:716px}.panel--solve .panel__b{max-width:657px}
.panel--solve .btn-dark{width:max-content;min-width:299px;padding:0 28px}
.panel--rescue h3{width:573px}.panel--rescue h3+p+.dots+h3{width:577px}.panel--rescue .panel__a{max-width:615px}
.panel__b{margin:0 auto}
.dots{display:block;width:1.5px;height:29.5px;margin:16px auto 15.5px;background:linear-gradient(#000 1.5px,transparent 1.5px) 0 0/1.5px 5.4px repeat-y}
.rule{width:110px;height:1px;margin:25px auto 22px;background:var(--hair)}
.btn-dark{display:flex;align-items:center;justify-content:center;width:299px;height:34px;margin:34px auto 0;border-radius:17px;background:var(--ink2);border:1px solid var(--line);color:#fff;font:700 15px/1 var(--font)}
.btn-dark:hover{background:#000}

/* ─────────── support band ─────────── */
.band{position:relative;height:473px;color:#fff;overflow:hidden}
.band::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);z-index:2}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.band__copy{position:relative;padding-top:111px}
.speck--band{left:calc(var(--pad) + 79px);top:79px}
.band__copy .speck--band{left:79px}
.band h2{max-width:1061px;font:300 30px/40px var(--font)}
.band .eyebrow{margin-top:18px}
.band p:not(.eyebrow){max-width:1012px;margin-top:12px;text-shadow:0 4px 9px rgba(0,0,0,.55)}
.band p:not(.eyebrow)+p{margin-top:27px}

/* ─────────── technologies ─────────── */
.tech{padding-top:114px;padding-bottom:96px}
.tech .eyebrow{margin-left:-1px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tech .grid3{margin-top:39px}
.card{position:relative;height:321px;background:#fff;border-radius:12px;box-shadow:var(--sh-sm);overflow:hidden;text-align:left}
.card::after{content:'';position:absolute;inset:0;border:1px solid var(--hair);border-radius:12px;pointer-events:none;z-index:3}
.card__front img{width:100%;height:148px;object-fit:cover}
.card h3{margin:19px 24px 0 25px;font:500 13px/27px var(--font)}
.card__front p{max-width:300px;margin:11px 0 0 24px}
.card__arrow{position:absolute;right:22.9px;bottom:20.8px}
.card__toggle{position:absolute;right:3px;bottom:3px;z-index:4;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
/* The back: the card's own picture at 20% over black, the title, and what the team does in that field. */
.card__back{position:absolute;inset:0;z-index:2;padding:45px 24px 0 25px;color:#fff;background:#000;opacity:0;visibility:hidden;transform:rotateY(180deg);transition:opacity 0s .25s,visibility 0s .25s}
.card__back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;max-width:none}
.card__back h3,.card__back p{position:relative}
.card__back h3{margin:0}
.card__back p{max-width:301px;margin:11px 0 0 -1px}
/* A flip is a real turn of the card: it spins to edge-on, the face swaps at the halfway point (the .25s delays),
   and it finishes turning. The back is pre-rotated and so is the button, or both would read mirrored. */
.card--flip{transform:perspective(1200px) rotateY(0);transition:transform .5s cubic-bezier(.45,0,.55,1),box-shadow .5s ease}
.card__front{transition:opacity 0s .25s}
.card__toggle,.card__toggle .tri{transition:transform 0s .25s,color 0s .25s}
.card--flip.is-flipped{transform:perspective(1200px) rotateY(180deg);box-shadow:var(--sh-flip)}
.card--flip.is-flipped .card__back{opacity:1;visibility:visible}
.card--flip.is-flipped .card__front{opacity:0}
.card--flip.is-flipped .card__toggle{color:#fff;transform:rotateY(180deg)}

.card--flip.is-flipped .card__toggle .tri{transform:scaleX(-1)}

/* ─────────── testimonials ─────────── */
.voice{position:relative;margin-top:96px;margin-bottom:122px}
/* No testimonials, no section: the space goes with it. site.js adds .has-voices when the app returns any. */
.voice:not(.has-voices){display:none}
/* Every testimonial sits in the same grid cell, so the stage is as tall as the longest and the page never jumps.
   Each holds for ten seconds and then fades briefly into the next (designer's notes, 2026-10-12). */
.voice__stage{position:relative;display:grid;min-height:164px}
.voice__item{grid-area:1/1;display:flex;column-gap:58px;padding-left:92px;align-items:center;opacity:0;visibility:hidden;transition:opacity .4s ease-in-out,visibility .4s}
.voice__item.is-on{opacity:1;visibility:visible}
.voice__item img{flex:none;width:164px;height:164px;border-radius:10px;object-fit:cover;box-shadow:0 16px 32px -8px rgba(12,12,13,.40)}
.voice__text{flex:1;min-width:0;max-width:691px}
.voice__text blockquote{margin:0;font-size:16px;line-height:27px}
.voice__by{position:relative;margin-top:28px;padding-left:10px;font-weight:800;font-size:11px;line-height:15px;text-transform:uppercase}
.voice__by::before{content:'•';position:absolute;left:0;top:0}
.voice__by span{color:var(--muted)}
.voice__nav{position:relative;margin:8px 0 0 82px;display:flex;gap:2px}
.voice__nav button{width:44px;height:44px;display:grid;place-items:center;color:var(--ink2)}

/* ─────────── logo carousel ───────────
   The design draws the logos in one static row; they now loop. Spacing follows the design's rhythm:
   a logo, a dot, a logo, with about 28px either side of each dot. */
.strip{position:relative;border-top:1px solid var(--hair);height:77px;overflow:hidden}
.strip__track{display:flex;align-items:center;width:max-content;height:76px;padding-left:10px;animation:strip-loop var(--loop,60s) linear infinite}
.strip:hover .strip__track,.strip:focus-within .strip__track,.strip.is-paused .strip__track{animation-play-state:paused}
@keyframes strip-loop{to{transform:translateX(-50%)}}
.strip__item{display:flex;align-items:center;flex:none}
.strip__item img{flex:none;max-width:none;width:var(--w,auto);height:var(--h,32px)}
.strip__item .dot{margin:0 28px;width:21px;height:30px}
.dot{text-align:center;font:300 20px/30px var(--font);--ls:0;color:var(--ink2)}
.strip__pause{position:absolute;right:16px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(255,254,253,.92);display:grid;place-items:center;opacity:0;transition:opacity .15s}
.strip:hover .strip__pause,.strip__pause:focus-visible,.strip.is-paused .strip__pause{opacity:1}
.strip__pause i{display:block;width:10px;height:12px;border-left:3px solid var(--ink2);border-right:3px solid var(--ink2)}
.strip.is-paused .strip__pause i{width:0;height:0;border:0;border-left:11px solid var(--ink2);border-top:7px solid transparent;border-bottom:7px solid transparent}

/* ─────────── team banner ─────────── */
.banner{position:relative;height:522px;overflow:hidden;color:#fff}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.banner__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.7))}
.banner__glass{position:absolute;left:50%;top:50%;width:619px;height:150px;margin:-75px 0 0 -308px;padding:18px 42px 0 37px;border:1px solid rgba(255,255,255,.3);border-radius:17px;background:rgba(0,0,0,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);text-align:center}
.banner__glass p{font-size:18px;line-height:27px;text-shadow:0 2px 9px rgba(0,0,0,.85)}

/* ─────────── approach ─────────── */
.approach{padding-top:124px}
.approach__text{padding-left:92px}
.approach__text p{max-width:860px}
.approach__text .eyebrow{margin-bottom:12px}
.approach__text p+p{margin-top:27px}
.approach__text .indent{padding-left:5px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:74px;align-items:start}
.step__card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:100%;height:198px;padding:13px 0 0 22px;text-align:left;border-radius:12px;background:var(--ink2);border:1px solid var(--ink2);color:#fff;box-shadow:var(--sh-step);transition:transform .15s ease}
.step__card:hover{transform:translateY(-2px)}
.step__card h3{margin-left:1px;font:500 13px/27px var(--font)}
.step__card p{max-width:224px;margin-top:11px}
.step:nth-child(3) .step__card p{max-width:216px}
.step:nth-child(4) .step__card p{max-width:211px}
.step__card .tri{position:absolute;left:50%;bottom:19.3px;margin-left:-1.4px}
.step__card[aria-expanded=true]{margin-top:-2px;height:202px;padding-top:15px;background:#fff;color:#000;border-color:#000}
.step__card[aria-expanded=true] .tri{bottom:23px;margin-left:-1.7px;transform:rotate(180deg)}
.step__card[aria-expanded=true]:hover{transform:none}
.step-details{margin-top:20px}
.step-detail{position:relative;padding:63px 0 0 95px;--cx:50%}
.step-detail::before{content:'';position:absolute;left:var(--cx);top:0;width:1.5px;height:48.5px;margin-left:-.75px;background:linear-gradient(#000 1.5px,transparent 1.5px) 0 0/1.5px 5.4px repeat-y}
.step-detail h4{font:800 13px/27px var(--font);text-transform:uppercase}
.step-detail p{max-width:894px}
.step-detail hr{width:110px;height:1px;margin:45px 0 0;background:var(--hair)}

/* ─────────── custom-built innovation ─────────── */
.innovation{margin-top:148px}
.innovation__panel{position:relative;height:545px;border-radius:23px;background:linear-gradient(to right,rgba(0,99,248,.1) 0%,rgba(0,99,248,0) 63%)}
.innovation__arm{position:absolute;left:123.5px;top:-168px;width:665px;height:729.5px;max-width:none;transform:rotate(28.8deg);transform-origin:0 0;pointer-events:none}
.innovation__copy{position:absolute;left:552px;top:68px;width:442px}
.innovation__eyebrow{position:relative;padding-left:42px}
.innovation__eyebrow::before{content:'';position:absolute;left:0;top:7px;width:34px;height:1px;background:linear-gradient(to right,#ff4981,#fea03a)}
.innovation__copy p{margin-top:27px}
.innovation__eyebrow+p{margin-top:12px}

/* ─────────── booking ─────────── */
.booking{margin-top:64px}
.booking:not(.has-times){display:none}
.no-booking a[href$="#talk"]{display:none}
.booking__card{position:relative;height:516px;border:1px solid rgba(52,52,52,.1);border-radius:23px;background:#fff;box-shadow:var(--sh-md);z-index:2}
.bk{position:absolute;inset:0;padding:103px 0 0 141px;font-weight:300}
.bk__sub{margin:0}
.slots{position:relative;height:217px;margin-top:15px}
.slots__days{position:absolute;left:0;top:0;width:92px}
.slots__days div{height:34px;margin:0 -1.3px 3px 0;padding-top:5px;text-align:right;line-height:27px}
.slots__grid{position:absolute;left:134px;top:0;display:grid;grid-template-columns:repeat(8,88px);gap:3px 4px}
.slot{height:34px;border:1px solid var(--field);border-radius:999px;background:#fff;color:var(--ink2);font:400 13px/1 var(--font)}
.slot:hover:not(:disabled):not([aria-pressed=true]){border-color:var(--ink2)}
.slot:disabled{color:var(--field);font-weight:300;cursor:not-allowed}
.slot[aria-pressed=true]{background:var(--ink2);border-color:#000;color:#fff;font-weight:700}
.slots__next,.slots__prev,.slots__more,.slots__less{position:absolute;width:44px;height:44px;display:grid;place-items:center;color:var(--ink2)}
.slots__next{left:881.8px;top:74.7px}
.slots__prev{left:881.8px;top:74.7px}
.slots__more{left:13.4px;top:178.8px}
.slots__less{left:60px;top:178.8px}
/* A day with no times says why, across the row where its times would be. */
.slots__days .is-off{color:var(--muted)}
.slots__off{grid-column:1/-1;height:34px;margin:0;padding-left:16px;line-height:34px;font-size:13px;font-style:italic;color:var(--muted);border-radius:999px;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.03) 6px 12px)}
.has-weekend{height:590px}
.has-weekend .slots{height:291px}
.has-weekend .slots__more{top:252.8px}
.has-weekend .slots__less{top:252.8px}
.bk__foot{position:relative;display:flex;justify-content:space-between;align-items:center;width:920px;height:46px}
.modes{display:flex;gap:23px;border:0;min-width:0;padding-bottom:4px}
.radio{position:relative;display:inline-flex;align-items:center;gap:16px;font:400 13px/18px var(--font);color:var(--ink2);cursor:pointer}
.radio input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer}
.radio__dot{position:relative;flex:none;width:18px;height:18px;border:1px solid var(--field);border-radius:50%;background:#fff}
.radio input:checked+.radio__dot::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#000}
.radio input:focus-visible+.radio__dot{outline:2px solid #000;outline-offset:2px}
.radio a{text-decoration:underline;text-underline-offset:2px}
.btn-line,.btn-solid{position:relative;display:flex;align-items:center;height:46px;border-radius:92px;font:700 19px/1 var(--font);padding-left:28px;text-align:left}
.btn-line{width:453px;border:1px solid #000;background:#fff;color:var(--ink2)}
.btn-line:disabled{border-color:var(--field);color:var(--ph);cursor:not-allowed}
.btn-solid{width:441px;border:1px solid #000;background:#000;color:#fff;padding-left:33px}
.btn-line:hover:not(:disabled){background:#f5f5f5}
.btn-solid:hover{background:var(--ink2)}
.btn-line .tri,.btn-solid .tri{position:absolute;right:13px;top:17px}
.btn-solid .tri{right:13px}

.bk--form{padding-top:103px}
.bk__back{position:absolute;left:88px;top:89px;width:44px;height:44px;display:grid;place-items:center;color:var(--ink2)}
.form__cols{display:grid;grid-template-columns:344px 542px;column-gap:34px;margin-top:15px}
.form__left{display:grid;gap:12px;align-content:start}
.field{position:relative;display:block}
.field input,.field select,.field textarea{width:100%;height:34px;padding:0 23px;border:1px solid var(--field);border-radius:999px;background:#fff;font:400 13px/1 var(--font);color:var(--ink2);outline-offset:2px}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field ::placeholder{color:var(--ink2);opacity:1}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#a9acb4}
.field[data-invalid] input,.field[data-invalid] select,.field[data-invalid] textarea{border-color:#c0392b}
.field__opt{position:absolute;right:18px;top:0;line-height:34px;font:400 13px/34px var(--font);color:var(--ph);pointer-events:none}
.field--select .field__opt{right:50px}
.field--select .tri{position:absolute;right:30px;top:14px;color:var(--ink2);pointer-events:none}
.field--area textarea{height:172px;padding:17px 23px;border-radius:17px;line-height:normal;resize:none}
.form__files{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.chips{display:flex;gap:14px;padding-left:23px;font:400 11px/1 var(--font);color:var(--ink2)}
.chips li{display:flex;align-items:center;gap:16px}
.chips button{position:relative;width:20px;height:20px}
.chips button::before,.chips button::after{content:'';position:absolute;left:5px;top:9.5px;width:10px;height:1px;background:#000;transform:rotate(45deg)}
.chips button::after{transform:rotate(-45deg)}
.btn-pill{width:286px;height:34px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.8);box-shadow:var(--sh-sm);font:700 15px/1 var(--font);color:var(--ink2)}
.btn-pill:hover{border-color:rgba(52,52,52,.55)}
.form__foot{display:flex;justify-content:space-between;align-items:flex-start;width:920px;margin-top:33px}
.checks{display:grid;gap:10px}
.form__foot .btn-solid{margin-top:2px}
.form__error{position:absolute;left:141px;bottom:22px;max-width:640px;font-size:13px;line-height:20px;color:#c0392b}
.form__error:empty{display:none}

.bk--thanks{padding:83px 0 0 116px}
.thanks__h{font:700 59px/77px var(--font)}
.thanks__when{margin:23px 0 0 7px;font:300 32px/43px var(--font)}
.thanks__note{margin:39px 0 0 10px;font-size:16px;line-height:21.5px}
.thanks__mail{margin:32px 0 0 10px;font-size:16px;line-height:27px}
.thanks__mail a{text-decoration:underline;text-underline-offset:3px}

/* ─────────── ways to connect (shared by the light band and the black footer) ─────────── */
.connect--light{margin-top:122px;padding-bottom:108px}
.ways{position:relative;height:199px}
.ways>*{position:absolute}
.ways__h{left:13px;top:0}
.ways__social{left:13px;top:55px}
.ways__social li{margin-bottom:19px}
.ways__social a{display:block;font:700 15px/20px var(--font);color:var(--ink2)}
.ways__social a:hover,.ways__value a:hover{text-decoration:underline;text-underline-offset:3px}
.ways__social a[data-pending],.legal-links a[data-pending]{cursor:default}
.ways__direct{left:198px;top:49px}
.ways__label{margin:0}
.ways__value{display:flex;align-items:flex-end;gap:9px;margin:8px 0 33px;font:700 15px/20px var(--font);color:var(--ink2)}
.ways__value .tri{margin-bottom:5px}
.ways__value:last-child{margin-bottom:0}
.news{left:614px;top:0;width:453px}
.news__h{font-size:16px;line-height:27px}
.news__field{display:flex;align-items:center;width:453px;height:46px;margin-top:22px;border:1px solid var(--field);border-radius:42px;background:transparent}
.news__field input{flex:1;min-width:0;height:100%;padding:0 0 0 27px;border:0;background:transparent;font:700 19px/1 var(--font);color:var(--ink2)}
.news__field input::placeholder{color:var(--ink2);opacity:1}
.news__field input:focus-visible{outline:0}
.news__field:focus-within{outline:2px solid #000;outline-offset:2px}
/* The pill is the focus ring for both the box and its arrow; the arrow's own square ring drew over the pill's end. */
.news__field button:focus-visible{outline:0}
.news__field button{width:44px;height:44px;margin-right:5px;display:grid;place-items:center;color:var(--ink2)}
.news__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.news__msg{position:absolute;left:0;top:104px;font-size:13px;line-height:20px}
.hair{height:1px;margin:0;background:var(--hair)}
.hair--bleed{width:100%}

/* ─────────── projects ─────────── */
.projects{padding-top:86px;padding-bottom:109px}
.projects .eyebrow{margin-left:13px;margin-bottom:16px}
.pcard{position:relative;height:321px;background:#fff;border-radius:12px;box-shadow:var(--sh-sm);overflow:hidden}
.pcard::after{content:'';position:absolute;inset:0;border:1px solid var(--hair);border-radius:12px;pointer-events:none}
.pcard>img{width:100%;height:127px;object-fit:cover}
.pcard h3{margin:18px 24px 0 23px;font:500 13px/27px var(--font)}
.pcard>p{max-width:306px;margin:11px 0 0 22px}
.pcard__tags{position:absolute;left:23px;bottom:22.5px;display:flex;gap:3px}
.pcard__tags li{height:17px;min-width:var(--w,auto);padding:0 9px;text-align:center;border-radius:10px;background:var(--ink2);color:#fff;font:700 11px/17px var(--font)}
.pcard .tri{position:absolute;right:27.8px;bottom:26.5px}
.btn-view{display:flex;align-items:center;justify-content:center;width:max-content;min-width:130px;padding:0 24px;height:34px;margin:48px auto 0;border:1px solid #000;border-radius:999px;background:rgba(255,255,255,.8);box-shadow:var(--sh-sm);font:700 15px/1 var(--font);color:var(--ink2);position:relative;left:13px}
.btn-view:hover{background:#000;color:#fff}

/* ─────────── story + team ─────────── */
.story{padding-top:176px;padding-bottom:88px}
.story>.eyebrow,.story__text{margin-left:96px}
.story__text{max-width:892px;margin-top:26px}
.story__text p+p{margin-top:27px}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:325px;column-gap:20px;margin-top:112px}
.person{position:relative}
/* height:auto, or the img's own height="256" wins over the aspect ratio: wider than 256px (two columns, or one on a
   phone) the square photo was cut to a short band and lost the top of everyone's head (feedback, 2026-10-13). */
.person img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;box-shadow:var(--sh-md)}
.person:nth-child(3) img{object-position:top}
.person h3{margin:4px 0 0 7px;font:500 13px/27px var(--font)}
.person p{margin:-2px 0 0 7px;max-width:245px;font-size:13px;line-height:16px}
.person__photo{position:relative}
.person__back{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:linear-gradient(to bottom,#000,var(--ink2));opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;color:#fff}
.person__back img{position:absolute;inset:0;height:100%;opacity:.3;border-radius:0;box-shadow:none}
/* Lists of four to six: the design centres each one on the card. */
.person__back ul{position:absolute;left:25px;right:16px;top:50%;transform:translateY(-50%);font:500 15px/27px var(--font)}
.person__toggle{position:absolute;inset:0;border-radius:12px}
.person--flip.is-flipped .person__back{opacity:1;visibility:visible}
.legal{margin-top:45px;margin-bottom:47px;font-size:11px;line-height:17px}
.hair--legal{margin-top:0}

/* ─────────── footer ─────────── */
.foot{background:#000;color:#fff;padding-top:54px;padding-bottom:80px}
.foot__logo{display:block;width:255px;margin-bottom:68px}
.foot__logo img{width:255px;height:91px}
.connect--dark .ways__social a,.connect--dark .ways__value,.connect--dark .news__field input,.connect--dark .news__field button{color:#fff}
.connect--dark .news__field input::placeholder{color:#fff}
.connect--dark .news__field:focus-within{outline-color:#fff}
.connect--dark :focus-visible{outline-color:#fff}
.legal-links{left:615px;top:172px;display:flex;flex-wrap:wrap;width:469px;gap:10px 35px;font:700 15px/20px var(--font)}
.legal-links a:hover{text-decoration:underline;text-underline-offset:3px}
.copyright{margin:70px 0 0 11px;color:var(--hair);line-height:17px;padding-bottom:10px}

/* ─────────── below the design's width ─────────── */
@media (max-width:1100px){
  .hero__media{height:clamp(420px,52vw,545px)}
  .hero__copy{padding-left:clamp(28px,6vw,102px);padding-right:24px}
  .hero__copy h1{font-size:clamp(34px,4.6vw,49px);line-height:1.12}
  .hero__copy h1 br{display:none}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.pcard{height:auto;min-height:321px;padding-bottom:50px}
  .card__front p,.pcard>p{max-width:none;margin-right:24px}
  .pcard__tags{position:static;flex-wrap:wrap;margin:14px 24px 0 23px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step__card,.step__card[aria-expanded=true]{height:auto;min-height:198px;padding-bottom:44px}
  .innovation__panel{height:auto;padding:40px 36px 56px;overflow:hidden}
  .innovation__arm{position:relative;left:auto;top:auto;width:min(80%,420px);height:auto;margin:0 auto 12px;transform:none}
  .innovation__copy{position:relative;left:auto;top:auto;width:auto;max-width:560px;margin:0 auto}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;row-gap:36px}
  .person{max-width:360px}
  .person p{max-width:none}
  .ways{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:36px 28px}
  .ways>*{position:static}
  .ways__h{grid-column:1/-1}
  .news{width:auto;grid-column:1/-1}
  .news__field{width:100%;max-width:453px}
  .legal-links{grid-column:1/-1;width:auto;flex-wrap:wrap;gap:12px 35px}
  .news__msg{position:static;margin-top:8px}
  .foot__logo{margin-bottom:44px}
  /* From here the booking card reflows rather than at 900px: at 1024px its grid, placed for the 1280px frame, ran
     past the card and cut off the next-week arrow (review of 2026-10-12). */
  .booking__card{height:auto;padding:36px 28px 32px}
  .bk{position:static;padding:0}
  .bk--thanks{padding:12px 0 8px}
  .slots,.has-weekend .slots{height:auto;margin-top:20px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;overflow-x:auto}
  .slots__days,.slots__grid{position:static}
  .slots__grid{grid-template-columns:repeat(8,76px);gap:3px}
  .slots__days{width:84px;position:sticky;left:0;z-index:1;background:#fff}
  .slots__next,.slots__prev,.slots__more,.slots__less{position:static;grid-column:1/-1;justify-self:start}
  .bk__foot{flex-direction:column;align-items:stretch;gap:16px;width:100%;height:auto;margin-top:16px}
  .btn-line,.btn-solid{width:100%}
  .bk__back{position:static;margin:-14px 0 0 -12px}
  .form__cols{grid-template-columns:1fr;row-gap:12px}
  .form__foot{flex-direction:column;gap:18px;width:100%}
  .form__error{position:static;margin-top:12px}
  .intro__body .speck{display:none}
  /* A form field under 16px makes iOS zoom the page on every tap. */
  .field input,.field select,.field textarea{font-size:16px}
}
@media (max-width:900px){
  .thanks__h{font-size:clamp(36px,8vw,59px);line-height:1.15}
  .thanks__when{font-size:clamp(22px,5vw,32px)}
  .approach__text,.story>.eyebrow,.story__text{padding-left:0;margin-left:0}
  .step-detail{padding-left:0}
  .innovation__eyebrow{padding-left:42px}
  .connect--light{margin-top:80px;padding-bottom:64px}
  .story{padding-top:96px;padding-bottom:56px}
  .projects{padding-top:64px;padding-bottom:64px}
  .tech{padding-top:72px;padding-bottom:48px}
  .voice{margin-top:48px;margin-bottom:80px}
  .voice__item{flex-direction:column;row-gap:24px;padding-left:0;align-items:flex-start}
  .voice__item img{width:120px;height:120px}
  .voice__nav{margin:18px 0 0;justify-content:flex-start}
  .band{height:auto}
  .band__copy{padding-top:72px;padding-bottom:72px}
  .band__copy .speck--band{display:none}
  .banner{height:auto;min-height:420px;padding:48px 0}
  .banner__glass{position:relative;left:auto;top:auto;margin:0 auto;width:min(619px,calc(100% - 2*var(--g)));height:auto;padding:22px 26px}
  .approach{padding-top:80px}
  .steps{margin-top:40px}
  .innovation{margin-top:96px}
  .btn-view{left:0}
}
@media (max-width:600px){
  body{font-size:13px}
  .head{height:84px}
  .head__row{padding-top:16px}
  .head__logo img{width:130px;height:auto}
  .head__tools{gap:14px;margin-top:4px}
  .hero__media{height:520px;border-radius:18px}
  .hero__copy{justify-content:flex-end;padding:0 22px 40px}
  .hero__copy p{font-size:15px}
  .talk-row{margin-top:24px}
  .intro{margin-top:-6px}
  .intro__drone{width:min(86%,340px);height:auto;left:0}
  .intro__title{font-size:22px;margin-top:-20px}
  .intro__title br{display:none}
  .intro__title .speck,.intro__body .speck{display:none}
  .pill--tab{width:auto;min-width:88px;padding:0 14px}
  .tabs{gap:10px}
  .grid3,.steps,.team{grid-template-columns:1fr}
  .person img{max-width:none}
  .ways{grid-template-columns:1fr}
  .step__card p{max-width:none;padding-right:22px}
  .band h2{font-size:24px;line-height:1.25}
  .thanks__when br{display:none}
  .innovation__panel{padding:28px 22px 40px}
  .innovation__copy{padding-top:6px}
  .booking__card{padding:30px 20px 28px;border-radius:18px}
  .btn-line,.btn-solid{font-size:16px;padding-left:20px}
  .btn-solid{padding-left:20px;padding-right:44px}
  .btn-pill{width:100%}
  .form__files{flex-direction:column;align-items:stretch;gap:10px}
  .news__h{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  /* The card flip is a single turn the visitor asks for by clicking, and it is the one thing here they expect to see move. */
  .card--flip{transition:transform .5s cubic-bezier(.45,0,.55,1),box-shadow .5s ease!important}
  .card__back,.card__front{transition:opacity 0s .25s,visibility 0s .25s!important}
  .card__toggle,.card__toggle .tri{transition:transform 0s .25s,color 0s .25s!important}
  /* The logos keep moving, as the hero video does (decision of 2026-10-09): a machine with animations switched off
     left the carousel standing still, which read as broken. The pause button stops it for anybody who wants it still. */
  .strip__track{animation:strip-loop var(--loop,60s) linear infinite!important}
  .strip.is-paused .strip__track,.strip:hover .strip__track,.strip:focus-within .strip__track{animation-play-state:paused!important}
  /* Testimonials fade into each other; with no transition they cut. */
  .voice__item{transition:opacity .4s ease-in-out,visibility .4s!important}
}
@media print{.head,.page-scroll,.talk-row,.voice__nav{display:none}}

/* ─────────── fixed header and pinned "Let's talk" ─────────── */
body{padding-top:107px}
.head{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--bg)}
.head.is-scrolled{box-shadow:0 1px 0 var(--hair)}
[id]{scroll-margin-top:100px}
.talk-row{height:46px;pointer-events:none}
.talk{pointer-events:auto}
.talk.is-fixed{position:fixed;top:119px;z-index:55}
@media (max-width:600px){body{padding-top:84px}.head{height:84px}.talk.is-fixed{top:96px}}

/* ─────────── project cards link to their page ─────────── */
.pcard__link::after{content:'';position:absolute;inset:0;z-index:2;border-radius:12px}
.pcard:hover{box-shadow:var(--sh-md)}
.pcard:focus-within{outline:2px solid #000;outline-offset:3px}
.pcard__link:focus-visible{outline:0}
.pcard__link{text-align:left}

/* ─────────── a project opened full width ───────────
   Choosing a card replaces the grid with that project across the full content width, and the section's heading
   becomes "Back" (designer's notes and the Kingswood and Senso24 frames, 2026-10-12). */
.projects__title{display:flex}
.projects__back{font:inherit;text-transform:inherit;color:inherit}
.projects__back:hover{text-decoration:underline;text-underline-offset:4px}
.projects.is-open .grid3{display:none}
.pfull{position:relative;min-height:662px;background:#fff;border-radius:12px;box-shadow:var(--sh-sm);overflow:hidden;animation:pfull-in .45s cubic-bezier(.16,1,.3,1)}
.pfull::after{content:'';position:absolute;inset:0;border:1px solid var(--hair);border-radius:12px;pointer-events:none}
@keyframes pfull-in{from{opacity:0;transform:translateY(6px)}}
.pfull__head{position:relative;min-height:229px;padding:30px 47px 26px;color:#fff;background:#313d40}
.pfull__head>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
/* Black to clear across the picture (design notes, 2026-10-13), held dark past the middle because the intro runs to
   87% of the width and over a pale picture (Kingswood's) white text on the bare photo disappeared. z-index 1: the photo
   is placed absolutely after the shade in paint order and covered it at every width until 2026-10-12. */
.pfull__head::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to right,#000 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,0) 100%)}
/* The photo is placed absolutely after the shade in paint order, so without these the photo covered the shade and the
   white text sat on the bare picture at every width (feedback, 2026-10-12). */
.pfull__head>:not(img){position:relative;z-index:2}
.pfull h3{max-width:850px;padding-right:180px;font:700 49px/55px var(--font);--ls:0;text-shadow:0 4px 14px rgba(0,0,0,.25)}
.pfull__headline{max-width:940px;margin-top:9px;font:800 20px/32px var(--font);text-shadow:0 4px 12px rgba(0,0,0,.25)}
.pfull__overview{max-width:938px;margin-top:11px;font:700 13px/19px var(--font);text-shadow:0 4px 12px rgba(0,0,0,.25)}
/* Relative, not static: a static list paints under the absolutely placed photo, which is why the tags never showed
   (design notes, 2026-10-13). Under the company name at every width. */
.pfull .pcard__tags{position:relative;inset:auto;z-index:2;flex-wrap:wrap;margin:12px 0 4px}
.pfull .pcard__tags li{background:#fff;color:#000}
.pfull__body{padding:34px 47px 49px}
.pfull__body h4{font:500 13px/27px var(--font)}
.pfull__body p{max-width:994px;--ls:0}
.pfull__body p+h4{margin-top:10px}
.pfull__body p+p{margin-top:13px}
.pfull__soon{color:#555}
@media (max-width:900px){
  .pfull{min-height:0}
  .pfull__head{padding:24px 24px 22px}
  .pfull h3{padding-right:0;font-size:clamp(30px,7vw,49px);line-height:1.12}
  .pfull__body{padding:26px 24px 36px}
}
@media (prefers-reduced-motion:reduce){.pfull{animation:ig-fade .2s ease-out both!important}}

/* ─────────── layout guide: add ?grid to the address ───────────
   The design's 12 columns, 72px wide with 20px gutters, centred: 1084px, the content width every section uses. */
.grid-guide{position:fixed;inset:0;z-index:300;pointer-events:none}
.grid-guide>div{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;height:100%}
.grid-guide i{background:rgba(255,0,80,.08);border-inline:1px solid rgba(255,0,80,.18)}

/* ─────────── project page ─────────── */
.talk-row+.proj{margin-top:0}
.proj{padding-top:36px;padding-bottom:110px}
.proj__back{display:inline-flex;align-items:center;gap:10px;font:700 15px/20px var(--font);color:var(--ink2)}
.proj__back:hover{text-decoration:underline;text-underline-offset:4px}
.proj__status{margin-top:32px}
.proj__title{margin-top:28px;max-width:855px;font:700 49px/55px var(--font);--ls:0}
.proj__client{margin-top:12px}
.proj__headline{max-width:940px;margin-top:12px;font:800 20px/28px var(--font)}
.proj__tags{position:static;margin-top:24px}
.proj__hero{height:420px;margin-top:40px;border-radius:23px;overflow:hidden;background:#313d40}
.proj__hero img{width:100%;height:100%;object-fit:cover}
.proj__body{max-width:760px;margin-top:40px}
.proj__summary{font-size:16px}
.proj__section{margin-top:40px}
.proj__section .eyebrow{margin-bottom:12px}
.proj__section p+p{margin-top:27px}
.proj__soon{margin-top:27px;color:#555}
.proj__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px;width:min(1084px,calc(100vw - 2*var(--g)))}
.proj__gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.proj__cta{width:min(453px,100%);margin-top:56px}
@media (max-width:900px){.proj__title{font-size:clamp(32px,7vw,49px);line-height:1.12}.proj__hero{height:clamp(220px,50vw,420px)}.proj__gallery{grid-template-columns:1fr}}

/* "Let's talk" is fixed to the bottom of the screen; its row keeps the design's spacing under the hero */
.talk,.talk.is-fixed{position:fixed;top:auto;bottom:55px;z-index:55}
.talk__list{top:auto;bottom:calc(100% + 8px)}
@media (max-width:600px){.talk,.talk.is-fixed{bottom:16px}}

/* ─────────── Welsh: longer words than the design's English ─────────── */
html[lang=cy] .pill--menu{width:auto;min-width:72px;padding:0 16px}
html[lang=cy] .pill--tab{width:auto;min-width:97px;padding:0 18px}
html[lang=cy] .btn-dark{width:auto;min-width:299px;padding:0 28px}
html[lang=cy] .slot{font-size:12px}
html[lang=cy] .card,html[lang=cy] .pcard{height:auto;min-height:321px}
html[lang=cy] .pcard{padding-bottom:58px}
html[lang=cy] .btn-line{width:min(100%,453px)}
html[lang=cy] .btn-solid{width:min(100%,441px)}

/* ─────────── header: a transparent bar, only its controls are drawn ───────────
   The strip itself paints nothing and passes clicks through to the page; the logo, the language switch and MENU
   are frosted pills, as the design draws them (translucent white, rounded, a soft shadow). */
.head,.head.is-scrolled{background:transparent;box-shadow:none;pointer-events:none}
.head a,.head button,.head .menu__list{pointer-events:auto}
.head__logo{display:block;border-radius:32px;background:rgba(255,255,255,.9)}
.head__logo img{border-radius:32px}
.head__tools{gap:25px}
.lang{padding:0 10px;border-radius:32px;background:rgba(255,255,255,.8)}
html[lang=cy] .lang{padding:0 10px}
/* Glass, not shadow (designer's notes, 2026-10-12). Figma's Glass effect on all three: light -45° at 80%, refraction 56,
   depth 20, dispersion 50, frost 0, splay 7. Frost 0 means no blur. The light is a rim lit from the top left; the
   refraction and dispersion are an SVG filter common.js builds per pill, which bends what shows through the edges and splits
   it slightly by colour. Only Chromium runs an SVG filter as a backdrop; elsewhere the pills are the fill and the rim. */
.head__logo,.lang,.pill--menu{box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.8),inset -1px -1px 0 -.5px rgba(255,255,255,.35),inset 0 0 6px rgba(255,255,255,.35);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (max-width:600px){.head__tools{gap:10px}.lang{padding:0 6px}}

/* ─────────── policy pages (/privacy, /Terms_of_Service, /cookies) ───────────
   The policy itself is Termly's embed; this is only the page around it. */
.legal-page{padding-top:36px;padding-bottom:110px}
.legal-page__title{margin-top:28px;font:700 49px/55px var(--font);--ls:0}
.legal-page__policy{max-width:894px;margin-top:40px;min-height:60vh;--ls:0}
@media (max-width:900px){.legal-page__title{font-size:clamp(32px,7vw,49px);line-height:1.12}}

/* ─────────── phones: fixes from the review of 2026-10-12 ───────────
   The design's 13px light text with 10% tracking reads at 1280px; on a phone it was the hardest text on the page to
   read, and it is the copy that makes the case. Running text goes to 16px regular with almost no tracking; the caps
   labels and pills keep the design's tracking. */
@media (max-width:600px){
  body{font-size:16px;line-height:1.6;font-weight:400;--ls:.01em}
  .eyebrow,.pill--tab,.btn-pill,.intro__title,.step-detail h4,.voice__by{--ls:.1em}
  .eyebrow{font-size:12px;line-height:16px}
  .card h3,.pcard h3,.step__card h3,.person h3,.pfull__body h4{font-size:18px;line-height:26px;font-weight:700}
  .card__back p{font-size:14px;line-height:22px}
  .step-detail h4{font-size:14px}
  .person p{font-size:15px;line-height:22px}
  .voice__by{font-size:12px;line-height:16px}
  .legal{font-size:13px;line-height:20px}
  .pfull__overview{font-size:15px;line-height:22px}
  .chips{font-size:13px}
  .form__error{font-size:15px;line-height:22px}
  /* At 16px the select's prompt runs into its "Optional" tag; the prompt itself says it is a question. */
  .field--select .field__opt{display:none}
}
/* Below the design's width the booking arrows are in the flow under the grid, and a bare triangle there said nothing:
   each now shows its own label. */
@media (max-width:1100px){
  .slots__next,.slots__prev,.slots__more,.slots__less{width:auto;height:44px;display:inline-flex;gap:10px;align-items:center;margin-top:12px;font:700 15px/1 var(--font);--ls:0}
  .slots__next::after,.slots__prev::after,.slots__more::after,.slots__less::after{content:attr(aria-label)}
}
/* The header stays a transparent strip with floating glass pills at every width, as the design draws it. A painted bar
   on phones once the page scrolled was tried on 2026-10-12 and taken out the next day: Luke preferred the pills. */
/* "Let's talk" steps aside where the page already offers the same thing: over the booking card it covered the form's
   own privacy box, and over the footer the newsletter field. common.js sets the class. */
.talk{transition:opacity .2s ease,visibility .2s}
.talk.is-tucked{opacity:0;visibility:hidden}
/* The thanks message takes focus so it is read out; the ring around a block nobody tabbed to read as a fault. */
.bk--thanks:focus{outline:none}

/* ─────────── feedback on the phone layout, 2026-10-12 ─────────── */
@media (max-width:900px){
  /* A project opened in the grid sets white text across the whole picture; the design's left-to-right shade left the
     right half bare, and over a busy photo (Powerfab's) the text broke up. */
  .pfull__head::before{background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.78))}
  /* The stage keeps the tallest quote's height so the page never jumps when a quote changes; a shorter quote is centred
     in that height, so the spare space is shared above and below it rather than left as one gap. */
  .voice__item{align-self:center}
}
@media (max-width:600px){
  /* The team photo's faces are near the top; the text box sits low so they show. */
  .banner{min-height:600px;display:flex;align-items:flex-end;padding:0 0 28px}
  .banner>img{object-position:50% 12%}
  /* A step's detail opens under its own card here (site.js moves it); it spans the single column. */
  .steps>.step-details{grid-column:1/-1;margin-top:0}
  .steps>.step-details .step-detail{padding-top:40px}
  .steps>.step-details .step-detail::before{height:28px}
}

/* ─────────── design notes, 2026-10-13 ─────────── */
.tech__cases{margin-top:40px}
.band p a{text-decoration:underline;text-underline-offset:3px}
/* The page scroller is pinned to the browser's right edge at every width: 36px in on a desktop, 9px on a phone. */
.page-scroll{left:auto;right:36px}
@media (max-width:900px){.page-scroll{right:9px;top:calc(50% - 120px)}}
/* The cookie banner stays where Termly anchors it, at the bottom; while it is up, "Let's talk" rides just above it
   (common.js sets --above-cookies from the banner's height), and drops back once the banner is answered. */
.talk.is-lifted{bottom:var(--above-cookies)!important}
@media (max-width:600px){
  /* The arm as the desktop draws it, scaled to the phone: turned on its side, its base out past the screen's left
     edge and its hand reaching into the panel. The panel no longer clips it, and the text starts below it. */
  /* Measured on the image turned 28.8deg about its top-left: its upright section is 29.5% of its width to the right of
     that corner, its drawn pixels start 28% of its width below it and end 101% below. So at 480px the upright section
     is centred with left:calc(50% - 142px), the gripper sits just inside the panel's top, and the text starts under
     the arm. The section spans the screen here and clips sideways, so the turned image's empty corner cannot widen
     the page; the arm's base still runs off the left edge, as the desktop has it. */
  .innovation.w{width:100%}
  .innovation{overflow-x:clip}
  .innovation__panel{overflow:visible;margin-inline:var(--g);padding-top:378px}
  .innovation__arm{position:absolute;left:calc(50% - 142px);top:-124px;width:480px;height:auto;max-width:none;margin:0;transform:rotate(28.8deg);transform-origin:0 0}
  /* The step cards' text runs the card's full width here; the design's per-card limits are for four across. */
  .step:nth-child(n) .step__card p{max-width:none}
}

/* ─────────── motion (impeccable animate, 2026-10-13) ───────────
   The site's one authored moment is its own dotted line: choosing a tab or a step draws the line down to its answer,
   and the answer rises in under it. The rest is quiet: menus drop in, booking steps and the case-study grid fade.
   site.js eases the height around each change. Entrances only; a closing panel fades in common.js. */
@keyframes ig-rise{from{opacity:0;transform:translateY(6px)}}
@keyframes ig-drop{from{opacity:0;transform:translateY(-4px)}}
@keyframes ig-lift{from{opacity:0;transform:translateY(4px)}}
@keyframes ig-fade{from{opacity:0}}
@keyframes ig-draw{from{clip-path:inset(0 0 100% 0)}}
.panel:not([hidden]){animation:ig-rise .3s .14s cubic-bezier(.16,1,.3,1) both}
.step-detail:not([hidden])::before{animation:ig-draw .24s cubic-bezier(.16,1,.3,1) both}
.step-detail:not([hidden])>*{animation:ig-rise .3s .16s cubic-bezier(.16,1,.3,1) both}
.menu__list:not([hidden]){animation:ig-drop .18s cubic-bezier(.16,1,.3,1)}
.talk__list:not([hidden]){animation:ig-lift .18s cubic-bezier(.16,1,.3,1)}
.bk:not([hidden]){animation:ig-fade .25s ease-out}
.projects:not(.is-open) .grid3{animation:ig-fade .45s cubic-bezier(.16,1,.3,1)}
/* Reduced motion: no movement, but each change still fades, so it is seen to happen. */
@media (prefers-reduced-motion:reduce){
  .panel:not([hidden]),.step-detail:not([hidden])>*,.menu__list:not([hidden]),.talk__list:not([hidden]),.bk:not([hidden]),.projects:not(.is-open) .grid3{animation:ig-fade .2s ease-out both!important}
  .step-detail:not([hidden])::before{animation:none!important}
}

/* ─────────── polish, 2026-10-13 ─────────── */
/* Booking is a day, then its times, wherever the card is narrower than its week: at 768 the 8th column was cut in half
   at the card's edge with nothing saying it scrolled. site.js's `narrow` matches this width. */
@media (max-width:900px){
  /* Booking: a day, then its times. The week as a grid showed three of its eight columns with nothing saying more
     were there; site.js draws day buttons here instead of row labels. */
  .slots,.has-weekend .slots{display:block;overflow:visible}
  .slots__days{position:static;width:auto;display:flex;flex-wrap:wrap;gap:8px;background:none}
  .slots__day{height:44px;padding:0 14px;border:1px solid var(--field);border-radius:999px;background:#fff;color:var(--ink2);font:400 15px/1 var(--font);--ls:0}
  .slots__day.is-off{color:var(--muted)}
  .slots__day[aria-pressed=true]{background:var(--ink2);border-color:#000;color:#fff;font-weight:700}
  .slots__grid{margin-top:16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .slot{height:44px;font-size:15px}
  .slots__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){.slots__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Focus rings that sat black on dark ground. */
.band a:focus-visible{outline-color:#fff}
.card--flip.is-flipped .card__toggle:focus-visible{outline-color:#fff;outline-offset:-6px}
/* Error states: the field, the privacy box and the newsletter say so in the same red. */
.radio[data-invalid] .radio__dot{border-color:#c0392b}
.news__msg.is-error{color:#c0392b}
.connect--dark .news__msg.is-error{color:#ff8a7a}
.news{min-width:0}
.news__field{max-width:100%}
.proj .pcard__tags{margin-left:0;margin-right:0}
.projects__back{display:inline-flex;align-items:center;min-height:44px}
.head__logo{flex-shrink:0}
.banner__glass p,.intro__title{text-wrap:balance}
@media (max-width:900px){
  .intro__title br{display:none}
  /* Desktop nudges that read as misalignment once the layout reflows. */
  .approach__text .indent{padding-left:0}
  .copyright{margin-left:0}
  .projects .eyebrow{margin-left:0}
}
@media (max-width:600px){
  /* The Welsh tab labels are longer: the row wraps rather than squeezing a pill below its label. */
  .tabs{flex-wrap:wrap;row-gap:10px}
  .pill--tab{flex-shrink:0}
  html[lang=cy] .pill--tab{padding:0 12px;--ls:.06em}
  /* The intro on the same edge as every other section, its label centred with its title and body, and the space under
     the tabs a phone section's, not the desktop's 171px. */
  .intro{padding-inline:calc(var(--g) + var(--pad))}
  .intro__lead{text-align:center;margin-bottom:12px}
  .zone{padding-bottom:72px}
  .zone.is-open{padding-bottom:64px}
  /* Primary controls 44px tall; links keep their spacing but get a 44px target. */
  .pill,.btn-dark,.btn-view{height:44px}
  .lang,.lang a{height:44px;line-height:44px}
  .lang a:last-child::before{top:6px}
  .radio{min-height:44px}
  .ways__social a,.legal-links a,.ways__value a{display:inline-block;padding-block:12px;margin-block:-12px}
  .legal-links{display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 28px}
  /* The submit button names the time and wraps; give it room to. */
  #confirm-button{height:auto;min-height:46px;padding-block:10px;line-height:1.25;text-wrap:balance}
  #confirm-button .tri{top:calc(50% - 4px)}
}
@media (max-width:400px){
  .pill--menu,html[lang=cy] .pill--menu{padding:0 12px}
  .lang{padding:0 4px}
}
.talk.is-under-cookies{opacity:0;visibility:hidden}

/* The header's pills are centred on each other, not top-aligned: once the phone's language and MENU pills became 44px
   tall the 38px logo pill sat 7px high (Luke, 2026-10-13). The tools' top margins were the desktop's hand alignment. */
.head__row{align-items:center}
.head__tools{margin-top:0}