/* =================================================================
   DDS — add-on styles
   New components (logo lockup, page hero, values, team, contact,
   buttons, work carousel, footer contact) + a full responsive audit.
   Loaded after style.css so it can refine existing rules.
   ================================================================= */

/* ---------------- Logo lockup ---------------- */
.logo{gap:11px}
.logo-img-wrap{display:inline-flex;align-items:center}
.logo .logo-img{max-height:34px;width:auto;display:block}
.logo .logo-mark-img{height:34px;width:34px;max-height:34px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(0,245,255,.35))}
.logo--light .logo-mark-img{filter:none}
.logo-word{font-weight:900;letter-spacing:.22em;font-size:14px;color:var(--white);line-height:1}
.logo--light .logo-word{color:#0A0A0F}
.logo:hover .logo-word{color:var(--cyan)}
.logo:hover .logo-mark-img{filter:drop-shadow(0 0 18px rgba(0,245,255,.6))}

/* ---------------- Nav: prevent CTA + hamburger crowding ---------------- */
@media (max-width:980px){
  .dds-nav-cta{display:none}        /* CTA lives in the mobile drawer instead */
}
.mobile-drawer .dds-drawer-cta{margin-top:18px}

/* ---------------- Page hero / banner (clears the fixed nav) ---------------- */
.page-hero{
  position:relative;
  padding:calc(96px + 6vw) 0 clamp(48px,7vw,90px);
  overflow:hidden;
  background:#0c0a16 center/cover no-repeat;
  border-bottom:1px solid var(--stroke);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 80% at 85% 20%,rgba(107,0,182,.45),transparent 60%),
    radial-gradient(50% 60% at 10% 100%,rgba(0,245,255,.20),transparent 60%);
}
.page-hero-overlay{position:absolute;inset:0;z-index:1;background:rgba(8,7,14,var(--ph-overlay,.7))}
.page-hero.has-image .page-hero-overlay{background:linear-gradient(90deg,rgba(8,7,14,calc(var(--ph-overlay,.7) + .1)) 0%,rgba(8,7,14,var(--ph-overlay,.7)) 60%,rgba(8,7,14,calc(var(--ph-overlay,.7) - .25)) 100%)}
.page-hero:not(.has-image) .page-hero-overlay{background:transparent}
/* Blend an uploaded banner image INTO the page: fade the top (under the fixed
   nav) and, crucially, the bottom edge down to the page background so the image
   melts into the content below instead of ending in a hard rectangle. */
.page-hero.has-image::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,15,.55) 0%,
    rgba(10,10,15,0) 20%,
    rgba(10,10,15,0) 58%,
    rgba(10,10,15,.78) 88%,
    var(--bg) 100%);
}
.page-hero.has-image{border-bottom-color:transparent}
/* Hero images cover-scale on every device; never let one force a sideways scroll. */
.page-hero{background-size:cover;background-position:center}
/* Inherit the Hero's container behaviour: this element also carries .wrap, so
   no extra max-width here — it fills .wrap (var(--dds-container)) and aligns to
   the same left edge as the Hero. Only z-index/stacking is page-hero-specific. */
