:root{
  --bg:#000;
  --ink:#fafafa;
  --muted:#b9bcc6;
  --teal:#0fb5b5;
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --ring:#1a1a22; 
  --content-max: 66.666vw;
  --content-cap: 68.75rem;
  --gutter: 2rem;
}
@media (max-width: 50em){ /* 800px */
  :root { --content-max: 92vw; }         /* was 66.666vw */
  .hero-content { 
    max-width: 92vw;                     /* was min(66.666vw, 960px) */
    padding-left: 1.25rem; 
    padding-right: 1.25rem;
  }
}

*{box-sizing:border-box}
html,body{height:100%; width: 100%; max-width: 100%; color:var(--ink); background:var(--bg);} 
body{
  margin:0; 
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
html { scroll-padding-top: var(--header-h, 5.5rem); }


a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.container{width:min(var(--content-max), var(--content-cap)); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding:2.75rem 0;} 

/* =====================
   Header / Hero
   ===================== */
.topbar{
  position:fixed; inset:0 auto auto 0; right:0; z-index:9999;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 6vw; background:transparent;
  transition:backdrop-filter .3s ease, background-color .3s ease, padding .25s ease, box-shadow .25s ease;
}
.brand img{width: clamp(10rem, 42vw, 18rem); height: auto; display:block; filter:drop-shadow(0 0.125rem 0.375rem rgba(0,0,0,.5))}
.nav a{color:#fff; text-decoration:none; font-weight:500; margin-left:1.25rem; position:relative}
.nav a:hover{opacity:.85}
.nav a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:0.125rem; background:var(--teal); transition:width .2s ease}
.nav a:hover::after{width:100%}
.scrolled .topbar{
  padding:1.1rem 1.25rem; background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:0.0625rem  solid var(--glass-border); box-shadow:0 0.375rem 1.375rem rgba(0,0,0,.18);
}
.scrolled .brand img{width: 4rem; height: auto;}

.hero{position:relative; min-height:100vh; color:#fff; background:transparent; overflow:hidden}
.hero-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events: none; }
/* allow freezing behaviour */
.hero-media.is-frozen{position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;}

#main,
footer {
  position: relative;
  z-index: 1;
}

.site-header { z-index: auto;
}
    
.hero-content{
  position: absolute;
  z-index: 2;
  bottom: 0; left: 0; right: 0;
  width: min(var(--content-max), var(--content-cap));
  margin-inline: auto;
  max-width: min(66.666vw, 60rem);
  padding: 0 2rem 10vh 2rem; /* bottom‑aligned copy */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%;
}
.hero-content h1{
  font-size: clamp(1.75rem, 5.5vw, 3.625rem);
  line-height: 1.1;
  letter-spacing: .2px;
  margin: 0;
  text-shadow: 0 6px 24px rgba(0,0,0,.55);
  text-align: left;
}

/* =====================
   SECTION HEADING & STRAPLINE STANDARDISATION
   ===================== */
.section-heading { margin: 0 0 1rem 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; color: #fff; letter-spacing: .01em; }
.section-strapline { margin: 0 0 3rem 0; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; color: var(--muted); max-width: 65ch; }
#edge .section-heading { position: sticky; top: 10vh; z-index: 10; padding-bottom: 1rem; }

/* =====================
   UNIFIED SECTION SPACING
   ===================== */
#sense,
#capabilities-intro,
#fragmented,
#services,
#edge,
#experience,
#contact { padding-top: 3rem; padding-bottom: 3rem; }

/* =====================
   Field 1 & 3: Strapline Sections
   ===================== */
#sense.sense-block,
#fragmented { overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; border-radius: 1.5rem; flex-direction: column; min-height: 45vh; padding-top: 2rem; padding-bottom: 2rem; }
#fragmented { margin-top: 3.5rem; gap: 0; }
.sense-line { font-weight: 900; line-height: 1.2; color: #fff; letter-spacing: .01em; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); width: 100%; padding: 0; font-size: clamp(2.5rem, 6vw, 5rem); text-align: left; }
#fragmented .sense-line.teal { color: var(--teal); margin-top: 1.5em; }
.sense-word { display: inline-block; }
#fragmented .sense-line, #sense .sense-line { overflow-wrap: normal !important; word-break: normal !important; }
.sense-letter { display: inline-block; white-space: pre; opacity: 0; transform: translateX(1.5ch); transition: transform 0.8s ease, opacity 0.8s ease; will-change: transform, opacity; }
.sense-word.on .sense-letter { opacity: 1; transform: none; }
.sense-word.on .sense-letter:nth-child(2) { transition-delay: 0.03s; }
.sense-word.on .sense-letter:nth-child(3) { transition-delay: 0.06s; }
.sense-word.on .sense-letter:nth-child(4) { transition-delay: 0.09s; }
.sense-word.on .sense-letter:nth-child(5) { transition-delay: 0.12s; }
.sense-word.on .sense-letter:nth-child(6) { transition-delay: 0.15s; }

/* =====================
   Field 2: Who we work for
   ===================== */
.capabilities-wrapper { position: relative; height: 300vh; margin-bottom: -10vh; }
.capabilities-stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
#capabilities-intro { position: absolute; top: 15vh; left: 50%; transform: translateX(-50%); width: 100%; z-index: 10; padding: 0; }
#capabilities { padding: 0; }
.stack-list .container { position: relative; height: calc(var(--vh) * 100); margin-top: 4rem; }
@supports (height: 100svh) { .stack-list .container { height: 100svh; } }
@supports (height: 100dvh) { .stack-list .container { height: 100dvh; } }
.stack-item { position: absolute; top: 50%; left: 0; right: 0; margin-inline: auto; transform: translate(0, -50%) scale(0.95); opacity: 0; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); height: 40vh; padding: 0; border-radius: 1.5rem; background: var(--glass); backdrop-filter: blur(10px); box-shadow: 0 0.75rem 2.375rem rgba(0,0,0,.22); display: grid; grid-template-columns: 1fr auto; overflow: hidden; }
.stack-item.is-active { opacity: 1; transform: translate(0, -50%) scale(1); }
.stack-item.is-exiting { opacity: 0; transform: translate(-100vw, -50%) scale(1); transition-duration: 1s; }
.stack-content { padding: 2rem 2.5rem; }
.stack-title { font-size: clamp(1.375rem, 3.4vw, 2.125rem); line-height: 1.1; margin: 0; }
.stack-strap { margin: 1rem 0 0 0; font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6; max-width: 45ch; opacity: .95; }
.stack-image { height: 100%; width: 40vh; -webkit-mask-image: linear-gradient(to left, black 60%, transparent 100%); mask-image: linear-gradient(to left, black 60%, transparent 100%); }
.stack-image{
  width: clamp(14rem, 40vh, 24rem);
  aspect-ratio: 4 / 4;                  /* poster-like; adjust if your art differs */
  -webkit-mask-image: linear-gradient(to left,black 60%,transparent 100%);
          mask-image: linear-gradient(to left,black 60%,transparent 100%);
}.stack-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;                     /* no stretching, just crop when needed */
  object-position: center;
  display: block;
}

/* =====================
   Field 4: Services
   ===================== */
.services .grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: stretch; }
.service-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 0.75rem; background: var(--glass); backdrop-filter: blur(10px); border: 0.0625rem  solid var(--ring); border-radius: 1.125rem; padding: 2rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { border-color: rgba(15, 181, 181, 0.8); box-shadow: 0 0 20px rgba(15, 181, 181, 0.4); }
.svc-icon { justify-self: center; width: 4rem; height: 4rem; display: grid; place-items: center; background: none; border: none; margin-bottom: 0.5rem; }
.svc-icon svg { width: 4rem; height: 4rem; color: #fff; }
.service-card h3 { margin: 0; text-align: center; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.service-card p { margin: 0; text-align: center; color: var(--muted); font-size: clamp(1rem, 1.1vw, 1.125rem); max-width: 40ch; justify-self: center; }
.service-card ul { margin: 1rem auto 0; padding-left: 1.5rem; font-size: clamp(0.96875rem, 1.05vw, 1.0625rem); line-height: 1.6; text-align: left; justify-self: center; }
@media (max-width: 50em) { .services .grid { grid-template-columns: 1fr; } }

/* =====================
   Field 5: Our Edge
   ===================== */
#edge .edge-heading {
  position: sticky;
  top: 15vh;
  z-index: 20;
  padding-bottom: 1rem; 
}
.edge-sticky-wrapper { position: relative; height: 300vh; overflow-x: clip; }
@supports not (overflow: clip){
.edge-sticky-wrapper{ overflow-x: hidden; }
}
.edge-stack { position: sticky; top: 25vh; left: 0; display: flex; gap: 2rem; width: 100%; will-change: transform; }
.edge-card { flex: 0 0 clamp(18.75rem, 80vw, 26.25rem); width: clamp(18.75rem, 80vw, 26.25rem); height: clamp(20rem, 56vh, 38.75rem); }
@supports (height: 100dvh) { .edge-card { height: clamp(20rem, 56dvh, 38.75rem); } }
.edge-card__inner { height: 100%; border-radius: 1.5rem; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0.0625rem  solid var(--glass-border); box-shadow:  0 0.625rem 2.25rem rgba(0,0,0,.28); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.2rem; color: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.edge-card__inner:hover { border-color: rgba(15, 181, 181, 0.8); box-shadow: 0 0 20px rgba(15, 181, 181, 0.4); }
.edge-title { margin: 0; font-size: clamp(1.375rem, 3.2vw, 2.25rem); text-align: center; }
.edge-desc { margin: 1.25rem 0 0 0; font-size: clamp(0.9375rem, 1.4vw, 1.125rem); line-height: 1.6; max-width: 65ch; text-align: center; opacity: .95; }

/* =====================
   Field 6: Logos
   ===================== */
#experience .section-strapline { margin-bottom: 5rem; }
.logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(9.375rem, 1fr)); gap:2rem; align-items:center; justify-items:center}
.logos img{max-width:7.5rem; opacity:1; transition:opacity .3s ease}
.logos img:hover{opacity:1}

