/* ==========================================================================
   Prism Padel — site styles
   Palette and type from the 2026 Company Profile.
   One definition per selector. Responsive overrides live at the bottom only.
   ========================================================================== */

:root{
  /* colour */
  --navy:#174b8e;
  --navy-600:#123c72;
  --navy-deep:#0f2a4d;
  --navy-mid:#2a6ab5;
  --sky:#7fa9dd;
  --tint:#eef3fa;
  --accent:#174b8e;
  --ink:#1b1a1a;
  --ink-soft:#4a4f57;
  --muted:#7a828e;
  --line:#e4eaf3;

  /* spacing */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem;
  --gap:clamp(1.2rem,1.6vw,1.7rem);
  --section-y:clamp(4rem,6vw,6rem);
  --head-gap:clamp(2.2rem,3.2vw,3rem);
  --wrap:1280px;
  --gutter:clamp(1.4rem,4vw,3rem);

  /* type */
  --display:'Jost',system-ui,sans-serif;
  --text:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
::selection{background:var(--navy);color:#fff}
.grain,.logos,.marquee,.stars{display:none}

.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.hero-foot{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--navy);color:#fff;padding:.7rem 1.1rem}

/* -------------------------------------------------------------- typography */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;letter-spacing:-.02em;margin:0;line-height:1.08;color:var(--ink)}
h3,h4{font-weight:500;line-height:1.3;letter-spacing:0}
p{margin:0 0 var(--sp-2)}
.h-xl,h1{font-size:clamp(2.2rem,3.4vw,3.5rem);letter-spacing:-.025em;text-wrap:balance}
.h-lg,h2{font-size:clamp(1.9rem,2.8vw,2.9rem);letter-spacing:-.02em;text-wrap:balance}
.h-md{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:400}
.h-lg strong,.h-xl strong,h1 strong,h2 strong{font-weight:500;display:block}
.eyebrow{font-family:var(--display);font-size:.8rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--navy);margin:0 0 var(--sp-2);display:block}
.lede{font-size:clamp(1.05rem,1.1vw,1.18rem);line-height:1.65;color:var(--ink-soft);max-width:52ch}
.muted{color:var(--muted)}
.rich p{color:var(--ink-soft);max-width:62ch;line-height:1.75}
.rich > :last-child{margin-bottom:0}
.rich h2,.rich h3{margin:var(--sp-4) 0 var(--sp-2)}
.rich ul,.rich ol{color:var(--ink-soft);padding-left:1.3rem}
.rich li{margin-bottom:.5rem}
.rich a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.rich img{margin:var(--sp-4) 0;width:100%}

/* ----------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:0 1.8rem;
  border:1.5px solid var(--navy);background:var(--navy);color:#fff;font-family:var(--display);font-size:.95rem;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.btn:hover{background:var(--navy-600);border-color:var(--navy-600);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--navy)}
.btn--ghost:hover{background:var(--navy);color:#fff}
.btn--wa{background:#25d366;border-color:#25d366;color:#fff}
.btn--wa:hover{background:#1eb356;border-color:#1eb356}
.btn--lg{min-height:58px;padding:0 2.1rem}
.btn--sm{min-height:44px;padding:0 1.2rem;font-size:.84rem}
.link-arrow{font-family:var(--display);font-size:.84rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);display:inline-flex;gap:.7rem;align-items:center;white-space:nowrap}
.link-arrow::after{content:"";width:26px;height:1px;background:currentColor;transition:width .3s var(--ease)}
.link-arrow:hover::after{width:42px}

/* ------------------------------------------------------------------ header */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.is-stuck{box-shadow:0 12px 30px rgba(15,42,77,.06)}
.nav__inner{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;display:flex;align-items:center;
  gap:1.4rem;height:76px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-size:1.25rem;font-weight:400;
  white-space:nowrap;flex:0 0 auto}
/* height plus max-width squashed wide logos sideways: constrain both as maxima so the picture keeps its own proportions */
.brand img{height:auto;width:auto;max-height:38px;max-width:200px;object-fit:contain}
.brand__mark{width:22px;height:28px;background:var(--navy);display:block;
  clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%)}
.nav__links{display:flex;gap:1.2rem;margin-left:auto;font-size:.92rem;font-weight:500;white-space:nowrap}
.nav__links a{color:var(--ink-soft);padding:.4rem 0;position:relative;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--navy);
  transition:right .32s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--navy)}
