/* SENERGA · light theme */
:root{
  --white:#ffffff;
  --paper:#f6fafa;
  --ice:#e6f3f4;
  --sky:#cde5e8;
  --line:#d3e4e6;
  --ink:#0a2f35;
  --text:#35585e;
  --mute:#58777c;
  --teal:#1b9aa6;
  --teal-dark:#0f6f7b;
  --primary:#0a4e57;
  --primary-hover:#0d6470;
  --deep:#06323a;
  --glow:#7fd3db;

  --f-display:"Red Hat Display","Segoe UI",system-ui,sans-serif;
  --f-text:"Red Hat Text","Segoe UI",system-ui,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
  --header-h:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 8px)}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--f-text);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p,dl,dd,figure{margin:0}
a{color:inherit}
svg{display:block}
::selection{background:#bfe3e7;color:var(--ink)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.footer :focus-visible,.hero :focus-visible{outline-color:#fff}

*{scrollbar-width:thin;scrollbar-color:#9db9c6 transparent}
::-webkit-scrollbar{width:10px;height:8px}
::-webkit-scrollbar-thumb{background:#9db9c6;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--primary);color:#fff;padding:10px 16px;border-radius:4px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
.h2{
  font-family:var(--f-display);font-weight:500;color:var(--ink);
  font-size:clamp(2rem,4.3vw,3.75rem);line-height:1.05;letter-spacing:-.028em;
  text-wrap:balance;max-width:18ch;
}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--text);max-width:56ch;margin-top:1.4rem}
.lead b{color:var(--ink)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  min-height:52px;padding:0 1.5rem;border-radius:4px;border:1px solid transparent;
  font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;background:none;isolation:isolate;overflow:hidden;
}
.btn svg{width:20px;height:20px;flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:0;transition:opacity .3s var(--ease)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary::after{background:var(--primary-hover);opacity:0}
.btn--primary:hover::after{opacity:1}
.btn--ghost{border-color:rgba(10,47,53,.4);color:var(--ink)}
.btn--ghost::after{background:var(--ice)}
.btn--ghost:hover::after{opacity:1}
.btn--ghost:active,.btn--primary:active{transform:translateY(1px)}
.btn--sm{min-height:44px;padding:0 1.1rem;font-size:.9375rem}
.btn--xl{min-height:64px;padding:0 2.1rem;font-size:1.125rem}
.footer .btn--ghost{border-color:rgba(255,255,255,.45);color:#fff}
.footer .btn--ghost::after{background:#fff}
.footer .btn--ghost:hover{color:var(--ink)}
.hero .btn--primary,.footer .btn--primary{background:#fff;color:var(--primary)}
.hero .btn--primary::after,.footer .btn--primary::after{background:var(--ice)}
.hero .btn--ghost{border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn--ghost::after{background:rgba(255,255,255,.16)}

.link{
  display:inline-flex;align-items:center;gap:.6rem;background:none;border:0;padding:.6rem 0;
  font-family:var(--f-display);font-weight:600;color:var(--teal-dark);min-height:44px;
}
a.link{text-decoration:none}
.link svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.link:hover svg{transform:translateX(5px)}

/* ---------- header (floating bar, dropdown menus, search) ---------- */
.site-header{position:fixed;top:16px;left:16px;right:16px;z-index:50;height:72px;border-radius:28px;color:var(--ink);background:rgba(247,250,252,.97);box-shadow:0 14px 34px -16px rgba(3,37,43,.45),0 1px 2px rgba(3,37,43,.12)}
.site-header__inner{position:relative;height:100%;max-width:1760px;margin-inline:auto;padding-inline:clamp(18px,2.2vw,32px);display:flex;align-items:center;gap:clamp(1.25rem,3vw,3rem)}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{width:32px;height:auto;aspect-ratio:32.4/29.4;color:var(--teal);flex:none}
.brand__word{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.2em}
.nav{flex:1;min-width:0}
.nav__list{display:flex;align-items:stretch;height:72px;justify-content:flex-end;gap:clamp(.25rem,1.4vw,1.5rem)}
.nav__item{position:relative;display:flex;align-items:stretch}
.nav__btn,.nav__link{display:inline-flex;align-items:center;gap:.4rem;padding:0 .6rem;background:none;border:0;text-decoration:none;font-family:var(--f-display);font-weight:500;font-size:.9375rem;color:var(--ink);position:relative;white-space:nowrap}
.nav__btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.nav__item.is-open>.nav__btn svg{transform:rotate(180deg)}
.nav__btn::after,.nav__link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:12px;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__btn:hover::after,.nav__link:hover::after,.nav__item.is-open>.nav__btn::after{transform:scaleX(1)}
.nav__sub{position:absolute;left:-.4rem;top:100%;margin-top:12px;min-width:17rem;background:#fff;border-radius:18px;box-shadow:0 24px 44px -18px rgba(3,37,43,.45),0 1px 2px rgba(3,37,43,.12);padding:.6rem 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__item.is-open>.nav__sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav__sub a{display:block;padding:.65rem 1.25rem;text-decoration:none;font-family:var(--f-display);font-weight:500;font-size:.9375rem;line-height:1.3;color:var(--ink);transition:background .2s,color .2s}
.nav__sub a:hover{background:var(--ice);color:var(--teal-dark)}
.nav__note{display:none}
.tools{display:flex;align-items:center;gap:.35rem;flex:none}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-width:44px;height:44px;padding:0 .6rem;background:none;border:0;border-radius:4px;font-family:var(--f-display);font-weight:600;font-size:.875rem;color:var(--ink);transition:background .2s}
.tool:hover{background:var(--ice)}
.tool svg{width:18px;height:18px}
.tool--icon svg{width:22px;height:22px}
.tools .btn{margin-left:.5rem}
.menu-toggle{display:none;flex:none;width:44px;height:44px;background:none;border:0;position:relative;margin-left:auto}
.menu-toggle span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .45s var(--ease)}
.menu-toggle span:first-child{top:17px}
.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

@media (max-width:1099px){
  .nav__btn,.nav__link{padding:0 .4rem;font-size:.875rem}
}
@media (max-width:899px){
  :root{--header-h:88px}
  .site-header{top:12px;left:12px;right:12px;height:64px;border-radius:24px}
  .site-header__inner{gap:.5rem;padding-inline:14px}
  .brand{gap:.5rem}
  .brand__mark{width:26px}
  .brand__word{font-size:1.05rem;letter-spacing:.14em}
  .tools .btn{padding:0 .85rem}
  .tools .btn svg{display:none}
  .menu-toggle{display:block}
  .tools{margin-left:auto}
  .tools .tool{display:none}
  .tools .btn{margin-left:0}
  .menu-toggle{margin-left:0}
  .nav{
    position:fixed;inset:0;z-index:-1;background:var(--white);overflow-y:auto;
    padding:calc(var(--header-h) + 8px) var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s;
  }
  body.menu-open .nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .nav__list{flex-direction:column;height:auto;gap:0}
  .nav__item{display:block;border-bottom:1px solid var(--line)}
  .nav__btn,.nav__link{display:flex;width:100%;justify-content:space-between;padding:1rem 0;font-size:1.5rem;letter-spacing:-.02em}
  .nav__btn svg{width:22px;height:22px}
  .nav__btn::after,.nav__link::after{display:none}
  .nav__sub{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 .8rem;display:none;opacity:1;visibility:visible;transform:none}
  .nav__item.is-open>.nav__sub{display:block}
  .nav__sub a{padding:.55rem 0 .55rem 1rem;font-size:1.0625rem;color:var(--text)}
  .nav__note{display:block;margin-top:2rem;font-size:.9rem;color:var(--mute)}
  .nav__note a{color:var(--teal-dark)}
}
@media (max-width:359px){
  .brand__mark{display:none}
  .brand__word{letter-spacing:.08em;font-size:.95rem}
  .site-header__inner{gap:.25rem;padding-inline:10px}
  .tools .btn{padding:0 .6rem;font-size:.8125rem}
}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;background:var(--deep)}
.hero__stage{position:relative;height:100%;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero__shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(3,37,43,.45) 0,rgba(3,37,43,0) 24%),
    linear-gradient(0deg,rgba(3,37,43,.94) 0,rgba(3,37,43,.78) 24%,rgba(3,37,43,.32) 50%,rgba(3,37,43,0) 74%),
    linear-gradient(90deg,rgba(3,37,43,.3) 0,rgba(3,37,43,0) 60%);
}
.hero__body{
  position:absolute;inset:auto 0 0 0;
  max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;
  padding:0 var(--gutter) clamp(88px,18vh,180px);
}
.hero__copy{max-width:min(46rem,100%)}
.hero__title{
  font-family:var(--f-display);font-weight:500;color:#fff;
  font-size:clamp(2.35rem,min(6.2vw,11.5vh),5.75rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance;
}
.hero__lead{margin-top:1.5rem;max-width:42ch;font-size:clamp(1.0625rem,1.45vw,1.25rem);line-height:1.55;color:rgba(255,255,255,.88)}
.hero__actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:899px){
  .hero__img{object-position:42% 50%}
  .hero__body{padding-bottom:84px}
  .hero__title{font-size:clamp(2.2rem,10.4vw,3rem)}
  .hero__actions .btn{flex:1 1 auto}
}

/* ---------- sections ---------- */
.section{position:relative;padding-block:clamp(64px,13vw,176px)}
.section--white{background:var(--white)}
.section--ice{background:var(--ice)}

/* projects */
.projects{padding-bottom:clamp(72px,10vw,140px)}
.projects__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(36px,5vw,64px)}
.projects__ctrl{display:flex;gap:.6rem;flex:none}
.round{width:52px;height:52px;border-radius:50%;border:1px solid rgba(11,37,48,.3);background:var(--white);display:grid;place-items:center;transition:transform .4s var(--ease),border-color .3s,color .3s}
.round svg{width:22px;height:22px}
.round:hover{transform:scale(1.07);border-color:var(--teal);color:var(--teal)}
.round:disabled{opacity:.35;cursor:default;transform:none;border-color:rgba(11,37,48,.2);color:inherit}
.track{
  display:flex;gap:clamp(14px,2vw,28px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:0 var(--gutter) 8px;-webkit-overflow-scrolling:touch;
  padding-inline-start:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));
  padding-inline-end:var(--gutter);
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.pcard{flex:none;width:clamp(272px,26vw,380px);scroll-snap-align:start}
.pcard:nth-child(even){margin-top:clamp(20px,4vw,56px)}
.pcard--lead{width:clamp(300px,36vw,520px)}
.pcard__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ice);border-radius:4px}
.pcard--lead .pcard__img{aspect-ratio:1/1.12}
.pcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.045)}
.pcard__txt{padding-top:1.2rem}
.pcard h3{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.15;letter-spacing:-.018em}
.pcard p{margin-top:.6rem;color:var(--text);font-size:1rem;line-height:1.55;max-width:38ch}
.track__bar{margin-top:clamp(28px,4vw,48px);height:2px;background:var(--line);position:relative;overflow:hidden}
.track__bar span{position:absolute;inset:0;background:var(--teal);transform:scaleX(.2);transform-origin:left}

