/* =========================================================================
   NIQUA INVESTMENTS (FIJI) - site stylesheet
   Built on the Niqua Brand Guide, Edition 1.
   Navy 60 / white 25 / signal blue 10 / hazard yellow 5.
   Typeface: Inter throughout (SIL OFL). Upright sans only, square edges.
   ========================================================================= */

:root{
  /* brand constants */
  --navy:#053155;
  --navy-deep:#02182B;
  --navy-mid:#0A4272;
  --navy-line:#134066;
  --signal:#00AEEF;
  --hazard:#FFD205;
  --white:#FFFFFF;

  /* on-navy neutrals, biased cool */
  --on-navy:#EAF3FA;
  --on-navy-soft:#A6C4DA;
  --on-navy-faint:#6E93B0;

  /* on-white neutrals */
  --ink:#0A1B29;
  --ink-soft:#4C6479;
  --ink-faint:#7D93A6;
  --rule:#D8E2EA;
  --paper:#FFFFFF;
  --paper-2:#F1F5F8;

  --alert:#D04532;
  --ok:#1E7A4E;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:22px;
  --appbar-h:56px;        /* scrolled height, used for sticky offsets */
  --appbar-h-top:94px;    /* height at rest, with the larger logo */
  --radius:0px;              /* the identity is square-cornered - keep it */
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy-deep);
  color:var(--on-navy);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
i{font-style:normal}   /* <i> is only used here as a decorative shape */
h1,h2,h3,h4{margin:0; line-height:1.1; letter-spacing:-.022em; font-weight:600; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2.5px solid var(--hazard); outline-offset:3px}
::selection{background:var(--hazard); color:var(--navy)}

.wrap{width:100%; max-width:1180px; margin:0 auto; padding-inline:var(--pad)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--hazard); color:var(--navy); padding:12px 18px; font-weight:600}
.skip:focus{left:8px; top:8px}

/* ---------- shared type devices ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--signal); font-weight:500; display:block;
}
.eyebrow.on-paper{color:var(--navy)}
.tagline{font-weight:500; color:var(--hazard); letter-spacing:-.018em}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.04em}
.lede{font-size:clamp(16.5px,4.4vw,19px); line-height:1.62; color:var(--on-navy-soft)}
.lede.on-paper{color:var(--ink-soft)}

.h-sec{font-size:clamp(29px,8.4vw,50px); font-weight:600}
.h-sec .em{color:var(--hazard)}

/* ---------- reveal (defaults visible; JS opts in) ---------- */
.js .r{opacity:.001; transform:translateY(16px); transition:opacity .62s var(--ease), transform .62s var(--ease)}
.js .r.in{opacity:1; transform:none}
.js .r.d1{transition-delay:.07s} .js .r.d2{transition-delay:.14s} .js .r.d3{transition-delay:.21s}
@media (prefers-reduced-motion:reduce){
  .js .r{opacity:1 !important; transform:none !important; transition:none !important}
}

/* =========================================================================
   APP BAR + DRAWER
   ========================================================================= */