.nav__links a:hover::after,.nav__links a.is-active::after{right:0}
.nav__actions{display:flex;align-items:center;gap:.6rem;margin-left:.4rem}
.nav__actions .btn{min-height:44px;padding:0 1.2rem;font-size:.78rem;letter-spacing:.06em}
.burger{display:none;width:48px;height:44px;border:1.5px solid var(--line);background:#fff;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;cursor:pointer}
.burger span{width:20px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.drawer{position:fixed;inset:76px 0 0;z-index:49;background:#fff;padding:1.8rem var(--gutter) 2rem;display:flex;
  flex-direction:column;justify-content:space-between;overflow-y:auto}
.drawer[hidden]{display:none}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{font-family:var(--display);font-size:1.6rem;font-weight:400;padding:.7rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(12px);animation:drawerIn .45s var(--ease) forwards;animation-delay:calc(var(--i)*.04s)}
.drawer__foot{display:flex;flex-direction:column;gap:var(--sp-2);padding-top:var(--sp-4);color:var(--muted)}
@keyframes drawerIn{to{opacity:1;transform:none}}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;width:100%;margin:0;padding:0;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:stretch;border-bottom:1px solid var(--line)}
.hero__inner{order:1;min-width:0;display:flex;flex-direction:column;justify-content:center;background:#fff;
  padding:clamp(2.4rem,3.6vw,3.4rem) clamp(2rem,3vw,3rem) clamp(2.4rem,3.6vw,3.4rem)
          max(var(--gutter),calc((100vw - var(--wrap))/2))}
.hero__bg{order:2;position:relative;margin:0;overflow:hidden;background:var(--navy-deep);min-height:clamp(320px,38vw,500px)}
/* A figure that only holds whitespace is not :empty, so this rule never fired
   and a page without a hero photo showed a 500px navy panel. The figure is no
   longer printed at all in that case; this stays as a second line of defence. */
.hero__bg:empty{display:none}
/* without a picture the hero is a single column of text, not half a page of navy */
.hero--plain{grid-template-columns:minmax(0,1fr)}
.hero--plain .hero__inner{padding-right:max(var(--gutter),calc((100vw - var(--wrap))/2))}
/* Every slide fills the same frame and is cropped the same way, so photos of
   different shapes cross over without the frame moving. Only the visible one
   is painted; the rest wait at zero opacity. */
.hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .8s var(--ease),transform 3.2s linear;transform:scale(1.04);will-change:opacity}
.hero__bg img.is-on{opacity:1;transform:scale(1)}
.hero__bg img:only-child{opacity:1;transform:none;animation:heroIn 1.2s var(--ease) both}
.hero__caption{position:absolute;left:0;bottom:0;z-index:2;margin:0;padding:.55rem 1.1rem;display:block;
  background:rgba(15,42,77,.72);color:#fff;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;backdrop-filter:blur(6px);transition:opacity .5s var(--ease)}
.hero__caption:empty,.hero__caption[hidden]{display:none}
.hero__caption[href]:hover{background:var(--navy)}
.hero h1{margin-bottom:var(--sp-3);max-width:17ch}
.hero .lede{max-width:44ch}
.hero__actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
.hero--tall{min-height:0}
.hero:not(:has(.hero__bg img)){grid-template-columns:1fr}
.hero:not(:has(.hero__bg img)) .hero__inner{padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2))}
@keyframes heroIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}

.statband{background:#fff;border-bottom:1px solid var(--line)}
.hero__meta{display:grid;grid-template-columns:repeat(4,1fr)}
.hero__meta > div{padding:clamp(1.8rem,2.6vw,2.4rem) clamp(1.2rem,2vw,2rem);border-left:1px solid var(--line)}
.hero__meta > div:first-child{border-left:0;padding-left:0}
.hero__meta b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,3vw,3rem);line-height:1;
  color:var(--navy);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.hero__meta > div > span{display:block;margin-top:.9rem;font-family:var(--display);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);line-height:1.4}
.hero__meta b span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

.page-head{padding:clamp(2.8rem,4.5vw,4.2rem) 0 clamp(1.8rem,2.6vw,2.4rem);border-bottom:1px solid var(--line)}
.page-head .lede{max-width:56ch;margin-top:var(--sp-3)}

/* ---------------------------------------------------------------- sections */
.section{padding:var(--section-y) 0;position:relative}
.section--tint{background:var(--tint)}
.section--navy{background:var(--navy-deep);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy p,.section--navy .lede{color:rgba(255,255,255,.82)}
.section--navy .eyebrow,.section--navy .link-arrow{color:var(--sky)}
.section--navy .btn{background:#fff;border-color:#fff;color:var(--navy)}
.section--navy .btn:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-deep)}
.section__head{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-6);align-items:end;
  margin-bottom:var(--head-gap)}
.section__head > div{min-width:0}
.section__head h2{max-width:22ch}
.section__head .lede{margin-top:var(--sp-2);max-width:54ch}
.section__head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.section__head--center h2{max-width:26ch}
.section__head--center .lede{margin-inline:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,4vw,4rem);align-items:start}
.grid{display:grid;gap:var(--gap)}
.grid--1{grid-template-columns:1fr}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--stretch > *{height:100%}

/* ------------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--line);padding:clamp(1.8rem,2.2vw,2.3rem);position:relative;display:flex;
  flex-direction:column;transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-3px);border-color:var(--sky);box-shadow:0 20px 44px rgba(15,42,77,.10)}
.card h3{font-size:1.32rem;margin:0 0 .7rem}
.card p{margin:0;color:var(--ink-soft);font-size:1rem}
.card__tags{font-family:var(--display);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  margin:0 0 var(--sp-2)}
.card__badge{position:absolute;top:1.6rem;right:1.8rem;font-family:var(--display);font-weight:300;font-size:2.4rem;
  color:var(--line);letter-spacing:.02em}
.card__icon{width:46px;height:46px;object-fit:contain;margin-bottom:var(--sp-2)}
.card__foot{margin-top:auto;padding-top:var(--sp-3);display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip-row{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  margin:0 0 var(--sp-2)}

/* navy service rows */
.section--navy .card{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.2);
  padding:clamp(1.8rem,2.4vw,2.4rem) 0 clamp(1.8rem,2.4vw,2.4rem) clamp(3.6rem,5vw,5rem)}