.page-hero-inner{position:relative;z-index:2}
.page-hero.ph-center .page-hero-inner{max-width:820px;margin:0 auto;text-align:center}
.page-hero h1{font-size:clamp(38px,5.4vw,72px);color:#fff;margin-top:18px}
.page-hero .grad{background:linear-gradient(95deg,#00F5FF,#5BB8FF 45%,#9B30FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero-sub{color:#c9c9d6;font-size:clamp(15px,1.4vw,18px);max-width:560px;margin:22px 0 0;line-height:1.6}
.page-hero.ph-center .page-hero-sub{margin-left:auto;margin-right:auto}

/* Give non-DDS pages (single posts, plain pages) nav clearance too. */
/* NOTE: archives (.dds-archive) and single posts (.single-wrap) keep their own
   top padding from detail.css — do NOT zero it here or content slides under the
   fixed nav. Only the DDS-section render path (a page-hero leads, which already
   clears the nav) needs no extra offset. */
body.dds-needs-offset #main{padding-top:84px}

/* When an archive leads with a page-hero banner, it already clears the nav —
   drop the archive's own large top padding so spacing stays balanced. */
.dds-archive--bannered{padding-top:clamp(56px,7vw,96px)!important}
.page-hero + .dds-archive--bannered{padding-top:clamp(48px,6vw,84px)!important}

/* ---------------- DDS buttons section ---------------- */
.dds-buttons{display:flex;flex-wrap:wrap;gap:14px}
.dds-buttons.align-center{justify-content:center}
.dds-buttons.align-right{justify-content:flex-end}
.btn-outline{color:#fff;border-color:rgba(0,245,255,.45);background:transparent}
.btn-outline:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 22px -6px rgba(0,245,255,.6)}
.btn .btn-ico{display:inline-flex;align-items:center}
.btn .btn-ico svg{width:16px;height:16px}

/* ---------------- Rich text block ---------------- */
.dds-richtext .rt-inner{max-width:820px}
.dds-richtext.rt-center .rt-inner{margin:0 auto;text-align:center}
.rt-body{margin-top:22px;color:#cfcfdc;font-size:clamp(15px,1.3vw,17px);line-height:1.7}
.rt-body p{color:#cfcfdc;margin-bottom:16px}
.rt-body p:last-child{margin-bottom:0}
.rt-body strong{color:#fff}

/* ---------------- Values / feature grid ---------------- */
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.value-card{border:1px solid var(--stroke);border-radius:var(--dds-radius);padding:30px 26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(12px);transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}
.value-card:hover{border-color:rgba(0,245,255,.4);box-shadow:0 24px 60px -30px rgba(0,245,255,.4);transform:translateY(-3px)}
.value-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.25);color:var(--cyan);margin-bottom:20px}
.value-card h3{font-size:20px;font-weight:700;color:#fff}
.value-card p{margin-top:10px;font-size:14px;color:var(--grey);line-height:1.55}

/* ---------------- Team ---------------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.team-card{border:1px solid var(--stroke);border-radius:var(--dds-radius);padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));text-align:center;transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;display:block}
.team-card:hover{border-color:rgba(0,245,255,.4);transform:translateY(-3px);box-shadow:0 24px 60px -30px rgba(0,245,255,.4)}
.team-photo{width:104px;height:104px;border-radius:50%;margin:0 auto 18px;background:#16121f center/cover no-repeat;border:1px solid var(--stroke);display:flex;align-items:center;justify-content:center;overflow:hidden}
.team-photo.is-placeholder{background:conic-gradient(from 200deg,rgba(0,245,255,.4),rgba(155,48,255,.5),rgba(45,0,87,.4),rgba(0,245,255,.4))}
.team-initials{font-size:38px;font-weight:900;color:#fff;opacity:.85}
.team-card h3{font-size:18px;font-weight:700;color:#fff}
.team-role{display:block;margin-top:4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.team-card p{margin-top:12px;font-size:13.5px;color:var(--grey);line-height:1.55}

/* ---------------- Contact info ---------------- */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.contact-card{border:1px solid var(--stroke);border-radius:var(--dds-radius);padding:26px 22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01));display:flex;flex-direction:column;gap:8px}
.contact-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.25);color:var(--cyan);margin-bottom:6px}
.contact-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey-2);font-weight:600}
.contact-value{font-size:16px;color:#fff;font-weight:600;word-break:break-word}
a.contact-value:hover{color:var(--cyan)}
.contact-hours{margin-top:30px;color:var(--grey);font-size:14px}

/* ---------------- Form / embed ---------------- */
.form-embed-inner{max-width:760px}
.form-embed-intro{margin-top:16px;color:var(--grey);font-size:15px;line-height:1.6}
.form-embed-slot{margin-top:28px}
.form-embed-slot input[type=text],.form-embed-slot input[type=email],.form-embed-slot input[type=tel],.form-embed-slot textarea,.form-embed-slot select{
  width:100%;background:rgba(255,255,255,.03);border:1px solid var(--stroke);border-radius:12px;
  padding:14px 16px;color:#fff;font-family:inherit;font-size:15px;margin-bottom:14px}
.form-embed-slot textarea{min-height:140px;resize:vertical}
.form-embed-slot input:focus,.form-embed-slot textarea:focus{outline:none;border-color:rgba(0,245,255,.5);box-shadow:0 0 0 3px rgba(0,245,255,.12)}
.form-embed-empty{color:var(--grey-2);font-style:italic}

/* ---------------- Work carousel (homepage only) ---------------- */
.work-carousel{position:relative}
.work-carousel-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.work-carousel-viewport::-webkit-scrollbar{display:none}
.work-carousel-viewport.is-grabbing{cursor:grabbing}
.work-carousel .work-track{grid-template-columns:none;display:flex;gap:22px;width:max-content}
.work-carousel .work-track .work-card{scroll-snap-align:start;flex:0 0 clamp(280px,28vw,360px)}
.work-carousel-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:26px}
.wc-btn{width:50px;height:50px;border-radius:50%;border:1px solid var(--stroke);background:rgba(255,255,255,.03);color:#fff;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,color .3s ease,opacity .3s ease}
.wc-btn:hover{background:var(--cyan);color:#001318;border-color:var(--cyan)}
.wc-btn:disabled{opacity:.35;cursor:default}
.wc-btn:disabled:hover{background:rgba(255,255,255,.03);color:#fff;border-color:var(--stroke)}

/* ---------------- Footer contact block ---------------- */
.footer-contact{margin-top:24px}
.footer-contact h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#fff;font-weight:600;margin-bottom:12px}
.footer-contact .fc-line{font-size:14px;color:var(--grey);margin-bottom:6px;line-height:1.5}
.footer-contact a:hover{color:var(--cyan)}

/* =================================================================
   RESPONSIVE AUDIT — refinements across every breakpoint.
   Base theme already handles 1200/1024/768; we add ultrawide, large
   desktop, small-tablet and small-phone, and cover the new components.
   ================================================================= */

/* Ultra-wide: cap the line length, keep the design centered. */
@media (min-width:1700px){
  .wrap{max-width:min(var(--dds-container),1480px)}
}
@media (min-width:2200px){
  html{font-size:calc(var(--dds-base) + 2px)}
  .wrap{max-width:1560px}
}

/* Large desktop / small desktop. */
@media (max-width:1200px){
  .values-grid,.team-grid,.contact-grid{grid-template-columns:repeat(3,1fr)}
}

/* Tablet landscape. */
@media (max-width:1024px){
  .dds-section{padding:clamp(70px,9vw,110px) 0}
  .values-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding-top:calc(88px + 5vw)}
  .work-carousel-nav{justify-content:center}
}

/* Tablet portrait / large phone. */
@media (max-width:768px){
  .values-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr 1fr}
  .dds-buttons{justify-content:flex-start}
  .work-carousel .work-track .work-card{flex-basis:78vw}
  .page-hero-inner{max-width:100%}
}

/* Small phone. */
@media (max-width:520px){
  .wrap{padding:0 16px}
  .values-grid,.team-grid,.contact-grid{grid-template-columns:1fr}
  .dds-buttons .btn{width:100%;justify-content:center}
  .work-carousel .work-track .work-card{flex-basis:86vw}
  .page-hero h1{font-size:clamp(30px,9vw,40px)}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .foot-bar{flex-direction:column;gap:10px;text-align:center}
  .wc-btn{width:44px;height:44px}
}

/* Guard against any element forcing horizontal scroll. */
img,video,iframe,table,pre{max-width:100%}
.form-embed-slot iframe{width:100%}

/* ===================================================================
   BLOG POST LAYOUT + AD SLOTS (AdSense / Ad Manager ready)
   Additive: with no sidebar ad, .post-main behaves exactly like the old
   single-column post. A sidebar ad turns on a responsive rail that stacks
   under the article on tablet / mobile.
   =================================================================== */
.post-body{position:relative}
.post-main{max-width:760px;margin:0 auto;min-width:0}
.post-body.has-rail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,56px);align-items:start;justify-content:center}
@media (min-width:1080px){
  .post-body.has-rail{grid-template-columns:minmax(0,760px) 300px;gap:64px}
  .post-body.has-rail .post-main{max-width:none;margin:0} /* fill the grid column, hug the rail */
  .post-rail{position:sticky;top:110px}
}
.post-rail{min-width:0}

