:root{
  --turq:#31c0c5;        /* decorative accents, and text on navy only */
  --turq-dark:#0e7a80;   /* darkened from #159da4 so white text / small text pass WCAG AA */
  --turq-tint:#dff6f6;
  --navy:#06233d;
  --navy-2:#0b3b59;
  --cream:#faf8f3;
  --ink:#162536;
  --muted:#56626a;
  --white:#fff;
  --line:#dce5e8;
  --header-h:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:4px}
.container{width:min(1160px,92%);margin:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

/* Top bar */
.topbar{background:var(--navy);color:#fff;font-size:13px}
.topbar .inner{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 24px;padding:8px 0}
.topbar a:hover{color:var(--turq)}

/* Header */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav{min-height:var(--header-h);padding:8px 0;display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo-img{width:190px;height:auto;display:block;border-radius:4px}
.site-nav{display:flex;gap:24px;font-size:14px;font-weight:800}
.site-nav a:hover{color:var(--turq-dark)}
.menu-btn{display:none;background:none;border:2px solid var(--navy);color:var(--navy);border-radius:5px;padding:9px 14px;font:inherit;font-weight:900;cursor:pointer}

.button{display:inline-block;background:var(--turq-dark);color:#fff;padding:13px 21px;border-radius:5px;font-weight:900;letter-spacing:.2px}
.button:hover{background:var(--navy)}
.button.alt{background:transparent;border:2px solid var(--navy);color:var(--navy)}
.button.alt:hover{background:var(--navy);color:#fff}

/* Hero */
.hero{background:linear-gradient(120deg,var(--cream) 0%,#fff 53%,#e9f8f8 100%);padding:70px 0 55px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:55px;align-items:center}
.kicker{display:inline-block;color:var(--turq-dark);font-weight:900;text-transform:uppercase;letter-spacing:2.5px;font-size:12px;margin-bottom:12px}
h1{font-size:clamp(40px,5.5vw,73px);line-height:.98;letter-spacing:-2.5px;margin:0 0 22px;color:var(--navy)}
h1 span{color:var(--turq-dark)}
.lead{font-size:20px;color:#4a5760;max-width:600px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.micro{font-size:13px;color:var(--muted)}
.hero-media{position:relative}
.hero-media img{display:block;width:100%;height:560px;object-fit:cover;border-radius:18px;box-shadow:0 22px 55px rgba(6,35,61,.2)}
.badge{position:absolute;right:-18px;bottom:28px;background:var(--turq-dark);color:#fff;border:7px solid #fff;border-radius:50%;width:145px;height:145px;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.1;box-shadow:0 12px 25px rgba(0,0,0,.14)}

/* Trust strip */
.trust{background:var(--navy);color:#fff;padding:0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;list-style:none;margin:0 auto;padding:0}
.trust-item{padding:24px 18px;text-align:center;border-right:1px solid rgba(255,255,255,.2)}
.trust-item:last-child{border:0}
.trust-item strong{display:block;color:#fff;font-size:15px;text-transform:uppercase}
.trust-item span{display:block;color:#bcd0dc;font-size:12px;margin-top:4px}
.trust-icon{width:48px;height:48px;border-radius:50%;background:var(--turq-dark);display:grid;place-items:center;margin:0 auto 10px;color:#fff;font-size:22px;font-weight:900}

section{padding:82px 0}
.section-head{max-width:780px;margin-bottom:40px}
.section-head h2{font-size:42px;line-height:1.08;margin:10px 0 13px;color:var(--navy)}
.section-head p{color:var(--muted);font-size:17px}

/* Story */
.story{background:#fff}
.story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
.story-image{display:block;width:100%;border-radius:16px;box-shadow:0 16px 40px rgba(6,35,61,.12)}
.story h2{font-size:42px;line-height:1.05;color:var(--navy)}
.story h2 strong{color:var(--turq-dark)}
.story-quote{border-left:5px solid var(--turq);padding:8px 0 8px 20px;font-size:19px;font-weight:800;color:var(--navy);margin:24px 0}
.story-quote p{margin:0}

/* Services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:0 8px 22px rgba(6,35,61,.04)}
.icon{width:46px;height:46px;border-radius:50%;background:var(--turq-tint);display:grid;place-items:center;font-size:21px;margin-bottom:17px}
.card h3{margin:0 0 7px;color:var(--navy);font-size:20px}
.card p{margin:0;color:var(--muted);font-size:15px}
.brush{display:inline-block;background:var(--navy);color:#fff;padding:7px 18px;transform:skew(-3deg);font-weight:900;text-transform:uppercase;letter-spacing:1px}

/* Difference */
.difference{background:var(--navy);color:#fff}
.difference .kicker{color:var(--turq)}
.difference .section-head h2{color:#fff}
.difference .section-head p{color:#c8d6df}
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.diff{border-top:4px solid var(--turq);padding:20px 10px}
.diff h3{margin:0 0 7px;color:var(--turq);font-size:18px;text-transform:uppercase}
.diff p{margin:0;color:#d3e0e6;font-size:14px}

/* Reality (square adverts shown uncropped) */
.reality{background:#eef9f9}
.reality-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.reality-panel{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.reality-panel img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.reality-panel .copy{padding:24px}
.reality-panel h3{margin:0 0 8px;color:var(--navy);font-size:25px}
.reality-panel p{color:var(--muted);margin:0}

/* Portfolio */
.portfolio{background:#fff}
.project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.project-card{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(6,35,61,.06)}
.project-card a{display:block}
.project-card img{width:100%;aspect-ratio:3/4;display:block;object-fit:cover}
.project-card figcaption{padding:14px 16px;font-size:14px;font-weight:800;color:var(--navy)}
.note{margin-top:18px;font-size:13px;color:var(--muted)}

/* Reviews - "What our customers say" (switched on in index.html) */
.reviews{background:#eef9f9}
.review-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.review{margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-top:4px solid var(--turq);border-radius:14px;padding:30px 28px 24px;box-shadow:0 8px 22px rgba(6,35,61,.05);position:relative}
.review::before{content:"\201C";position:absolute;top:6px;right:22px;font:900 72px/1 Georgia,"Times New Roman",serif;color:var(--turq-tint)}
.review-stars{color:#b57d00;font-size:18px;letter-spacing:2px;margin-bottom:12px;line-height:1}
.review p{margin:0 0 20px;font-size:17px;line-height:1.6;color:var(--ink);position:relative}
.review footer{margin-top:auto;padding:16px 0 0;border-top:1px solid var(--line);background:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.review footer strong{color:var(--navy);font-size:15px}
.review-job{background:var(--turq-tint);color:var(--turq-dark);font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px}
.reviews-more{margin:26px 0 0;font-weight:800}
.reviews-more a{color:var(--turq-dark);text-decoration:underline;text-underline-offset:3px}
/* Review switches: only data-show="yes" is displayed (see index.html) */
.reviews:not([data-show="yes" i]),
.reviews:not(:has(.review[data-show="yes" i])),
.reviews .review:not([data-show="yes" i]),
.reviews .review-stars:not([data-show="yes" i]),
.reviews .reviews-more:not([data-show="yes" i]){display:none}

/* People / adverts */
.about-ad{background:var(--cream)}
.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ad-card{margin:0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.ad-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top}
.ad-card figcaption{padding:14px 16px;font-size:13px;color:var(--muted);font-weight:700}

/* Pricing */
.pricing{background:#fff}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price{border:2px solid var(--line);border-radius:14px;background:#fff;transition:border-color .2s,box-shadow .2s}
.price:hover{border-color:#b9d9dc}
.price[open]{border-color:var(--turq-dark);box-shadow:0 12px 28px rgba(14,122,128,.12)}
.price summary{display:block;list-style:none;cursor:pointer;padding:28px 28px 22px;border-radius:12px}
.price summary::-webkit-details-marker{display:none}
.price summary:focus-visible{outline:3px solid var(--turq);outline-offset:2px}
.price-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.price h3{color:var(--navy);margin:0 0 8px;font-size:21px}
.price summary p{color:var(--muted);font-size:15px;margin:0}
.price-toggle{flex:none;position:relative;width:30px;height:30px;border-radius:50%;background:var(--turq-tint);margin-top:-2px;transition:background .2s}
.price-toggle::before,.price-toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;margin:-1.25px 0 0 -6px;background:var(--turq-dark);border-radius:2px;transition:transform .25s ease}
.price-toggle::after{transform:rotate(90deg)}
.price[open] .price-toggle{background:var(--turq-dark)}
.price[open] .price-toggle::before,.price[open] .price-toggle::after{background:#fff}
.price[open] .price-toggle::after{transform:rotate(0deg)}
.price-hint{display:inline-block;margin-top:12px;font-size:14px;font-weight:800;color:var(--turq-dark)}
.price[open] .price-hint{display:none}
.price-more{padding:0 28px 26px;animation:priceIn .25s ease}
@keyframes priceIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.price-more dl{margin:0;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:12px}
.price-more dt{font-size:13px;font-weight:900;color:var(--turq-dark)}
.price-more dd{margin:2px 0 0;font-size:15px;color:var(--ink)}
.price-note{margin:28px 0 0;font-size:17px;color:var(--navy);font-weight:700;max-width:720px}
.price-note a{color:var(--turq-dark);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.price-more{animation:none}.price-toggle::before,.price-toggle::after{transition:none}}

/* Contact */
.contact{padding:70px 0}
.cta{background:linear-gradient(110deg,var(--navy),var(--navy-2));color:#fff;border-radius:20px;padding:58px 50px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.cta .kicker{color:var(--turq)}
.cta h2{margin:0 0 8px;color:#fff;font-size:42px}
.cta p{margin:0;color:#c8d7df}
.cta-links{display:flex;flex-direction:column;gap:6px}
.cta .phone{font-size:26px;font-weight:900;color:#fff}
.cta .email{color:#c9f4f4;overflow-wrap:anywhere}

.site-footer{background:#04192b;color:#fff;padding:42px 0}
.footer-grid{display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap}
.site-footer small{color:#aec1cc}

/* Gallery viewer */
.project-card a{position:relative;cursor:zoom-in}
.project-card img{transition:transform .35s ease}
.project-card a:hover img{transform:scale(1.03)}
html.lb-open{overflow:hidden}
.lightbox{padding:0;border:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:rgba(4,18,31,.96);color:#fff;overflow:hidden}
.lightbox::backdrop{background:rgba(4,18,31,.96)}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top,0px)) 88px calc(24px + env(safe-area-inset-bottom,0px));touch-action:pan-y pinch-zoom}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;min-height:0}
.lb-img{display:block;max-width:min(1100px,100%);max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.45);transition:opacity .2s ease;user-select:none;-webkit-user-drag:none}
.lb-img.loading{opacity:.25}
.lb-img.from-right{animation:lbInR .28s ease}
.lb-img.from-left{animation:lbInL .28s ease}
@keyframes lbInR{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes lbInL{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
.lb-bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;padding:14px 4px 0;font-size:15px}
.lb-caption{font-weight:800}
.lb-count{color:#aec1cc;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .15s}
.lb-btn:hover{background:var(--turq-dark)}
.lb-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-close{top:calc(12px + env(safe-area-inset-top,0px));right:14px;width:46px;height:46px}
@media(max-width:700px){
  .lb-stage{padding:calc(62px + env(safe-area-inset-top,0px)) 10px calc(88px + env(safe-area-inset-bottom,0px))}
  .lb-img{max-height:calc(100dvh - 200px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:6px}
  .lb-prev,.lb-next{top:auto;transform:none;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
  .lb-bar{padding:12px 2px 0;font-size:14px}
}
@media(max-height:500px) and (orientation:landscape){
  .lb-stage{padding:10px 80px calc(8px + env(safe-area-inset-bottom,0px))}
  .lb-img{max-height:calc(100dvh - 54px - env(safe-area-inset-bottom,0px))}
  .lb-bar{padding-top:6px;font-size:13px}
  .lb-prev,.lb-next{top:50%;bottom:auto;transform:translateY(-50%)}
  .lb-prev{left:14px}.lb-next{right:14px}
}
@media (prefers-reduced-motion:reduce){
  .project-card img,.lb-img{transition:none}
  .project-card a:hover img{transform:none}
  .lb-img.from-right,.lb-img.from-left{animation:none}
}

/* Mobile call bar */
.callbar{display:none}

@media(max-width:850px){
  :root{--header-h:72px}
  .topbar{display:none}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 20px rgba(6,35,61,.08)}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 4%;border-top:1px solid var(--line);font-size:16px}
  .menu-btn{display:block}
  .header-call{display:none}
  .logo-img{width:150px}
  .hero-grid,.story-grid,.reality-grid{grid-template-columns:1fr}
  .hero-media img{height:420px}
  .badge{right:12px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .diff-grid,.cards,.project-grid,.ad-grid,.price-grid{grid-template-columns:1fr 1fr}
  .cta{grid-template-columns:1fr;padding:42px 28px}

  .callbar{display:grid;grid-template-columns:2fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--navy);padding:10px 4% calc(10px + env(safe-area-inset-bottom,0px));gap:10px;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
  .callbar a{display:block;text-align:center;padding:12px;border-radius:6px;font-weight:900;color:#fff}
  .callbar .call{background:var(--turq-dark)}
  .callbar .mail{border:2px solid rgba(255,255,255,.5)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:560px){
  .review-list{display:grid;grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -4%;padding:0 4% 12px;scroll-padding:0 4%;-webkit-overflow-scrolling:touch}
  .review{scroll-snap-align:start;padding:26px 22px 20px}
  .trust-grid,.diff-grid,.cards,.project-grid,.ad-grid,.price-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr 1fr;gap:12px}
  .project-card figcaption{padding:10px 12px;font-size:13px}
  .hero{padding-top:45px}
  .hero-media img{height:350px}
  h1{font-size:44px;letter-spacing:-1.5px}
  .section-head h2,.story h2,.cta h2{font-size:32px}
  section{padding:60px 0}
  .badge{right:8px;bottom:18px;width:115px;height:115px;font-size:13px;border-width:5px}
}

/* Menu fallback when JavaScript is off */
@media (scripting:none) and (max-width:850px){.site-nav{display:flex;position:static;box-shadow:none;border:0}.menu-btn{display:none}.nav{flex-wrap:wrap}}