.section--navy .card:hover{transform:none;box-shadow:none;border-color:rgba(255,255,255,.45)}
.section--navy .card h3{transition:letter-spacing .35s var(--ease)}
.section--navy .card:hover h3{letter-spacing:.02em}
.section--navy .card p{color:rgba(255,255,255,.82)}
.section--navy .card__tags{color:var(--sky)}
.section--navy .card__badge{top:clamp(1.8rem,2.4vw,2.4rem);left:0;right:auto;font-size:clamp(2rem,2.8vw,2.8rem);
  font-weight:200;color:rgba(255,255,255,.3)}

/* --------------------------------------------------------- lists & numbers */
.pillars{display:grid}
.pillars article{padding:var(--sp-3) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;
  gap:var(--sp-3);align-items:start}
.pillars i{width:44px;height:44px;border:1px solid var(--navy);display:grid;place-items:center;font-family:var(--display);
  color:var(--navy);font-size:.9rem;font-style:normal}
.pillars img{width:32px;height:32px;object-fit:contain}
.pillars h3{font-size:1.15rem;margin:0 0 .4rem}
.pillars p{margin:0;font-size:1rem;color:var(--ink-soft)}
.pillars p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.section--navy .pillars article{border-color:rgba(255,255,255,.18)}
.section--navy .pillars i{border-color:rgba(255,255,255,.45);color:#fff}
.section--navy .pillars h3{color:#fff}
.section--navy .pillars p{color:rgba(255,255,255,.82)}

.numbered{counter-reset:n;display:grid}
.numbered__row{counter-increment:n;display:grid;grid-template-columns:54px 1fr;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-top:1px solid var(--line);align-items:start;transition:padding-left .35s var(--ease),background .35s}
.numbered__row:hover{padding-left:.8rem;background:linear-gradient(90deg,var(--tint),transparent 70%)}
.numbered__row::before{content:counter(n,decimal-leading-zero);font-family:var(--display);font-weight:300;
  color:var(--navy);font-size:1.6rem;line-height:1.2}
.numbered__row h3{font-size:1.18rem;margin:0 0 .45rem}
.numbered__row p{margin:0;font-size:1rem;color:var(--ink-soft)}
.numbered__row .tag{margin-top:.6rem;display:inline-block;font-family:var(--display);font-size:.76rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.section--navy .numbered__row{border-color:rgba(255,255,255,.18)}
.section--navy .numbered__row::before{color:var(--sky)}
.section--navy .numbered__row h3{color:#fff}
.section--navy .numbered__row:hover{background:rgba(255,255,255,.05)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.steps article{padding:var(--sp-4) clamp(1.2rem,1.6vw,1.8rem) var(--sp-4) clamp(1.2rem,1.6vw,1.8rem);
  border-left:1px solid var(--line);position:relative}
.steps article:first-child{border-left:0;padding-left:0}
.steps article::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--navy);
  transition:width .5s var(--ease)}
.steps article:hover::before{width:100%}
.steps b{font-family:var(--display);font-weight:200;font-size:2.6rem;color:var(--sky);display:block;line-height:1}
.steps h3{font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;margin:var(--sp-3) 0 .8rem}
.steps p{margin:0;font-size:.97rem;line-height:1.7;color:var(--ink-soft)}
.steps .tag{display:block;margin-top:var(--sp-2);font-family:var(--display);font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.timeline{margin-top:var(--sp-4);text-align:center;font-family:var(--display);font-size:.84rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--line)}
.stats div{padding:var(--sp-4) var(--sp-2) 0 0}
.stats b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,3.2vw,3.2rem);line-height:1;
  color:var(--navy);white-space:nowrap}
.stats > div > span{display:block;margin-top:.9rem;font-family:var(--display);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.stats b span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}

/* ------------------------------------------------------------ press strip */
/* it now leads the page body, straight under the hero figures, so it keeps
   its top rule only when something sits above it */
.press{padding:clamp(2.4rem,3.4vw,3.2rem) 0;border-bottom:1px solid var(--line);background:#fff}
.press__inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
.press__label{font-family:var(--display);font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.press ul{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.4rem,3vw,3rem);list-style:none;margin:0;padding:0}
.press li{font-family:var(--display);font-weight:400;font-size:clamp(.98rem,1.2vw,1.18rem);letter-spacing:.18em;
  text-transform:uppercase;color:var(--navy-deep)}
.press a:hover{text-decoration:underline;text-underline-offset:5px}

/* --------------------------------------------------------- clients ticker */
.clients{padding:var(--section-y) 0;background:#fff}
.clients--tint{background:var(--tint)}
.clients__head{width:min(var(--wrap),100% - var(--gutter)*2);margin:0 auto var(--head-gap);display:grid;
  grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-6);align-items:end}
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#fff;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker__track{display:flex;align-items:center;width:max-content;animation:tick 70s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:flex;align-items:center;justify-content:center;height:92px;padding:0 clamp(1.8rem,3vw,3rem);
  font-family:var(--display);font-size:1rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;border-right:1px solid var(--line);transition:color .25s,background .25s}
a.ticker__item:hover{color:var(--navy);background:var(--tint)}
.ticker__item img{max-height:60px;width:auto;object-fit:contain;transition:transform .25s}
a.ticker__item:hover img{transform:translateY(-2px)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------------- projects */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.pgrid--2{grid-template-columns:repeat(2,1fr)}
.pcard{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .35s}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(15,42,77,.13)}
.pcard__media{aspect-ratio:3/2;overflow:hidden;background:var(--navy-deep);position:relative}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__media--empty{background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep))}
.pcard__ph{position:absolute;inset:0;display:grid;place-items:center;padding:2.6rem 1.4rem 1.4rem;
  font-family:var(--display);font-weight:300;font-size:1.35rem;line-height:1.35;color:rgba(255,255,255,.55);
  letter-spacing:.06em;text-align:center;text-transform:uppercase}