.appbar{
  position:fixed; inset:0 0 auto 0; z-index:90; height:var(--appbar-h-top);
  display:flex; align-items:center;
  background:rgba(2,24,43,.62); backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.09);
  transition:background .3s var(--ease), border-color .3s var(--ease), height .32s var(--ease);
}
.appbar.solid{background:rgba(2,24,43,.94); border-bottom-color:var(--navy-line); height:var(--appbar-h)}
.appbar .wrap{display:flex; align-items:center; gap:14px}
.appbar__logo{display:flex; align-items:center; height:100%}
.appbar__logo img{height:50px; width:auto; transition:height .32s var(--ease)}
.appbar.solid .appbar__logo img{height:21px}
@media (prefers-reduced-motion:reduce){ .appbar__logo img{transition:none} }
.appbar__spacer{flex:1}
.appbar__call{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--navy); background:var(--hazard); padding:9px 14px; letter-spacing:-.01em;
}
.appbar__call svg{width:13px; height:13px; fill:currentColor}
.burger{
  width:42px; height:42px; margin-right:-10px; display:grid; place-items:center; position:relative; z-index:101;
}
.burger i{display:block; width:21px; height:2px; background:var(--on-navy); position:relative; transition:background .2s}
.burger i::before,.burger i::after{
  content:""; position:absolute; left:0; width:21px; height:2px; background:var(--on-navy);
  transition:transform .34s var(--ease), top .2s var(--ease);
}
.burger i::before{top:-7px} .burger i::after{top:7px}
.nav-open .burger i{background:transparent}
.nav-open .burger i::before{top:0; transform:rotate(45deg)}
.nav-open .burger i::after{top:0; transform:rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:95; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--appbar-h-top) + 18px) var(--pad) 34px;
  transform:translateY(-101%); transition:transform .48s var(--ease);
  overflow-y:auto;
}
.nav-open .drawer{transform:none}
.drawer nav{display:flex; flex-direction:column}
.drawer nav a{
  display:flex; align-items:baseline; gap:16px; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-size:clamp(25px,7.8vw,35px); font-weight:500; letter-spacing:-.026em;
  transform:translateY(14px); opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease), color .2s;
}
.nav-open .drawer nav a{transform:none; opacity:1}
.nav-open .drawer nav a:nth-child(1){transition-delay:.10s}
.nav-open .drawer nav a:nth-child(2){transition-delay:.16s}
.nav-open .drawer nav a:nth-child(3){transition-delay:.22s}
.nav-open .drawer nav a:nth-child(4){transition-delay:.28s}
.nav-open .drawer nav a:nth-child(5){transition-delay:.34s}
.drawer nav a span{font-family:var(--mono); font-size:11px; color:var(--signal); letter-spacing:.14em; font-weight:500}
.drawer nav a:hover,.drawer nav a[aria-current="page"]{color:var(--hazard)}
.drawer__foot{margin-top:32px; display:flex; flex-direction:column; gap:6px; opacity:0; transition:opacity .5s .4s}
.nav-open .drawer__foot{opacity:1}
.drawer__foot .t{font-weight:500; color:var(--hazard); font-size:19px; letter-spacing:-.018em; margin-bottom:8px}
.drawer__foot a{font-family:var(--mono); font-size:12.5px; color:var(--on-navy-soft); line-height:2}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer nav a,.drawer__foot{transition:none}
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative; overflow:hidden; background:var(--navy-deep); isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-2}
.hero__bg img{width:100%; height:100%; object-fit:cover; opacity:.5}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(2,24,43,.60) 0%,rgba(2,24,43,.48) 34%,rgba(2,24,43,.86) 74%,var(--navy-deep) 100%);
}
.hero__inner{
  position:relative; min-height:clamp(600px,94svh,860px);
  padding-top:calc(var(--appbar-h-top) + 40px); padding-bottom:34px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:20px;
}
.hero__eyebrow{margin-bottom:4px}
.hero h1{
  font-size:clamp(43px,14vw,94px); font-weight:500; letter-spacing:-.035em; line-height:1;
  color:var(--white);
}
.hero h1 .line{display:block; overflow:hidden}
.hero h1 .line > span{display:block}
.js .hero h1 .line > span{transform:translateY(105%); animation:riseIn .9s var(--ease) forwards}
.js .hero h1 .line:nth-child(1) > span{animation-delay:.10s}
.js .hero h1 .line:nth-child(2) > span{animation-delay:.19s}
.js .hero h1 .line:nth-child(3) > span{animation-delay:.28s}
@keyframes riseIn{to{transform:none}}
.hero h1 .mark-em{color:var(--hazard)}
.hero__tag{font-size:clamp(19px,5.4vw,27px); line-height:1.3}
.hero__lede{max-width:38ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:6px}
.hero__cta .btn{flex:1 1 190px}
@media (min-width:560px){ .hero__cta .btn{flex:0 0 auto} }
.hero__meta{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; padding-top:18px;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-navy-faint);
}
.hero__meta b{color:var(--on-navy); font-weight:500}
@media (prefers-reduced-motion:reduce){
    .js .hero h1 .line > span{transform:none; animation:none}
}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 22px; font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  border:2px solid transparent; transition:transform .18s var(--ease), background .2s, color .2s, border-color .2s;
  min-height:50px;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px; height:15px; fill:currentColor; flex:0 0 auto}
