/* 13 June paper concept, combined option, revision 2 (system build).
   One :root token block holds every colour, type size, spacing value, radius, shadow,
   easing and duration. Each token is named so it can become a Webflow variable.
   Components are named once (one class per component, variants as modifiers):
   top-strip, hang-tab, menu-panel, paper-sheet, black-section, section-title, text-block,
   text-link, button, round-button, control-row, index-row, screen-carousel, circle-row,
   flow-card, enquiry-form, site-footer. Placement uses the 12 column grid (.grid and .col). */
:root{
  /* ---- colour: paper, greys, black */
  --color-paper:#ECE9E3; --color-grey-1:#CDCAC4; --color-grey-2:#A09D98; --color-grey-3:#5E5C59; --color-black:#0A0A0A;
  /* ---- colour: text and lines */
  --color-ink:#141414; --color-ink-2:#45433F; --color-ink-3:#5E5C59;
  --color-on-black:#F0F0F0; --color-on-black-2:#C2C2C2; --color-on-black-muted:rgba(240,240,240,.62);
  --color-line-paper:rgba(20,20,20,.16); --color-line-black:rgba(240,240,240,.14);
  --color-control-paper:rgba(20,20,20,.55); --color-control-black:rgba(240,240,240,.5);
  --color-error:#7A1D12; --color-highlight:rgba(255,255,255,.35);
  /* ---- colour: the sample client palette, used only inside the flow (drawn in the flow script) */
  --client-1:#0F4050; --client-2:#F5F1E6; --client-3:#B76F7B; --client-4:#BDAB63;

  /* ---- type families */
  --font-display:"Inter Tight",Arial,sans-serif; --font-text:"Inter",Arial,sans-serif; --font-label:"IBM Plex Mono",ui-monospace,monospace;
  /* ---- type scale: nine sizes, one job each */
  --type-display-size:clamp(38px,4.6vw,66px); --type-display-lh:.98; --type-display-track:-.03em;
  --type-h2-size:clamp(32px,3.35vw,48px);     --type-h2-lh:1;        --type-h2-track:-.02em;
  --type-lead-size:clamp(20px,1.95vw,28px);   --type-lead-lh:1.35;   --type-lead-track:-.01em;
  --type-h3-size:clamp(21px,1.6vw,24px);      --type-h3-lh:1.15;     --type-h3-track:-.015em;
  --type-body-size:clamp(17px,1.25vw,19px);   --type-body-lh:1.6;
  --type-ui-l-size:18px;  --type-ui-l-lh:1.3;
  --type-ui-size:16px;    --type-ui-lh:1.3;
  --type-small-size:15px; --type-small-lh:1.5;
  --type-label-size:14px; --type-label-lh:1.4; --type-label-track:.1em;
  --measure-body:34em; --measure-lead:22em;

  /* ---- spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:clamp(40px,3.6vw,48px); --sp-8:clamp(48px,4.5vw,64px); --sp-9:clamp(64px,6.7vw,96px);
  --sp-10:clamp(80px,8.9vw,128px); --sp-11:clamp(96px,11.1vw,160px);

  /* ---- grid: 12 columns from 1024px, 8 from 768px, 4 below */
  --cols:12;
  --margin:max(clamp(20px,5.6vw,80px),calc((100vw - 1280px) / 2));
  --gutter:clamp(16px,2.2vw,32px);
  --container:calc(100vw - 2 * var(--margin));
  --col:calc((var(--container) - 11 * var(--gutter)) / 12);
  --step:calc(var(--col) + var(--gutter));

  /* ---- radius */
  --radius-control:999px; --radius-frame:8px; --radius-tab:24px;
  /* ---- elevation (one light, top and slightly left) */
  --shadow-e3:drop-shadow(0 1px 2px rgba(0,0,0,.26)) drop-shadow(0 14px 24px rgba(0,0,0,.34));
  --shadow-e2:drop-shadow(0 1px 2px rgba(0,0,0,.24)) drop-shadow(0 8px 14px rgba(0,0,0,.30));
  --shadow-e1:drop-shadow(0 1px 1px rgba(0,0,0,.22)) drop-shadow(0 4px 8px rgba(0,0,0,.28));
  --shadow-cast:drop-shadow(0 2px 3px rgba(0,0,0,.34)) drop-shadow(0 12px 16px rgba(0,0,0,.34)) drop-shadow(0 30px 44px rgba(0,0,0,.40));
  --shadow-e0:drop-shadow(0 1px 1px rgba(0,0,0,.20)) drop-shadow(0 2px 5px rgba(0,0,0,.25));
  --glow-centre:0 40px 90px -24px rgba(240,240,240,.24);
  --glow-side:0 24px 60px -24px rgba(240,240,240,.10);
  --press-in:inset 0 11px 20px rgba(0,0,0,.58),inset 0 3px 5px rgba(0,0,0,.45),inset 0 -3px 8px rgba(255,255,255,.16);
  --press-rim:0 1.5px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.10);
  --lift-out:0 26px 34px -14px rgba(0,0,0,.55),0 8px 12px -6px rgba(0,0,0,.32);
  /* ---- motion: one easing, three durations */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-colour:200ms; --dur-small:350ms; --dur-large:500ms;
  /* ---- layout parts */
  --strip-h:68px; --tab-w:max(64px,var(--col)); --tab-h:62px;
  --card-span:6; --panel-span:3;
  --grain:none; --grey-below:72px; --grey-above:0px;
}
@media (max-width:1023px){
  :root{--cols:8;--col:calc((var(--container) - 7 * var(--gutter)) / 8);--card-span:5;--panel-span:4}
}
@media (max-width:767px){
  :root{--cols:4;--col:calc((var(--container) - 3 * var(--gutter)) / 4);--card-span:4;--panel-span:4;--strip-h:58px;--grey-below:40px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--color-black);color:var(--color-ink);font-family:var(--font-text);font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{position:relative;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:inherit}
ol,ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ================= layout: grid and column placement ================= */
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--sp-7);padding-inline:var(--margin);position:relative}
.col{grid-column:var(--start,1) / span var(--span,var(--cols))}
@media (max-width:1023px){.col{grid-column:var(--start-t,1) / span var(--span-t,var(--cols))}}
@media (max-width:767px){.col{grid-column:var(--start-p,1) / span var(--span-p,var(--cols))}}
.stack>*+*{margin-top:var(--sp-4)}