.pcard__flag{position:absolute;top:1rem;left:1rem;max-width:calc(100% - 2rem);background:#fff;color:var(--navy);
  font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.45rem .85rem;
  z-index:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard__body{padding:var(--sp-3) var(--sp-3) var(--sp-3);display:flex;flex-direction:column;flex:1}
.pcard__loc{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:.6rem}
.pcard__body h3{font-size:1.28rem;margin:0 0 .7rem;color:var(--ink)}
.pcard p{margin:0 0 var(--sp-3);font-size:.97rem;line-height:1.65;color:var(--ink-soft)}
.pcard__spec{margin-top:auto;border-top:1px solid var(--line);padding-top:.95rem;margin-bottom:0;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.1rem;row-gap:.45rem;align-items:baseline}
.pcard__spec dt{font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0;white-space:nowrap}
.pcard__spec dd{margin:0;min-width:0;font-size:.92rem;line-height:1.4;color:var(--ink-soft)}
.pcard__spec dd b{font-family:var(--display);font-weight:500;font-size:1.06rem;color:var(--navy)}
.pcard__spec dd small{display:block;margin-top:.1rem;font-size:.8rem;line-height:1.4;color:var(--muted)}
.chip{font-family:var(--display);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chip + .chip::before{content:"·";margin-right:.6rem;color:var(--line)}

.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:var(--sp-4)}
.filters button{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;background:#fff;
  border:1.5px solid var(--line);color:var(--ink-soft);padding:.6rem 1.2rem;cursor:pointer;transition:.22s}
.filters button:hover{border-color:var(--navy);color:var(--navy)}
.filters button.is-on{background:var(--navy);border-color:var(--navy);color:#fff}

/* project detail */
.pintro{padding:clamp(2.4rem,4vw,3.6rem) 0 clamp(1.8rem,2.6vw,2.4rem)}
.pintro__grid{display:grid;grid-template-columns:1fr auto;gap:var(--sp-4) var(--sp-6);align-items:end}
.pintro h1{max-width:18ch}
.pintro .lede{margin-top:var(--sp-2)}
.pintro__tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:var(--sp-3)}
.pintro__actions{display:flex;gap:.8rem;flex-wrap:wrap}
.tagline{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;background:var(--navy);
  color:#fff;padding:.5rem 1rem}
.tagline--soft{background:var(--tint);color:var(--navy)}
.pcover{margin:0;width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;overflow:hidden;
  background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep))}
.pcover img{width:100%;height:clamp(280px,46vw,560px);object-fit:cover}
.factbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.factbar > div{padding:clamp(1.5rem,2.2vw,2rem) clamp(1.2rem,1.8vw,1.6rem);border-left:1px solid var(--line)}
.factbar > div:first-child{border-left:0;padding-left:0}
.factbar span{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.factbar b{display:block;margin-top:.7rem;font-family:var(--display);font-weight:400;font-size:1.15rem;
  color:var(--navy-deep);line-height:1.4;font-variant-numeric:tabular-nums}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:var(--sp-6) 0}
.specs div{padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;border-top:1px solid var(--line)}
.specs span{font-family:var(--display);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:.5rem}
.specs b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--navy)}
.pnav{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.pnav__item{border:1px solid var(--line);padding:var(--sp-3) var(--sp-4);background:#fff;transition:.3s var(--ease)}
.pnav__item:hover{border-color:var(--navy);transform:translateY(-3px)}
.pnav__item span{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)}
.pnav__item b{display:block;margin-top:.5rem;font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--navy-deep)}
.pnav__item--next{text-align:right}

/* gallery */
.pgallery{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.pgallery__item{position:relative;margin:0;overflow:hidden;grid-column:span 2;aspect-ratio:4/3;cursor:zoom-in;
  background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep))}
.pgallery__item--feature{grid-column:span 4;aspect-ratio:16/10}
.pgallery__item:only-child{grid-column:span 6;aspect-ratio:16/9}
.pgallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pgallery__item:hover img{transform:scale(1.04)}
.pgallery__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.2rem 1rem;color:#fff;font-size:.94rem;
  background:linear-gradient(transparent,rgba(11,33,64,.9));opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.pgallery__item:hover figcaption{opacity:1;transform:none}
.pgallery__placeholder{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:200;
  font-size:2.8rem;color:rgba(255,255,255,.28)}