/* services */
.services__head .h2{max-width:20ch}
.services__intro{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem clamp(1.5rem,4vw,3.5rem);margin-top:clamp(1.25rem,2.5vw,2rem)}
.services__intro .lead{margin-top:0;max-width:46ch}
.srvlist{margin-top:clamp(48px,7vw,104px);border-top:1px solid #b6d1d7}
.srv{display:grid;grid-template-columns:clamp(3rem,6vw,6.5rem) minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,3vw,56px);padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid #b6d1d7}
.srv__n{font-family:var(--f-display);font-weight:500;font-size:clamp(1.125rem,1.8vw,1.5rem);font-variant-numeric:tabular-nums;color:var(--teal-dark);padding-top:.55rem}
.srv h3{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.65rem,3.1vw,2.9rem);line-height:1.06;letter-spacing:-.028em;max-width:16ch;text-wrap:balance;transition:color .3s var(--ease)}
.srv:hover h3{color:var(--teal-dark)}
.srv__body p{color:var(--text);max-width:52ch;font-size:clamp(1rem,1.25vw,1.125rem);line-height:1.65}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.tags li{font-size:.875rem;padding:.3rem .8rem;border-radius:999px;background:var(--white);color:var(--ink)}
.srv .link{margin-top:1rem}
.count{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:899px){
  .services__head .h2{max-width:none}
  .srv{grid-template-columns:2.5rem minmax(0,1fr);row-gap:1rem;column-gap:12px}
  .srv__body{grid-column:2}
  .srv h3{max-width:none}
  .projects__head{align-items:flex-start;flex-direction:column}
  .projects__ctrl{display:none}
}