/* ================= type roles ================= */
.section-title{font-family:var(--font-display);font-weight:600;font-size:var(--type-h2-size);line-height:var(--type-h2-lh);letter-spacing:var(--type-h2-track)}
.section-title--display .line{display:block;white-space:nowrap}
.section-title--display{font-size:var(--type-display-size);line-height:var(--type-display-lh);letter-spacing:var(--type-display-track)}
.section-title--centre{text-align:center}
.text-block__lead{font-weight:500;font-size:var(--type-lead-size);line-height:var(--type-lead-lh);letter-spacing:var(--type-lead-track);max-width:var(--measure-lead)}
.text-block__body{font-size:var(--type-body-size);line-height:var(--type-body-lh);max-width:var(--measure-body)}
.text-block__lead+.text-block__body{margin-top:var(--sp-5)}
.text-block__body+.text-block__body{margin-top:var(--sp-4)}
.text-block__body+.text-link,.text-block__lead+.text-link{margin-top:var(--sp-6)}
.text-block{--text-2:var(--color-ink-2)}
.text-block__body{color:var(--text-2)}
.section-title+.text-block__lead,.section-title+.text-block__body{margin-top:var(--sp-7)}
.label{font-family:var(--font-label);font-weight:500;text-transform:uppercase;font-size:var(--type-label-size);line-height:var(--type-label-lh);letter-spacing:var(--type-label-track)}
.small{font-size:var(--type-small-size);line-height:var(--type-small-lh)}
.item-title{font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-track)}

/* ================= component: text-link (underline is a scaled pseudo-element) ================= */
.text-link{position:relative;display:inline-block;font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-l-size);line-height:var(--type-ui-l-lh);text-decoration:none;padding:var(--sp-2) 0;color:inherit}
.text-link::before,.text-link::after{content:"";position:absolute;left:0;right:0;bottom:var(--sp-1);height:1.5px;background:currentColor}
.text-link::before{opacity:.5}
.text-link::after{transform:scaleX(0);transform-origin:left;transition:transform var(--dur-small) var(--ease)}
.text-link:hover::after,.text-link:focus-visible::after,a:hover>.text-link::after{transform:scaleX(1)}