.btn--primary{background:var(--hazard); color:var(--navy)}
.btn--primary:hover{background:#FFE04A}
.btn--ghost{border-color:rgba(255,255,255,.34); color:var(--white)}
.btn--ghost:hover{border-color:var(--hazard); color:var(--hazard)}
.btn--dark{background:var(--navy); color:var(--white)}
.btn--dark:hover{background:var(--navy-mid)}
.btn--block{width:100%}


/* =========================================================================
   STATS
   ========================================================================= */
.stats{background:var(--signal); color:var(--navy); padding:48px 0 40px}
.stats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.stat{display:flex; flex-direction:column; gap:2px}
.stat .n{
  font-size:clamp(36px,10vw,58px); font-weight:500; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat .n sup{font-size:.5em; vertical-align:super; margin-left:2px; font-weight:500}
.stat .l{font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin-top:5px; line-height:1.35}
.stat--wide{grid-column:1 / -1}
.stats__note{margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:rgba(5,49,85,.66)}
@media (min-width:700px){ .stats__grid{gap:40px} }

/* =========================================================================
   SERVICES
   ========================================================================= */
.services{background:var(--navy); padding:62px 0 66px; position:relative; overflow:hidden}
.services__head{display:flex; flex-direction:column; gap:14px; margin-bottom:28px}
.svc-list{border-top:1px solid var(--navy-line)}
.svc{
  display:grid; grid-template-columns:32px 1fr auto; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--navy-line);
  transition:padding-left .3s var(--ease);
}
.svc:hover{padding-left:8px}
.svc__n{font-family:var(--mono); font-size:10.5px; color:var(--signal); letter-spacing:.1em}
.svc__b{display:flex; flex-direction:column; gap:5px}
.svc__t{font-size:clamp(18px,5.2vw,23px); font-weight:500; letter-spacing:-.018em; line-height:1.2}
.svc__d{font-size:13.5px; color:var(--on-navy-faint); line-height:1.5}
.svc__k{width:9px; height:9px; background:var(--hazard); flex:0 0 auto; transition:transform .3s var(--ease)}
.svc:hover .svc__k{transform:rotate(45deg) scale(1.25)}

/* =========================================================================
   PROJECT RAILS  (horizontal swipe galleries)
   ========================================================================= */
.rails{background:var(--navy-deep); padding:62px 0 18px}
.rails__head{margin-bottom:8px}
.railsec{margin-bottom:38px}
.railsec__bar{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding-inline:var(--pad); max-width:1180px; margin:0 auto 13px;
}
.railsec__bar h3{font-size:clamp(18px,5vw,23px); font-weight:600; letter-spacing:-.02em}
.railsec__count{font-family:var(--mono); font-size:11px; color:var(--on-navy-faint); white-space:nowrap}

/* the rail itself */
.rail-shell{position:relative}
.rail{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-padding-left:var(--pad); scroll-padding-right:var(--pad);
  padding:4px var(--pad) 16px; margin:0;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail::after{content:""; flex:0 0 calc(var(--pad) - 12px)}
.card{
  flex:0 0 78%; max-width:330px; scroll-snap-align:start; scroll-snap-stop:always;
  background:var(--navy); border:1px solid var(--navy-line);
  display:flex; flex-direction:column; text-align:left;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
  position:relative;
}
.card:active{transform:scale(.985)}
.card:hover{border-color:var(--signal)}
.card__img{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy-mid)}
.card__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.card:hover .card__img img{transform:scale(1.045)}
.card__tag{
  position:absolute; top:0; left:0; background:var(--hazard); color:var(--navy);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 9px; font-weight:500;
}
.card__b{padding:15px 16px 17px; display:flex; flex-direction:column; gap:6px; flex:1}
.card__t{font-size:16.5px; font-weight:600; letter-spacing:-.015em; line-height:1.25}
.card__c{font-size:13px; color:var(--on-navy-faint); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card__more{
  margin-top:auto; padding-top:11px; display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.card__more svg{width:11px; height:11px; fill:currentColor; transition:transform .25s var(--ease)}
.card:hover .card__more svg{transform:translateX(3px)}
@media (min-width:560px){ .card{flex-basis:48%} }
@media (min-width:900px){ .card{flex-basis:31%; max-width:none} }

/* progress rail + swipe hint */
.rail-meta{
  display:flex; align-items:center; gap:14px;
  padding-inline:var(--pad); max-width:1180px; margin:0 auto;
}
.railbar{position:relative; flex:1; height:2px; background:var(--navy-line); overflow:hidden}
.railbar i{
  position:absolute; inset:0 auto 0 0; width:30%; background:var(--signal);
  transform-origin:left center; transition:transform .12s linear;
}
.swipe-hint{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-faint);
  opacity:1; transition:opacity .5s var(--ease);
}
.swipe-hint.gone{opacity:0}
.swipe-hint svg{width:22px; height:9px; fill:none; stroke:var(--hazard); stroke-width:1.6}
.swipe-hint svg .a{animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0); opacity:.4}50%{transform:translateX(4px); opacity:1}}
@media (prefers-reduced-motion:reduce){ .swipe-hint svg .a{animation:none; opacity:1} }