/* about */
.about__center{display:flex;flex-direction:column;align-items:center;text-align:center}
.about__center .h2{max-width:none}
.about__center .lead{max-width:36ch;margin-top:1.5rem}
.about__p{margin-top:1.25rem;max-width:58ch;color:var(--text)}
.principles{width:100%;max-width:1080px;margin-top:clamp(48px,7vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.principles li::before{content:"";display:block;width:32px;height:2px;background:var(--teal);margin:0 auto 1.1rem}
.principles h3{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.15;letter-spacing:-.015em}
.principles p{margin:.6rem auto 0;max-width:30ch;color:var(--text);font-size:1rem;line-height:1.6}
@media (max-width:899px){
  .principles{grid-template-columns:1fr;gap:2rem;max-width:30rem}
}

/* process */
.process__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px)}
.process__side{position:sticky;top:calc(var(--header-h) + 40px);align-self:start}
.process__side .btn{margin-top:2rem}
.steps{position:relative}
.steps::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:#c5d9e3}
.steps::after{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--teal);transform:scaleY(var(--p,0));transform-origin:top}
.step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);padding-bottom:clamp(36px,5vw,64px)}
.step>div{opacity:.55;transition:opacity .6s var(--ease)}
.step:last-child{padding-bottom:0}
.step.is-active>div{opacity:1}
.step__n{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid #c5d9e3;color:var(--ink);font-family:var(--f-display);font-weight:700;font-variant-numeric:tabular-nums;position:relative;z-index:1;transition:transform .6s var(--ease)}
.step.is-active .step__n{background:var(--primary);border-color:var(--primary);color:#fff;transform:scale(1.06)}
.step h3{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.12;letter-spacing:-.022em;padding-top:.35rem}
.step p{margin-top:.55rem;color:var(--text);max-width:46ch}
@media (max-width:899px){
  .process__grid{grid-template-columns:1fr}
  .process__side{position:static}
}

/* contact */
.contact{background:var(--white)}
.contact__label{font-family:var(--f-display);font-weight:500;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.contact__title{margin-top:1.5rem;font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:clamp(2.8rem,8.4vw,7.25rem);line-height:.95;letter-spacing:-.04em}
.contact__title span{color:#6f9298}
.contact__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,120px);margin-top:clamp(40px,6vw,80px);align-items:start}
.form{display:grid;gap:clamp(24px,3vw,36px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.field{margin:0;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;padding:0;margin-bottom:.4rem;font-family:var(--f-display);font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea{width:100%;background:none;border:0;border-bottom:1px solid #b6cdd1;border-radius:0;padding:.5rem 0 .8rem;font:inherit;font-size:1.125rem;color:var(--ink);resize:vertical;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:7rem}
.field input::placeholder,.field textarea::placeholder{color:#5f7c82;opacity:1}
.field input[type="text"]:focus,.field input[type="tel"]:focus,.field input[type="email"]:focus,.field textarea:focus{outline:none;border-bottom-color:var(--teal);box-shadow:0 1px 0 var(--teal)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chips label{margin:0;position:relative;display:block;text-transform:none;letter-spacing:0}
.chips input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chips span{display:block;padding:.7rem 1.1rem;border:1px solid #9db9be;font-family:var(--f-display);font-weight:500;font-size:.9375rem;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.chips input:hover+span{border-color:var(--primary)}
.chips input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--teal);outline-offset:3px}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.form__note{font-size:.875rem;color:var(--mute)}
.facts{border-top:1px solid var(--line)}
.facts div{padding:1.1rem 0 1.2rem;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--f-display);font-weight:500;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:.35rem}
.facts dd{font-family:var(--f-display);font-weight:500;font-size:1.25rem;line-height:1.35;color:var(--ink)}
.facts dd a{text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--ease)}
.facts dd a:hover{background-size:100% 2px}
.map{margin-top:2rem;background:var(--ice);border-radius:6px;padding:1.25rem;color:var(--teal)}
.map svg{width:100%;height:auto;max-height:200px}
.map__shape{fill:url(#hatch);stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round}
.map figcaption{margin-top:.75rem;font-size:.875rem;color:var(--text)}
.map figcaption b{color:var(--ink);font-weight:600}
@media (max-width:899px){
  .contact__grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
}

/* footer */
.footer{position:relative;background:var(--deep);color:#fff;padding:clamp(72px,10vw,140px) 0 56px;overflow:hidden}
.footer__bg{position:absolute;inset:0}
.footer__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.footer__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,50,58,.95) 0,rgba(6,50,58,.85) 55%,rgba(6,50,58,.7) 100%)}
.footer .wrap{position:relative}
.footer .brand{color:#fff}
.footer .brand__mark{color:var(--glow)}
.footer__cta .h2{max-width:20ch;font-size:clamp(2.1rem,5.4vw,4.75rem);color:#fff}
.footer__btns{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:.75rem}
.footer__cols{margin-top:clamp(56px,8vw,104px);padding-top:2rem;border-top:1px solid rgba(255,255,255,.2);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:2.5rem}
.footer nav ul{display:grid;gap:.1rem}
.footer nav a{display:inline-block;padding:.35rem 0;text-decoration:none;font-family:var(--f-display);font-weight:500}
.footer nav a:hover{color:var(--glow)}
.footer__concept{color:#c3d6df;font-size:.9375rem}
.footer__concept b{color:#fff;font-weight:500}
.footer__concept a{color:var(--glow)}
.footer__legal{margin-top:1rem;font-size:.8125rem;color:#aac2cd}
@media (max-width:899px){
  .footer{padding-bottom:40px}
  .footer__cols{grid-template-columns:1fr 1fr;gap:2rem 1.5rem;margin-top:48px}
  .footer__brand,.footer__concept,.footer__contact{grid-column:1/-1}
  .footer nav{grid-column:1/-1}
  .footer nav ul{grid-template-columns:1fr 1fr;gap:.2rem 1.5rem}
  .footer nav a{padding:.6rem 0;font-size:1.0625rem}
  .footer__btns .btn{flex:1 1 100%}
  .footer__btns .btn--ghost{flex:1 1 calc(50% - .4rem)}
  .footer__details a{display:inline-block;padding:.2rem 0}
}


.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field__error{margin-top:.4rem;font-size:.875rem;color:#b3261e}
.field input[aria-invalid="true"]{border-bottom-color:#b3261e}
.form__status{font-size:1rem;color:var(--teal-dark)}
.form__status.is-error{color:#b3261e}
.form__status a{color:inherit;text-decoration:underline}
.footer__company{margin-top:1.25rem}
.footer__details{margin-top:0;display:grid;gap:.45rem;color:#c3d6df}
.footer__details span{color:#8fb0ba;margin-right:.35rem}
.footer__details a{color:#fff;text-decoration:none;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.footer__details a:hover{background-size:100% 1px}

.pcard__img{transition:transform .6s var(--ease);will-change:auto}
.pcard__img.is-tilting{transition:transform .12s linear}
.magnet{transition:translate .45s var(--ease)}
.sr-w{display:inline}

/* projects: vertical scroll moves the cards sideways (JS adds .is-hscroll) */
.is-hscroll .hscroll__stick{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--header-h) + 8px);padding-bottom:32px}
.is-hscroll .projects__head{margin-bottom:clamp(20px,3vh,40px)}
.is-hscroll .projects__ctrl{display:none}
.is-hscroll .track{overflow:hidden;scroll-snap-type:none;overscroll-behavior:auto}
.is-hscroll .track__bar{margin-top:clamp(16px,3vh,36px)}
.projects.is-hscroll{padding-block:0}
@media (max-width:899px){
  .is-hscroll .pcard__img,.is-hscroll .pcard--lead .pcard__img{aspect-ratio:1/1}
  .is-hscroll .pcard:nth-child(even){margin-top:0}
  .is-hscroll .pcard h3{font-size:1.2rem}
  .is-hscroll .pcard p{font-size:.9375rem}
  .is-hscroll .projects__head .lead{margin-top:.8rem;font-size:1rem}
}
@media (min-width:900px){
  .is-hscroll .pcard__img,.is-hscroll .pcard--lead .pcard__img{aspect-ratio:auto;height:clamp(200px,34vh,460px)}
  .is-hscroll .pcard:nth-child(even){margin-top:0}
  .is-hscroll .pcard p{font-size:.9375rem}
  .is-hscroll .projects__head .lead{margin-top:1rem}
}

.pcard:nth-child(5) .pcard__img img{object-position:50% 38%}

/* centered section headers, no empty side columns */
.services__head{text-align:center}
.services__head .h2{margin-inline:auto;max-width:18ch}
.services__intro{justify-content:center}
.services__intro .lead{margin-inline:auto;max-width:48ch}
.about__p+.about__p{margin-top:1rem}

/* phone comfort */
.nav__contact{display:none}
@media (max-width:899px){
  .site-header{top:max(12px,env(safe-area-inset-top))}
  .nav__contact{display:grid;gap:.25rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line)}
  .nav__contact a{display:block;padding:.6rem 0;font-family:var(--f-display);font-weight:500;font-size:1.25rem;text-decoration:none;color:var(--teal-dark)}
  .form__actions .btn{width:100%}
  .hero__actions .btn{min-height:56px}
  .footer__details a{padding:.45rem 0}
}
@media (max-width:899px){
  .nav__item:last-child{border-bottom:0}
}

/* about on a photo */
.about{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.about__bg{position:absolute;inset:0}
.about__bg img{width:100%;height:100%;object-fit:cover}
.about__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,58,.82) 0,rgba(6,50,58,.62) 50%,rgba(6,50,58,.84) 100%)}
.about .wrap{position:relative}
.about .h2{color:#fff;max-width:none}
.about__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:start}
.about .lead{color:#fff;font-size:clamp(1.35rem,2.5vw,2.1rem);line-height:1.3;letter-spacing:-.015em;max-width:24ch;margin-top:1.5rem}
.about__text{padding-top:clamp(0rem,2.2vw,1.6rem)}
.about__text p{color:rgba(255,255,255,.88);max-width:52ch;font-size:clamp(1rem,1.2vw,1.125rem)}
.about__text p+p{margin-top:1.1rem}
.about .principles{margin-top:clamp(48px,7vw,104px);max-width:none;gap:clamp(24px,4vw,56px);text-align:left}
.about .principles li{padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.32)}
.about .principles li::before{display:none}
.about .principles h3{color:#fff}
.about .principles p{margin:.55rem 0 0;max-width:32ch;color:rgba(255,255,255,.84)}
@media (max-width:899px){
  .about__grid{grid-template-columns:1fr}
  .about .lead{max-width:none}
  .about .principles{grid-template-columns:1fr;max-width:none;gap:1.5rem}
}
/* footer details */
.footer__details--co{margin-top:1rem}
.footer__details--co li[hidden]{display:none}
.footer__details b{font-weight:500;color:#fff}
.footer__contact{margin-top:0}

/* footer legal row, form notice */
.footer__legal a{color:#fff;text-underline-offset:3px}
.footer__legal a:hover{color:var(--glow)}
.form__note{font-size:.875rem;line-height:1.5;color:var(--mute);max-width:56ch}
.form__note a{color:var(--teal-dark);text-underline-offset:3px}

/* legal pages */
.legal{padding:calc(var(--header-h) + clamp(32px,6vw,80px)) 0 clamp(64px,10vw,128px);background:var(--white)}
.legal__wrap{max-width:calc(820px + var(--gutter)*2)}
.legal__title{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(2.3rem,6vw,4.5rem);line-height:1;letter-spacing:-.035em}
.legal__meta{margin-top:1rem;color:var(--mute);font-size:.9375rem}
.legal__intro{margin-top:1.75rem;font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.6;color:var(--text)}
.legal section{margin-top:clamp(32px,5vw,56px);padding-top:clamp(24px,3.5vw,36px);border-top:1px solid var(--line)}
.legal h2{font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.15;letter-spacing:-.02em}
.legal p,.legal li{margin-top:.8rem;color:var(--text);line-height:1.7}
.legal ul{margin-top:.5rem;padding-left:1.25rem;list-style:disc}
.legal li{margin-top:.55rem}
.legal li::marker{color:var(--teal)}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--teal-dark);text-underline-offset:3px;overflow-wrap:anywhere}
.legal__facts{margin-top:1rem;border-top:1px solid var(--line)}
.legal__facts div{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.legal__facts dt{color:var(--mute);font-size:.9375rem}
.legal__facts dd{color:var(--ink);font-family:var(--f-display);font-weight:500}
.legal-foot{background:var(--deep);color:#c3d6df;padding:clamp(28px,4vw,44px) 0}
.legal-foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.legal-foot .brand{color:#fff}
.legal-foot .brand__mark{color:var(--glow)}
.legal-foot p{font-size:.875rem}
@media (max-width:899px){.legal__facts div{grid-template-columns:1fr;gap:.1rem}}

/* footer details: inline, tight */
.footer__details{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem 1.75rem;line-height:1.4;margin-top:0}
.footer__details li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem;margin:0}
.footer__details li:first-child:has(> b:only-child){flex-basis:100%}
.footer__details a{display:inline-block;padding:.35rem 0}
.footer__details--co{margin-top:.9rem}
.footer__details--co li{padding:.2rem 0}
.footer__contact{margin-top:0;padding-top:.2rem}
@media (max-width:899px){
  .footer__cols{gap:1.5rem 1.5rem;margin-top:40px}
  .footer nav ul{gap:0 1.5rem}
  .footer nav a{padding:.55rem 0}
  .footer__contact{padding-top:0;margin-top:.25rem;padding-block:1rem;border-top:1px solid rgba(255,255,255,.2)}
  .footer__legal{margin-top:1.25rem}
  /* About: centered on phones */
  .about__head,.about__text,.about .principles{text-align:center}
  .about .lead,.about__text p,.about .principles p{margin-inline:auto}
  .about .principles{justify-items:center}
  .about .principles li{width:100%;max-width:30rem}
}
@media (min-width:900px){
  .footer__cols{grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr)}
}

/* footer v2: three tidy columns, label/value pairs, slim bottom bar */
.fmain{margin-top:clamp(56px,8vw,104px);padding-top:clamp(28px,4vw,48px);border-top:1px solid rgba(255,255,255,.22)}
.fgrid{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:clamp(28px,4vw,48px) clamp(24px,4vw,64px)}
.footer .fcol h3{font-family:var(--f-display);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#8fb0ba;margin-bottom:1rem}
.fdl{display:grid;gap:1rem}
.fdl dt{font-size:.8125rem;color:#8fb0ba;line-height:1.3}
.fdl dd{margin-top:.2rem;font-family:var(--f-display);font-weight:500;font-size:1.0625rem;line-height:1.35;color:#fff;overflow-wrap:anywhere}
.fdl a{color:#fff;text-decoration:none;background:linear-gradient(#fff,#fff) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.fdl a:hover{background-size:100% 1px}
.footer .flinks{display:grid;gap:.15rem}
.footer .flinks a{display:inline-block;padding:.4rem 0;font-family:var(--f-display);font-weight:500;font-size:1.0625rem;color:#fff;text-decoration:none}
.footer .flinks a:hover{color:var(--glow)}
.fbar{margin-top:clamp(40px,6vw,72px);padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;font-size:.875rem;color:#aac2cd}
.fbar a{color:#fff;text-underline-offset:3px}
.fbar a:hover{color:var(--glow)}
.footer .wrap>.footer__legal{display:none}
/* phones: compact label + value on one line, like on desktop */
@media (max-width:599px){
  .fgrid{gap:1.75rem}
  .footer .fcol h3{margin-bottom:.6rem}
  .fdl{gap:.15rem}
  .fdl div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .6rem;padding:.3rem 0}
  .fdl dt{flex:none}
  .fdl dd{margin:0;font-size:1rem}
  .fdl a{display:inline-block;padding:.2rem 0}
}

/* services rows: larger tags, tighter rhythm */
.srv{padding:clamp(28px,3.4vw,48px) 0}
.srv__body p{font-size:clamp(1.0625rem,1.3vw,1.1875rem)}
.srv .tags{gap:.6rem .7rem;margin-top:1.5rem}
.srv .tags li{font-size:1rem;font-weight:500;padding:.55rem 1.15rem;line-height:1.3}
@media (max-width:899px){.srv .tags li{font-size:.9375rem;padding:.5rem 1rem}}

.process__side .lead{text-wrap:balance}

.territory{margin-top:2rem;padding:clamp(1.4rem,3vw,2rem) 1.5rem;border-radius:6px;background:var(--ice);text-align:center;font-family:var(--f-display);font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--text)}
.territory b{font-weight:600;color:var(--ink)}

/* company lines under the logo: plain, quiet text */
.fco{margin-top:1.25rem;display:grid;gap:.2rem;color:#aac2cd;font-size:1rem;line-height:1.5}
.fgrid{margin-top:clamp(28px,4vw,48px)}

/* footer desktop: logo + company on the left, contacts and links on the right, one tidy block */
@media (min-width:900px){
  .fmain{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,6vw,96px);align-items:start}
  .fmain>.brand{grid-column:1;grid-row:1;justify-self:start}
  .fmain>.fco{grid-column:1;grid-row:2}
  .fmain>.fgrid{grid-column:2;grid-row:1/span 2;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmain>.fgrid .fcol h3{margin-top:.35rem}
}

.map{margin-top:2rem;background:var(--ice);border-radius:6px;padding:clamp(1.25rem,3vw,2rem);color:var(--teal);text-align:center}
.map svg{width:100%;height:auto;max-height:240px;margin-inline:auto}
.map__shape{fill:url(#hatch);stroke:var(--teal);stroke-width:1.8;stroke-linejoin:round}
.map figcaption{margin-top:1rem;font-family:var(--f-display);font-size:1.0625rem;color:var(--text);text-align:center}
.map figcaption b{font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .fmain{grid-template-rows:auto auto 1fr}
  .fmain>.fgrid{grid-row:1/span 3}
  .fmain>.fco{margin-top:1.25rem}
}
/* footer desktop v3: brand | contacts (near the middle) | links (just right of contacts) */
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,1fr) 17rem 12rem;column-gap:clamp(2rem,5vw,4.5rem);grid-template-rows:auto auto 1fr}
  .fmain>.fgrid{display:contents}
  .fmain>.fgrid>.fcol:nth-child(1){grid-column:2;grid-row:1/span 3}
  .fmain>.fgrid>.fcol:nth-child(2){grid-column:3;grid-row:1/span 3}
}
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,28fr) minmax(0,17fr) minmax(0,27fr);column-gap:4rem}
}

/* contact page */
.pagehero{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding:calc(var(--header-h) + clamp(48px,9vw,112px)) 0 clamp(56px,9vw,112px)}
.pagehero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pagehero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,50,58,.92) 0,rgba(6,50,58,.7) 55%,rgba(6,50,58,.45) 100%)}
.pagehero__inner{position:relative}
.pagehero__title{font-family:var(--f-display);font-weight:500;font-size:clamp(2.8rem,8vw,6.5rem);line-height:.95;letter-spacing:-.04em;color:#fff}
.pagehero__lead{margin-top:1.25rem;max-width:40ch;font-size:clamp(1.0625rem,1.6vw,1.375rem);line-height:1.5;color:rgba(255,255,255,.9)}
.cform{padding-block:clamp(56px,9vw,112px)}
.cform__wrap{max-width:calc(820px + var(--gutter)*2)}
.cform__title{text-align:center;font-family:var(--f-display);font-weight:500;color:var(--ink);font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em}
.cform__sub{margin:1rem auto 0;text-align:center;color:var(--text);max-width:46ch}
.form--page{margin-top:clamp(32px,5vw,56px)}
.field--check{margin-top:.25rem}
.check{display:flex;gap:.8rem;align-items:flex-start;margin:0;text-transform:none;letter-spacing:0;font-family:var(--f-text);font-weight:400;font-size:.9375rem;line-height:1.5;color:var(--text);cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--primary);cursor:pointer}
.check a{color:var(--teal-dark);text-underline-offset:3px}
.cinfo{padding-block:clamp(48px,7vw,88px)}
.cinfo__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);text-align:center}
.cinfo__grid li{display:grid;gap:.4rem;justify-items:center}
.cinfo__grid span{font-family:var(--f-display);font-weight:500;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.cinfo__grid a,.cinfo__grid b{font-family:var(--f-display);font-weight:500;font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.cinfo__grid a{background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.cinfo__grid a:hover{background-size:100% 2px}
.cinfo__area{margin-top:clamp(28px,4vw,48px);padding-top:clamp(20px,3vw,32px);border-top:1px solid #b6d1d7;text-align:center;font-family:var(--f-display);font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--text)}
.cinfo__area b{font-weight:600;color:var(--ink)}
.page-contact .footer{padding-top:clamp(56px,8vw,96px)}
.page-contact .fmain{margin-top:0;border-top:0;padding-top:0}
@media (max-width:899px){
  .cinfo__grid{grid-template-columns:1fr}
  .pagehero__shade{background:linear-gradient(180deg,rgba(6,50,58,.85) 0,rgba(6,50,58,.7) 100%)}
}
.field label.check{display:flex;margin:0;text-transform:none;letter-spacing:0;font-family:var(--f-text);font-weight:400;font-size:.9375rem;line-height:1.5;color:var(--text)}
.field label.check a{color:var(--teal-dark)}
.check input[type="checkbox"]{appearance:auto;position:static;opacity:1;width:22px;height:22px}

/* contact page v2: curved hero edge, quiet contact lines */
.pagehero{padding-bottom:clamp(88px,12vw,168px)}
.pagehero::after{content:"";position:absolute;left:-12%;right:-12%;bottom:-1px;height:clamp(48px,7vw,110px);background:var(--white);border-radius:50% 50% 0 0/100% 100% 0 0}
.page-contact .cform{padding-top:clamp(24px,4vw,56px);padding-bottom:clamp(32px,5vw,64px)}
.cform__title{margin-bottom:0}
.cinfo{padding-block:clamp(8px,2vw,24px) clamp(56px,8vw,96px);background:var(--white)}
.cinfo__line{text-align:center;font-family:var(--f-display);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;color:var(--text);margin:0}
.cinfo__line+.cinfo__line{margin-top:1rem}
.cinfo__line span{color:var(--mute);margin-right:.5rem}
.cinfo__line a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
.cinfo__line a:hover{color:var(--teal-dark)}
/* footer: links column a little closer to the contacts */
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,28fr) minmax(0,14fr) minmax(0,30fr)}
}
@media (min-width:600px) and (max-width:899px){
  .fgrid{grid-template-columns:repeat(2,max-content);justify-content:start;column-gap:clamp(3rem,10vw,5rem)}
}
/* About: lighter veil so the panels stay vivid */
.about__bg::after{background:linear-gradient(180deg,rgba(6,50,58,.74) 0,rgba(6,50,58,.52) 50%,rgba(6,50,58,.78) 100%)}
/* footer desktop v4: three columns hug their content with one equal gap between them */
@media (min-width:900px){
  .fmain{grid-template-columns:repeat(3,max-content);justify-content:start;column-gap:clamp(3.5rem,8vw,8rem)}
  .fmain>.fco{max-width:none}
}
/* small phones: logo mark always visible */
@media (max-width:359px){
  .brand__mark{display:block;width:22px}
  .brand{gap:.4rem}
  .brand__word{letter-spacing:.08em;font-size:.95rem}
  .site-header__inner{gap:.25rem;padding-inline:12px}
  .tools .btn{padding:0 .65rem;font-size:.8125rem}
}
/* comfortable tap areas */
.brand{padding:.6rem 0}
.fbar a{display:inline-block;padding:.55rem 0}
.footer .brand{padding:0}
.legal-foot .brand{padding:.4rem 0}
.footer .brand{padding:.45rem 0}
.fdl a{display:inline-block;padding:.5rem 0}
/* projects stage on phones: keep the whole block inside short screens */
@media (max-width:899px){
  .is-hscroll .pcard__img,.is-hscroll .pcard--lead .pcard__img{aspect-ratio:auto;height:clamp(170px,31svh,300px)}
  .is-hscroll .hscroll__stick{padding-top:calc(var(--header-h) + 4px);padding-bottom:20px}
  .is-hscroll .projects__head{margin-bottom:16px}
  .is-hscroll .projects__head .h2{font-size:clamp(1.75rem,8vw,2.25rem)}
  .is-hscroll .pcard__txt{padding-top:.8rem}
  .is-hscroll .track__bar{margin-top:16px}
}
.is-hscroll .track{flex:none}
.is-hscroll .projects__head,.is-hscroll .track__bar{flex:none}
@media (max-width:899px){
  .is-hscroll .pcard__img,.is-hscroll .pcard--lead .pcard__img{height:clamp(150px,27svh,280px)}
  .is-hscroll .projects__head .lead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.9375rem;margin-top:.6rem}
  .is-hscroll .pcard h3{font-size:1.125rem}
  .is-hscroll .pcard p{font-size:.875rem;line-height:1.45;margin-top:.4rem}
}
/* footer desktop v5: three columns spread over the full width, equal gaps, right edge aligned with the content */
@media (min-width:900px){
  .fmain{justify-content:space-between;column-gap:2rem}
}
/* phones: shorter hero (less empty sky) and a projects stage that sits right under the header without a white gap */
@media (max-width:899px){
  .hero{height:min(100svh,680px);min-height:540px}
  .hero__stage{height:100%}
  .is-hscroll .hscroll__stick{top:var(--header-h);min-height:calc(100svh - var(--header-h));padding-top:20px;padding-bottom:20px;justify-content:center}
  .projects.is-hscroll{margin-top:0}
}
@media (max-width:899px){
  .is-hscroll .hscroll__stick{justify-content:flex-start;padding-top:28px}
  .is-hscroll .pcard__img,.is-hscroll .pcard--lead .pcard__img{height:clamp(170px,calc(100svh - 430px),420px)}
}

/* About: text sits on a frosted card so it reads clearly over the photo */
.about__text{padding:clamp(1.4rem,3vw,2.4rem);border-radius:14px;background:rgba(6,50,58,.62);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 48px -24px rgba(3,30,36,.7);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.about__text p{color:#fff;max-width:none}
.about .principles li{padding:1.25rem 1.4rem 1.4rem;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(6,50,58,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.about .principles p{color:#fff}
/* footer links on phones: one tidy column, same rhythm as the contacts */
@media (max-width:899px){
  .footer .flinks{grid-template-columns:1fr;gap:0}
  .footer .flinks a{padding:.55rem 0}
}

/* services tags on phones: one tidy column of equal-width pills in all four rows */
@media (max-width:599px){
  .srv .tags{display:grid;grid-template-columns:1fr;gap:.55rem;margin-top:1.25rem}
  .srv .tags li{width:100%;padding:.7rem 1.1rem;text-align:left;display:flex;align-items:center;gap:.7rem}
  .srv .tags li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal)}
}

/* footer desktop v6: three even columns, each starting on a regular grid line (nothing pushed to the far edge) */
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);justify-content:stretch;column-gap:clamp(2rem,4vw,4rem)}
}

/* services tags on phones v2: quiet list with hairlines instead of stacked pills */
@media (max-width:599px){
  .srv .tags{display:block;margin-top:1rem;border-top:1px solid rgba(10,78,87,.16)}
  .srv .tags li{width:auto;display:flex;align-items:center;gap:.7rem;padding:.6rem 0;border-radius:0;background:none;border-bottom:1px solid rgba(10,78,87,.16);font-size:.9375rem;font-weight:500;color:var(--ink);text-align:left}
  .srv .tags li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--teal)}
}

/* footer desktop v7 (final): company block on the left, contacts + links grouped on the right, flush with the page edge */
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,1fr) max-content max-content;justify-content:stretch;column-gap:clamp(3.5rem,7vw,7rem);align-items:start}
  .fmain>.fgrid>.fcol:nth-child(1){justify-self:start}
  .fmain>.fgrid>.fcol:nth-child(2){justify-self:start}
  .fmain>.brand{align-self:start}
  .fmain>.fgrid .fcol h3{margin-top:0;margin-bottom:1.1rem;line-height:1.2}
}
.fbar{align-items:center;line-height:1.4}
.fbar p,.fbar a{margin:0;line-height:1.4}
@media (min-width:900px){
  .fmain>.fgrid>.fcol:nth-child(2){justify-self:end}
}

/* process: live "current step" panel under the intro (desktop) */
.pnow{margin-top:clamp(2rem,4vw,3.5rem);padding:clamp(1.5rem,2.4vw,2.25rem);border-radius:16px;background:var(--white);border:1px solid #c5d9e3;box-shadow:0 22px 50px -34px rgba(6,50,58,.45)}
.pnow__label{font-family:var(--f-display);font-weight:600;font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pnow__num{margin-top:.6rem;display:flex;align-items:baseline;gap:.7rem;font-family:var(--f-display);color:var(--teal-dark)}
.pnow__num b{font-weight:500;font-size:clamp(3.5rem,6vw,5.5rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.pnow__num span{font-size:1.25rem;color:var(--mute)}
.pnow__title{margin-top:.9rem;min-height:2.6em;font-family:var(--f-display);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.pnow__bar{margin-top:1.1rem;height:4px;border-radius:4px;background:#d5e6ea;overflow:hidden}
.pnow__bar i{display:block;height:100%;width:16.7%;border-radius:4px;background:var(--teal);transition:width .6s var(--ease)}
.pnow__cta{margin-top:1.5rem}
@media (max-width:899px){.pnow,.pnow__cta{display:none}}

/* footer desktop v8: columns sit close together on the left */
@media (min-width:900px){
  .fmain{grid-template-columns:19rem max-content max-content;justify-content:start;column-gap:clamp(3rem,6vw,6rem)}
  .fmain>.fgrid>.fcol:nth-child(1),.fmain>.fgrid>.fcol:nth-child(2){justify-self:start}
}

/* desktop header: transparent at the very top of pages that open with a dark photo */
@media (min-width:900px){
  .site-header{transition:background-color .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease)}
  .site-header.is-top:not(:has(.nav__item.is-open)){background:transparent;box-shadow:none}
  .site-header.is-top:not(:has(.nav__item.is-open)) .brand,
  .site-header.is-top:not(:has(.nav__item.is-open)) .nav__btn,
  .site-header.is-top:not(:has(.nav__item.is-open)) .nav__link{color:#fff}
  .site-header.is-top:not(:has(.nav__item.is-open)) .brand__mark{color:var(--glow)}
  .site-header.is-top:not(:has(.nav__item.is-open)) .nav__btn::after,
  .site-header.is-top:not(:has(.nav__item.is-open)) .nav__link::after{background:#fff}
  .site-header.is-top:not(:has(.nav__item.is-open)) .tools .btn--primary{background:#fff;color:var(--primary)}
  .hero__stage::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,30,36,.55) 0,rgba(3,30,36,0) 100%)}
}

.pnow__bar{margin-top:1.4rem}

/* hero intro text: two lines on desktop */
@media (min-width:900px){
  .hero__copy{max-width:min(58rem,100%)}
  .hero__title{max-width:46rem}
  .hero__lead{max-width:none;text-wrap:balance}
}

/* process: photo that follows the steps (desktop) */
.pphoto{position:relative;margin-top:clamp(2rem,4vw,3.5rem);aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--deep);box-shadow:0 26px 56px -34px rgba(6,50,58,.55)}
.pphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.pphoto img.is-on{opacity:1;transform:none}
.pphoto::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);pointer-events:none}
@media (max-width:899px){.pphoto{display:none}}

/* footer desktop v9: contacts and links sit on frosted cards (same look as the About cards), right-aligned and equal */
@media (min-width:900px){
  .fmain{grid-template-columns:minmax(0,1fr) 17rem 17rem;column-gap:1.25rem;justify-content:stretch}
  .fmain>.brand,.fmain>.fco{margin-right:2rem}
  .fmain>.fgrid>.fcol{align-self:stretch;justify-self:stretch !important;padding:1.5rem 1.6rem 1.6rem;border-radius:14px;background:rgba(6,50,58,.62);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 48px -24px rgba(3,30,36,.7);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
  .fmain>.fgrid .fcol h3{margin-bottom:.9rem}
  .footer .flinks a{padding:.3rem 0}
}
/* About cards: identical glass as the text card */
.about .principles li{background:rgba(6,50,58,.62);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 18px 48px -24px rgba(3,30,36,.7)}
@media (min-width:900px){.pphoto{aspect-ratio:5/4}}

/* no cards: footer in three even columns, principles as a plain row, map without a tinted box */
@media (min-width:900px){
  .fmain{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(2rem,4vw,4rem);justify-content:stretch}
  .fmain>.brand,.fmain>.fco{margin-right:0}
  .fmain>.fgrid>.fcol{padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-self:start !important;align-self:start}
  .fmain>.fgrid .fcol h3{margin-top:.35rem;margin-bottom:1rem}
  .footer .flinks a{padding:.4rem 0}
}
.about .principles li{padding:1.25rem 0 0;border:0;border-top:1px solid rgba(255,255,255,.32);border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.map{background:none;padding:0;border-radius:0}

/* one left edge: the first project card and the header logo line up with the page content */
.track{padding-inline-start:max(var(--gutter),calc((100% - var(--maxw))/2))}
@media (min-width:900px){
  .site-header__inner{max-width:none;padding-inline:max(calc(var(--gutter) - 16px),calc((100% - var(--maxw))/2))}
}


/* services intro (desktop): left-aligned on the same grid as the rows below, tighter */
@media (min-width:900px){
  .services__head{display:grid;grid-template-columns:clamp(3rem,6vw,6.5rem) minmax(0,5fr) minmax(0,6fr);column-gap:clamp(16px,3vw,56px);align-items:end;text-align:left}
  .services__head .h2{grid-column:1/3;margin:0;max-width:14ch;font-size:clamp(2.75rem,5.2vw,4.75rem);line-height:1}
  .services__intro{grid-column:3;margin:0;justify-content:flex-start}
  .services__intro .lead{margin:0;max-width:38ch;font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.55;color:var(--text)}
  .srvlist{margin-top:clamp(36px,4.5vw,64px)}
}

/* footer desktop v10: content inset from the edge, three blocks with equal gaps between them */
@media (min-width:900px){
  .footer .wrap{padding-inline:calc(var(--gutter) + clamp(0px,4vw,64px))}
  .fmain{grid-template-columns:repeat(3,max-content);justify-content:space-between;column-gap:2rem}
  .fmain>.fgrid>.fcol:nth-child(1),.fmain>.fgrid>.fcol:nth-child(2){justify-self:start !important}
}
@media (min-width:900px){
  .services__head .h2{max-width:none;font-size:clamp(2.5rem,4.4vw,4rem)}
}

/* process v3 (desktop): intro stays vertically centred while the timeline scrolls past it */
@media (min-width:900px){
  .process__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .process__side{position:sticky;top:calc(50vh - 9.5rem);align-self:start}
  .process__side .h2{font-size:clamp(2.6rem,4.6vw,4.25rem);line-height:1;max-width:11ch}
  .process__side .lead{margin-top:1.5rem;max-width:28ch;font-size:clamp(1.125rem,1.4vw,1.3rem);line-height:1.55}
  .step{padding-bottom:clamp(48px,6vw,88px)}
  .step h3{font-size:clamp(1.5rem,2.3vw,2.1rem)}
  .step p{font-size:1.0625rem;max-width:44ch}
}

@media (min-width:900px){
  .process__side{top:max(calc(var(--header-h) + 24px),calc(50vh - 15rem))}
  .process__side .lead{max-width:34ch}
}
.process__p{margin-top:1.1rem;max-width:44ch;color:var(--text);font-size:1.0625rem;line-height:1.65}

/* About: one clear statement, one short paragraph, calmer contrast */
.about__bg::after{background:linear-gradient(180deg,rgba(6,50,58,.84) 0,rgba(6,50,58,.74) 50%,rgba(6,50,58,.86) 100%)}
.about__grid{align-items:center}
.about .lead{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.25;max-width:20ch;margin-top:1.25rem}
.about__text{padding:clamp(1.6rem,3vw,2.6rem)}
.about__text p{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.7}
.about__text b{font-weight:600}
.about .principles{margin-top:clamp(40px,5vw,72px)}
@media (min-width:900px){
  .process__side{top:max(calc(var(--header-h) + 24px),calc(50vh - 10rem))}
}

/* About v3: solid deep-teal text column, photo as its own panel on the right (no cards, no overlay text) */
.about{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding-block:clamp(64px,8vw,120px)}
.about__bg,.about__grid,.about .principles{display:none}
.about__media{position:relative;margin:calc(-1 * clamp(64px,8vw,120px)) 0 clamp(36px,6vw,56px);height:clamp(180px,48vw,300px)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,58,.15) 0,rgba(6,50,58,.55) 100%)}
.about .wrap{position:relative}
.about__content{max-width:38rem}
.eyebrow{display:flex;align-items:center;gap:.8rem;font-family:var(--f-display);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--glow)}
.about__title{margin-top:1.25rem;font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,3.5vw,3.1rem);line-height:1.1;letter-spacing:-.028em;color:#fff;text-wrap:balance}
.about__p{margin-top:1.5rem;max-width:34rem;font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.65;color:rgba(255,255,255,.86)}
.about__p b{font-weight:600;color:#fff}
.about__list{margin-top:clamp(2rem,3.4vw,3rem);border-top:1px solid rgba(255,255,255,.2)}
.about__list li{display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:.5rem;padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.2)}
.about__list span{grid-row:1/span 2;font-family:var(--f-display);font-weight:500;font-size:.9375rem;font-variant-numeric:tabular-nums;color:var(--glow);padding-top:.25rem}
.about__list h3{font-family:var(--f-display);font-weight:500;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;color:#fff}
.about__list p{margin-top:.3rem;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.76)}
@media (min-width:900px){
  .about__media{position:absolute;top:0;right:0;bottom:0;width:40%;height:auto;margin:0}
  .about__media::after{background:linear-gradient(90deg,var(--deep) 0,rgba(6,50,58,.35) 38%,rgba(6,50,58,.15) 100%)}
  .about__content{max-width:min(38rem,54%)}
}

/* services heading: centred on its own */
@media (min-width:900px){
  .services__head{display:block;text-align:center}
  .services__head .h2{margin-inline:auto;max-width:18ch;font-size:clamp(2.5rem,4.6vw,4.25rem)}
  .srvlist{margin-top:clamp(40px,5vw,72px)}
}
/* consent: box and text sit on one line, centred */
.check{align-items:center}

/* footer desktop v11: three blocks spaced evenly - same gap on both sides and between them */
@media (min-width:900px){
  .footer .wrap{padding-inline:var(--gutter)}
  .fmain{grid-template-columns:repeat(3,max-content);justify-content:space-evenly;column-gap:2rem}
}
@media (min-width:900px){ .fmain{column-gap:0} }

/* About v4: no numbers, vivid full-colour photo */
.about__list li{display:block}
.about__list li::before{content:none}
.about__media::after{background:none}
@media (min-width:900px){
  .about__media{width:44%}
  .about__media::after{background:linear-gradient(90deg,var(--deep) 0,rgba(6,50,58,0) 12%)}
  .about__media img{object-position:50% 30%}
}

/* footer v12: call-to-action on the photo, then a split block - dark brand panel | light contacts + navigation */
.footer{padding:0;overflow:visible;background:var(--deep)}
.footer__top{position:relative;overflow:hidden;padding:clamp(72px,10vw,140px) 0 clamp(64px,8vw,112px)}
.page-contact .footer{padding-top:0}
.fsplit{overflow:hidden;background:var(--ice);color:var(--text)}
.fsplit .wrap{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter)}
.fsplit__brand,.fsplit__main{position:relative;padding-block:clamp(40px,5vw,80px)}
.fsplit__brand{background:var(--primary);color:#fff;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
.fsplit__brand .brand{color:#fff;padding:0}
.fsplit__brand .brand__mark{color:var(--glow);width:44px}
.fsplit__brand .brand__word{font-size:1.5rem}
.fsplit__text{margin-top:1.5rem;max-width:36ch;font-size:1.0625rem;line-height:1.7;color:rgba(255,255,255,.88)}
.fsplit__main{display:grid;gap:2.5rem;background:var(--ice)}
.fsplit__main .fcol h3{margin:0 0 1.25rem;font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,2.4vw,2.25rem);line-height:1.1;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.fct{display:grid;gap:.9rem}
.fct li{font-size:1.0625rem;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.fct span{color:var(--mute)}
.fct a,.fsplit .flinks a{color:var(--ink);text-decoration:none;font-family:var(--f-text);font-weight:400;transition:color .25s}
.fct a:hover,.fsplit .flinks a:hover{color:var(--teal-dark)}
.fsplit .flinks{display:grid;gap:.15rem}
.fsplit .flinks a{display:inline-block;padding:.35rem 0;font-size:1.0625rem}
.fbar2{background:var(--deep);color:#aac2cd;font-size:.875rem}
.fbar2__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;padding-block:1.25rem}
.fbar2 p{margin:0}
.fbar2 a{color:#fff;text-underline-offset:3px}
.fbar2 a:hover{color:var(--glow)}
@media (min-width:900px){
  .fsplit .wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .fsplit__brand{margin-inline:0;padding-inline:0;padding-right:clamp(2rem,4vw,4rem)}
  .fsplit__brand::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:100vw;background:var(--primary)}
  .fsplit__main{grid-template-columns:1fr 1fr;gap:0;padding-left:clamp(2rem,5vw,5rem)}
  .fsplit__main::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:100vw;background:var(--ice)}
  .fsplit__main .fcol+.fcol{padding-left:clamp(2rem,4vw,4rem);border-left:1px solid #c5d9e3}
  .fsplit__main .fcol:first-child{padding-right:1rem}
}

/* About v5: plain typographic section on white - no photo, no effects */
.aboutx{background:var(--white);color:var(--text);padding-block:clamp(72px,9vw,136px)}
.aboutx__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.aboutx__label{font-family:var(--f-display);font-weight:500;font-size:1.0625rem;line-height:1.3;color:var(--teal-dark)}
.aboutx__lead{font-family:var(--f-display);font-weight:400;font-size:clamp(1.55rem,3vw,2.6rem);line-height:1.22;letter-spacing:-.022em;color:var(--ink);max-width:26em}
.aboutx__list{margin-top:clamp(1rem,3vw,3rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem}
.aboutx__list li{border-top:1px solid #b6d1d7;padding-top:1.1rem}
.aboutx__list h3{font-family:var(--f-display);font-weight:500;font-size:1.25rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.aboutx__list p{margin-top:.5rem;font-size:1rem;line-height:1.6;color:var(--text);max-width:32ch}
@media (min-width:900px){
  .aboutx__grid{grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:clamp(2rem,5vw,6rem);row-gap:0}
  .aboutx__label{padding-top:.7rem}
  .aboutx__list{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(56px,7vw,104px)}
}

.fbar2 a{display:inline-block;padding:.5rem 0}

/* About v6: photo background (solar rows, deep-teal veil), white type */
.aboutx{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.aboutx__bg{position:absolute;inset:0}
.aboutx__bg img{width:100%;height:100%;object-fit:cover}
.aboutx__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,58,.9) 0,rgba(6,50,58,.8) 50%,rgba(6,50,58,.92) 100%)}
.aboutx .wrap{position:relative}
.aboutx__label{color:var(--glow)}
.aboutx__lead{color:#fff}
.aboutx__list li{border-top-color:rgba(255,255,255,.28)}
.aboutx__list h3{color:#fff}
.aboutx__list p{color:rgba(255,255,255,.82)}

/* footer palette: one family of teals (deep panel, ice panel, deep bar) */
.fsplit__brand,.fsplit__brand::before{background:var(--deep)}
.fbar2{border-top:1px solid rgba(255,255,255,.1)}
.footer__bg::after{background:linear-gradient(90deg,rgba(6,50,58,.94) 0,rgba(6,50,58,.86) 55%,rgba(6,50,58,.78) 100%)}
.aboutx__bg::after{background:linear-gradient(180deg,rgba(6,50,58,.84) 0,rgba(6,50,58,.7) 50%,rgba(6,50,58,.88) 100%)}

/* footer: one dark colour across the whole block */
.fsplit,.fsplit__main,.fsplit__main::after{background:var(--deep)}
.fsplit{color:rgba(255,255,255,.86)}
.fsplit__main .fcol h3{color:#fff}
.fct li{color:rgba(255,255,255,.86)}
.fct span{color:rgba(255,255,255,.6)}
.fct a,.fsplit .flinks a{color:#fff}
.fct a:hover,.fsplit .flinks a:hover{color:var(--glow)}
@media (min-width:900px){
  .fsplit__main .fcol+.fcol{border-left-color:rgba(255,255,255,.2)}
}

/* About v7: big "Apie mus" on the left, statement on the right, principles across the full width */
.aboutx__label{font-family:var(--f-display);font-weight:500;font-size:clamp(2.5rem,5.6vw,5rem);line-height:1;letter-spacing:-.035em;color:#fff;padding-top:0}
.aboutx__lead{font-size:clamp(1.35rem,2.2vw,2rem);line-height:1.35;letter-spacing:-.015em;color:rgba(255,255,255,.92);max-width:30em}
@media (min-width:900px){
  .aboutx__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .aboutx__label{padding-top:.1em}
  .aboutx__list{grid-column:1/-1;margin-top:clamp(48px,6vw,88px)}
}

/* ===== phones (<=899px): centred layout, longer hero, native swipe row for projects ===== */
@media (max-width:899px){
  /* hero: longer, text centred */
  .hero{height:100vh;height:100svh;min-height:620px}
  .hero__body{padding-bottom:clamp(72px,11svh,112px)}
  .hero__copy{text-align:center;margin-inline:auto}
  .hero__title{text-wrap:balance}
  .hero__lead{margin-inline:auto}
  .hero__actions{justify-content:center}

  /* about */
  .aboutx__grid{text-align:center}
  .aboutx__lead{margin-inline:auto}
  .aboutx__list p{margin-inline:auto}

  /* process intro */
  .process__side{text-align:center}
  .process__side .h2{margin-inline:auto}
  .process__side .lead{margin-inline:auto}

  /* contact form section: bigger centred title, centred facts */
  .contact__label,.contact__title{text-align:center}
  .contact__title{font-size:clamp(3rem,15vw,4.25rem)}
  .contact .info,.facts,.facts dt,.facts dd{text-align:center}
  .map figcaption{text-align:center}
  .cform__title{font-size:clamp(2.4rem,11.5vw,3.25rem);line-height:1.05;text-align:center}
  .cform__sub{text-align:center}

  /* footer */
  .fsplit__brand{text-align:center}
  .fsplit__text{margin-inline:auto}
  .fsplit__main{text-align:center;gap:0}
  .fsplit__main .fcol{padding-block:1.75rem}
  .fsplit__main .fcol+.fcol{border-top:1px solid rgba(255,255,255,.16);padding-top:1.5rem}
  .fsplit__main .fcol:first-child{padding-top:0}
  .fsplit__main .fcol h3{margin-bottom:.9rem}
  .fct{justify-items:center}
  .fsplit .flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1.5rem}
  .fsplit .flinks a{padding:.45rem 0}
  .fbar2__in{flex-direction:column;justify-content:center;text-align:center;gap:.25rem}
}
@media (max-width:899px){
  .contact__title{font-size:clamp(2.4rem,11vw,3.3rem);line-height:1}
}
@media (max-width:899px){
  .contact__title{font-size:clamp(2.6rem,13.5vw,4rem)}
}

/* projects row: GPU-friendly horizontal motion */
.is-hscroll .pcard{will-change:translate}
.hs-css .pcard{animation:hx-x linear both;animation-timeline:scroll(root block);animation-range:var(--hx-start) var(--hx-end)}
.hs-css #trackBar{animation:hx-bar linear both;animation-timeline:scroll(root block);animation-range:var(--hx-start) var(--hx-end)}
@keyframes hx-x{from{translate:0 0}to{translate:calc(var(--hx-dx) * -1px) 0}}
@keyframes hx-bar{from{translate:0 0}to{translate:calc(var(--hx-bt) * 1px) 0}}

/* About v8: larger, livelier (brighter photo, brand-teal veil, heavier type) */
.aboutx{padding-block:clamp(88px,12vw,200px)}
.aboutx__bg img{filter:saturate(1.25) brightness(1.2) contrast(1.05)}
.aboutx__bg::after{background:linear-gradient(90deg,rgba(6,50,58,.9) 0,rgba(10,78,87,.7) 50%,rgba(10,78,87,.42) 100%)}
.aboutx__label{font-weight:600;font-size:clamp(3rem,7.4vw,7rem);letter-spacing:-.04em}
.aboutx__lead{font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.32;color:#fff}
.aboutx__list{margin-top:clamp(64px,8vw,128px);gap:clamp(1.5rem,3vw,3.5rem)}
.aboutx__list li{border-top:2px solid rgba(255,255,255,.4);padding-top:1.4rem}
.aboutx__list h3{font-size:clamp(1.3rem,1.8vw,1.65rem);font-weight:600}
.aboutx__list p{margin-top:.65rem;font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.6;color:rgba(255,255,255,.92);max-width:34ch}
@media (max-width:899px){
  .aboutx__bg::after{background:linear-gradient(180deg,rgba(6,50,58,.88) 0,rgba(10,78,87,.7) 100%)}
  .aboutx__label{font-size:clamp(3rem,15vw,4.5rem)}
}

/* desktop header over the hero photo: transparent at the very top, translucent glass while the photo is behind it, solid below */
@media (min-width:900px){
  .site-header.is-glass:not(:has(.nav__item.is-open)){background:rgba(6,50,58,.4);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 10px 30px -18px rgba(3,30,36,.6);border:1px solid rgba(255,255,255,.14)}
  .site-header.is-glass:not(:has(.nav__item.is-open)) .brand,
  .site-header.is-glass:not(:has(.nav__item.is-open)) .nav__btn,
  .site-header.is-glass:not(:has(.nav__item.is-open)) .nav__link{color:#fff}
  .site-header.is-glass:not(:has(.nav__item.is-open)) .brand__mark{color:var(--glow)}
  .site-header.is-glass:not(:has(.nav__item.is-open)) .nav__btn::after,
  .site-header.is-glass:not(:has(.nav__item.is-open)) .nav__link::after{background:#fff}
  .site-header.is-glass:not(:has(.nav__item.is-open)) .tools .btn--primary{background:#fff;color:var(--primary)}
  .site-header{transition:background-color .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
}
@media (max-width:899px){
  .aboutx__grid{row-gap:2.5rem}
  .aboutx__list{margin-top:3rem}
}

/* navigation bar: square corners, full width, flush with the top of the window */
.site-header{top:0;left:0;right:0;border-radius:0;box-shadow:0 10px 28px -20px rgba(3,37,43,.5),0 1px 0 rgba(3,37,43,.08)}
@media (max-width:899px){
  .site-header{top:0;left:0;right:0;border-radius:0;height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
}
@media (min-width:900px){
  .site-header.is-glass:not(:has(.nav__item.is-open)){border:0;border-bottom:1px solid rgba(255,255,255,.14)}
}
.aboutx__lead{font-size:clamp(1.3rem,2.15vw,1.95rem);line-height:1.38}

/* navigation: logo at the far left, menu and button at the far right */
@media (min-width:900px){
  .site-header__inner{max-width:none;padding-inline:clamp(20px,2.6vw,48px)}
}

/* services: slightly smaller type and a more compact rhythm */
.services{padding-block:clamp(56px,7vw,112px)}
@media (min-width:900px){
  .services__head .h2{font-size:clamp(2.2rem,3.6vw,3.25rem)}
  .srvlist{margin-top:clamp(32px,4vw,56px)}
  .srv{padding:clamp(22px,2.4vw,34px) 0;grid-template-columns:clamp(2.5rem,5vw,5rem) minmax(0,5fr) minmax(0,6fr)}
  .srv h3{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.12;max-width:20ch}
  .srv__n{font-size:clamp(1rem,1.3vw,1.2rem);padding-top:.35rem}
  .srv__body p{font-size:clamp(.9375rem,1.05vw,1.0625rem);line-height:1.6}
  .srv .tags{margin-top:1.1rem;gap:.5rem .55rem}
  .srv .tags li{font-size:.875rem;padding:.4rem .9rem}
}
@media (max-width:899px){
  .srv h3{font-size:clamp(1.35rem,6vw,1.65rem)}
}

/* services: faint aerial photo behind the list */
.services{position:relative;overflow:hidden}
.services__bg{position:absolute;inset:0}
.services__bg img{width:100%;height:100%;object-fit:cover}
.services__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(230,243,244,.9) 0,rgba(230,243,244,.82) 45%,rgba(230,243,244,.92) 100%)}
.services .wrap{position:relative}
.services__bg::after{background:linear-gradient(180deg,rgba(230,243,244,.9) 0,rgba(230,243,244,.8) 45%,rgba(230,243,244,.9) 100%)}
.services__bg img{object-position:50% 60%}
.services__bg::after{background:linear-gradient(180deg,rgba(230,243,244,.92) 0,rgba(230,243,244,.88) 50%,rgba(230,243,244,.92) 100%)}

/* services: plain pale sage-mint instead of a photo */
.services,.services.section--ice{background:#dcede8}
.srvlist,.srv{border-color:#b3d0c8}

/* section backgrounds: services + process share the sage-mint, contact gets the soft ice tint */
.process,.process.section--ice{background:#dcede8}
.contact{background:var(--ice)}
.contact__title span{color:#4a8791}
.field input[type="text"],.field input[type="tel"],.field input[type="email"],.field textarea{border-bottom-color:#9fc1c6}

/* About v9: longer statement, slightly smaller type */
.aboutx__label{font-size:clamp(2.6rem,6vw,5.5rem)}
.aboutx__lead{font-size:clamp(1.1rem,1.65vw,1.5rem);line-height:1.5;max-width:36em}
.aboutx__list h3{font-size:clamp(1.15rem,1.45vw,1.35rem)}
.aboutx__list p{font-size:clamp(.9375rem,1vw,1.0625rem);line-height:1.55}
@media (max-width:899px){
  .aboutx__label{font-size:clamp(2.6rem,12.5vw,3.75rem)}
  .aboutx__lead{font-size:1.125rem}
}

/* About v10: original text, smaller type, taller section */
.aboutx{padding-block:clamp(120px,16vw,260px)}
.aboutx__list{margin-top:clamp(80px,10vw,160px)}
@media (max-width:899px){
  .aboutx{padding-block:clamp(96px,26vw,140px)}
}

/* About v11: editorial split page (tag + title, photo / stats left, text + wide photo right) */
.ab{background:#f4f7f7;color:var(--text);padding-block:clamp(64px,9vw,128px)}
.ab__wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.ab__top{display:flex;flex-direction:column;gap:1.25rem;align-items:flex-start}
.ab__tag{display:inline-flex;align-items:center;gap:.7rem;margin:0;font-family:var(--f-display);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ab__tag i{width:20px;height:20px;border-radius:50%;background:rgba(27,154,166,.22);position:relative;flex:none}
.ab__tag i::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--teal)}
.ab__title{margin:0;font-family:var(--f-display);font-weight:500;text-transform:uppercase;font-size:clamp(1.9rem,4.2vw,3.5rem);line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.ab__u{display:inline-block;padding-bottom:.28em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 16' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C 40 3, 78 14, 120 7 S 205 13, 258 4' fill='none' stroke='%231b9aa6' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 13 C 90 8, 150 14, 214 9' fill='none' stroke='%231b9aa6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .3em no-repeat}
.ab__grid{margin-top:clamp(36px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,56px)}
.ab__photo{margin:0;border-radius:8px;overflow:hidden;background:var(--ice)}
.ab__photo img{display:block;width:100%;height:100%;object-fit:cover}
.ab__photo--a{aspect-ratio:1/1}
.ab__photo--b{aspect-ratio:1.65/1;margin-top:clamp(28px,5vw,72px)}
.ab__stats{margin-top:clamp(36px,5vw,64px);display:grid;gap:.35rem}
.ab__stats div{display:flex;align-items:baseline;gap:.75rem}
.ab__stats dd{order:-1;margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.1;color:var(--teal);letter-spacing:-.01em}
.ab__stats dt{font-family:var(--f-display);font-weight:700;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.ab__lede{margin-top:1.1rem;max-width:42ch;font-size:1rem;line-height:1.65;color:var(--text)}
.ab__lede b{font-weight:600;color:var(--ink)}
.ab__right p{margin:0 0 1rem;font-size:1rem;line-height:1.65;color:var(--text);max-width:46ch}
@media (min-width:900px){
  .ab__top{flex-direction:row;justify-content:space-between;align-items:center;gap:2rem}
  .ab__title{text-align:right}
  .ab__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,10vw,130px);align-items:start}
  .ab__right{padding-top:.25rem}
}
@media (max-width:899px){
  .ab__top{align-items:center;text-align:center}
  .ab__title{text-align:center}
  .ab__stats,.ab__lede,.ab__right p{text-align:center;margin-inline:auto}
  .ab__stats div{justify-content:center}
}

/* About photos: stacked, crossfading */
.ab__photo{position:relative;background:var(--ice)}
.ab__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab__photo.is-run img{opacity:0;transition:opacity 1.3s ease}
.ab__photo.is-run img.is-on{opacity:1}

/* About stats: one line, wider gap */
.ab__stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem clamp(2.5rem,6vw,5.5rem);margin-top:clamp(44px,6vw,80px)}
.ab__stats div{display:flex;align-items:baseline;gap:.75rem}
.ab__lede{margin-top:clamp(1.25rem,2vw,1.75rem)}
@media (max-width:899px){.ab__stats{justify-content:center}}

/* two section colours only: white and the soft ice of the enquiry block, alternating */
.projects,.projects.section--white{background:var(--ice)}
.services,.services.section--ice{background:var(--white)}
.ab{background:var(--ice)}
.process,.process.section--ice{background:var(--white)}
.contact{background:var(--ice)}
.srvlist,.srv{border-color:#cfe0e3}
.srv .tags li{background:var(--ice)}
.ab__photo{background:#d3e6e9}

/* About: bigger tag, tied to the same two columns as the content below */
.ab__tag{font-size:1.0625rem;letter-spacing:.05em;gap:.85rem}
.ab__tag i{width:26px;height:26px}
.ab__tag i::after{inset:7px}
@media (min-width:900px){
  .ab__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,10vw,130px);align-items:start}
  .ab__tag{padding-top:.55rem}
  .ab__title{text-align:left;font-size:clamp(1.9rem,3.5vw,3rem)}
}

/* About: heading back to how it was (big, on the right); only the tag stays larger */
@media (min-width:900px){
  .ab__top{display:flex;justify-content:space-between;align-items:center;gap:2rem}
  .ab__tag{padding-top:0}
  .ab__title{text-align:right;font-size:clamp(1.9rem,4.2vw,3.5rem)}
}

/* phones: services list without the tinted block; About shorter and calmer */
@media (max-width:599px){
  .srv .tags li{background:none}
}
@media (max-width:899px){
  .ab{padding-block:clamp(56px,14vw,88px)}
  .ab__top{gap:1rem}
  .ab__title{font-size:clamp(1.6rem,7.4vw,2.1rem);line-height:1.12}
  .ab__grid{margin-top:2rem;gap:1.75rem}
  .ab__left{display:flex;flex-direction:column}
  .ab__photo--a{aspect-ratio:4/3;border-radius:6px}
  .ab__stats{margin-top:2rem;gap:.75rem 2.5rem}
  .ab__stats dd{font-size:2.1rem}
  .ab__lede{margin-top:1.1rem;font-size:1rem;line-height:1.6}
  .ab__right p{display:none}
  .ab__photo--b{margin-top:0;aspect-ratio:16/10;border-radius:6px}
}

/* phones: show the two paragraphs instead of the short lede */
@media (max-width:899px){
  .ab__lede{display:none}
  .ab__right p{display:block;margin:0 0 1rem;font-size:1rem;line-height:1.65;text-align:center}
  .ab__stats{margin-bottom:1.75rem}
  .ab__photo--b{margin-top:1rem}
}

/* phones: tighter About rhythm, services copy fits two lines */
@media (max-width:899px){
  .ab__stats{margin-top:1.5rem;margin-bottom:0}
  .ab__right p:first-child{margin-top:1.1rem}
  .ab__photo--a+.ab__stats{margin-top:1.5rem}
  .srv__body p{font-size:.9375rem;line-height:1.55}
}
@media (max-width:599px){
  .srv{grid-template-columns:1.75rem minmax(0,1fr);column-gap:10px}
  .srv__body p{font-size:.9rem;line-height:1.5}
}

/* footer: the tower photo runs behind the whole footer */
.footer--photo{position:relative;overflow:hidden;background:var(--deep)}
.footer--photo .footer__top{position:static;overflow:visible}
.footer--photo .footer__bg{position:absolute;inset:0;z-index:0}
.footer--photo .footer__bg::after{background:linear-gradient(180deg,rgba(6,50,58,.8) 0,rgba(6,50,58,.86) 50%,rgba(6,50,58,.93) 100%)}
.footer--photo .footer__top>.wrap,.footer--photo .fsplit,.footer--photo .fbar2{position:relative;z-index:1}
.footer--photo .fsplit,.footer--photo .fsplit__main,.footer--photo .fsplit__brand{background:transparent}
.footer--photo .fsplit__brand::before,.footer--photo .fsplit__main::after{display:none}
.footer--photo .fsplit{border-top:1px solid rgba(255,255,255,.16)}
.footer--photo .fbar2{background:transparent;border-top:1px solid rgba(255,255,255,.14)}
.page-contact .footer--photo{padding-top:0}

/* phones: footer call-to-action centred */
@media (max-width:899px){
  .footer__cta{text-align:center}
  .footer__cta .h2{margin-inline:auto;font-size:clamp(1.9rem,8.6vw,2.7rem);line-height:1.08;text-wrap:balance}
  .footer__btns{justify-content:center}
}