/* ================= component: button (pill) and round-button ================= */
.button{display:inline-block;appearance:none;border:0;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:1;text-decoration:none;padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-control);background:var(--color-ink);color:var(--color-paper);transition:transform var(--dur-small) var(--ease)}
.button:hover{transform:translateY(-2px)}
.button:focus-visible{outline:2px solid var(--color-ink);outline-offset:3px}
.button--large{font-size:var(--type-ui-l-size);line-height:var(--type-ui-l-lh);padding:var(--sp-4) var(--sp-6)}
.round-button{--surface:var(--color-paper);appearance:none;flex:none;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--control-line,var(--color-control-paper));background:transparent;color:inherit;cursor:pointer;display:grid;place-items:center;padding:0;transition:background var(--dur-colour) var(--ease),color var(--dur-colour) var(--ease)}
.round-button svg{width:20px;height:20px}
.round-button:hover:not([aria-disabled="true"]),.round-button:focus-visible:not([aria-disabled="true"]){background:currentColor}
.round-button:hover:not([aria-disabled="true"]) svg,.round-button:focus-visible:not([aria-disabled="true"]) svg{color:var(--surface)}
.round-button[aria-disabled="true"]{opacity:.4;cursor:default}
.control-row{display:flex;align-items:center;justify-content:center;gap:var(--sp-5)}
/* below 480px the two arrows sit side by side and the link is centred on its own line beneath */
@media (max-width:479px){
  .control-row{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:center;column-gap:var(--sp-4);row-gap:var(--sp-3)}
  .control-row>.text-link{grid-column:1 / -1;grid-row:2;justify-self:center;text-align:center}
}

/* ================= component: paper-sheet ================= */
/* Variants: --left or --right (the side it bleeds off), --grey (first grey instead of off-white),
   --over (lies over the sheet below it), --stacked (sits under the sheet above it).
   Height is set by its content. Its shape layers are generated from data-cut. */
.paper-sheet{--surface:var(--color-paper);--control-line:var(--color-control-paper);position:relative;z-index:4;display:flow-root;padding-block:var(--sheet-pad-top,var(--sp-10)) var(--sheet-pad-bottom,var(--sp-10));margin-bottom:calc(var(--sp-11) + var(--grey-below));color:var(--color-ink)}
.paper-sheet--grey{--surface:var(--color-grey-1)}
.paper-sheet--over{z-index:6;margin-bottom:0;--sheet-pad-top:var(--sp-9);--sheet-pad-bottom:var(--sp-9)}
.paper-sheet--stacked{margin-top:calc(-1 * var(--sp-9));padding-top:calc(var(--sp-9) + var(--grey-above) + var(--sp-8))}
@media (min-width:768px) and (max-width:1023px){.paper-sheet[aria-labelledby="h1-title"]{--sheet-pad-top:calc(var(--sp-10) + 8px);--sheet-pad-bottom:calc(var(--sp-10) + 8px)}}
.paper-sheet--compact{--sheet-pad-top:calc(var(--sp-10) + var(--sp-5));--sheet-pad-bottom:var(--sp-9)}
.paper-sheet__shape{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
.paper-sheet__layer{position:absolute;inset:0}
.paper-sheet__layer svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block}
.paper-sheet__layer--top{filter:var(--shadow-e3)}
.paper-sheet__layer--e1{filter:var(--shadow-e2)}
.paper-sheet__layer--e2{filter:var(--shadow-e1)}
.paper-sheet__layer--e3{filter:var(--shadow-e0)}
/* a sheet that lies over another casts a deep soft shadow from its lowest layer onto the paper beneath */
.paper-sheet--over .paper-sheet__layer--e3{filter:var(--shadow-cast)}
.paper-sheet__fill{fill:var(--tone)}
.paper-sheet__grain{mix-blend-mode:multiply;opacity:.42}
.paper-sheet__edge{fill:none;stroke:var(--color-highlight);stroke-width:1;vector-effect:non-scaling-stroke}
.paper-sheet__body{position:relative;z-index:1}
.paper-sheet__axis{position:relative;z-index:1;width:var(--cut-x,100%);padding-inline:var(--sp-5)}
.paper-sheet--right .paper-sheet__axis{margin-left:auto}
@media (max-width:767px){
  .paper-sheet{--sheet-pad-top:var(--sp-9);--sheet-pad-bottom:var(--sp-9)}
  /* phones: text keeps the page margin on the bleed side and 32px from the cut, which sits 16px in from the screen edge */
  .paper-sheet--left .paper-sheet__body{padding-right:calc(16px + var(--sp-6))}
  .paper-sheet--right .paper-sheet__body{padding-left:calc(16px + var(--sp-6))}
}