.pgallery__item--video{cursor:pointer}
.pgallery__play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);
  color:var(--navy);display:grid;place-items:center;font-size:1.25rem;transition:transform .35s var(--ease)}
.pgallery__item--video:hover .pgallery__play{transform:scale(1.1)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gallery figure{margin:0;overflow:hidden;cursor:zoom-in;position:relative;background:var(--tint)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem 1.2rem 1rem;font-size:.94rem;color:#fff;
  background:linear-gradient(transparent,rgba(11,33,64,.88))}

/* lightbox */
.lb{position:fixed;inset:0;z-index:90;background:rgba(9,18,31,.94);display:none;place-items:center;padding:var(--sp-4)}
.lb.is-open{display:grid}
.lb__stage{display:grid;place-items:center}
.lb__stage img{max-width:min(1100px,92vw);max-height:86vh}
.lb__stage iframe,.lb__stage video{width:min(1100px,92vw);aspect-ratio:16/9;border:0}
.lb__caption{position:absolute;left:0;right:0;bottom:1.6rem;text-align:center;color:rgba(255,255,255,.85);font-size:.94rem;margin:0}
.lb button{position:absolute;top:1.6rem;right:1.6rem;background:#fff;border:0;color:var(--ink);width:48px;height:48px;
  font-size:1.2rem;cursor:pointer}
.lb [data-lb-prev],.lb [data-lb-next]{top:50%;transform:translateY(-50%);width:52px;height:52px;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;transition:.25s}
.lb [data-lb-prev]{left:1.4rem;right:auto}
.lb [data-lb-next]{right:1.4rem}
.lb [data-lb-prev]:hover,.lb [data-lb-next]:hover{background:#fff;color:var(--navy)}

/* -------------------------------------------------------------------- team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap)}
.member{border:1px solid var(--line);background:#fff;transition:transform .4s var(--ease),box-shadow .3s}
.member:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(15,42,77,.10)}
.member__photo{aspect-ratio:4/5;position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--navy-mid),var(--navy-deep))}
.member__photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.member:hover .member__photo img{transform:scale(1.04)}
.member__initials{font-family:var(--display);font-weight:200;font-size:2.8rem;color:rgba(255,255,255,.35)}
.member__body{padding:var(--sp-3)}
.member__body h3{font-size:1.2rem}
.member__role{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  margin:.5rem 0}
.member__body p{color:var(--ink-soft);font-size:.96rem;margin:.6rem 0 0}
.member__links{display:flex;gap:1.1rem;margin-top:var(--sp-2);font-family:var(--display);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.member__links a:hover{color:var(--navy)}

/* ------------------------------------------------------------- testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.quote{border:1px solid var(--line);background:#fff;padding:clamp(1.8rem,2.2vw,2.2rem);display:flex;flex-direction:column;
  gap:var(--sp-2)}
.quote .mark{font-family:var(--display);font-size:2.8rem;font-weight:300;color:var(--sky);line-height:.6;display:block}
.quote p{margin:0;font-size:1rem;color:var(--ink-soft);line-height:1.75}
.quote__who{margin-top:auto;display:flex;align-items:center;gap:var(--sp-2);border-top:1px solid var(--line);
  padding-top:var(--sp-2)}
.quote__who img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.quote__who b{font-family:var(--display);font-weight:500;font-size:1.02rem;display:block}
.quote__who span{font-size:.9rem;color:var(--muted);line-height:1.4}
.section--tint .quote{background:#fff}

/* ------------------------------------------------------------------- video */
.video{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep))}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,33,64,.25);border:0;cursor:pointer;width:100%}
.video__play span{width:88px;height:88px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;
  font-size:1.5rem;transition:transform .35s var(--ease)}
.video__play:hover span{transform:scale(1.08)}

/* --------------------------------------------------------------- instagram */
.ig__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-2);
  margin-bottom:var(--head-gap)}
.ig__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)}
.ig__grid a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--tint)}
.ig__grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ig__grid a:hover img{transform:scale(1.05)}
.ig__cap{position:absolute;inset:auto 0 0 0;padding:1.8rem .9rem .8rem;font-size:.9rem;color:#fff;
  background:linear-gradient(transparent,rgba(11,33,64,.88))}

