/* DNA V2: visual depth, blueprint linework and floating WhatsApp. */
.hero-visual {
  background-image: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 48%, rgba(0,0,0,.18) 100%), var(--hero, linear-gradient(transparent,transparent)), url('/public/DNA/assets/images/dna-hero-concept-v3.jpg');
  background-color: #111;
  opacity: .96;
}
.feature-frame { position: relative; overflow: hidden; }
.feature-frame.concept-image {
  background-image: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72)), url('/public/DNA/assets/images/dna-about-detail-v3.jpg');
  background-size: cover;
  background-position: center;
}
.feature-frame.has-image {
  background-image: linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)), var(--about, linear-gradient(transparent,transparent)), url('/public/DNA/assets/images/dna-about-detail-v3.jpg');
  background-size:cover;
  background-position:var(--about-position,center);
}
.concept-label { position:absolute; left:22px; bottom:20px; color:#fff; text-transform:uppercase; letter-spacing:.16em; font-size:10px; text-shadow:0 1px 8px #000; }
.blueprint-stage { position:relative; overflow:hidden; }
.blueprint-stage > .shell { position:relative; z-index:2; }
.blueprint { position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.62; }
.blueprint::before,.blueprint::after,.blueprint span { content:""; position:absolute; display:block; }
.blueprint-hero::before { width:min(58vw,920px); aspect-ratio:1; border:1px solid rgba(185,147,86,.3); border-radius:50%; right:-22vw; top:9%; }
.blueprint-hero::after { height:100%; width:1px; background:rgba(255,255,255,.1); left:50%; top:0; }
.blueprint-hero span:nth-child(1) { width:72vw; height:1px; background:rgba(255,255,255,.11); left:28%; top:46%; transform:rotate(-25deg); transform-origin:left; }
.blueprint-hero span:nth-child(2) { width:46vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.1); border-radius:50%; right:7%; top:23%; }
.blueprint-hero span:nth-child(3) { height:50%; width:32%; right:0; bottom:0; border-left:1px solid rgba(185,147,86,.28); border-top:1px solid rgba(185,147,86,.28); }
.blueprint-projects::before { width:620px; aspect-ratio:1; border:1px solid rgba(185,147,86,.24); border-radius:50%; right:-280px; top:-150px; }
.blueprint-projects::after { width:900px; height:1px; background:rgba(185,147,86,.25); right:-170px; top:44%; transform:rotate(-28deg); }
.blueprint-projects span:nth-child(1) { width:36%; height:70%; right:7%; bottom:-20%; border:1px solid rgba(255,255,255,.08); }
.blueprint-projects span:nth-child(2) { width:1px; height:100%; background:rgba(255,255,255,.07); left:33%; top:0; }
.blueprint-references::before { width:44vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.09); border-radius:50%; left:-18vw; top:-30%; }
.blueprint-references::after { width:75vw; height:1px; background:rgba(185,147,86,.22); left:-10%; bottom:22%; transform:rotate(18deg); }
.blueprint-contact::before { width:min(54vw,780px); aspect-ratio:1; border:1px solid rgba(185,147,86,.3); border-radius:50%; right:-18%; top:-55%; }
.blueprint-contact::after { width:70%; height:1px; background:rgba(255,255,255,.1); right:-10%; top:35%; transform:rotate(-18deg); }
.whatsapp-float { position:fixed; z-index:90; right:22px; bottom:22px; display:flex; align-items:center; gap:10px; min-height:54px; padding:9px 17px 9px 10px; border-radius:999px; background:#25d366; color:#07120b; text-decoration:none; font-size:12px; font-weight:800; letter-spacing:.04em; box-shadow:0 12px 35px rgba(0,0,0,.4); transition:transform .2s, box-shadow .2s; }
.whatsapp-float:hover { transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,0,0,.5); }
.whatsapp-float svg { width:34px; height:34px; fill:currentColor; flex:0 0 auto; }
.hero-video { opacity:.48; }
.project-card.image-missing { min-height:300px; background:linear-gradient(145deg,#1c1c1c,#090909); }
.section-light { background:#090909; color:#f7f6f2; }
.section-light p { color:#bdb9b1; }
.section-light .eyebrow.dark { color:#b99356; }
.section-light :focus-visible { outline-color:#fff; }
.button-light { background:#b99356; border-color:#b99356; color:#080808; }
.client-logo { background:#090909; border-color:rgba(255,255,255,.18); }
.client-logo img { padding:4px; filter:drop-shadow(0 1px 1px rgba(255,255,255,.18)); mix-blend-mode:normal; }
/* Defensive grid in case an older base stylesheet remains in a hosting cache. */
.client-grid { display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:10px!important; margin-top:34px!important; align-items:stretch; }
.client-logo { width:100%; min-width:0; aspect-ratio:1/1; display:grid!important; place-items:center; padding:18px; overflow:hidden; box-sizing:border-box; }
.client-logo img { display:block; width:auto; height:auto; max-width:calc(100% * var(--logo-scale, 1)); max-height:calc(100% * var(--logo-scale, 1)); object-fit:contain; margin:auto; transform:translate(var(--logo-offset-x, 0px), var(--logo-offset-y, 0px)); }
a.client-logo { text-decoration:none; }
#clients.section { padding-top:clamp(64px,7vw,100px); padding-bottom:clamp(64px,7vw,100px); }
.hero-video-label { position:absolute; z-index:4; top:calc(var(--header) + 22px); left:max(20px,calc((100vw - 1480px)/2)); color:#d5bd96; text-transform:uppercase; letter-spacing:.16em; font-size:9px; }
.impact-strip { position:relative; z-index:auto; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid rgba(255,255,255,.18); background:rgba(7,7,7,.7); backdrop-filter:blur(10px); }
.impact-strip > div,.impact-strip > a { min-width:0; min-height:116px; padding:20px clamp(16px,2.6vw,48px); border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; }
.impact-strip > :last-child { border-right:0; }
.impact-strip span { color:#c7c3bb; text-transform:uppercase; letter-spacing:.1em; font-size:clamp(8px,.65vw,11px); font-weight:700; }
.impact-strip strong { margin-top:10px; color:#fff; font-size:clamp(28px,2.7vw,48px); line-height:.85; letter-spacing:-.035em; }
.impact-strip strong small { font-size:.38em; letter-spacing:.04em; }
.impact-strip a { align-items:center; justify-content:center; text-align:center; background:rgba(185,147,86,.1); transition:background .2s; }
.impact-strip a:hover { background:rgba(185,147,86,.22); }
.impact-strip a strong { text-transform:uppercase; font-size:clamp(22px,2vw,34px); }
.video-help { display:flex; justify-content:space-between; gap:18px; padding:12px 14px; border-top:1px solid rgba(255,255,255,.14); color:#aaa; text-transform:uppercase; letter-spacing:.1em; font-size:9px; }
.video-help a { color:#d5bd96; }
.video-frame video { background:#050505; }
.interview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:42px; }
.interview-card { min-width:0; border:1px solid rgba(255,255,255,.16); background:rgba(7,7,7,.82); }
.interview-copy { padding:clamp(22px,3vw,38px); min-height:190px; }
.interview-copy h3,.interview-coming h3 { margin:.35em 0; font-size:clamp(28px,3vw,48px); line-height:.96; }
.interview-copy p:last-child,.interview-coming p:last-child { color:#aaa69e; max-width:58ch; }
.interview-card .video-frame { border:0; border-top:1px solid rgba(255,255,255,.14); }
.interview-card video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#050505; }
.interview-coming { min-height:100%; display:grid; align-items:end; padding:clamp(28px,4vw,54px); background-image:radial-gradient(circle at 83% 20%,transparent 0 24%,rgba(185,147,86,.34) 24.2% 24.5%,transparent 24.7%),linear-gradient(126deg,transparent 0 58%,rgba(255,255,255,.1) 58.1% 58.25%,transparent 58.35%); }
.coming-number { display:block; margin:30px 0; color:#b99356; font-size:clamp(72px,10vw,150px); line-height:.8; font-weight:700; }

/* Continue the DNA blueprint footprint through the complete dark site. */
.section,.proposal-reserve { position:relative; overflow:hidden; isolation:isolate; }
.section > .shell,.proposal-reserve > .shell { position:relative; z-index:2; }
.section::before,.proposal-reserve::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5; background-image:radial-gradient(circle at 92% 24%,transparent 0 16%,rgba(185,147,86,.34) 16.1% 16.25%,transparent 16.35%),linear-gradient(115deg,transparent 0 63%,rgba(255,255,255,.11) 63.05% 63.12%,transparent 63.2%),linear-gradient(90deg,transparent 0 24.9%,rgba(255,255,255,.07) 25%,transparent 25.1% 74.9%,rgba(255,255,255,.07) 75%,transparent 75.1%); }
.section:nth-of-type(even)::before { transform:scaleX(-1); }

/* Engineering-drawing corner registration marks, added on top of the existing blueprint layer. */
.section,.proposal-reserve,.hero { position:relative; }
.section .shell::before,.proposal-reserve .shell::before,.hero-content::before {
  content:"";
  position:absolute;
  top:0; left:0;
  width:26px; height:26px;
  border-top:1px solid rgba(185,147,86,.4);
  border-left:1px solid rgba(185,147,86,.4);
  pointer-events:none;
  z-index:1;
}
.section .shell::after,.proposal-reserve .shell::after,.hero-content::after {
  content:"";
  position:absolute;
  bottom:0; right:0;
  width:26px; height:26px;
  border-bottom:1px solid rgba(185,147,86,.4);
  border-right:1px solid rgba(185,147,86,.4);
  pointer-events:none;
  z-index:1;
}
.section .shell,.proposal-reserve .shell,.hero-content { position:relative; }

/* Fine dimension-line ticks along the top edge of each dark section — subtle technical-drawing texture. */
.section-deep::after,.owners-section::after {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background-image:repeating-linear-gradient(90deg, rgba(185,147,86,.3) 0 1px, transparent 1px 48px);
  opacity:.6;
  pointer-events:none;
  z-index:1;
}
@media (max-width:680px) {
  .section .shell::before,.section .shell::after,.proposal-reserve .shell::before,.proposal-reserve .shell::after,.hero-content::before,.hero-content::after { width:16px; height:16px; }
}

.proposal-reserve::before { background-image:radial-gradient(circle at 12% 45%,transparent 0 22%,rgba(185,147,86,.25) 22.1% 22.25%,transparent 22.35%),linear-gradient(24deg,transparent 0 54%,rgba(255,255,255,.075) 54.05% 54.12%,transparent 54.2%); }
@media (max-width:680px) {
  .blueprint { opacity:.34; }
  .whatsapp-float { right:14px; bottom:14px; width:54px; padding:10px; justify-content:center; }
  .whatsapp-float span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .whatsapp-float svg { width:33px; height:33px; }
  .hero-video-label { left:14px; top:calc(var(--header) + 17px); }
  .hero { display:block; min-height:0; }
  .impact-strip { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:0; }
  .impact-strip > div,.impact-strip > a { min-height:104px; padding:16px; border-bottom:1px solid rgba(255,255,255,.14); }
  .impact-strip > a { grid-column:1/-1; grid-row:3; min-height:88px; }
  .impact-strip strong { font-size:32px; }
  .video-help { align-items:flex-start; flex-direction:column; }
  .section::before,.proposal-reserve::before { opacity:.25; }
  .client-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .client-logo { aspect-ratio:4/3; padding:9px; }
  .interview-grid { grid-template-columns:1fr; gap:18px; }
  .interview-copy { min-height:0; }
}
@media (min-width:681px) and (max-width:1050px) { .client-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .whatsapp-float,.button,.project-card img { transition:none; } }

/* Keep the floating WhatsApp button from sitting on top of the footer credit line. */
.footer-layout { padding-right:190px; }
@media (max-width:1050px) { .footer-layout { padding-right:0; padding-bottom:80px; } }

/* Client logo click-through dialog. */
.client-logo { cursor:pointer; }
.client-dialog-overlay { position:fixed; inset:0; z-index:210; background:rgba(4,4,4,.88); display:flex; align-items:center; justify-content:center; padding:20px; }
.client-dialog-overlay[hidden] { display:none; }
.client-dialog { position:relative; width:min(92vw,520px); background:#0c0c0c; border:1px solid rgba(255,255,255,.18); padding:clamp(28px,4vw,44px); }
.client-dialog h3 { margin:6px 0 16px; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; }
.client-dialog p { color:#bdb9b1; line-height:1.7; margin:0 0 24px; }
.client-dialog-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer; }
.client-dialog-close:hover { border-color:#fff; }
.client-dialog [data-client-dialog-visit][hidden] { display:none; }
.owner-contact { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

.red-dot { color:#d1332b; }

/* Hand-drawn dimension/sketch clusters, placed sparingly in a few signature spots. */
.dimension-sketch { position:absolute; z-index:1; pointer-events:none; width:220px; height:auto; }
.dimension-sketch-hero { top:120px; right:6%; opacity:.85; }
.dimension-sketch-about { top:24px; right:2%; width:200px; opacity:.9; }
.dimension-sketch-contact { bottom:40px; left:4%; opacity:.8; }
.dimension-sketch-projects { top:60px; left:3%; opacity:.75; }
.dimension-sketch-showroom { top:40px; right:4%; opacity:.75; }
.dimension-sketch-timelapse { bottom:20px; left:3%; opacity:.75; }
.dimension-sketch-clients { top:16px; right:2%; width:200px; opacity:.85; }
.dimension-sketch-process { top:30px; right:3%; opacity:.75; }
.dimension-sketch-video { top:16px; left:2%; opacity:.7; }
.dimension-sketch-references { top:50px; right:5%; opacity:.75; }
.dimension-sketch-owners { top:24px; right:2%; opacity:.75; }
@media (max-width:900px) { .dimension-sketch { display:none; } }

/* Lines draw themselves in when scrolled into view, using the site's existing reveal system. */
.dimension-sketch path,.dimension-sketch line {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
}
.dimension-sketch.in-view path,.dimension-sketch.in-view line { stroke-dashoffset: 0; }
.dimension-sketch path:nth-of-type(2),.dimension-sketch line:nth-of-type(2) { transition-delay:.15s; }
.dimension-sketch path:nth-of-type(3),.dimension-sketch line:nth-of-type(3) { transition-delay:.3s; }
.dimension-sketch path:nth-of-type(4),.dimension-sketch line:nth-of-type(4) { transition-delay:.45s; }
.dimension-sketch path:nth-of-type(5),.dimension-sketch line:nth-of-type(5) { transition-delay:.6s; }
.dimension-sketch path:nth-of-type(6),.dimension-sketch line:nth-of-type(6) { transition-delay:.75s; }
.dimension-sketch text { opacity:0; transition:opacity .6s ease .9s; }
.dimension-sketch.in-view text { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .dimension-sketch path,.dimension-sketch line { transition:none; stroke-dashoffset:0; }
  .dimension-sketch text { transition:none; opacity:1; }
}

/* Expanded Abiton credit block below the main footer row. */
.footer-credit { margin-top:34px; padding-top:28px; border-top:1px solid rgba(185,147,86,.4); max-width:760px; }
.footer-credit-brand { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.footer-credit-brand img { height:30px; width:auto; display:block; }
.footer-credit-brand h3 { margin:0; }
.footer-credit h3 { font-size:clamp(20px,2.4vw,28px); color:#fff; letter-spacing:-.01em; }
.footer-credit > p:nth-of-type(2) { color:#bdb9b1; line-height:1.7; font-size:14px; margin:0 0 14px; }
.footer-credit-tags { text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:#8a8a8a; margin:0 0 18px; }
.footer-credit-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; font-size:12px; color:#8a8a8a; padding-right:190px; }
.footer-credit-row a { color:#d5bd96; text-decoration:none; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.footer-credit-row a:hover { color:#fff; }
@media (max-width:1050px) { .footer-credit-row { padding-right:0; padding-bottom:70px; } }

/* Curated heading style controls (font/color/align/size) - only applies when a heading admin field is set. */
.hero h1 { font-size:calc(clamp(46px,7.2vw,122px) * var(--heading-scale,1)); }
.section h2, .proposal-reserve h2, .contact h2 { font-size:calc(clamp(40px,6vw,86px) * var(--heading-scale,1)); }

/* Click-to-enlarge lightbox for project and proposal photos. */
.project-card.is-enlargeable { cursor:zoom-in; }
body.lightbox-open { overflow:hidden; }
.lightbox-overlay { position:fixed; inset:0; z-index:200; background:rgba(4,4,4,.94); display:flex; flex-direction:column; }
.lightbox-overlay[hidden] { display:none; }
.lightbox-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(16px,3vw,32px); color:#e8e5df; }
.lightbox-caption { font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:#c7c3bb; }
.lightbox-close { min-height:40px; padding:8px 16px; background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; text-transform:uppercase; letter-spacing:.1em; font-size:11px; cursor:pointer; }
.lightbox-close:hover { border-color:#fff; }
.lightbox-stage { position:relative; flex:1; overflow:hidden; display:grid; place-items:center; cursor:zoom-in; touch-action:none; }
.lightbox-stage.is-zoomed { cursor:grab; }
.lightbox-stage.is-panning { cursor:grabbing; }
.lightbox-stage img { max-width:92vw; max-height:82vh; object-fit:contain; user-select:none; -webkit-user-drag:none; transform-origin:center center; will-change:transform; }
.lightbox-hint { text-align:center; padding:0 16px 16px; color:#84807a; font-size:11px; letter-spacing:.06em; }
@media (max-width:680px) { .lightbox-hint { display:none; } }