/* =====================================================================
   SIGNIN — layout.pdf reproduction
   Palette sampled directly from the supplied layout
   ===================================================================== */
:root{
  --gold:#b17e51;
  --gold-dark:#a06f42;
  --green:#103c3b;
  --green-soft:#1c4645;
  --navy:#2d384a;
  --orange:#f78525;
  --cream:#f7f2ee;
  --footer:#1f2825;
  --footer-deep:#040e0f;
  --blue:#008cd1;
  --ink:#0b0b0b;
  --body:#6d6d6d;
  --field:#fafafa;

  --shell:1320px;
  --gutter:44px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --head:'Nunito', system-ui, sans-serif;
  --text:'Poppins', system-ui, sans-serif;
  --square:'Montserrat', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--text);
  font-size:17px;
  line-height:32px;
  color:var(--body);
  background:#eef1ef;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--head);color:var(--ink);margin:0;font-weight:700;line-height:1.24}
p{margin:0 0 18px}
.gold{color:var(--gold)}
.orange{color:var(--orange)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.page{max-width:var(--shell);margin:0 auto;background:#fff}

/* ---------------- top bar ---------------- */
.topbar{background:var(--navy);height:58px}
.topbar__inner{height:58px;display:flex;justify-content:flex-end;align-items:stretch}
.topbar__social{background:var(--footer);display:flex;align-items:center;gap:6px;padding:0 12px}
.topbar__social a{
  width:34px;height:34px;border-radius:50%;background:#353e39;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.topbar__social a:hover{background:var(--gold)}
.topbar__social svg{width:15px;height:15px;fill:#fff}

/* ---------------- header ---------------- */
.navwrap{position:relative;height:62px;background:#fff;z-index:30}
.site-header{
  position:absolute;top:26px;left:var(--gutter);right:var(--gutter);height:78px;
  background:#fff;border-radius:8px;box-shadow:0 6px 26px rgba(0,0,0,.13);
  display:flex;align-items:center;padding:0 18px 0 24px;
}
.brand img{height:52px;width:auto;display:block}
.mainnav{margin-left:68px;flex:1}
.mainnav ul{list-style:none;display:flex;align-items:center;gap:44px;margin:0;padding:0}
.mainnav a{
  font-family:var(--text);font-size:18px;font-weight:400;color:#12100e;
  line-height:1;transition:color .25s;
}
.mainnav a:hover,.mainnav a.is-active{color:var(--blue)}
.nav-toggle{display:none;width:38px;height:38px;flex-direction:column;justify-content:center;gap:5px}
.nav-toggle span{display:block;height:2px;background:var(--gold);border-radius:2px}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--text);font-size:16px;font-weight:400;line-height:1;
  padding:15px 24px;border-radius:5px;color:#fff;transition:background .25s,transform .25s;
}
.btn--gold{background:var(--gold)}
.btn--gold:hover{background:var(--gold-dark)}
.btn--green{background:var(--green)}
.btn--green:hover{background:#0a2c2b}
.btn--quote{
  font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:1.4px;
  text-transform:uppercase;width:165px;height:35px;padding:0;border-radius:4px;flex:none;
}
.btn--leaf::after{
  content:"";width:16px;height:16px;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C9 3 3 8 3 17c0 1.6.3 3 .8 4l1.7-1.5C5.2 18.7 5 17.9 5 17c0-1.4.3-2.6.8-3.7C8 15 11.6 16 15 15c-2.3-.5-4.4-1.6-6-3.2 3.2 1.6 7.3 2 12-.8-1.2 5.5-5.1 8-10 8-.6 0-1.2 0-1.8-.1L7 21.4c1.3.4 2.6.6 4 .6 6.6 0 10-4.6 10-19z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C9 3 3 8 3 17c0 1.6.3 3 .8 4l1.7-1.5C5.2 18.7 5 17.9 5 17c0-1.4.3-2.6.8-3.7C8 15 11.6 16 15 15c-2.3-.5-4.4-1.6-6-3.2 3.2 1.6 7.3 2 12-.8-1.2 5.5-5.1 8-10 8-.6 0-1.2 0-1.8-.1L7 21.4c1.3.4 2.6.6 4 .6 6.6 0 10-4.6 10-19z'/></svg>") center/contain no-repeat;
}

/* ---------------- chips / section labels ---------------- */
.chip{
  display:inline-block;font-family:var(--text);font-size:14px;line-height:14px;
  color:#6d6d6d;background:var(--cream);padding:4px 12px;border-radius:4px;margin-bottom:20px;
}
.chip--dark{background:rgba(255,255,255,.10);color:#fff}

/* ---------------- hero ---------------- */
.hero{position:relative;height:606px;overflow:hidden}
.hero__panel{
  position:absolute;left:32px;top:135px;width:660px;height:340px;
  padding:26px 24px 30px 23px;background:rgba(4,10,8,.38);
}
.hero__panel h1{font-size:45px;color:#fff;font-weight:700;line-height:1.28;margin-bottom:16px}
.hero__panel p{color:#fff;font-size:17px;line-height:31px;margin-bottom:24px;max-width:604px}
.hero__actions{display:flex;gap:14px}

/* ---------------- about ---------------- */
.about{
  display:grid;grid-template-columns:600px 1fr;gap:64px;
  padding:76px var(--gutter) 82px;align-items:center;
}
.about__media{position:relative;padding-bottom:60px}
.about__img{margin:0;background:#fff;padding:8px;border-radius:6px;box-shadow:0 10px 34px rgba(0,0,0,.14)}
.about__img img{border-radius:4px}
.about__img--main{width:570px}
.about__img--float{position:absolute;left:346px;top:172px;width:268px}
.leaf-deco{display:none}

.about__text h2{font-size:44px;margin-bottom:22px;letter-spacing:-.4px}
.about__text p{margin-bottom:26px;max-width:594px}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{
  position:relative;padding-left:43px;margin-bottom:14px;
  font-family:var(--head);font-size:18px;font-weight:700;color:#12100e;line-height:1.5;
}
.ticks li::before{
  content:"";position:absolute;left:0;top:8px;width:18px;height:13px;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'><path d='M6.6 13 0 6.4l2.4-2.4 4.2 4.2L15.6 0 18 2.4z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'><path d='M6.6 13 0 6.4l2.4-2.4 4.2 4.2L15.6 0 18 2.4z'/></svg>") center/contain no-repeat;
}
.ticks--light li{color:#fff;font-family:var(--text);font-weight:400;font-size:17px;
  margin-bottom:0;line-height:42px;padding-left:26px}
.ticks--light li::before{top:15px;background:var(--orange)}

/* ---------------- services ---------------- */
.services{background:var(--green);padding:66px var(--gutter) 78px;position:relative}
.services__head{text-align:center}
.services__head .chip{margin-bottom:22px}
.services__head h2{font-size:44px;color:#fff;margin-bottom:38px}
.tabs{
  display:flex;background:rgba(255,255,255,.07);border-radius:30px;overflow:hidden;
  margin:0 auto 56px;width:max-content;max-width:100%;
}
.tab{
  font-family:var(--square);font-size:16px;font-weight:700;color:#fff;line-height:43px;
  padding:0 42px;border-radius:30px;white-space:nowrap;transition:background .25s;
}
.tab:hover{background:rgba(255,255,255,.1)}
.tab.is-active{background:var(--gold)}
.services__grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.services__copy{padding-right:0}
.services__copy h3{font-family:var(--square);font-weight:700;font-size:39px;color:#fff;margin-bottom:24px;letter-spacing:-.2px}
.services__copy p{
  font-family:var(--square);font-size:20px;font-weight:700;line-height:30px;color:#fff;margin-bottom:30px;
}
.btn--read{font-family:var(--square);font-weight:500;font-size:15px;width:146px;height:40px;padding:0;border-radius:4px;margin-top:12px}
.services__shots img{border-radius:2px}

/* ---------------- portfolio ---------------- */
.portfolio{padding:64px var(--gutter) 72px}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:48px}
.filter{
  font-family:var(--head);font-size:21px;font-weight:700;color:#6d6d6d;
  padding:6px 14px;border-radius:5px;transition:.25s;
}
.filter:hover{color:var(--gold)}
.filter.is-active{background:var(--gold);color:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 29px}
.work{position:relative;display:block;border-radius:10px;overflow:hidden}
.work img{width:100%;height:242px;object-fit:cover;transition:transform .6s}
.work:hover img{transform:scale(1.06)}
.work__veil{
  position:absolute;inset:0;background:rgba(9,20,16,.55);opacity:0;transition:opacity .35s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.work:hover .work__veil{opacity:1}
.work__icon{
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.16);
  display:block;position:relative;
}
.work__icon::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>") center/22px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/></svg>") center/22px no-repeat;
}
.work__title{font-family:var(--head);font-size:26px;font-weight:700;color:#fff}
.work__title em{font-style:normal;color:var(--gold)}
.work.is-hidden{display:none}

/* ---------------- testimonials ---------------- */
.testi{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.testi__copy{background:var(--cream);padding:76px 58px 76px var(--gutter);display:flex;flex-direction:column;justify-content:center}
.testi__copy h2{font-size:45px;margin-bottom:22px}
.testi__copy p{margin-bottom:28px;max-width:585px}
.testi__copy .btn{align-self:flex-start}
.testi__media{
  position:relative;min-height:558px;display:flex;align-items:center;
  background:linear-gradient(150deg,var(--green) 0%,#0a2c2b 55%,#061e1d 100%);
}
.quote{
  background:#fff;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.13);
  position:absolute;left:51px;top:137px;width:570px;min-height:275px;
  margin:0;padding:32px 30px 34px 37px;
}
.quote__head{display:flex;gap:30px;align-items:flex-start}
.quote__avatar{width:118px;height:118px;border-radius:50%;object-fit:cover;flex:none}
.quote__body{flex:1;min-width:0}
.quote h4{font-size:24px;margin-bottom:4px}
.quote__role{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);display:block;margin-bottom:10px}
.stars{color:var(--gold);font-size:22px;letter-spacing:2px;line-height:1}
.quote p{font-size:18px;line-height:30px;text-align:justify;margin:14px 0 0;color:#6d6d6d}
.quote__mark{
  position:absolute;right:24px;bottom:8px;font-family:var(--head);font-size:56px;
  font-weight:900;color:#eceaea;line-height:1;
}
.testi__nav{position:absolute;right:26px;bottom:24px;display:flex;gap:6px}
.testi__nav button{
  width:30px;height:30px;border-radius:5px;background:var(--gold);color:#fff;font-size:12px;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.testi__nav button:hover{background:var(--gold-dark)}

/* ---------------- why choose us ---------------- */
.why{
  background:var(--green);display:grid;grid-template-columns:616px 1fr;gap:59px;
  padding:66px var(--gutter);align-items:center;position:relative;overflow:hidden;
}
.why::before{
  content:"";position:absolute;inset:0;opacity:.028;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><path d='M20 55c0-16 8-24 24-24 0 16-8 24-24 24z' fill='%23ffffff'/><path d='M62 30c0 12-6 18-18 18 0-12 6-18 18-18z' fill='%23ffffff'/></svg>");
}
.why__img{margin:0;position:relative;z-index:1}
.why__img img{border-radius:8px}
.why__copy{position:relative;z-index:1}
.why__copy h2{font-size:47px;color:#fff;margin-bottom:20px;line-height:1.34}
.why__copy p{color:#fff;margin-bottom:20px}
.why__copy h5{font-family:var(--square);font-size:18px;font-weight:700;color:#fff;margin:0 0 12px}
.why__copy .btn{margin-top:26px}

/* ---------------- contact ---------------- */
.contact{display:grid;grid-template-columns:392px 1fr;gap:46px;padding:72px var(--gutter) 80px}
.contact__person figure{margin:0 0 18px}
.contact__person img{border-radius:8px}
.contact__person h5{font-family:var(--head);font-size:20px;font-weight:800;text-align:center;margin:0 0 6px}
.contact__call{display:block;text-align:center;color:var(--gold);font-size:17px}
.contact__form h2{font-size:45px;margin-bottom:30px}
.contact__form form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{position:relative}
.field--full{grid-column:1 / -1}
.field input,.field textarea{
  width:100%;font-family:var(--text);font-size:16px;color:#333;
  background:var(--field);border:1px solid #ececec;border-radius:6px;
  padding:16px 44px 16px 18px;outline:none;transition:border-color .25s;
}
.field textarea{resize:vertical;min-height:118px;padding-right:18px}
.field input::placeholder,.field textarea::placeholder{color:#8b8b8b}
.field input:focus,.field textarea:focus{border-color:var(--gold)}
.field__ico{
  position:absolute;right:18px;top:18px;width:18px;height:18px;background:#3c3c3c;
}
.ico-user{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/></svg>") center/contain no-repeat}
.ico-mail{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h20v16H2z'/><path d='M2 5.5 12 13 22 5.5' stroke='white' stroke-width='2.4' fill='none'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h20v16H2z'/><path d='M2 5.5 12 13 22 5.5' stroke='white' stroke-width='2.4' fill='none'/></svg>") center/contain no-repeat}
.ico-cal{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v10H5V10h14z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 8v10H5V10h14z'/></svg>") center/contain no-repeat}
.ico-phone{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat}

/* ---------------- footer ---------------- */
.footer{background:var(--footer);position:relative}
.footer::before{
  content:"";position:absolute;inset:0;opacity:.03;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><path d='M14 44c0-13 6-19 19-19 0 13-6 19-19 19z' fill='%23ffffff'/><path d='M50 22c0 9-5 14-14 14 0-9 5-14 14-14z' fill='%23ffffff'/></svg>");
}
.footer__inner{
  position:relative;display:grid;grid-template-columns:1fr 1fr 1fr 1.14fr;gap:0;
  padding:82px 84px 140px 17px;
}
.footer__logo{height:52px;width:auto;margin-bottom:22px}
.footer__col p{color:#d5d5d5;font-size:16px;line-height:30px;margin-bottom:22px}
.footer__col--brand p{max-width:205px}
.footer__col h4{font-family:var(--head);font-size:33px;font-weight:700;color:#fff;margin:0 0 24px}
.contactlist{list-style:none;margin:0;padding:0}
.contactlist li{position:relative;padding-left:30px;color:#d5d5d5;font-size:16px;line-height:28px;margin-bottom:16px}
.contactlist li:first-child a{color:var(--gold)}
.contactlist a:hover{color:var(--gold)}
.ci{position:absolute;left:0;top:6px;width:16px;height:16px;background:var(--gold)}
.ci-phone{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/></svg>") center/contain no-repeat}
.ci-pin{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/></svg>") center/contain no-repeat}
.ci-mail{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5v14h20V5H2zm18 2-8 5-8-5h16z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5v14h20V5H2zm18 2-8 5-8-5h16z'/></svg>") center/contain no-repeat}
.arrowlist{list-style:none;margin:0;padding:0}
.arrowlist li{margin-bottom:14px}
.arrowlist a{
  font-family:var(--head);font-size:20px;font-weight:700;color:#fff;
  position:relative;padding-left:20px;transition:color .25s;
}
.arrowlist a::before{content:"\203A";position:absolute;left:0;top:-2px;color:#bdbdbd;font-weight:400}
.arrowlist a:hover{color:var(--gold)}
.subscribe{display:flex;gap:13px;max-width:335px;margin-bottom:26px}
.subscribe input{
  flex:1;min-width:0;border:0;border-radius:4px;padding:14px 16px;
  font-family:var(--text);font-size:16px;outline:none;
}
.subscribe button{
  background:var(--gold);color:#fff;width:101px;flex:none;border-radius:4px;
  font-size:16px;transition:background .25s;
}
.subscribe button:hover{background:var(--gold-dark)}
.footer__social{display:flex;gap:10px}
.footer__social a{
  width:36px;height:36px;border-radius:50%;background:#353e39;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.footer__social a:hover{background:var(--gold)}
.footer__social svg{width:15px;height:15px;fill:#fff}
.footer__bottom{background:var(--footer-deep);position:relative}
.footer__bottom-inner{padding:26px var(--gutter);color:#d5d5d5;font-size:16px;line-height:1.6}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1360px){
  .page{max-width:100%}
  .testi__media{display:flex;align-items:center}
  .quote{position:static;width:auto;flex:1;min-width:0;margin:0 39px 0 51px}
  .services__grid{grid-template-columns:1fr 1fr}
  .services__shots img{width:100%}
  .why{grid-template-columns:1fr 1fr}
  .why__img img{width:100%}
  .about{grid-template-columns:1fr 1fr;gap:40px}
  .about__img--main{width:100%}
  .about__img img{width:100%;height:auto}
  .about__img--float{left:auto;right:-10px;top:auto;bottom:-30px;width:44%}
}
@media (max-width:1100px){
  .mainnav ul{gap:22px}
  .mainnav a{font-size:15px}
  .tabs{flex-wrap:wrap;border-radius:12px}
  .grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .contact{grid-template-columns:1fr;gap:40px}
  .contact__person figure img{width:100%}
}
@media (max-width:900px){
  body{font-size:16px;line-height:29px}
  .navwrap{height:auto;background:transparent}
  .site-header{position:relative;top:0;left:0;right:0;height:auto;flex-wrap:wrap;padding:14px 18px;border-radius:0}
  .nav-toggle{display:flex;order:2;margin-left:auto}
  .mainnav{order:4;flex:0 0 100%;margin:0;display:none}
  .mainnav.is-open{display:block}
  .mainnav ul{flex-direction:column;align-items:flex-start;gap:0}
  .mainnav li{width:100%;border-top:1px solid #f0f0f0}
  .mainnav a{display:block;padding:12px 2px}
  .btn--quote{order:3;margin-left:14px}
  .hero{height:auto;min-height:520px}
  .hero__panel{position:relative;z-index:2;left:auto;top:auto;width:auto;height:auto;
    margin:0;padding:38px 26px;min-height:0;background:rgba(4,10,8,.46)}
  .hero__panel h1{font-size:34px}
  .about,.why,.testi{grid-template-columns:1fr}
  .about{padding:44px 26px}
  .about__media{padding-bottom:40px}
  .about__img--float{width:46%;right:0;bottom:-20px}
  .about__text h2,.testi__copy h2,.why__copy h2,.contact__form h2{font-size:32px}
  .services{padding:36px 22px}
  .services__head h2{font-size:32px}
  .services__grid{grid-template-columns:1fr;gap:36px}
  .services__copy{padding-right:0}
  .portfolio{padding:36px 22px 46px}
  .testi__copy{padding:44px 26px}
  .testi__media{min-height:0;padding:34px 0}
  .quote{margin:0 22px}
  .quote p{text-align:left}
  .leaf-deco{display:none}
  .why{padding:44px 26px}
  .contact{padding:44px 26px}
  .contact__form form{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr 1fr;gap:30px;padding:44px 26px}
  .footer__bottom-inner{padding:22px 26px}
  .topbar__inner{padding:0}
}
@media (max-width:620px){
  .grid{grid-template-columns:1fr}
  .quote__head{flex-direction:column;gap:16px}
  .quote{padding:26px 22px}
  .footer__inner{grid-template-columns:1fr}
  .hero__panel h1{font-size:28px}
  .hero__actions{flex-wrap:wrap}
  .filters{gap:6px}
  .filter{font-size:15px;padding:7px 12px}
}

/* =====================================================================
   ADDITIONS — hero slides, service panels, section heads, clients, lightbox
   ===================================================================== */

/* hero slideshow */

/* service tab panels */
.services__panel{display:none}
.services__panel.is-active{display:grid;animation:fade-up .5s ease}
.services__shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.services__shots img{width:100%;height:236px;object-fit:cover;border-radius:6px}
.services__shots img:first-child{grid-column:1 / -1;height:250px}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* shared section head */
.section-head{margin-bottom:34px}
.section-head h2{font-size:44px;letter-spacing:-.4px}

/* products */
.portfolio .grid{gap:34px 29px}

/* clients */
.clients{padding:64px var(--gutter) 70px;background:var(--cream)}
.clients .section-head{text-align:center}
.logos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;
}
.logos li{
  background:#fff;border-radius:8px;padding:14px;height:112px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s;
}
.logos li:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.logos img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.3s}
.logos li:hover img{filter:none;opacity:1}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:100;background:rgba(6,12,10,.92);
  display:flex;align-items:center;justify-content:center;padding:56px 70px;
}
.lightbox[hidden]{display:none}
.lightbox__inner{margin:0;max-width:min(1100px,100%);text-align:center}
.lightbox__inner img{max-width:100%;max-height:76vh;width:auto;margin:0 auto;border-radius:8px}
.lightbox__inner figcaption{
  font-family:var(--head);font-size:20px;font-weight:700;color:#fff;margin-top:18px;
}
.lightbox__close{
  position:absolute;top:22px;right:28px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:54px;border-radius:8px;
  background:rgba(255,255,255,.12);color:#fff;font-size:19px;
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.lightbox__nav--prev{left:20px}
.lightbox__nav--next{right:20px}
.lightbox__close:hover,.lightbox__nav:hover{background:var(--gold)}
body.is-locked{overflow:hidden}

@media (max-width:1360px){
  .logos{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1100px){
  .logos{grid-template-columns:repeat(4,1fr)}
  .clients{padding:48px 26px 54px}
}
@media (max-width:900px){
  .section-head h2{font-size:32px}
  .services__shots img{height:190px}
  .services__shots img:first-child{height:240px}
  .logos{grid-template-columns:repeat(3,1fr);gap:14px}
  .logos li{height:92px;padding:10px}
  .lightbox{padding:60px 18px}
  .lightbox__nav{width:40px;height:44px}
}
@media (max-width:620px){
  .logos{grid-template-columns:repeat(2,1fr)}
  .services__shots{grid-template-columns:1fr}
  .services__shots img:first-child{height:220px}
}

/* =====================================================================
   OFF-CANVAS MENU + INNER PAGES
   ===================================================================== */

/* the "more" trigger in the header */
.menu-more{
  width:46px;height:46px;margin-left:18px;border-radius:8px;background:var(--green);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:none;transition:background .25s;
}
.menu-more:hover{background:var(--gold)}
.menu-more span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.menu-more span:nth-child(2){width:14px;align-self:flex-start;margin-left:13px}
.menu-more:hover span:nth-child(2){width:20px;margin-left:0}

/* overlay + panel */
.oc-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(6,12,10,.6);
  opacity:0;transition:opacity .35s;
}
.oc-overlay[hidden]{display:none}
.oc-overlay.is-visible{opacity:1}

.offcanvas{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:95;
  background:var(--footer);color:#cfd6d2;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.offcanvas.is-open{transform:none}
.oc__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px;border-bottom:1px solid rgba(255,255,255,.08);flex:none;
}
.oc__logo{height:46px;width:auto}
.oc__close{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;
  font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .25s;
}
.oc__close:hover{background:var(--gold)}
.oc__body{flex:1;overflow-y:auto;padding:26px 26px 40px}
.oc__group{margin-bottom:26px}
.oc__group h4,.oc__contact h4{
  font-family:var(--head);font-size:15px;font-weight:800;color:var(--gold);
  text-transform:uppercase;letter-spacing:1.4px;margin:0 0 12px;
}
.oc__group ul{list-style:none;margin:0;padding:0}
.oc__group li{border-bottom:1px solid rgba(255,255,255,.06)}
.oc__group a{
  display:block;padding:10px 0;font-size:16px;line-height:1.5;color:#cfd6d2;
  transition:color .25s,padding-left .25s;
}
.oc__group a:hover{color:#fff;padding-left:8px}
.oc__contact{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08)}
.oc__contact .contactlist li{color:#cfd6d2;margin-bottom:12px}
.oc__contact .contactlist a{color:#cfd6d2}
.oc__contact .contactlist a:hover{color:var(--gold)}
.oc__contact .btn{margin-top:8px}
.oc__social{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.oc__social a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;transition:background .25s;
}
.oc__social a:hover{background:var(--gold)}
.oc__social svg{width:15px;height:15px;fill:#fff}

/* ---------------- inner page hero ---------------- */
.pagehero{
  position:relative;background-position:center;background-size:cover;background-repeat:no-repeat;
  padding:96px var(--gutter);
}
.pagehero::before{content:"";position:absolute;inset:0;background:rgba(8,16,13,.62)}
.pagehero__inner{position:relative;z-index:1}
.pagehero h1{font-size:48px;color:#fff;margin-bottom:14px;line-height:1.2}
.crumbs{display:flex;align-items:center;gap:10px;font-size:16px;color:#d8ded9}
.crumbs a{color:var(--gold)}
.crumbs a:hover{color:#fff}
.crumbs span{color:#d8ded9}
.crumbs__here{color:#fff}

/* ---------------- generic inner sections ---------------- */
.intro{padding:56px var(--gutter) 0}
.section-head__lead{max-width:760px;margin-top:14px}
.clients .section-head__lead,.team .section-head,.quotes .section-head,
.posts .section-head,.intro .section-head{margin-left:auto;margin-right:auto}
.team .section-head,.quotes .section-head,.posts .section-head,.intro .section-head{
  text-align:center;max-width:820px;
}
.team .section-head__lead,.quotes .section-head__lead,
.posts .section-head__lead,.intro .section-head__lead{margin-left:auto;margin-right:auto}

/* split (image + copy) */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  padding:64px var(--gutter);
}
.split--rev .split__img{order:2}
.split__img{margin:0}
.split__img img{width:100%;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.14)}
.split__copy h2{font-size:42px;margin-bottom:20px;letter-spacing:-.4px}
.split__copy p{margin-bottom:20px}

/* stats */
.stats{padding:10px var(--gutter) 54px}
.stats__list{
  list-style:none;margin:0;padding:34px 30px;display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;background:var(--cream);border-radius:12px;text-align:center;
}
.stats__list strong{
  display:block;font-family:var(--head);font-size:42px;font-weight:800;color:var(--gold);line-height:1.1;
}
.stats__list span{font-size:16px;line-height:1.5;display:block;margin-top:6px}

/* steps */
.steps{padding:56px var(--gutter) 64px;background:var(--cream)}
.steps__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.step{background:#fff;border-radius:12px;padding:28px 26px 24px;position:relative;overflow:hidden}
.step__n{
  font-family:var(--head);font-size:34px;font-weight:800;color:var(--gold);
  display:block;line-height:1;margin-bottom:12px;
}
.step h4{font-size:21px;margin-bottom:8px}
.step p{margin:0;font-size:16px;line-height:28px}

/* cards */
.cards{padding:56px var(--gutter) 64px}
.cards__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.card{
  display:block;background:#fff;border-radius:12px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.08);transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(0,0,0,.14)}
.card__img{display:block;overflow:hidden}
.card__img img{width:100%;height:250px;object-fit:cover;transition:transform .6s}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{display:block;padding:26px 26px 28px}
.card__body h3{font-size:25px;margin-bottom:10px}
.card__body p{font-size:16px;line-height:28px;margin-bottom:14px}
.card__more{
  display:inline-block;font-family:var(--square);font-size:14px;font-weight:600;
  color:var(--gold);letter-spacing:.4px;
}
.card__more::after{content:" \2192"}

/* team */
.team{padding:56px var(--gutter) 64px}
.team__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.member{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.08)}
.member figure{margin:0}
.member figure img{width:100%;height:230px;object-fit:cover}
.member h3{font-size:22px;margin:20px 22px 8px}
.member p{font-size:16px;line-height:27px;margin:0 22px 24px}

/* testimonial cards */
.quotes{padding:56px var(--gutter) 64px;background:var(--cream)}
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.qcard{background:#fff;border-radius:12px;padding:28px 26px;margin:0}
.qcard blockquote{margin:14px 0 18px;font-size:17px;line-height:30px;color:#6d6d6d}
.qcard figcaption strong{display:block;font-family:var(--head);font-size:19px;color:var(--ink)}
.qcard figcaption span{font-size:15px;color:var(--gold)}

/* blog */
.posts{padding:56px var(--gutter) 64px}
.posts__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.08)}
.post__img{display:block;overflow:hidden}
.post__img img{width:100%;height:210px;object-fit:cover;transition:transform .6s}
.post:hover .post__img img{transform:scale(1.06)}
.post__body{padding:24px 24px 26px}
.post__tag{
  display:inline-block;font-size:13px;color:var(--gold);background:var(--cream);
  padding:3px 10px;border-radius:4px;margin-bottom:12px;
}
.post__body h3{font-size:22px;line-height:1.35;margin-bottom:10px}
.post__body h3 a:hover{color:var(--gold)}
.post__body p{font-size:16px;line-height:28px;margin-bottom:12px}

/* related categories */
.related{padding:0 var(--gutter) 64px}
.related__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.related__list a{
  display:block;padding:10px 20px;border:1px solid #e6e6e6;border-radius:30px;
  font-family:var(--head);font-weight:700;font-size:17px;color:#12100e;transition:.25s;
}
.related__list a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* form page (quote) */
.formpage{display:grid;grid-template-columns:400px 1fr;gap:46px;padding:64px var(--gutter) 70px}
.formpage__aside{background:var(--green);border-radius:12px;padding:34px 30px;color:#fff}
.formpage__aside h2{font-size:34px;color:#fff;margin-bottom:16px}
.formpage__aside p{color:#dfe6e2}
.formpage__aside .ticks li{color:#fff;font-size:17px}
.formpage__aside .ticks li::before{background:var(--gold)}
.contactlist--dark{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.contactlist--dark li{color:#dfe6e2;margin-bottom:10px}
.contactlist--dark a{color:#dfe6e2}
.contactlist--dark a:hover{color:var(--gold)}
.formpage__form form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field select{
  width:100%;font-family:var(--text);font-size:16px;color:#333;height:54px;padding:0 16px;
  background:var(--field);border:1px solid #ececec;border-radius:6px;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z' fill='%23888'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:22px;
}
.field select:focus{outline:none;border-color:var(--gold)}

/* contact info cards */
.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:56px var(--gutter) 0}
.info{background:var(--cream);border-radius:12px;padding:30px 26px;text-align:center}
.info__ico{
  position:static;display:block;width:30px;height:30px;margin:0 auto 16px;background:var(--gold);
}
.info h3{font-size:22px;margin-bottom:10px}
.info__main{font-family:var(--head);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px}
.info__main a:hover{color:var(--gold)}
.info p{font-size:16px;line-height:27px;margin:0}

/* CTA band */
.cta{background:var(--green);padding:56px var(--gutter);position:relative}
.cta__inner{max-width:860px}
.cta h2{font-size:38px;color:#fff;margin-bottom:14px;line-height:1.3}
.cta p{color:#dfe6e2;margin-bottom:26px}
.cta__actions{display:flex;gap:14px;flex-wrap:wrap}

/* 404 */
.err{padding:110px var(--gutter) 120px;text-align:center}
.err__code{
  display:block;font-family:var(--head);font-size:130px;font-weight:900;line-height:1;
  color:var(--gold);margin-bottom:10px;
}
.err h2{font-size:40px;margin-bottom:16px}
.err p{max-width:620px;margin:0 auto 30px}
.err .cta__actions{justify-content:center}

/* ---------------- responsive ---------------- */
@media (max-width:1360px){
  .team__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .split,.formpage{grid-template-columns:1fr;gap:34px}
  .split--rev .split__img{order:0}
  .steps__list,.quotes__grid,.posts__grid{grid-template-columns:repeat(2,1fr)}
  .stats__list{grid-template-columns:repeat(2,1fr)}
  .infocards{grid-template-columns:1fr;padding:44px 26px 0}
  .cards__grid{grid-template-columns:1fr}
  .pagehero{padding:70px 26px}
  .pagehero h1{font-size:36px}
}
@media (max-width:900px){
  .menu-more{margin-left:10px;order:2}
  .nav-toggle{order:1}
  .split,.steps,.cards,.team,.quotes,.posts,.related,.formpage,.cta,.intro{padding-left:26px;padding-right:26px}
  .stats{padding:0 26px 44px}
  .split__copy h2,.cta h2,.err h2{font-size:30px}
  .err__code{font-size:90px}
  .err{padding:70px 26px 80px}
}
@media (max-width:620px){
  .steps__list,.quotes__grid,.posts__grid,.team__grid,.stats__list{grid-template-columns:1fr}
  .offcanvas{width:100%}
  .pagehero h1{font-size:28px}
  .formpage__form form{grid-template-columns:1fr}
}

/* =====================================================================
   REFINEMENT PASS — hero mosaic, motion, focus states, polish
   ===================================================================== */

/* ---------------- home hero: brand panel + sharp photo mosaic ----------------
   The client's photography maxes out around 800px wide, so a full-bleed
   background image renders soft. Tiles keep every photo at or below its
   native size, and the colour panel carries the headline instead. */
.hero{
  height:auto;min-height:560px;display:grid;grid-template-columns:1fr 620px;
  gap:52px;align-items:center;padding:64px var(--gutter);overflow:hidden;
  background:linear-gradient(140deg,#0f3b3a 0%,#0b2c2b 52%,#061d1c 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 78% 18%,rgba(177,126,81,.28),transparent 46%);
}
.hero__panel{
  position:relative;z-index:2;left:auto;top:auto;width:auto;height:auto;
  padding:0;background:none;max-width:620px;
}
.hero__panel .chip{background:rgba(255,255,255,.1);color:#e8ded4}
.hero__panel h1{font-size:52px;line-height:1.16;margin-bottom:20px}
.hero__panel p{color:#cfd8d3;max-width:560px;margin-bottom:30px}
.hero__actions{gap:16px}

.hero__mosaic{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
  gap:16px;
}
.hero__tile{
  margin:0;overflow:hidden;border-radius:12px;background:#0a2423;
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}
.hero__tile img{width:100%;height:172px;object-fit:cover;transition:transform .8s var(--ease)}
.hero__tile--lg{grid-column:1 / -1}
.hero__tile--lg img{height:250px}
.hero__tile:hover img{transform:scale(1.05)}

/* ---------------- inner page hero: colour band, no stretched photo ---------------- */
.pagehero{
  background:linear-gradient(120deg,#0f3b3a 0%,#0b2c2b 58%,#061d1c 100%);
  padding:78px var(--gutter);
}
.pagehero::before{
  background:radial-gradient(circle at 82% 26%,rgba(177,126,81,.3),transparent 48%);
}
.pagehero h1{position:relative;padding-bottom:18px;margin-bottom:18px}
.pagehero h1::after{
  content:"";position:absolute;left:0;bottom:0;width:66px;height:4px;
  background:var(--gold);border-radius:3px;
}

/* ---------------- testimonial monogram (replaces the stock avatar) ---------------- */
.quote__badge{
  width:104px;height:104px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,#f4ece4,#e6d6c5);
  display:flex;align-items:center;justify-content:center;
}
.quote__badge svg{width:46px;height:46px;fill:var(--gold)}

/* ---------------- scroll reveal ---------------- */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------------- sticky header ---------------- */
@keyframes nav-down{from{transform:translateY(-100%)}to{transform:none}}
body.has-stuck .site-header{
  position:fixed;top:0;left:0;right:0;width:auto;height:72px;
  border-radius:0;z-index:80;box-shadow:0 6px 24px rgba(0,0,0,.13);
  padding-left:max(var(--gutter),calc((100vw - var(--shell)) / 2 + var(--gutter)));
  padding-right:max(var(--gutter),calc((100vw - var(--shell)) / 2 + var(--gutter)));
  animation:nav-down .45s var(--ease);
}
body.has-stuck .brand img{height:46px;transition:height .3s var(--ease)}

/* ---------------- nav link underline ---------------- */
.mainnav a{position:relative;padding-bottom:4px}
.mainnav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--gold);border-radius:2px;transition:width .3s var(--ease);
}
.mainnav a:hover::after,.mainnav a.is-active::after{width:100%}

/* ---------------- buttons ---------------- */
.btn{
  transition:background .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.btn:active{transform:translateY(0)}
.btn--gold:hover{background:var(--gold-dark)}
.btn--green:hover{background:#0a2c2b}

/* ---------------- work tiles ---------------- */
.work{box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.work:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.16)}
.work__veil{
  background:linear-gradient(to top,rgba(6,20,17,.86),rgba(6,20,17,.42));
  gap:12px;
}
.work__icon,.work__title{transform:translateY(12px);transition:transform .4s var(--ease)}
.work:hover .work__icon,.work:hover .work__title{transform:none}
.work:hover .work__title{transition-delay:.05s}

/* ---------------- filters ---------------- */
.filter{border:1px solid transparent;transition:background .25s,color .25s,border-color .25s}
.filter:hover{background:var(--cream);border-color:#ece4db}
.filter.is-active{box-shadow:0 6px 16px rgba(177,126,81,.34)}

/* ---------------- off-canvas link stagger ---------------- */
.offcanvas .oc__group a{transform:translateX(14px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease),color .25s}
.offcanvas.is-open .oc__group a{transform:none;opacity:1}
.offcanvas .oc__group:nth-child(1) a{transition-delay:.06s}
.offcanvas .oc__group:nth-child(2) a{transition-delay:.12s}
.offcanvas .oc__group:nth-child(3) a{transition-delay:.18s}
.offcanvas .oc__group:nth-child(4) a{transition-delay:.24s}

/* ---------------- lightbox entrance ---------------- */
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes lb-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.lightbox{animation:lb-in .3s var(--ease)}
.lightbox__inner{animation:lb-zoom .38s var(--ease)}

/* ---------------- back to top ---------------- */
.totop{
  position:fixed;right:26px;bottom:26px;z-index:70;width:50px;height:50px;border-radius:50%;
  background:var(--gold);color:#fff;font-size:19px;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.24);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .25s;
}
.totop.is-visible{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--green);transform:translateY(-3px)}

/* ---------------- cards / sections ---------------- */
.card,.member,.post,.qcard,.step,.logos li{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover,.qcard:hover,.member:hover,.post:hover{
  transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.12);
}
.step{border:1px solid #f0ebe5}
.section-head h2,.about__text h2,.split__copy h2,.hero__panel h1,.pagehero h1{text-wrap:balance}

/* ---------------- form focus ---------------- */
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(177,126,81,.16)}
.field input,.field textarea,.field select{transition:border-color .25s,box-shadow .25s}

/* ---------------- keyboard accessibility ---------------- */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.topbar__social a:focus-visible,.footer__social a:focus-visible,.oc__social a:focus-visible{outline-offset:2px}

/* ---------------- respect reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important}
  .offcanvas .oc__group a{opacity:1 !important;transform:none !important}
}

/* ---------------- responsive ---------------- */
@media (max-width:1360px){
  :root{--gutter:36px}
  .hero{grid-template-columns:1fr 520px;gap:40px}
  .hero__panel h1{font-size:44px}
}
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:36px;padding:56px var(--gutter) 60px}
  .hero__mosaic{max-width:620px}
  .hero__tile img{height:150px}
  .hero__tile--lg img{height:210px}
}
@media (max-width:900px){
  :root{--gutter:26px}
  .hero{min-height:0;padding:44px var(--gutter) 50px}
  .hero__panel h1{font-size:32px}
  body.has-stuck .site-header{position:relative;animation:none;box-shadow:0 6px 26px rgba(0,0,0,.13)}
  .pagehero{padding:56px var(--gutter)}
  .totop{right:16px;bottom:16px;width:44px;height:44px}
}
@media (max-width:620px){
  .hero__mosaic{grid-template-columns:1fr}
  .hero__tile--lg img,.hero__tile img{height:170px}
}

/* ---------------- mobile header: one menu affordance, not two ----------------
   The off-canvas panel already lists every page, so the old nav toggle is
   redundant on small screens and reads as a second hamburger beside it. */
@media (max-width:900px){
  .nav-toggle{display:none !important}
  .mainnav{display:none !important}
  .site-header{flex-wrap:nowrap;padding:12px var(--gutter);gap:12px}
  .brand{margin-right:auto}
  .brand img{height:42px}
  .btn--quote{order:0;margin-left:0;height:42px;padding:0 16px;font-size:14px;white-space:nowrap}
  .menu-more{order:0;margin-left:0;width:42px;height:42px}
}
@media (max-width:620px){
  /* the panel carries its own Get A Quote button */
  .btn--quote{display:none}
  .site-header{padding:10px var(--gutter)}
}

/* =====================================================================
   MOTION SYSTEM — matched to the reference demo's vocabulary
   Directional reveals (up/left/right/down), ~0.9s duration, 0.2s stagger
   steps, animated counters, autoplay carousels, animated filtering and a
   scroll progress indicator.
   ===================================================================== */

/* ---------------- scroll progress indicator ---------------- */
.scrollbar{
  position:fixed;top:0;left:0;right:0;height:4px;z-index:99;background:transparent;pointer-events:none;
}
.scrollbar__fill{
  height:100%;width:0;background:linear-gradient(90deg,var(--gold),#d9a56d);
  box-shadow:0 0 12px rgba(177,126,81,.6);transition:width .12s linear;
}

/* ---------------- directional reveals ---------------- */
[data-reveal]{
  opacity:0;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
[data-reveal="up"]{transform:translateY(46px)}
[data-reveal="down"]{transform:translateY(-40px)}
[data-reveal="left"]{transform:translateX(-56px)}
[data-reveal="right"]{transform:translateX(56px)}
[data-reveal="zoom"]{transform:scale(.9)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------------- hero slider ---------------- */
.hero{
  position:relative;display:block;min-height:620px;padding:0;overflow:hidden;
  background:#07201f;
}
.hero__stage{position:relative;min-height:620px}
.hero__slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1s var(--ease),visibility 1s;
}
.hero__slide.is-active{opacity:1;visibility:visible;z-index:2}

/* blurred backdrop keeps a ~500px photo filling a 1320px frame without mush */
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(6,26,25,.94) 0%,rgba(7,32,31,.86) 42%,rgba(7,32,31,.6) 100%);
}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.85);
  transform:scale(1.18);
}
.hero__slide.is-active .hero__bg img{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.18)}to{transform:scale(1.3)}}

.hero__inner{
  position:relative;z-index:3;display:grid;grid-template-columns:1fr 560px;gap:52px;
  align-items:center;min-height:620px;padding:70px calc(var(--gutter) + 54px);
}
.hero__copy{max-width:640px}
.hero__copy .chip{background:rgba(255,255,255,.12);color:#e8ded4}
.hero__copy h1{font-size:52px;line-height:1.16;color:#fff;margin-bottom:20px}
.hero__copy p{color:#cfd8d3;margin-bottom:30px}

/* photo card stays sharp: contained at native size, never upscaled */
.hero__card{
  margin:0;border-radius:14px;overflow:hidden;background:#0a2423;
  box-shadow:0 26px 60px rgba(0,0,0,.44);
}
.hero__card img{width:100%;height:360px;object-fit:cover}

/* layered entrance, staggered like the reference */
.hero__slide.is-active .chip{animation:layer-up .8s var(--ease) .15s both}
.hero__slide.is-active h1{animation:layer-up .9s var(--ease) .35s both}
.hero__slide.is-active .hero__copy p{animation:layer-up .9s var(--ease) .55s both}
.hero__slide.is-active .hero__actions{animation:layer-up .9s var(--ease) .75s both}
.hero__slide.is-active .hero__card{animation:layer-right 1s var(--ease) .5s both}
@keyframes layer-up{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
@keyframes layer-right{from{opacity:0;transform:translateX(60px) scale(.96)}to{opacity:1;transform:none}}

.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:54px;height:56px;border-radius:10px;background:rgba(255,255,255,.14);
  color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:background .28s var(--ease),transform .28s var(--ease);
}
.hero__arrow:hover{background:var(--gold);transform:translateY(-50%) scale(1.06)}
.hero__arrow--prev{left:18px}
.hero__arrow--next{right:18px}
.hero__dots{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;
  display:flex;gap:10px;
}
.hero__dots button{
  width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.4);
  transition:background .3s,width .3s,border-radius .3s;
}
.hero__dots button.is-active{background:var(--gold);width:30px;border-radius:6px}

/* ---------------- animated counters ---------------- */
.stats__list strong{font-variant-numeric:tabular-nums}

/* ---------------- animated portfolio filtering ---------------- */
.work{transition:transform .5s var(--ease),box-shadow .35s var(--ease),opacity .45s var(--ease)}
.work.is-leaving{opacity:0;transform:scale(.86) translateY(10px);pointer-events:none}
.work.is-entering{opacity:0;transform:scale(.9)}
.filters{gap:8px}

/* ---------------- logo marquee ---------------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:18px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track li{
  list-style:none;flex:0 0 178px;height:112px;background:#fff;border-radius:8px;padding:14px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.marquee__track img{max-height:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:.3s}
.marquee__track li:hover img{filter:none;opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}

/* ---------------- testimonial fade ---------------- */
.quote__body,.quote h4,.quote__role{transition:opacity .4s var(--ease)}
.quote.is-swapping .quote__body,.quote.is-swapping h4,.quote.is-swapping .quote__role{opacity:0}

/* ---------------- decorative circle accent (demo's animate-circle) ---------------- */
.split__img,.about__media,.why__img{position:relative}
.split__img::before,.why__img::before{
  content:"";position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(177,126,81,.18),transparent 70%);
  top:-46px;left:-52px;z-index:-1;animation:float-soft 7s ease-in-out infinite;
}
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

@media (prefers-reduced-motion:reduce){
  .hero__slide.is-active .hero__bg img,
  .hero__slide.is-active .chip,.hero__slide.is-active h1,
  .hero__slide.is-active .hero__copy p,.hero__slide.is-active .hero__actions,
  .hero__slide.is-active .hero__card{animation:none !important}
  .marquee__track{animation:none !important}
  .split__img::before,.why__img::before{animation:none !important}
}

@media (max-width:1360px){
  .hero__inner{grid-template-columns:1fr 460px;gap:40px}
  .hero__copy h1{font-size:44px}
}
@media (max-width:1100px){
  .hero,.hero__stage,.hero__inner{min-height:0}
  .hero__inner{grid-template-columns:1fr;gap:34px;padding:60px calc(var(--gutter) + 40px) 70px}
  .hero__card img{height:280px}
  .hero__slide{position:absolute}
}
@media (max-width:900px){
  .hero__copy h1{font-size:32px}
  .hero__arrow{width:44px;height:46px}
  .hero__arrow--prev{left:8px}
  .hero__arrow--next{right:8px}
  .hero__card img{height:220px}
  .marquee__track li{flex-basis:140px;height:92px}
}

/* view-all button under the curated home grid */
.viewall{display:flex;justify-content:center;margin-top:46px}

/* =====================================================================
   FLUID LAYOUT SYSTEM — full-bleed bands, fluid measure, fluid type
   ---------------------------------------------------------------------
   The page used to be boxed at a fixed 1320px, so anything wider than a
   15" laptop showed a grey margin instead of content. Bands now run edge
   to edge and every band aligns its content to one shared optical column
   that grows with the viewport. Grids are track-based (auto-fit /
   auto-fill) so column counts follow the available width instead of a
   handful of hard breakpoints.

   --content      readable measure for copy-led sections
   --content-wide measure for image grids, which can take more width
   --edge         the outer padding that centres either measure
   ===================================================================== */
:root{
  --gutter:clamp(18px,3.2vw,48px);
  --content:1600px;
  --content-wide:1800px;
  --shell:var(--content);
}

/* the page is no longer a box */
.page{max-width:none;width:100%;overflow-x:clip}
.shell{max-width:none;padding:0}

/* every top-level band aligns to the same column (safe-area aware so a
   notched phone in landscape never clips text under the sensor housing) */
/* --edge is declared on the band itself, not on :root: a custom property
   substitutes its var()s where it is declared, so a band that widens its
   own --content (the image grids below) has to recompute --edge too. */
.topbar__inner,.hero__inner,.about,.services,.portfolio,.clients,.why,.contact,
.pagehero,.intro,.split,.stats,.steps,.cards,.team,.quotes,.posts,.related,
.formpage,.cta,.err,.infocards,.footer__inner,.footer__bottom-inner,
.site-header{
  --edge:max(var(--gutter),calc((100% - var(--content)) / 2));
}
.topbar__inner,.hero__inner,.about,.services,.portfolio,.clients,.why,.contact,
.pagehero,.intro,.split,.stats,.steps,.cards,.team,.quotes,.posts,.related,
.formpage,.cta,.err,.infocards,.footer__inner,.footer__bottom-inner{
  padding-inline:max(var(--edge),env(safe-area-inset-left,0px))
                 max(var(--edge),env(safe-area-inset-right,0px));
}
/* image-led sections get the wider measure */
.portfolio,.clients,.posts,.cards{--content:var(--content-wide)}

/* header card tracks the same column instead of the window edges */
.site-header{
  left:max(var(--edge),env(safe-area-inset-left,0px));
  right:max(var(--edge),env(safe-area-inset-right,0px));
}
body.has-stuck .site-header{
  padding-left:calc(max(var(--edge),env(safe-area-inset-left,0px)) + 24px);
  padding-right:calc(max(var(--edge),env(safe-area-inset-right,0px)) + 18px);
}

/* ---------------- fluid type ----------------
   One scale from a 360px phone to a 4K monitor, so headings stop needing
   a font-size override at every breakpoint. */
body{font-size:clamp(16px,.28vw + 15px,18px);line-height:1.85}
.hero__copy h1{font-size:clamp(30px,2.6vw + 14px,58px);line-height:1.14}
.pagehero h1{font-size:clamp(28px,2.1vw + 14px,50px)}
.section-head h2,.about__text h2,.testi__copy h2,.why__copy h2,
.contact__form h2,.split__copy h2,.services__head h2{
  font-size:clamp(26px,1.5vw + 15px,46px);
}
.services__copy h3{font-size:clamp(24px,1.3vw + 13px,38px)}
.cta h2{font-size:clamp(25px,1.3vw + 14px,40px)}
.formpage__aside h2{font-size:clamp(24px,1.1vw + 14px,34px)}
.err h2{font-size:clamp(26px,1.4vw + 14px,40px)}
.err__code{font-size:clamp(84px,11vw,150px)}
.footer__col h4{font-size:clamp(23px,.9vw + 15px,33px)}
.work__title{font-size:clamp(20px,.8vw + 14px,26px)}
.quote p{font-size:clamp(16px,.3vw + 14px,18px);line-height:1.7}
.quote h4{font-size:clamp(20px,.6vw + 14px,24px)}

/* copy stays readable even when the band is 1600px wide */
.about__text p,.why__copy p,.testi__copy p,.split__copy p,.cta p,
.section-head__lead,.services__copy p{max-width:64ch}

/* ---------------- track-based grids ----------------
   auto-fill for open-ended galleries (a filtered-down set keeps its card
   size); auto-fit for fixed short lists (4 steps fill the row evenly). */
.grid{
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:clamp(26px,2.2vw,40px) clamp(16px,1.6vw,29px);
}
.logos{grid-template-columns:repeat(auto-fill,minmax(min(50%,168px),1fr))}
.cards__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,1.8vw,30px)}
.team__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,1.6vw,26px)}
.steps__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:clamp(18px,1.6vw,26px)}
.quotes__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(18px,1.6vw,26px)}
.posts__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,1.8vw,30px)}
.infocards{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(18px,1.6vw,26px)}
.stats__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.footer__inner{gap:clamp(28px,2.4vw,44px) clamp(24px,2.6vw,48px)}


/* ---------------- hero: stacked slides ----------------
   Slides used to be absolutely positioned inside a stage whose min-height
   was zeroed below 1100px, which collapsed the whole hero to nothing on
   tablets and phones. Stacking them in one grid cell makes the tallest
   slide define the height at every width, with no layout shift on change. */
.hero{min-height:0;display:block}
.hero__stage{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.hero__slide{position:relative;inset:auto;grid-area:1 / 1}
.hero__inner{min-height:0}

/* ---------------- testimonials band ----------------
   Full-bleed two-tone band: each half pads out to the shared column. */
.testi__copy{
  padding-left:max(var(--gutter),calc((200% - var(--content)) / 2));
  padding-right:clamp(24px,3vw,64px);
  padding-block:clamp(40px,5vw,76px);
}
.testi__media{
  min-height:0;justify-content:center;
  padding-left:clamp(20px,3vw,52px);
  padding-right:max(var(--gutter),calc((200% - var(--content)) / 2));
  padding-block:clamp(34px,4.5vw,64px);
}
.quote{position:relative;left:auto;top:auto;width:auto;max-width:640px;margin:0;flex:1}

/* ---------------- touch ergonomics ----------------
   Hit areas reach the 44px guideline without changing what is drawn. */
.hero__dots button{position:relative}
.hero__dots button::after{content:"";position:absolute;inset:-15px}
.testi__nav button{width:38px;height:38px}
.filter{min-height:42px;display:inline-flex;align-items:center}
.lightbox__close,.lightbox__nav{min-width:44px;min-height:44px}
.oc__body{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.totop{bottom:max(26px,env(safe-area-inset-bottom,0px))}

/* horizontal scroll strip beats a wrapped pile of tabs on narrow screens */
.tabs{scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}

/* =====================================================================
   DESKTOP AND UP
   ===================================================================== */
@media (min-width:1101px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr) clamp(360px,30vw,620px);
    gap:clamp(36px,3.4vw,64px);
    min-height:min(640px,88vh);
    padding-block:clamp(56px,5vw,84px);
  }
  .about{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4vw,72px)}
  .why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,3.6vw,64px)}
  .split{gap:clamp(36px,4vw,72px)}
  .contact{grid-template-columns:clamp(300px,23vw,420px) minmax(0,1fr);gap:clamp(32px,3vw,56px)}
  .formpage{grid-template-columns:clamp(320px,24vw,440px) minmax(0,1fr);gap:clamp(32px,3vw,56px)}
  .services__grid{gap:clamp(32px,3.4vw,58px)}
}
@supports (height:1svh){
  @media (min-width:1101px){.hero__inner{min-height:min(640px,88svh)}}
}

/* very wide screens: let the bands breathe rather than stretch the type */
@media (min-width:2000px){
  :root{--content:1720px;--content-wide:1960px}
}

/* =====================================================================
   TABLET
   ===================================================================== */
@media (max-width:1100px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(26px,4vw,36px);
    padding-block:clamp(44px,6vw,60px) clamp(52px,7vw,70px);
  }
  .hero__copy{max-width:none}
  .hero__card{max-width:640px}
  .testi{grid-template-columns:1fr}
  .testi__copy,.testi__media{padding-inline:max(var(--gutter),calc((100% - var(--content)) / 2))}
  .quote{max-width:none}
  .tabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;width:auto;max-width:none;
    justify-content:flex-start;border-radius:12px;margin-bottom:clamp(28px,4vw,44px);
  }
  .tab{flex:0 0 auto;padding:0 26px}
}

/* =====================================================================
   PHONE
   ===================================================================== */
@media (max-width:900px){
  /* the header follows the reader instead of scrolling away */
  .site-header,body.has-stuck .site-header{
    position:sticky;top:0;z-index:80;padding:10px var(--gutter);
    box-shadow:0 4px 18px rgba(0,0,0,.12);animation:none;
  }
  .navwrap{background:#fff}
  .brand img,body.has-stuck .brand img{height:38px}
  .btn--quote{width:auto;height:40px;padding:0 14px}
  .hero__arrow{width:40px;height:42px;font-size:16px}
  .hero__dots{bottom:16px}
  .about__media{padding-bottom:clamp(28px,9vw,48px)}
  .about__img--float{width:44%;right:0;bottom:-14px}
  .footer__inner{padding-block:clamp(40px,8vw,56px) clamp(48px,9vw,64px)}
  .split__img::before,.why__img::before{display:none}
}

@media (max-width:620px){
  /* arrows crowd the copy at this width — dots plus swipe carry the slider */
  .hero__arrow{display:none}
  .hero__actions .btn{flex:1 1 auto;justify-content:center}
  .quote__head{gap:14px}
  .quote__badge{width:78px;height:78px}
  .quote__badge svg{width:34px;height:34px}
  .quote__mark{font-size:44px;right:16px}
  .stats__list{padding:26px 20px}
  .lightbox{padding:56px 12px}
  .lightbox__inner figcaption{font-size:16px}
  .related__list a{font-size:15px;padding:8px 16px}
  .subscribe{max-width:none}
}

@media (max-width:420px){
  .hero__actions{gap:10px}
  .hero__actions .btn{flex:1 1 100%}
  .btn{padding:14px 18px}
  .site-header{gap:8px}
  .brand img{height:34px}
  .btn--quote{display:none}
  .card__body,.post__body{padding-inline:20px}
  .step{padding:22px 20px}
  .qcard{padding:22px 20px}
  .footer__col--brand p{max-width:none}
  .subscribe{flex-wrap:wrap}
  .subscribe button{width:100%}
}

/* phones held sideways: never let the hero eat the whole viewport */
@media (max-height:540px) and (orientation:landscape){
  .hero__inner{min-height:0;padding-block:40px}
  .oc__body{padding-block:16px 24px}
  .offcanvas{width:min(360px,100%)}
}

/* a stylus or mouse gets hover states; a finger gets bigger targets */
@media (hover:none){
  .work__veil{opacity:1;background:linear-gradient(to top,rgba(6,20,17,.78),rgba(6,20,17,0) 62%)}
  .work__icon{display:none}
  .work__title,.work__icon{transform:none}
  .testi__nav button{width:42px;height:42px}
  .oc__group a{padding:13px 0}
}

/* =====================================================================
   PRINT
   ===================================================================== */
@media print{
  .topbar,.navwrap,.offcanvas,.oc-overlay,.totop,.scrollbar,.hero__arrow,
  .hero__dots,.testi__nav,.filters,.subscribe,.lightbox{display:none !important}
  body{background:#fff;font-size:12pt;line-height:1.5}
  .page{max-width:none}
  .hero__slide:not(.is-active){display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
  .card,.member,.post,.qcard,.step,.work{break-inside:avoid;box-shadow:none}
}

/* =====================================================================
   VERTICAL RHYTHM — band padding scales with the viewport
   Fixed 56–82px band padding was designed for a 1320px box; on a phone it
   wastes a third of the screen and on a 4K panel it looks pinched.
   ===================================================================== */
.pagehero{padding-block:clamp(46px,5.6vw,86px)}
.about{padding-block:clamp(40px,5vw,76px) clamp(44px,5.4vw,82px)}
.services{padding-block:clamp(40px,4.6vw,66px) clamp(46px,5.4vw,78px)}
.portfolio{padding-block:clamp(40px,4.4vw,64px) clamp(44px,5vw,72px)}
.clients{padding-block:clamp(40px,4.4vw,64px) clamp(44px,4.8vw,70px)}
.why{padding-block:clamp(40px,4.6vw,66px)}
.contact{padding-block:clamp(40px,5vw,72px) clamp(46px,5.6vw,80px)}
.intro{padding-top:clamp(36px,4vw,56px)}
.split,.steps,.cards,.team,.quotes,.posts,.formpage,.cta{
  padding-block:clamp(38px,4.2vw,60px) clamp(42px,4.6vw,64px);
}
.stats{padding-block:0 clamp(34px,4vw,54px)}
.related{padding-block:0 clamp(38px,4.4vw,64px)}
.err{padding-block:clamp(58px,8vw,110px) clamp(64px,8.6vw,120px)}
.footer__inner{padding-block:clamp(46px,5vw,82px) clamp(50px,6vw,96px)}
.footer__bottom-inner{padding-block:clamp(18px,2vw,26px)}
.section-head{margin-bottom:clamp(24px,2.6vw,34px)}
.filters{margin-bottom:clamp(26px,3.4vw,48px)}

/* higher-specificity rules from earlier in the file that the fluid grid
   would otherwise lose to */
.portfolio .grid{gap:clamp(26px,2.2vw,40px) clamp(16px,1.6vw,29px)}
.contact__person figure img{width:100%}
@media (max-width:900px){
  .totop{right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px))}
}