/* --- Ad slot shell --- */
.dds-ad{margin:44px auto;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dds-ad--incontent{margin:48px auto}
.dds-ad--endofarticle{margin:56px auto 0}
.dds-ad--sidebar{margin:0}
.dds-ad__tag{font-family:var(--mono,"SFMono-Regular",Menlo,Consolas,monospace);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2,#5a5a6a);font-weight:600}
.dds-ad__unit{width:100%;max-width:100%;overflow:hidden;display:flex;justify-content:center}
.dds-ad__unit iframe,.dds-ad__unit ins,.dds-ad__unit img{max-width:100%}

/* --- Labelled placeholder (shown until real code is pasted) --- */
.dds-ad.is-placeholder .dds-ad__ph{
  width:100%;
  border:1px dashed rgba(0,245,255,.32);
  border-radius:16px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 14px,transparent 14px 28px),
    linear-gradient(180deg,rgba(0,245,255,.04),rgba(155,48,255,.03));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:30px 22px;min-height:120px;
}
.dds-ad__ph-title{font-size:14px;font-weight:700;color:#e9e9f2;letter-spacing:.02em}
.dds-ad__ph-hint{font-family:var(--mono,Menlo,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan,#00F5FF)}
.dds-ad__ph-note{font-size:12px;color:var(--grey-2,#5a5a6a);max-width:46ch;line-height:1.5}
/* In-content + end-of-article placeholders read as wide banners; sidebar as a box. */
.dds-ad--incontent.is-placeholder .dds-ad__ph,
.dds-ad--endofarticle.is-placeholder .dds-ad__ph{min-height:120px}
.dds-ad--sidebar.is-placeholder .dds-ad__ph{min-height:250px}

@media (max-width:520px){
  .dds-ad{margin:36px auto}
  .dds-ad.is-placeholder .dds-ad__ph{padding:24px 16px}
}

/* ===================================================================
   MEDIA + TEXT, CONTACT MAP, and the on-brand PLACEHOLDER scene system.
   Image-enabled sections cover-scale on every device. Until a real photo
   is uploaded (replace / remove / crop all work from the builder), an
   intentional branded placeholder is shown.
   =================================================================== */

/* --- Branded "scene" backgrounds (used for empty image placeholders) --- */
.scene-team{background:
  radial-gradient(60% 80% at 22% 18%,rgba(0,245,255,.34),transparent 60%),
  radial-gradient(70% 90% at 86% 30%,rgba(155,48,255,.5),transparent 62%),
  radial-gradient(90% 80% at 60% 120%,rgba(45,0,87,.85),transparent 70%),
  linear-gradient(160deg,#141029,#0a0a0f 70%)}
.scene-office{background:
  radial-gradient(50% 70% at 80% 12%,rgba(0,245,255,.3),transparent 58%),
  radial-gradient(70% 90% at 12% 60%,rgba(107,0,182,.55),transparent 62%),
  radial-gradient(80% 70% at 60% 120%,rgba(45,0,87,.7),transparent 70%),
  linear-gradient(150deg,#0e0b1f,#0a0a0f 72%)}
.scene-tech{background:
  conic-gradient(from 210deg at 72% 30%,rgba(0,245,255,.4),rgba(155,48,255,.55),rgba(45,0,87,.7),rgba(0,245,255,.4)),
  linear-gradient(150deg,#0b0a16,#0a0a0f)}
.scene-city{background:
  radial-gradient(60% 80% at 78% 80%,rgba(0,245,255,.28),transparent 60%),
  radial-gradient(70% 90% at 18% 18%,rgba(155,48,255,.42),transparent 60%),
  linear-gradient(180deg,#120a26,#0a0a0f 78%)}
.scene-warm{background:
  radial-gradient(60% 80% at 20% 20%,rgba(0,245,255,.26),transparent 58%),
  radial-gradient(70% 90% at 84% 40%,rgba(155,48,255,.46),transparent 60%),
  linear-gradient(160deg,#160c26,#0a0a0f 74%)}
.scene-map{background:
  radial-gradient(60% 60% at 50% 46%,rgba(0,245,255,.22),transparent 60%),
  linear-gradient(160deg,#0d0b1c,#0a0a0f)}
.scene-map::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 46px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent 80%)}

/* --- Media + text two-column block --- */
.dds-media-text .mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:center}
.dds-media-text .mt-copy .rt-body{margin-top:22px;font-size:17px;line-height:1.7;color:#cfcfdc}
.dds-media-text .mt-copy .rt-body p{color:#cfcfdc;margin:0 0 16px}
.dds-media-text .mt-copy .rt-body p:last-child{margin-bottom:0}
.dds-media-text.mt-img-left .mt-figure{order:-1}

.dds-fig{position:relative;width:100%;height:clamp(320px,38vw,460px);border-radius:22px;overflow:hidden;border:1px solid var(--stroke,rgba(255,255,255,.08));background-size:cover;background-position:center;box-shadow:0 40px 90px -50px rgba(0,245,255,.4)}
.dds-fig.is-placeholder::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.014) 22px 23px);pointer-events:none}
.dds-fig__bloom{position:absolute;border-radius:50%;filter:blur(46px);opacity:.7;pointer-events:none}
.dds-fig__bloom.a{width:42%;height:70%;left:8%;bottom:-10%;background:radial-gradient(circle,rgba(0,245,255,.4),transparent 70%)}
.dds-fig__bloom.b{width:46%;height:80%;right:4%;top:-12%;background:radial-gradient(circle,rgba(155,48,255,.5),transparent 70%)}
.dds-fig__tag{position:absolute;right:14px;bottom:12px;z-index:6;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(223,250,255,.72);background:rgba(8,8,14,.5);border:1px solid rgba(0,245,255,.25);backdrop-filter:blur(6px);padding:5px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:7px}
.dds-fig__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan,#00F5FF);box-shadow:0 0 8px var(--cyan,#00F5FF)}

/* --- Contact map panel --- */
.dds-map{position:relative;width:100%;min-height:clamp(320px,40vw,440px);margin-top:clamp(34px,4vw,56px);border-radius:22px;overflow:hidden;border:1px solid var(--stroke,rgba(255,255,255,.08));background-size:cover;background-position:center}
.dds-map__pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:6;width:54px;height:54px}
.dds-map__pin .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan,#00F5FF);animation:ddsPinPulse 2.2s ease-out infinite}
.dds-map__pin .dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--cyan,#00F5FF);box-shadow:0 0 18px var(--cyan,#00F5FF)}
@keyframes ddsPinPulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.dds-map__pin .ring{animation:none}}
.dds-map__addr{position:absolute;left:24px;bottom:24px;z-index:6;padding:16px 20px;border-radius:14px;background:rgba(8,8,14,.6);backdrop-filter:blur(10px);border:1px solid var(--stroke,rgba(255,255,255,.08))}
.dds-map__addr .k{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan,#00F5FF);font-weight:600}
.dds-map__addr .v{display:block;font-size:15px;color:#fff;font-weight:600;margin-top:6px}

/* --- Responsive --- */
@media (max-width:900px){
  .dds-media-text .mt-grid{grid-template-columns:1fr;gap:36px}
  .dds-media-text .mt-figure,.dds-media-text.mt-img-left .mt-figure{order:-1}
}

/* ===================================================================
   MORE IMAGE SLOTS — Work card placeholders, homepage About feature
   photo, and the Contact form side image. All editable + responsive.
   =================================================================== */

/* --- Work card image placeholder (empty state of .thumb) --- */
.thumb.is-ph{position:relative}
.thumb-ph-tag{position:absolute;right:12px;bottom:12px;z-index:3;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(223,250,255,.78);background:rgba(8,8,14,.55);border:1px solid rgba(0,245,255,.3);backdrop-filter:blur(6px);padding:5px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:7px}
.thumb-ph-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan,#00F5FF);box-shadow:0 0 8px var(--cyan,#00F5FF)}

/* --- Homepage About feature photo (behind the floating stat cards) --- */
.about-visual .about-photo{position:absolute;inset:0;border-radius:22px;overflow:hidden;border:1px solid var(--stroke,rgba(255,255,255,.08));background-size:cover;background-position:center;box-shadow:0 40px 90px -50px rgba(0,245,255,.4)}
.about-visual .about-photo.is-placeholder::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.014) 22px 23px);pointer-events:none}
.about-visual .float-card{z-index:2}

/* --- Contact form + side image --- */
.dds-form-embed .form-embed-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,4vw,56px);align-items:center}
.dds-form-embed .form-embed-inner{min-width:0}
.dds-form-embed .form-embed-figure{min-width:0}
@media (max-width:900px){
  .dds-form-embed .form-embed-grid{grid-template-columns:1fr;gap:36px}
  .dds-form-embed .form-embed-figure{order:-1}
}

/* ============================================================
   FIX (v1.5.0) — Work & Services page-hero "cut-off" banner.
   ------------------------------------------------------------
   Root cause: these two pages place a Work/Services card grid
   (.dds-archive--bannered) directly UNDER the page-hero. The shared hero
   faded its lower ~42% (gradient stops 58%→100%) to the page background and
   carried up to 90px of solid-bg bottom padding, leaving a tall empty black
   band beneath the banner copy — the reported "cut-off". The banner image was
   not actually missing; it was hidden by that fade.

   Fix: scope STRICTLY to these pages via the `dds-grid-hero` body class
   (added in inc/setup.php only when a work-grid/services-grid section is
   present), so About / Contact / Blog heroes are untouched. Keep the banner
   image visible almost to the bottom and blend only the final slice into the
   cards, and trim the dead bottom padding. Responsive: padding uses clamp()
   and the existing mobile rule still applies. */
.dds-grid-hero .page-hero.has-image{
  padding-bottom:clamp(64px,9vw,128px);
}
.dds-grid-hero .page-hero.has-image::after{
  background:linear-gradient(180deg,
    rgba(10,10,15,.42) 0%,
    rgba(10,10,15,0) 24%,
    rgba(10,10,15,0) 80%,
    var(--bg) 100%);
}
/* No gap/seam where the hero blends into the grid below. */
.dds-grid-hero .page-hero.has-image + .dds-archive--bannered{
  margin-top:0;
}
/* Tablet & mobile: keep the banner generous but not oversized. */
@media (max-width:980px){
  .dds-grid-hero .page-hero.has-image{padding-bottom:clamp(48px,8vw,96px)}
}
@media (max-width:560px){
  .dds-grid-hero .page-hero.has-image{padding-bottom:clamp(40px,11vw,72px)}
}

/* ============================================================
   FEATURE (v1.5.0) — Marquee strip editable text colour.
   The Marquee section now exposes a "Text colour" field. When set it applies
   to every word in that strip (top and bottom homepage marquees are separate
   section instances, so each is controlled independently). When left blank the
   original alternating white / cyan defaults are preserved. */
.marquee[data-mq-color] .marquee-item span:not(.diamond){color:var(--mq-color)}
.marquee[data-mq-color] .marquee-item .alt{text-shadow:0 0 18px color-mix(in srgb,var(--mq-color) 38%,transparent)}