/* ================= component: black-section ================= */
.black-section{--control-line:var(--color-control-black);--surface:var(--color-black);position:relative;z-index:3;color:var(--color-on-black);margin-bottom:var(--sp-11)}
.black-section .text-block{--text-2:var(--color-on-black-2)}
.black-section--flush-top{margin-top:0}

/* ================= star field and hero ================= */
.star-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.hero{position:relative;z-index:1;height:100vh;height:100svh;margin-bottom:var(--sp-8)}
.hero__mark{display:none;position:absolute;left:50%;top:56%;width:min(62vw,1080px);transform:translate(-50%,-50%);color:var(--color-on-black)}
.hero__mark svg{display:block;width:100%;height:auto}
.is-still .hero__mark{display:block}
.hero+.paper-sheet{margin-top:0}
@media (max-width:767px){.hero__mark{width:86vw;top:54%}}

/* ================= component: top-strip ================= */
.top-strip{position:absolute;top:0;left:0;right:0;z-index:40;height:var(--strip-h);color:var(--color-ink)}
.top-strip__shape{position:absolute;left:0;top:0;width:100%;height:calc(var(--strip-h) + 320px);pointer-events:none}
.top-strip__inner{position:relative;z-index:2;height:var(--strip-h);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:center;column-gap:var(--gutter);padding-inline:var(--margin)}
.top-strip__end{grid-column:10 / span 3;justify-self:end;display:flex;align-items:center;gap:var(--sp-4)}
.brand{display:block;width:clamp(88px,7.4vw,112px);color:var(--color-ink);justify-self:start;grid-column:1 / span 3}
.brand svg{display:block;width:100%;height:auto}
.page-nav{grid-column:4 / span 6;justify-content:center;display:flex;gap:clamp(16px,1.4vw,24px);font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:var(--type-ui-lh)}
.page-nav a{text-decoration:none;padding:var(--sp-2) 0;border-bottom:1.5px solid transparent;transition:border-color var(--dur-colour) var(--ease)}
.page-nav a:hover,.page-nav a[aria-current]{border-bottom-color:currentColor}
.menu-button{appearance:none;background:none;border:0;padding:0;margin:0;color:var(--color-ink);cursor:pointer;width:44px;height:44px;display:grid;place-content:center;border-radius:50%}
.menu-button span{display:block;width:26px;height:1.5px;background:currentColor;margin:3.5px 0;transition:transform var(--dur-large) var(--ease)}
.menu-button[aria-expanded="true"] span:first-child{transform:translateY(5px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-5px) rotate(-45deg)}
.top-strip .menu-button{display:none}
/* the paper tapers into the top edge, so the controls at the right sit on black and turn light */
.top-strip.is-tapered .button{background:var(--color-paper);color:var(--color-ink)}
.top-strip.is-tapered .button:focus-visible{outline-color:var(--color-on-black)}
.top-strip.is-tapered .menu-button{color:var(--color-on-black)}
.top-strip.is-tapered .menu-button:focus-visible{outline:2px solid var(--color-on-black);outline-offset:2px}
@media (max-width:1023px){.page-nav{display:none}.top-strip .menu-button{display:grid}.brand{grid-column:1 / span 4}.top-strip__end{grid-column:5 / span 4}}
@media (max-width:767px){.brand{grid-column:1 / span 2}.top-strip__end{grid-column:3 / span 2}}
@media (max-width:479px){.top-strip .button{display:none}}