/* =====================
   Field 7: Contact
   ===================== */
.contact2__grid{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:start}
.contact2__email a{color:var(--teal); font-weight:600}
.btn-primary{display:inline-block; padding:.9rem 1.2rem; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass); backdrop-filter:blur(10px); color:#fff; text-decoration:none; font-weight:700; transition:transform .15s ease, box-shadow .2s ease, background .2s ease}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 0.625rem 1.75rem rgba(0,0,0,.28)    }
.btn-primary:active{transform:translateY(0)}
.btn-cta { display: block; width: fit-content; margin-left: auto; margin-right: auto; margin-top: 6rem; padding: 1.6rem 2.4rem; font-size: 1.2rem; }  
.contact2__form{padding:1.75rem; border-radius:24px; background:var(--glass); border:0.0625rem  solid var(--glass-border); backdrop-filter:blur(10px); box-shadow:0 10px 36px rgba(0,0,0,.28); color:#fff}
.hp{display:none !important}
.field{margin-bottom:1rem}
.field label{display:block; font-size:.95rem; opacity:.9; margin-bottom:.35rem}
.field input,.field textarea{width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:0.75rem; padding:.85rem .9rem; outline:none}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,181,181,.25)}
.form-note{margin:.5rem 0 0 0; opacity:.7; font-size:.9rem}
.form-status{margin:.5rem 0 0 0; font-weight:600}
.form-status.ok{color:#6fe3c9}
.form-status.err{color:#ff9ea6}
@media (max-width: 56.25em){ .contact2__grid{grid-template-columns:1fr} .contact2__form{order:2} .contact2__copy{order:1} }

footer{padding:48px 0; color:var(--muted); border-top:1px solid var(--ring)}
.hero-heading{ will-change: transform, opacity; transition: transform .2s linear, opacity .2s linear; }
    
/* ===== Bulletproofing: viewport units, safe areas, accessibility ===== */

/* iOS text zoom hygiene + default UA widgets to match dark design */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }

/* Safe-area padding for notch devices (keeps your header comfy) */
:root { --safe-top: env(safe-area-inset-top, 0px); }

/* Header padding respects safe area without altering your layout */
.topbar { padding-top: calc(1.25rem + var(--safe-top)); }
.scrolled .topbar { padding-top: calc(1.1rem + var(--safe-top)); }

/* Viewport height: robust across mobile browser chrome show/hide */
:root { --vh: 1vh; } /* JS will set an exact value as a fallback */

.hero { min-height: calc(var(--vh) * 100); }
.capabilities-stage { height: calc(var(--vh) * 100); }

/* Prefer small/dynamic viewport on modern engines */
@supports (height: 100svh) {
  .hero { min-height: 100svh; }
  .capabilities-stage { height: 100svh; }
}
@supports (height: 100dvh) {
  .hero { min-height: 100dvh; }
  .capabilities-stage { height: 100dvh; }
}

/* Cards that use vh get sensible clamps to avoid tiny landscapes */
.stack-item { height: clamp(320px, 40vh, 560px); }
@supports (height: 100dvh) { .stack-item { height: clamp(320px, 40dvh, 560px); } }

/* Our Edge cards: consistent but responsive (no layout explosions) */
.edge-card { flex: 0 0 clamp(300px, 80vw, 420px); width: clamp(300px, 80vw, 420px); height: clamp(320px, 56vh, 620px); }
@supports (height: 100dvh) { .edge-card { height: clamp(320px, 56dvh, 620px); } }

/* Ensure video is never “on top” of content interaction */
.hero-media { pointer-events: none; }

/* Strong, accessible focus – keyboard users can see where they are */
:where(a, button, .btn-primary):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  text-decoration: none;
}

/* Respect users who request less motion (keeps your layout intact) */
@media (prefers-reduced-motion: reduce) {
  .hero-heading { transition: none !important; transform: none !important; opacity: 1 !important; }
  .stack-item { transition: none !important; }
  .edge-stack { scroll-behavior: auto; } /* no smooth scroll assumptions */
}

/* Windows High Contrast / Forced Colors mode: keep content visible */
@media (forced-colors: active) {
  body { background: Canvas; color: CanvasText; }
  .service-card, .edge-card__inner, .contact2__form { border: 1px solid CanvasText; }
  .nav a::after { display: none; }
}