/* =========================================================================
   STORY (white panel on navy - the profile's signature device)
   ========================================================================= */
.story{background:var(--paper); color:var(--ink); padding:58px 0 62px; position:relative}
.story__grid{display:flex; flex-direction:column; gap:24px}
.story h2{font-size:clamp(27px,7.8vw,44px); font-weight:600; color:var(--navy)}
.story p{color:var(--ink-soft); font-size:16px; line-height:1.68}
.story p + p{margin-top:14px}
.story__quote{
  border-left:4px solid var(--hazard); padding:6px 0 6px 18px; margin:6px 0 0;
  font-size:clamp(17.5px,5vw,22px); line-height:1.5; color:var(--navy); font-weight:400; letter-spacing:-.012em;
}
.story__by{display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:20px; border-top:1px solid var(--rule)}
.story__av{width:46px; height:46px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:0 0 auto;
  font-size:14px; font-weight:500; letter-spacing:.06em}
.story__by .n{font-size:15px; font-weight:600; color:var(--ink); line-height:1.3}
.story__by .role{font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.06em}

/* client ticker */
.clients{background:var(--paper-2); color:var(--ink); padding:38px 0 42px; overflow:hidden}
.clients .eyebrow{margin-bottom:20px; padding-inline:var(--pad); max-width:1180px; margin-inline:auto}
.ticker{display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__run{display:flex; gap:0; flex:0 0 auto; animation:tick 42s linear infinite}
.ticker:hover .ticker__run{animation-play-state:paused}
.ticker__run span{
  display:flex; align-items:center; gap:26px; padding-right:26px; white-space:nowrap;
  font-size:15.5px; font-weight:500; color:var(--navy); letter-spacing:-.01em;
}
.ticker__run span::after{content:""; width:6px; height:6px; background:var(--signal); flex:0 0 auto}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__run{animation:none}
  .ticker{overflow-x:auto; mask-image:none; -webkit-mask-image:none}
}

/* =========================================================================
   CTA BAND
   ========================================================================= */
.cta{background:var(--navy); padding:58px 0 62px; position:relative; overflow:hidden}
.cta__in{display:flex; flex-direction:column; gap:18px; position:relative}
.cta h2{font-size:clamp(29px,8.4vw,50px); font-weight:600}
.cta .tagline{font-size:clamp(20px,5.8vw,28px)}

/* =========================================================================
   CONTACT FORM
   ========================================================================= */
.contact{background:var(--paper); color:var(--ink); padding:64px 0 72px}
.contact__grid{display:flex; flex-direction:column; gap:38px}
.form{display:flex; flex-direction:column; gap:4px}
.field{position:relative; padding-top:20px}
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1.5px solid var(--rule);
  padding:10px 0 11px; font-size:16px; color:var(--ink); font-family:inherit;
  transition:border-color .22s var(--ease);
}
.field textarea{resize:vertical; min-height:104px; line-height:1.55}
.field select{appearance:none; -webkit-appearance:none; background-image:none; cursor:pointer}
.field__arrow{position:absolute; right:2px; bottom:16px; width:10px; height:6px; fill:var(--ink-faint); pointer-events:none}
.field label{
  position:absolute; left:0; top:32px; font-size:16px; color:var(--ink-faint); pointer-events:none;
  transform-origin:left top; transition:transform .22s var(--ease), color .22s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:0; border-bottom-color:var(--navy)}