/* ================= components: hang-tab and menu-panel (the tab, unfolded) ================= */
.hang-tab,.menu-panel{position:fixed;top:0;right:var(--margin);z-index:60;color:var(--color-ink)}
.hang-tab{width:var(--tab-w);height:var(--tab-h);transform:translateY(-130%);transition:transform var(--dur-large) var(--ease);visibility:hidden}
.hang-tab.is-on{transform:none;visibility:visible}
.hang-tab.is-away{transform:translateY(-130%)}
.hang-tab__shape,.menu-panel__shape{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hang-tab .menu-button{position:absolute;inset:0;margin:auto}
.menu-panel{width:calc(var(--panel-span) * var(--col) + (var(--panel-span) - 1) * var(--gutter));z-index:70;padding:var(--tab-h) var(--sp-5) var(--sp-6);opacity:0;transform:translateY(-12px);visibility:hidden;transition:opacity var(--dur-large) var(--ease),transform var(--dur-large) var(--ease),visibility 0s linear var(--dur-large)}
.menu-panel.is-open{opacity:1;transform:none;visibility:visible;transition:opacity var(--dur-large) var(--ease),transform var(--dur-large) var(--ease)}
.menu-panel .menu-button{position:absolute;top:calc((var(--tab-h) - 44px) / 2);right:calc((var(--tab-w) - 44px) / 2)}
.menu-panel__links{position:relative;display:grid;gap:var(--sp-3);font-family:var(--font-display);font-weight:600;font-size:var(--type-h3-size);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-track)}
.menu-panel__links a{text-decoration:none}
.menu-panel__links a:hover{text-decoration:underline;text-underline-offset:4px}
.menu-panel .button{position:relative;margin-top:var(--sp-5)}
.menu-panel .button{justify-self:start;width:max-content}

/* ================= component: section on black, statement (text-block plus lattice) ================= */
.lattice{aspect-ratio:3/2}
.lattice canvas{width:100%;height:100%;display:block}
.grid--centre-y{align-items:center}

/* ================= component: index-row (a list of offers; reusable for any list of items) ================= */
.index-list{display:grid;grid-template-columns:repeat(var(--inner,10),minmax(0,1fr));column-gap:var(--gutter)}
@supports (grid-template-columns:subgrid){.index-list{grid-template-columns:subgrid}}
.index-row{grid-column:1 / -1;display:grid;grid-template-columns:repeat(var(--inner,10),minmax(0,1fr));column-gap:var(--gutter);padding:var(--sp-5) 0;border-bottom:1px solid var(--color-line-paper);text-decoration:none;color:var(--color-ink);position:relative}
@supports (grid-template-columns:subgrid){.index-row{grid-template-columns:subgrid}}
.index-row:first-child{border-top:1px solid var(--color-line-paper)}
.index-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--color-ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-small) var(--ease)}
.index-row:hover::after,.index-row:focus-visible::after{transform:scaleX(1)}
/* keyboard focus: the outline sits outside the row, 8px clear of the text, so the text never moves */
.index-row:focus-visible{outline:2px solid var(--color-ink);outline-offset:8px;border-radius:4px}
/* the title is the link: the text-link underline (a 1px ink line at rest, the animated line on hover and focus) */
.index-row .item-title{position:relative;display:inline-block;padding:var(--sp-1) 0 var(--sp-2)}
.index-row .item-title::before,.index-row .item-title::after{content:"";position:absolute;left:0;right:0;bottom:var(--sp-1);background:var(--color-ink)}
.index-row .item-title::before{height:1px}
.index-row .item-title::after{height:1.5px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-small) var(--ease)}
.index-row:hover .item-title::after,.index-row:focus-visible .item-title::after{transform:scaleX(1)}
.index-row__head{grid-column:1 / span 3}
.index-row__head .label{margin-top:var(--sp-1);color:var(--color-ink-2);text-wrap:balance}
.nobr{white-space:nowrap}
.index-row__text{grid-column:4 / span 6;font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-ink-2);max-width:var(--measure-body)}
.section-note{align-self:end;color:var(--color-ink-2);max-width:var(--measure-body)}
.section-note--centre{align-self:auto;justify-self:center;text-align:center;margin-top:calc(-1 * var(--sp-3))}
@media (max-width:1023px){
  .index-row__head{grid-column:1 / -1}
  .index-row__text{grid-column:1 / -1}
  .index-row__text{margin-top:var(--sp-4)}
}