/* --------------------------------------------------- partners & products */
.partner{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.partner__head{padding:var(--sp-4) var(--sp-4) 0;min-height:72px;display:flex;align-items:center;gap:var(--sp-2)}
.partner__head img{height:46px;width:auto;object-fit:contain}
.partner__body{padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.partner__body h3{font-size:1.3rem;margin-bottom:.5rem}
.partner__role{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);
  margin-bottom:.8rem}
.partner__body p{color:var(--ink-soft);font-size:1rem;margin:0}
.product{border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.product__img{aspect-ratio:4/3;background:linear-gradient(155deg,var(--tint),#dce7f6);overflow:hidden}
.product__img img{width:100%;height:100%;object-fit:cover}
.product__body{padding:var(--sp-3)}
.product__body h3{font-size:1.12rem;margin-bottom:.45rem}
.product__spec{font-family:var(--display);font-size:.8rem;letter-spacing:.1em;color:var(--navy);margin:0 0 .6rem}
.product__body p{color:var(--ink-soft);font-size:.96rem;margin:0}

.offer{background:var(--navy);color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.2rem,3.5vw,3.6rem);
  padding:clamp(2.2rem,3.5vw,3.6rem);align-items:center}
.offer h2,.offer h3{color:#fff}
.offer .eyebrow{color:var(--sky)}
.offer p,.offer .rich p{color:rgba(255,255,255,.86);max-width:52ch}
.offer .rich ul{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:.85rem}
.offer .rich li{padding-left:1.7rem;position:relative;color:rgba(255,255,255,.86);font-size:1rem;margin:0}
.offer .rich li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;background:var(--sky);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.offer__price{font-family:var(--display);font-weight:200;font-size:clamp(2.6rem,4.5vw,4rem);line-height:1;margin:0;color:#fff}
.offer__price small{display:block;font-size:.78rem;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sky);margin-top:.9rem}
.offer .btn{background:#fff;border-color:#fff;color:var(--navy);margin-top:var(--sp-4)}
.offer .btn:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-deep)}

/* -------------------------------------------------------------- catalogues */
.cat{display:grid;grid-template-columns:120px 1fr auto;gap:var(--sp-4);align-items:center;border:1px solid var(--line);
  padding:var(--sp-2);background:#fff;transition:transform .35s var(--ease),box-shadow .3s}
.cat:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(15,42,77,.10)}
.cat__thumb{aspect-ratio:3/4;overflow:hidden;background:linear-gradient(155deg,var(--tint),#dce7f6);display:grid;place-items:center}
.cat__thumb img{width:100%;height:100%;object-fit:cover}
.cat__thumb span{font-family:var(--display);font-size:.8rem;letter-spacing:.14em;color:var(--navy)}
.cat h3{font-size:1.25rem;margin-bottom:.45rem}
.cat p{color:var(--ink-soft);font-size:1rem;margin:0}

/* --------------------------------------------------------------- accordion */
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:var(--sp-3) 0;font-family:var(--display);font-size:1.2rem;
  font-weight:400;display:flex;justify-content:space-between;gap:var(--sp-2);align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--navy);font-family:var(--display);font-size:1.5rem;font-weight:300;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{color:var(--ink-soft);padding-bottom:var(--sp-3);margin:0;max-width:70ch}
.section--navy .acc details{border-color:rgba(255,255,255,.2)}
.section--navy .acc summary{color:#fff}
.section--navy .acc summary::after{color:var(--sky)}
.section--navy .acc p{color:rgba(255,255,255,.82)}

/* ------------------------------------------------------------------- forms */
.form{display:grid;gap:var(--sp-2)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.field label{display:block;font-family:var(--display);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem}
.field input,.field textarea,.field select{width:100%;padding:.95rem 1.1rem;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);font:inherit;font-size:1rem;transition:border-color .25s}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--navy)}
.note{padding:var(--sp-2) var(--sp-3);border:1px solid var(--navy);background:var(--tint);color:var(--ink);font-size:1rem}
.note--bad{border-color:#c98b8b;background:#fdf2f2}
.wrap > iframe{width:100%;min-height:420px;border:0;display:block}

/* -------------------------------------------------------------------- blog */
.post-card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .3s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(15,42,77,.10)}
.post-card__img{aspect-ratio:16/10;overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--navy-mid),var(--navy-deep))}
.post-card__img img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:var(--sp-3);display:flex;flex-direction:column;gap:.7rem;flex:1}
.post-card h3{font-size:1.25rem}
.post-card time{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.post-card p{font-size:.96rem;color:var(--ink-soft);margin:0}

/* --------------------------------------------------------------------- cta */
.cta{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;padding:var(--section-y) 0}
.cta::before{content:"";position:absolute;top:0;right:0;width:38%;height:100%;background:rgba(255,255,255,.04);
  clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.cta__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--sp-6);align-items:end;position:relative}
.cta .eyebrow{color:var(--sky)}
.cta__title{font-family:var(--display);font-weight:300;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.08;color:#fff;
  max-width:16ch}