.field.filled label,
.field input:focus + label,.field textarea:focus + label,.field select:focus + label{
  transform:translateY(-24px) scale(.72); color:var(--navy); font-weight:600; letter-spacing:.05em;
}
.field select + label{transform:translateY(-24px) scale(.72); color:var(--navy); font-weight:600; letter-spacing:.05em}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-bottom-color:var(--alert)}
.field__err{
  display:block; font-family:var(--mono); font-size:10.5px; line-height:1.4; letter-spacing:.06em;
  color:var(--alert); height:0; overflow:hidden; padding-top:0;
  transition:height .2s var(--ease), padding-top .2s var(--ease);
}
.field.invalid .field__err{height:20px; padding-top:6px}
.form__actions{margin-top:22px; display:flex; flex-direction:column; gap:12px}
.form__note{font-family:var(--mono); font-size:10.5px; line-height:1.7; color:var(--ink-faint); letter-spacing:.03em}
.form__status{
  display:none; padding:16px 18px; border-left:4px solid var(--ok); background:#EFF7F2;
  font-size:14.5px; color:var(--ink); line-height:1.5;
}
.form__status.show{display:block}
.form__status a{color:var(--navy); text-decoration:underline; font-weight:500}
/* honeypot: off-screen rather than display:none, which some bots detect */
.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.form__status.err{border-left-color:var(--alert); background:#FDF1EF}

.details{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--rule)}
.details a,.details div{
  display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--rule); transition:padding-left .25s var(--ease);
}
.details a:hover{padding-left:6px; color:var(--navy)}
.details dt,.details .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.details .v{font-size:15.5px; font-weight:500; color:var(--ink); letter-spacing:-.005em; word-break:break-word}

/* =========================================================================
   BOTTOM SHEET (project detail)
   ========================================================================= */