/* ================= component: screen-carousel ================= */
.screen-carousel{--control-line:var(--color-control-black);position:relative;z-index:3}
.screen-carousel__title{padding-inline:var(--margin);margin-bottom:var(--sp-7);text-align:center}
.screen-carousel__grid{position:absolute;left:var(--margin);width:var(--container);top:0;bottom:0;pointer-events:none;border-right:1px solid var(--color-line-black);background-image:linear-gradient(90deg,var(--color-line-black) 1px,transparent 1px);background-size:var(--step) 100%;background-repeat:repeat-x;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%)}
.screen-carousel__track{--cw:calc(var(--card-span) * var(--col) + (var(--card-span) - 1) * var(--gutter));position:relative;z-index:2;display:flex;align-items:flex-start;gap:var(--gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:64px calc(50% - var(--cw) / 2) 160px;margin-block:-64px -160px}
.screen-carousel__track::-webkit-scrollbar{display:none}
@media (max-width:767px){.screen-carousel__track{--cw:calc(100vw - 120px)}}
.screen-card{position:relative;flex:0 0 var(--cw);scroll-snap-align:center;scroll-snap-stop:always;outline:none;transform:scale(var(--s,1));transform-origin:50% 40%;will-change:transform}
.screen-card__frame{position:relative;background:var(--color-paper);border-radius:var(--radius-frame);overflow:hidden;box-shadow:var(--glow-side),0 0 0 1px rgba(240,240,240,.08),0 2px 4px rgba(0,0,0,.5);transition:box-shadow var(--dur-large) var(--ease)}
.screen-card.is-centre .screen-card__frame{box-shadow:var(--glow-centre),0 0 0 1px rgba(240,240,240,.16),0 2px 4px rgba(0,0,0,.5)}
.screen-card__frame::after{content:"";position:absolute;inset:0;background:var(--color-black);opacity:var(--dim,0);pointer-events:none;border-radius:var(--radius-frame)}
.screen-card:focus-visible .screen-card__frame{outline:2px solid var(--color-on-black);outline-offset:6px}
.screen-card__bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 var(--sp-3);background:var(--color-grey-1)}
.screen-card__bar i{width:9px;height:9px;border-radius:50%;background:var(--color-grey-2);display:block}
.screen-card__bar b{flex:1;height:14px;margin-left:var(--sp-3);border-radius:7px;background:var(--color-paper);display:block;max-width:60%}
.screen-card__view{aspect-ratio:16/9;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;position:relative;background:var(--color-paper)}
.screen-card__view::-webkit-scrollbar{display:none}
.screen-card__view img{width:100%;height:auto;margin-top:calc(var(--shift,0) * -100%)}
.screen-card__name{margin-top:var(--sp-4);text-align:center;font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-l-size);line-height:var(--type-ui-l-lh);color:var(--color-on-black);opacity:var(--name,1)}
.screen-carousel .control-row{position:relative;z-index:4;margin-top:var(--sp-7);padding-inline:var(--margin)}
/* the story link belongs to the Real Estate card only: it fades out over 200ms on the others and keeps its space */
.screen-carousel .control-row .text-link{transition:opacity 200ms linear,visibility 0s linear 0s}
.screen-carousel .control-row .text-link.is-away{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 200ms linear,visibility 0s linear 200ms}