.cta__text{color:rgba(255,255,255,.82);max-width:50ch;margin-top:var(--sp-2)}
.cta__actions{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.cta .btn--solid{background:#fff;border-color:#fff;color:var(--navy)}
.cta .btn--solid:hover{background:var(--tint);border-color:var(--tint);color:var(--navy-deep)}
.cta .btn--ghost,.cta .btn--wa{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.cta .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.cta .btn--wa:hover{background:#25d366;border-color:#25d366}

/* ------------------------------------------------------------------ footer */
.foot{background:#0b2140;color:#c6d6ea;padding:clamp(3.2rem,4.5vw,4.5rem) 0 var(--sp-4);font-size:.97rem}
.foot .brand{color:#fff}
.foot .brand__mark{background:#fff}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(2rem,3vw,3.2rem)}
.foot__brand p{color:rgba(198,214,234,.75);margin-top:var(--sp-2);max-width:32ch;line-height:1.65}
.foot__social{display:flex;gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;font-family:var(--display);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(198,214,234,.8)}
.foot__social a:hover{color:#fff}
.foot__col h3{font-family:var(--display);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);
  margin:0 0 var(--sp-2);font-weight:500}
.foot__col a,.foot__office{display:block;color:rgba(198,214,234,.85);margin-bottom:.7rem;line-height:1.5}
.foot__col a:hover{color:#fff}
.foot__office b{display:block;color:#fff;font-family:var(--display);font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:.2rem}
.foot__bottom{margin-top:var(--sp-6);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.14);display:flex;
  justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;font-size:.88rem;color:rgba(198,214,234,.65)}

.wa-float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60;display:flex;align-items:center;gap:.7rem;background:#25d366;
  color:#fff;padding:1rem 1.3rem;font-family:var(--display);font-weight:500;font-size:.86rem;letter-spacing:.12em;
  text-transform:uppercase;box-shadow:0 16px 38px rgba(37,211,102,.35);transition:transform .3s var(--ease)}
.wa-float:hover{transform:translateY(-3px)}

/* ------------------------------------------------------------------ reveal */
.reveal{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-anim .reveal:not(.is-in){opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}
.reveal-d2{transition-delay:.14s}
.reveal-d3{transition-delay:.21s}
.reveal-d4{transition-delay:.28s}

/* ================================== responsive ============================ */
@media (max-width:1320px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__actions{margin-left:auto}
}

@media (max-width:1100px){
  .pcard--slide{flex-basis:clamp(240px,42vw,320px)}
  .hero{grid-template-columns:1fr}
  .hero__inner{order:2;padding:var(--sp-4) var(--gutter) var(--sp-6)}
  .hero__bg{order:1;min-height:clamp(240px,46vw,380px)}
  .hero__meta{grid-template-columns:repeat(2,1fr)}
  .hero__meta > div{border-left:1px solid var(--line);border-top:1px solid var(--line);padding-left:var(--sp-3)}
  .hero__meta > div:first-child{padding-left:var(--sp-3)}
  .two,.cta__inner,.offer,.pintro__grid,.section__head{grid-template-columns:1fr}
  .grid--3,.grid--4,.pgrid,.quotes,.gallery,.team-grid,.ig__grid{grid-template-columns:repeat(2,1fr)}
  .pgrid--2{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps article{border-left:1px solid var(--line);padding-left:var(--sp-3)}
  .steps article:first-child{padding-left:var(--sp-3)}
  .pgallery{grid-template-columns:repeat(4,1fr)}
  .pgallery__item--feature,.pgallery__item:only-child{grid-column:span 4}
  .foot__grid{grid-template-columns:1fr 1fr}
  .clients__head{grid-template-columns:1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  .section{padding:3.4rem 0}
  .grid--2,.grid--3,.grid--4,.pgrid,.pgrid--2,.quotes,.gallery,.team-grid,.steps,.pnav,.foot__grid,.form .row{
    grid-template-columns:1fr}
  .ig__grid{grid-template-columns:repeat(2,1fr)}
  .pgallery{grid-template-columns:1fr}
  .pgallery__item,.pgallery__item--feature,.pgallery__item:only-child{grid-column:span 1;aspect-ratio:4/3}
  .pgallery__item figcaption{opacity:1;transform:none}
  .hero__meta,.stats,.factbar{grid-template-columns:repeat(2,1fr)}
  .hero__actions .btn,.pintro__actions .btn{flex:1 1 100%}
  .steps article,.steps article:first-child{border-left:0;border-top:1px solid var(--line);padding:var(--sp-3) 0}
  .steps{border-top:0}
  .section--navy .card{padding-left:3rem}
  .section--navy .card__badge{font-size:1.7rem}
  .cat{grid-template-columns:1fr;gap:var(--sp-2)}
  .cat__thumb{max-width:110px}
  .pnav__item--next{text-align:left}
  .nav__actions .btn{display:none}
  .wa-float{padding:1.1rem;border-radius:50%}
  .wa-float span{display:none}
  /* a thumb needs a bigger target than a mouse does */
  .video__play span{width:72px;height:72px}
  .ticker__item{height:76px;padding:0 1.4rem;font-size:.88rem}
  .ticker__item img{max-height:42px}

  /* carousel: one card at a time with the next one peeking, and the strip
     running to both screen edges so it reads as something that moves */
  .pcarousel{margin-inline:calc(var(--gutter) * -1)}
  .pcarousel__track{padding-inline:var(--gutter);gap:var(--sp-2)}
  .pcard--slide{flex-basis:80vw;max-width:340px}
  .pcarousel--gallery .pgallery__item{flex-basis:82vw;max-width:360px}
  .pcarousel__arrow{width:40px;height:40px}
  .pcarousel__arrow--prev{left:.4rem}
  .pcarousel__arrow--next{right:.4rem}
  .pcarousel__controls{padding-inline:var(--gutter);gap:.6rem;margin-top:1.2rem}
  .pcarousel__btn{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1 !important;transform:none !important}
  .pcarousel__track{scroll-snap-type:x proximity}
}

/* ------------------------------------------------ spacing utilities ----
   The same three gaps were repeated as inline styles across the views.
   Same values, one place to change them.                                */
.stack-sm{margin-top:1.4rem}
.stack{margin-top:1.6rem}
.stack-lg{margin-top:2rem}
.section.flush-top{padding-top:0}

/* --------------------------------------------- small missing pieces ----
   Classes that were in the markup with no rule behind them.             */
.brand__text{font-family:var(--display);font-weight:400;letter-spacing:.04em}
.card--link{cursor:pointer}
.ig__embed{max-width:100%;overflow:hidden}
.ig__embed iframe,.ig__embed blockquote{max-width:100% !important;margin:0 auto}
.pnav__item--prev{text-align:left}

/* --------------------------------------------------- projects carousel ----
   A plain horizontal scroller. It swipes and scrolls with no script at all;
   the script adds the slow drift, the arrows and the endless loop.        */
.pcarousel{position:relative;margin-top:var(--head-gap)}
.pcarousel__track{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:.4rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.pcarousel__rail{display:flex;gap:var(--gap);align-items:stretch;will-change:transform}
.pcarousel__track.is-snapping{scroll-snap-type:x proximity}
.pcarousel__track::-webkit-scrollbar{display:none}
.pcarousel__track:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.pcarousel__track.is-dragging{scroll-snap-type:none;cursor:grabbing}
.pcarousel__track.is-dragging a{pointer-events:none}
.pcard--slide{flex:0 0 clamp(268px,26vw,392px);scroll-snap-align:start;height:auto}
/* every card the same shape, whatever the text length, so the rows line up */
.pcarousel .pcard__body{display:flex;flex-direction:column;flex:1}
.pcarousel .pcard p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.7em)}
.pcarousel .pcard__spec dd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcarousel__controls{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem}
.pcarousel__btn{width:48px;height:48px;flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:1rem;line-height:1;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease),transform .25s var(--ease)}
.pcarousel__btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pcarousel__btn:active{transform:translateY(1px)}
.pcarousel__btn--play{margin-left:auto;font-size:.7rem;letter-spacing:.1em}
.pcarousel__progress{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden}
.pcarousel__progress span{position:absolute;inset:0 auto 0 0;width:22%;background:var(--navy);
  transform-origin:left center;transition:transform .2s linear}
.section--tint .pcarousel__btn{background:transparent}
.section--tint .pcarousel__btn:hover{background:var(--navy);color:#fff}

/* press logos sit where the names used to */
.press li img{height:clamp(22px,2.4vw,34px);width:auto;object-fit:contain;opacity:.72;
  transition:opacity .25s var(--ease)}
.press a:hover img{opacity:1}
.offer__note{margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}

/* ------------------------------------------------------- home video band --
   No heading over it: the film speaks for itself. Wider than the text grid
   so it reads as a break in the page rather than another content block.   */
.section--video{padding-block:clamp(2.4rem,5vw,4.4rem)}
.video-band{width:min(1480px,100% - var(--gutter) * 2);margin-inline:auto}
.video__caption{margin:1rem auto 0;max-width:62ch;text-align:center;font-size:.95rem;color:var(--muted)}

/* a picture dragged out of the page would eat the click that should open the project */
.pcarousel__track img{-webkit-user-drag:none;user-select:none}

/* the footer mark can afford a little more room */
.foot__brand .brand img{max-height:46px;max-width:230px}

@media (prefers-reduced-motion:reduce){
  .hero__bg img{transition:none;transform:none}
}

/* ---------------------------------------------------- video, on one tap ----
   A spinner while the film is fetched, a bigger tap target on a phone, and
   black behind the player so letterboxing never shows the page through.   */
.video.is-playing{background:#000}
.video.is-playing video{object-fit:contain;background:#000}
.video.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:videoSpin .8s linear infinite;
  pointer-events:none;z-index:2}
@keyframes videoSpin{to{transform:rotate(360deg)}}
.video__play:focus-visible span{outline:3px solid #fff;outline-offset:4px}

/* ------------------------------------------- project photos, in a strip ----
   The gallery tiles were grid cells. Inside the carousel rail they become
   slides of one width, so the strip drifts evenly and every photo is framed
   the same way whatever shape the original is.                            */
.pcarousel--gallery .pgallery__item{flex:0 0 clamp(280px,32vw,460px);grid-column:auto;aspect-ratio:4/3;
  scroll-snap-align:start}
.pcarousel--gallery .pgallery__item--feature{grid-column:auto;aspect-ratio:4/3}
.pcarousel--gallery .pgallery__item:only-child{grid-column:auto;aspect-ratio:16/9;flex-basis:min(760px,88%)}
.pcarousel--gallery .pgallery__item figcaption{opacity:1;transform:none;background:linear-gradient(to top,rgba(11,33,64,.85),transparent)}


/* --------------------------------------------- client logos, with arrows ---
   The strip used to be a CSS marquee, which cannot be steered. It now runs on
   the same engine as the other strips, so it drifts, stops when touched, and
   takes an arrow on each side.                                            */
.pcarousel--logos{position:relative;margin-top:0}
.pcarousel--logos .pcarousel__track{border-block:1px solid var(--line);background:#fff;overflow-x:auto;padding-bottom:0}
.pcarousel--logos .pcarousel__rail{gap:0;align-items:center}
.pcarousel--logos .ticker__item{flex:0 0 auto}
.pcarousel__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;
  display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--navy);
  cursor:pointer;font-size:1rem;line-height:1;transition:background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease)}
.pcarousel__arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.pcarousel__arrow--prev{left:max(.6rem,calc((100vw - var(--wrap))/2 - 23px))}
.pcarousel__arrow--next{right:max(.6rem,calc((100vw - var(--wrap))/2 - 23px))}