.sheet-bd{
  position:fixed; inset:0; z-index:110; background:rgba(2,15,27,.72);
  opacity:0; pointer-events:none; transition:opacity .34s var(--ease);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.sheet-open .sheet-bd{opacity:1; pointer-events:auto}
.sheet{
  position:fixed; z-index:111; left:0; right:0; bottom:0; max-height:92svh;
  background:var(--navy); border-top:3px solid var(--hazard);
  transform:translateY(101%); transition:transform .42s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.sheet-open .sheet{transform:none}
.sheet__grab{padding:10px 0 4px; display:grid; place-items:center; flex:0 0 auto; cursor:grab; touch-action:none}
.sheet__grab i{width:38px; height:4px; background:rgba(255,255,255,.28)}
.sheet__scroll{overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.sheet__img{position:relative; display:block; width:100%; padding:0; border:0; aspect-ratio:16/10;
  overflow:hidden; background:var(--navy-mid); cursor:zoom-in}
.sheet__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.sheet__img:hover img{transform:scale(1.03)}
.sheet__badge{
  position:absolute; left:0; bottom:0; display:flex; align-items:center; gap:8px;
  background:rgba(2,24,43,.82); color:#fff; padding:9px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sheet__badge svg{width:13px; height:13px; fill:var(--hazard)}
.sheet__b{padding:22px var(--pad) 34px; display:flex; flex-direction:column; gap:14px}
.sheet__c{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--signal)}
.sheet__t{font-size:clamp(24px,7vw,34px); font-weight:600; letter-spacing:-.024em; line-height:1.14}
.sheet__d{font-size:15.5px; line-height:1.65; color:var(--on-navy-soft)}
.sheet__scope{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--navy-line); margin-top:4px}
.sheet__scope li{
  list-style:none; display:grid; grid-template-columns:14px 1fr; gap:11px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--navy-line); font-size:14px; color:var(--on-navy-soft);
}
.sheet__scope li::before{content:""; width:7px; height:7px; background:var(--hazard); align-self:center}
.sheet__scope ul{margin:0; padding:0}
.sheet__close{
  position:absolute; top:12px; right:12px; z-index:3; width:38px; height:38px;
  background:rgba(2,24,43,.72); display:grid; place-items:center; backdrop-filter:blur(6px);
}
.sheet__close svg{width:14px; height:14px; stroke:var(--white); stroke-width:2.2; fill:none}
@media (min-width:760px){
  .sheet{left:50%; right:auto; bottom:0; width:min(620px,94vw); transform:translate(-50%,101%); border:3px solid var(--hazard); border-bottom:0}
  .sheet-open .sheet{transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){ .sheet,.sheet-bd{transition:none} }

/* =========================================================================
   PROJECTS PAGE - filter chips
   ========================================================================= */
.pagehead{background:var(--navy); padding:calc(var(--appbar-h-top) + 42px) 0 40px; position:relative; overflow:hidden}
.pagehead__in{display:flex; flex-direction:column; gap:14px; position:relative}
.pagehead h1{font-size:clamp(34px,10.5vw,60px); font-weight:500; letter-spacing:-.032em}
.chips{
  display:flex; gap:8px; overflow-x:auto; padding:0 var(--pad) 2px; margin:0 auto; max-width:1180px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
.chipbar{position:sticky; top:var(--appbar-h); z-index:60; background:rgba(2,24,43,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--navy-line); padding:12px 0 12px}
.chip{
  flex:0 0 auto; padding:9px 14px; font-size:12.5px; font-weight:500; letter-spacing:0;
  border:1.5px solid var(--navy-line); color:var(--on-navy-soft); white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.chip[aria-pressed="true"]{background:var(--hazard); border-color:var(--hazard); color:var(--navy)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{background:var(--navy-deep); border-top:1px solid var(--navy-line); padding:52px 0 34px}
.foot__top{display:flex; flex-direction:column; gap:26px}
.foot__logo img{width:168px}
.foot__tag{font-size:clamp(20px,5.6vw,26px)}
.foot__cols{display:grid; grid-template-columns:1fr 1fr; gap:24px 18px; margin-top:8px}
.foot__col{display:flex; flex-direction:column; gap:9px}
.foot__col h4{font-family:var(--mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--signal); font-weight:500}
.foot__col a,.foot__col span{font-size:13.5px; color:var(--on-navy-soft); line-height:1.5}
.foot__col a:hover{color:var(--hazard)}
.foot__base{
  margin-top:34px; padding-top:20px; border-top:1px solid var(--navy-line);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; color:var(--on-navy-faint); letter-spacing:.05em;
}
.foot__base a:hover{color:var(--signal)}

/* sticky mobile action bar */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex;
  background:var(--navy); border-top:1px solid var(--navy-line);
  transform:translateY(101%); transition:transform .34s var(--ease);
  padding-bottom:env(safe-area-inset-bottom);
}
.actionbar.up{transform:none}
.actionbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 10px; font-size:13.5px; font-weight:600; letter-spacing:-.005em; min-height:52px;
}
.actionbar a + a{border-left:1px solid var(--navy-line)}
.actionbar a.pri{background:var(--hazard); color:var(--navy)}
.actionbar svg{width:14px; height:14px; fill:currentColor}
@media (min-width:820px){ .actionbar{display:none} }
body.has-actionbar{padding-bottom:0}

@media (min-width:820px){
  :root{--pad:34px}
  .hero__inner{min-height:clamp(620px,88svh,880px)}
  .story__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start}
  .contact__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:64px}
  .foot__cols{grid-template-columns:repeat(2,1fr)}
  .foot__top{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
}

/* =========================================================================
   LIGHTBOX - project photo carousel, max 5
   ========================================================================= */
.lb{
  position:fixed; inset:0; z-index:130; background:#03101C;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .28s var(--ease);
}
.lb.open{opacity:1; pointer-events:auto}
.lb__bar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px;
  padding:12px var(--pad); padding-top:calc(12px + env(safe-area-inset-top));
}
.lb__count{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--on-navy-soft);
  font-variant-numeric:tabular-nums;
}
.lb__title{
  font-size:13px; color:var(--on-navy-faint); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; flex:1;
}
.lb__close{
  flex:0 0 auto; width:40px; height:40px; margin-right:-8px; display:grid; place-items:center;
}
.lb__close svg{width:16px; height:16px; stroke:#fff; stroke-width:2.2; fill:none}
.lb__track{
  flex:1; display:flex; overflow-x:auto; overscroll-behavior:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.lb__track::-webkit-scrollbar{display:none}
.lb__slide{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  display:grid; place-items:center; padding:0 var(--pad);
}
.lb__slide img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.lb__foot{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:16px;
  padding:16px var(--pad); padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.lb__nav{
  width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto;
  border:1.5px solid rgba(255,255,255,.26); transition:border-color .2s, opacity .2s;
}
.lb__nav svg{width:15px; height:15px; stroke:#fff; stroke-width:2; fill:none}
.lb__nav:hover{border-color:var(--hazard)}
.lb__nav[disabled]{opacity:.28; pointer-events:none}
.lb__dots{display:flex; gap:7px; align-items:center}
.lb__dots button{width:7px; height:7px; background:rgba(255,255,255,.3); transition:background .2s, transform .2s}
.lb__dots button[aria-current="true"]{background:var(--hazard); transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){ .lb{transition:none} }