/* ================= component: circle-row (projects) ================= */
.circle-row{position:relative;z-index:2;display:flex;gap:clamp(22px,2.6vw,40px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:var(--sp-6) var(--margin) var(--sp-6);margin-top:var(--sp-7)}
.circle-row::-webkit-scrollbar{display:none}
.circle-item{flex:0 0 auto;width:clamp(150px,13.5vw,200px);text-decoration:none;text-align:center;scroll-snap-align:center;outline:none}
.circle-item__face{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;background:var(--color-black);box-shadow:var(--press-rim);transition:transform var(--dur-large) var(--ease),box-shadow var(--dur-large) var(--ease)}
.circle-item__face img{width:100%;height:100%;object-fit:cover}
/* a placeholder cover: its own dot arrangement (cell, angle, dot size, straight or staggered rows), no text */
.circle-item__face--dots::before{content:"";position:absolute;inset:-45%;transform:rotate(var(--ang,0deg));background-image:radial-gradient(circle,rgba(240,240,240,.55) var(--dr,1.1px),transparent calc(var(--dr,1.1px) + .5px));background-size:var(--ds,11px) var(--ds,11px);background-position:center}
.circle-item__face--stag::before{background-image:radial-gradient(circle,rgba(240,240,240,.55) var(--dr,1.1px),transparent calc(var(--dr,1.1px) + .5px)),radial-gradient(circle,rgba(240,240,240,.55) var(--dr,1.1px),transparent calc(var(--dr,1.1px) + .5px));background-size:var(--ds,11px) var(--ds,11px);background-position:0 0,calc(var(--ds,11px) / 2) calc(var(--ds,11px) / 2)}
.circle-item__face::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:var(--press-in);transition:opacity var(--dur-large) var(--ease)}
.circle-item:hover .circle-item__face,.circle-item:focus-visible .circle-item__face{transform:translateY(-9px) scale(1.035);box-shadow:var(--lift-out)}
.circle-item:hover .circle-item__face::after,.circle-item:focus-visible .circle-item__face::after{opacity:0}
.circle-item:focus-visible .circle-item__face{outline:2px solid var(--color-ink);outline-offset:5px}
.circle-item__name{display:block;margin-top:var(--sp-5);font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:var(--type-ui-lh);color:var(--color-ink)}
.circle-row__controls{position:relative;z-index:3;margin-top:var(--sp-5)}

/* ================= component: flow-card (the August automation flow) ================= */
.flow-card{--control-line:var(--color-control-black);display:flow-root}
.flow-card__pin{position:relative;height:250vh;margin-block:calc((var(--flow-h,640px) - 100vh) / 2)}
@supports (height:100svh){.flow-card__pin{margin-block:calc((var(--flow-h,640px) - 100svh) / 2)}}
.flow-card__sticky{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center}
.flow-card__grid{row-gap:var(--sp-5)}
.flow-card__steps{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);align-self:center}
.flow-card__track{position:absolute;left:6px;top:9px;bottom:9px;width:1px;background:var(--color-line-black)}
.flow-card__fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--color-on-black)}
.flow-card__step{position:relative;display:grid;grid-template-columns:13px minmax(0,1fr);gap:var(--sp-3);align-items:start}
.flow-card__dot{width:13px;height:13px;margin-top:4px;border-radius:50%;border:1px solid var(--color-control-black);background:var(--color-black);transition:background var(--dur-small) var(--ease),border-color var(--dur-small) var(--ease),box-shadow var(--dur-small) var(--ease)}
.flow-card__step-name{display:block;font-family:var(--font-display);font-weight:600;font-size:15px;line-height:1.3;color:var(--color-on-black-muted);transition:color var(--dur-small) var(--ease)}
.flow-card__step-text{display:none;margin-top:var(--sp-1);font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--color-on-black-2)}
.flow-card__step.is-done .flow-card__dot{background:var(--color-on-black-2);border-color:var(--color-on-black-2)}
.flow-card__step.is-done .flow-card__step-name{color:var(--color-on-black-2)}
.flow-card__step.is-on .flow-card__dot{background:var(--color-on-black);border-color:var(--color-on-black);box-shadow:0 0 0 4px rgba(240,240,240,.1),0 0 16px rgba(240,240,240,.45)}
.flow-card__step.is-on .flow-card__step-name{color:var(--color-on-black)}
.flow-card__stage{position:relative;aspect-ratio:16/10;border:1px solid var(--color-line-black);border-radius:var(--radius-frame);background:var(--color-black);overflow:hidden}
.flow-card__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.flow-card__caption{margin-top:var(--sp-5);min-height:11rem;color:var(--color-on-black)}
.flow-card__counter{color:var(--color-on-black-2)}
.flow-card__name{margin-top:var(--sp-2)}
.flow-card__text{margin-top:var(--sp-2);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-on-black-2);max-width:48ch}
@media (max-width:1023px){.flow-card__steps{display:none}.flow-card__pin{height:220vh}}

/* ================= component: enquiry-form ================= */
.enquiry-form{display:grid;gap:var(--sp-5)}
.enquiry-form__field label,.enquiry-form__field legend{display:block;font-family:var(--font-label);font-weight:500;text-transform:uppercase;letter-spacing:var(--type-label-track);font-size:var(--type-label-size);line-height:var(--type-label-lh);margin-bottom:var(--sp-2);padding:0}
.enquiry-form__field input[type=text],.enquiry-form__field input[type=email],.enquiry-form__field textarea{width:100%;font:inherit;font-size:var(--type-body-size);color:var(--color-ink);background:transparent;border:0;border-bottom:1.5px solid var(--color-control-paper);padding:var(--sp-3) 0;border-radius:0}
.enquiry-form__field textarea{min-height:130px;resize:vertical}
.enquiry-form__field input:focus,.enquiry-form__field textarea:focus{outline:2px solid #141414;outline-offset:2px;border-bottom-color:var(--color-ink)}
.enquiry-form__field ::placeholder{color:var(--color-ink-3);opacity:1}
fieldset.enquiry-form__field{border:0;margin:0;padding:0;min-width:0}
.enquiry-form__chips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.enquiry-form__chips label{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;text-transform:none;letter-spacing:0;font-size:var(--type-ui-size);line-height:var(--type-ui-lh);margin:0;padding:var(--sp-3) var(--sp-4);border:1.5px solid var(--color-control-paper);border-radius:var(--radius-control);cursor:pointer;transition:background var(--dur-colour) var(--ease),color var(--dur-colour) var(--ease)}
.enquiry-form__chips input{position:absolute;opacity:0;width:1px;height:1px}
.enquiry-form__chips label:has(input:checked){background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.enquiry-form__chips label:has(input:focus-visible){outline:2px solid var(--color-ink);outline-offset:3px}
.enquiry-form__help,.enquiry-form__consent{font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--color-ink-2)}
.enquiry-form__help{margin-top:var(--sp-3)}
.enquiry-form__consent{max-width:46ch}
.enquiry-form__error{font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--color-error);margin-top:var(--sp-2)}
.enquiry-form__error:empty,.enquiry-form__status:empty{display:none}
.enquiry-form .button{justify-self:start}
.enquiry-form__status{font-size:var(--type-ui-l-size);font-weight:600}

/* ================= component: site-footer (transparent, so the star field runs to the end) ================= */
.site-footer{position:relative;z-index:2;overflow:visible;color:var(--color-on-black);padding:0 0 var(--sp-6)}
.site-footer__box{position:relative;aspect-ratio:2833/854}
.site-footer__mark{position:absolute;left:-240px;right:-240px;top:-90px;bottom:-70px;width:calc(100% + 480px);height:calc(100% + 160px);pointer-events:none}
.site-footer__nav{display:flex;flex-wrap:wrap;gap:var(--sp-3) clamp(16px,2vw,30px);margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--color-line-black);font-family:var(--font-display);font-weight:600;font-size:var(--type-ui-size);line-height:var(--type-ui-lh)}
.site-footer__nav a{text-decoration:none;color:var(--color-on-black-2);transition:color var(--dur-colour) var(--ease)}
.site-footer__nav a:hover{color:var(--color-on-black)}
@media (max-width:767px){
  .site-footer__nav a{padding-block:12px;margin-block:-12px}
  .enquiry-form__consent a{padding-block:13px}
}
html,body{overflow-x:clip}

/* ================= reduced motion: every moving part becomes one still state ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .flow-card__pin{height:auto;margin-block:0}
  .flow-card__sticky{position:relative;height:auto;padding-block:0}
  .flow-card__steps{display:flex!important}
  .flow-card__step-text{display:block}
  .flow-card__caption{display:none}
  .flow-card__steps{grid-column:7 / span 5}
  .flow-card__stage-wrap{grid-column:2 / span 5!important;grid-row:1}
  .circle-item:hover .circle-item__face,.circle-item:focus-visible .circle-item__face{transform:none;box-shadow:var(--press-rim)}
  .circle-item:hover .circle-item__face::after,.circle-item:focus-visible .circle-item__face::after{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (max-width:1023px){
  .flow-card__steps{grid-column:1 / -1;grid-row:2}
  .flow-card__stage-wrap{grid-column:1 / -1!important}
}