/* Merged preview. Atlantic night, ivory, steel and metallic light gold. No teal, no neon.
   Type, one family per role: Bodoni Moda = display (the wordmark and the closing tagline only); Cormorant Garamond = headings; Bodoni Moda numerals = the index system (every 01/02/03, lining figures, brushed steel, gold hairline); Barlow Condensed = the service-detail lines;
   Hanken Grotesk = everything you read or press; Gloock = Concept C's Request a Quote headings (locked to Concept C).
   Performance rules: no pinned hero, no film grain, no blend modes, no blur behind the header, one transform layer for the hero image. */
:root {
  --night: #0b141c; --night-2: #0f1c28; --ivory: #f3efe6; --bf-muted: #8fa1b0;
  --f-mark: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-head: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-disp: "Gloock", "Playfair Display", Georgia, serif;
  --f-ui: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-spec: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --f-num: var(--f-mark); --steel-num: linear-gradient(180deg, #fbfcfd 0%, #dbe3ea 50%, #aab8c6 100%); /* big numerals: restrained brushed steel */
  --steel-line: linear-gradient(90deg, #aebccb 0%, #f0f5f9 46%, #b9c6d2 100%); /* detail lines */
  --gold-flat: linear-gradient(100deg, #b9923a 0%, #e8c874 34%, #fff1c0 52%, #dcb85e 70%, #b78d34 100%);
  --hdr: 96px; --r: 36px;
}
body.m { font-family: var(--f-ui); font-size: 1rem; line-height: 1.65; color: var(--bf-steel-hi); background: var(--night); }
.kick, .eyebrow { font: 600 .7rem/1 var(--f-ui); letter-spacing: .26em; text-transform: uppercase; color: var(--bf-gold); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.kick::before, .eyebrow::before { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, var(--bf-gold), transparent); }
.center .kick { justify-content: center; } .center .kick::before { display: none; }
.h2 { font: 500 clamp(2rem, 4.6vw, 3.6rem)/1.06 var(--f-head); letter-spacing: -.012em; } .h2 em { font-style: italic; }
.big { font: 400 clamp(2rem, 4.8vw, 3.8rem)/1.08 var(--f-disp); letter-spacing: -.01em; max-width: 16ch; } .big em { font-style: italic; }
.sec-head { margin-bottom: clamp(30px, 5vw, 60px); } .sec-head.center { text-align: center; }
.lead { margin-top: 14px; color: var(--bf-steel); font-size: 1.08rem; }
.fine { font-size: .8rem; color: var(--bf-muted); } .fine.center { text-align: center; margin-top: 18px; }
.narrow { --wrap: 1000px; }
.m .btn { border-radius: 4px; font: 600 .74rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; min-height: 54px; }
.m .btn-lg { min-height: 58px; padding: 0 32px; } .m .btn-sm { min-height: 48px; padding: 0 22px; }
.m .btn-ghost { color: var(--bf-gold-hi); border-color: rgba(240,215,140,.5); background: transparent; } .m .btn-ghost:hover { background: rgba(240,215,140,.12); transform: translateY(-2px); }
.m .btn-glass { border-radius: 4px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11,20,28,.58); border-color: rgba(232,237,242,.55); }
.m .chip { font: 500 .82rem/1 var(--f-ui); color: var(--bf-steel-hi); border-color: rgba(195,204,213,.28); background: rgba(255,255,255,.03); }
.m .chip:hover { border-color: var(--bf-gold); } .m .chip.on { background: var(--bf-gold); color: #1a1306; border-color: var(--bf-gold); }
.m .link-arrow { font: 600 .72rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; border-color: rgba(240,215,140,.55); }
.m .dock { border-radius: 8px; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13,24,34,.94); } .m .dock .btn { border-radius: 4px; }
.step { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(195,204,213,.35); background: rgba(255,255,255,.04); color: var(--bf-steel-hi); font-size: 1.1rem; } .step:hover { background: rgba(255,255,255,.12); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid rgba(195,204,213,.25); margin-bottom: 14px; }
.seg button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 500 .8rem/1 var(--f-ui); color: var(--bf-steel); } .seg button.on { background: var(--bf-steel-hi); color: var(--night); }

/* header: solid when scrolled (no blur, so scrolling stays smooth) */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; width: min(100% - 2 * max(20px, var(--safe-l)), 1380px); margin-inline: auto; }
.site-header.is-scrolled { background: rgba(11,20,28,.96); box-shadow: 0 1px 0 rgba(195,204,213,.12); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bf-steel-hi); min-height: 44px; } .brand-mark { height: 40px; width: auto; }
.brand-word { font: 600 .74rem/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; }
.nav-links { display: none; gap: 28px; } .nav-links a { color: var(--bf-steel-hi); text-decoration: none; font: 500 .7rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; padding: 17px 4px; display: inline-block; position: relative; opacity: .9; }
.nav-links a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 12px; height: 1px; background: var(--bf-gold); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--bf-ease); } .nav-links a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 46px; height: 46px; border-radius: 999px; color: var(--bf-steel-hi); text-decoration: none; font: 500 .84rem/1 var(--f-ui); border: 1px solid rgba(232,237,242,.3); padding: 0 13px; background: rgba(9,17,25,.45); }
.nav-phone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .nav-phone span, .nav-quote { display: none; }
.menu li a { font-family: var(--f-head); font-weight: 500; }
/* a phone held sideways is wide but only ~400px tall: size the menu by height, two columns of links, so every link and the call button sit on screen */
@media (max-width: 1039px) and (max-height: 520px) and (orientation: landscape) { .menu { padding-top: calc(var(--safe-t) + 84px); padding-bottom: 18px; } .menu-inner { max-width: none; gap: 14px; } .menu ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .menu li a { font-size: 1.45rem; padding: 8px 0; } .menu-foot { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-align: left; } .menu-foot .btn { width: auto; } .menu-soc { margin-top: 0; } }
@media (min-width: 1040px) { .nav { height: 80px; } .nav-links { display: flex; } .nav-phone span { display: inline; } .nav-quote { display: inline-flex; } .menu-btn, .menu { display: none; } }

/* ================= HERO: Concept A's image and feel, not pinned ================= */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; text-align: center; background: var(--night); isolation: isolate; color: var(--bf-steel-hi); }
.hero-media { position: absolute; inset: -2% -1%; z-index: -3; will-change: transform; transform: translate3d(0, 0, 0) scale(1.03); }
.hero-media picture, .hero-img { display: block; width: 100%; height: 100%; }
.hero-media picture.depth { will-change: translate; } /* its own layer, so the pointer drift is compositor-only */
.hero-img { object-fit: cover; object-position: 74% 52%; animation: settle 5s cubic-bezier(.2,.6,.2,1) both; transform-origin: 62% 60%; }
.m[data-hero-variant="hd"] .hero-img { object-position: 58% 55%; }
/* The scroll response runs on the compositor (transform and opacity only) wherever the browser supports scroll-driven animations; no JavaScript is involved and it can never fight the scroll. */
@supports (animation-timeline: scroll()) {
  .hero-media { animation: heroMedia linear both; animation-timeline: scroll(root block); animation-range: 0 100svh; }
  .hero-content { animation: heroText linear both; animation-timeline: scroll(root block); animation-range: 0 62svh; }
}
@keyframes heroMedia { from { transform: translate3d(0, 0, 0) scale(1.03); } to { transform: translate3d(0, 7%, 0) scale(1.09); } }
@keyframes heroText { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -48px, 0); } }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: radial-gradient(120% 90% at 50% 52%, rgba(8,15,22,.12) 0%, rgba(8,15,22,.5) 62%, rgba(8,15,22,.9) 100%), linear-gradient(180deg, rgba(8,15,22,.72) 0%, rgba(8,15,22,.04) 24%, rgba(8,15,22,.3) 70%, rgba(8,15,22,.95) 100%); }
.hero-frame { position: absolute; z-index: 0; inset: calc(var(--hdr) + var(--safe-t) - 8px) clamp(14px, 2.4vw, 34px) calc(var(--r) + 14px); border: 1px solid rgba(240,215,140,.24); pointer-events: none; }
.hero-frame::before, .hero-frame::after { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid var(--bf-gold); } .hero-frame::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .hero-frame::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.hero-content { position: relative; display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 24px); padding: calc(var(--hdr) + var(--safe-t) + 4px) 22px calc(var(--safe-b) + var(--r) + 86px); will-change: transform, opacity; }
.hero-content::before { content: ""; position: absolute; inset: 12% -8% 8%; z-index: -1; background: radial-gradient(50% 46% at 50% 48%, rgba(7,13,19,.6), transparent 72%); pointer-events: none; }
.hero-mark { height: clamp(44px, 6.6vh, 68px); width: auto; }
.wordmark { font: 500 clamp(3.2rem, 12vw, 10.4rem)/.98 var(--f-mark); letter-spacing: -.012em; font-variation-settings: "opsz" 38; }
.wordmark .mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .02em .08em .14em; margin: 0 -.02em -.1em; }
.rise { display: inline-block; transform: translateY(108%); animation: rise 1.3s var(--bf-ease) var(--d, 0s) forwards; } @keyframes rise { to { transform: none; } }
.steel-word, .gold-word { background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.steel-word { background-image: linear-gradient(100deg, #8c97a5 0%, #c3ccd5 22%, #ffffff 36%, #c3ccd5 48%, #8793a2 70%, #c3ccd5 100%); }
.gold-word { font-style: italic; background-image: linear-gradient(100deg, #a07a2a 0%, #d9b45a 22%, #fff3c4 36%, #d9b45a 48%, #a07a2a 72%, #f0d78c 100%); padding-right: .06em; }
.wordmark .rise { animation: rise 1.3s var(--bf-ease) var(--d, 0s) forwards, sheen 5.5s cubic-bezier(.4,.1,.2,1) calc(var(--d, 0s) + 1.1s) 1 forwards; } @keyframes sheen { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.rise-fade { opacity: 0; transform: translateY(14px); animation: riseFade 1.1s var(--bf-ease) var(--d, 0s) forwards; } @keyframes riseFade { to { opacity: 1; transform: none; } }
.hero-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; font: 500 clamp(.7rem, 2.7vw, .95rem)/1.4 var(--f-ui); letter-spacing: clamp(.16em, 1.8vw, .34em); text-transform: uppercase; }
.hero-sub i { font: italic 500 1.5em/1 var(--f-head); letter-spacing: 0; text-transform: none; color: var(--bf-gold); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(6px, 1.8vh, 18px); }
.hero-place { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; bottom: calc(var(--safe-b) + var(--r) + clamp(14px, 2.4vw, 30px)); }
.hero-place span { display: inline-block; padding: 9px 16px; border-radius: 999px; font: 500 .64rem/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: rgba(232,237,242,.85); background: rgba(11,20,28,.55); border: 1px solid rgba(195,204,213,.2); white-space: nowrap; }
.hero-cue { position: absolute; z-index: 2; right: calc(clamp(24px, 4vw, 54px) - 22px); bottom: calc(var(--safe-b) + var(--r) + clamp(14px, 2.4vw, 30px) - 5px); width: 44px; height: 64px; padding: 5px 0; display: none; justify-content: center; } /* a 44 px wide tap area around the thin line */
.hero-cue i { display: block; width: 1px; height: 100%; background: linear-gradient(180deg, var(--bf-gold), transparent); animation: cue 2.6s var(--bf-ease) infinite; transform-origin: top; } @keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.hero-credit { position: absolute; z-index: 2; left: clamp(26px, 4vw, 56px); bottom: calc(var(--safe-b) + var(--r) + clamp(14px, 2.4vw, 30px)); font: 500 .6rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(232,237,242,.45); display: none; }
@media (min-width: 760px) { .hero-cue { display: flex; } .hero-credit { display: block; } }
@media (max-width: 759px) { .hero-img { object-position: 50% 50%; animation: none; } .hero-place span { font-size: .56rem; letter-spacing: .22em; padding: 8px 12px; } .hero-frame { inset-inline: 12px; } }

/* anchors: a section reached from the menu or a link stops just below the solid header, so its first line is never hidden behind it */
section[id] { scroll-margin-top: 72px; }
@media (min-width: 1040px) { section[id] { scroll-margin-top: 80px; } }

/* ================= approach (Concept A) ================= */
.intro { position: relative; z-index: 3; margin-top: calc(var(--r) * -1); background: radial-gradient(1100px 560px at 82% 40%, rgba(79,106,126,.22), transparent 64%), var(--night); color: var(--ivory); padding: clamp(80px, 11vw, 150px) 0 clamp(56px, 8vw, 110px); }
.statement { font: 500 clamp(2rem, 5.4vw, 4.4rem)/1.1 var(--f-head); letter-spacing: -.016em; max-width: 18ch; color: var(--ivory); } .js .intro .statement .w { opacity: .2; } .js .intro .statement .w.on { opacity: 1; }

/* ================= what we do: Concept C panels ================= */
.services { position: relative; z-index: 2; background: linear-gradient(180deg, #0b141c, #0f1c28 40%, #0b141c); padding: clamp(70px, 9vw, 120px) 0 clamp(50px, 7vw, 90px); margin-top: calc(var(--r) * -1); padding-top: calc(clamp(70px, 9vw, 120px) + var(--r)); }
.panels { display: grid; padding-bottom: 8px; }
.panel { margin: 0 max(14px, var(--safe-l)) 28px; border-radius: 26px; background: linear-gradient(160deg, #13253a, #0b1622); border: 1px solid rgba(195,204,213,.16); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.7); overflow: hidden; }
.panel-in { display: grid; gap: 22px; padding: clamp(22px, 4vw, 56px); max-width: 1320px; margin: 0 auto; align-items: center; }
/* one index system everywhere: Barlow Condensed numerals, brushed-steel fill, a short gold rule beneath */
.pnum, .tn { position: relative; display: block; font-family: var(--f-num); font-weight: 500; font-variant-numeric: lining-nums; letter-spacing: -.01em; background: var(--steel-num); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pnum::after, .tn::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: linear-gradient(90deg, var(--bf-gold-hi), var(--bf-gold)); }
.pnum { font-size: clamp(4rem, 9.5vw, 7rem); line-height: .92; padding-bottom: 20px; margin-bottom: 16px; }
.pfam { font: 600 .68rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--bf-steel); margin: 4px 0 12px; }
.panel h3 { font: 600 clamp(1.9rem, 3.8vw, 3rem)/1.08 var(--f-head); max-width: 15ch; }
.panel .chips-row { margin-top: 18px; }
.lede-stack { display: grid; margin-top: 14px; } .lede-stack > p { grid-area: 1 / 1; opacity: 0; transition: opacity .6s var(--bf-ease); }
.lede { color: var(--bf-steel); max-width: 38ch; margin-top: 14px; } .lede-stack .lede { margin-top: 0; } .lede.on { opacity: 1; }
/* the service-detail line: the spec face, uppercase, a restrained steel gradient fill (readable: the lightest stop is ~12:1 and the darkest ~7:1 against the panel) */
.spec { display: flex; flex-wrap: wrap; align-items: center; margin-top: 18px; font: 500 clamp(1rem, 1.4vw, 1.14rem)/1.4 var(--f-spec); letter-spacing: .15em; text-transform: uppercase; }
.spec span { background: var(--steel-line); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: 1px 0; }
.spec span:not(:last-child)::after { content: "•"; content: "•" / ""; display: inline-block; margin: 0 .85em; color: var(--bf-gold); -webkit-text-fill-color: var(--bf-gold); }
.spec-stack { display: grid; margin-top: 18px; } .spec-stack > .spec { grid-area: 1 / 1; margin-top: 0; align-self: start; opacity: 0; transition: opacity .6s var(--bf-ease); } .spec-stack > .spec.on { opacity: 1; }
@media (max-width: 599px) { .spec { flex-direction: column; align-items: flex-start; gap: 7px; } .spec span::after { display: none; } .spec span::before { content: ""; display: inline-block; width: 16px; height: 1px; margin: 0 12px 0 0; vertical-align: middle; background: var(--bf-gold); -webkit-text-fill-color: initial; } }
.panel .chips-row { flex-wrap: wrap; overflow: visible; } /* the service tabs wrap instead of scrolling sideways, so no tab is ever half out of the card */
.pcta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 24px; }
.panel-pic { perspective: 1400px; }
.tilt { position: relative; aspect-ratio: 4 / 3.3; border-radius: 14px; overflow: hidden; background: var(--bf-atl-800); box-shadow: 0 50px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(240,215,140,.24); transform: rotateY(-9deg) rotateX(3deg); transform-origin: 70% 50%; transition: transform 1s var(--bf-ease); }
.panel:hover .tilt { transform: rotateY(-3deg) rotateX(1deg); }
.pimg { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--bf-ease); } .pimg.on { opacity: 1; } .pimg img { width: 100%; height: 100%; object-fit: cover; }
.tag-example { position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: 999px; font: 600 .6rem/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(243,239,230,.95); background: rgba(9,17,25,.72); pointer-events: none; }
@media (min-width: 900px) { .panel-in { grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 80px); min-height: min(72svh, 640px); } .panel:nth-child(2) .panel-in { direction: rtl; } .panel:nth-child(2) .panel-in > * { direction: ltr; } .panel:nth-child(2) .tilt { transform: rotateY(9deg) rotateX(3deg); transform-origin: 30% 50%; } .panel:nth-child(2):hover .tilt { transform: rotateY(3deg) rotateX(1deg); } }
@media (max-width: 899px) { .tilt { transform: none; } }
/* the pop-up: the panel rises into place and its picture swings from a steeper angle to rest */
.js .panel[data-reveal="pop"] { transform: translate3d(0, 64px, 0) scale(.96); transition: opacity .9s var(--bf-ease), transform 1s var(--bf-ease); }
.js .panel[data-reveal="pop"].in { transform: none; }
@media (min-width: 900px) { .js .panel:not(.in) .tilt { transform: rotateY(-22deg) rotateX(7deg) translate3d(0, 28px, 0); } .js .panel:nth-child(2):not(.in) .tilt { transform: rotateY(22deg) rotateX(7deg) translate3d(0, 28px, 0); } }

/* ================= see the finish: A's structure, C's art direction ================= */
.finish { position: relative; z-index: 2; background: radial-gradient(1200px 600px at 80% 22%, rgba(79,106,126,.34), transparent 62%), linear-gradient(180deg, #0b141c 0, #0a131c 12%, #0a131c 88%, #0b141c 100%); padding: clamp(64px, 8vw, 110px) 0 clamp(40px, 5vw, 70px); overflow: hidden; }
.ghost { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; pointer-events: none; font: 400 clamp(7rem, 24vw, 22rem)/.8 var(--f-mark); color: transparent; -webkit-text-stroke: 1px rgba(195,204,213,.09); letter-spacing: -.03em; text-transform: uppercase; }
.ghost span:last-child { margin-top: .06em; -webkit-text-stroke-color: rgba(240,215,140,.12); }
.finish .wrap { position: relative; }
/* phones, landscape phones and tablets: the project chips sit directly above the pictures, so choosing one never moves the page and the new photo is on screen with the controls (the details and arrows stay below) */
@media (max-width: 1039px) { .finish .wrap { display: flex; flex-direction: column; } .finish .sec-head { order: 0; margin-bottom: 16px; } .finish .chips-row { order: 1; margin: 0 0 14px; } .finish-stage { order: 2; } .finish-meta { order: 3; } .finish .fine { order: 4; } }
@media (max-width: 759px) {
  /* the stacked pair is sized to the room left under the header, the chips and the bottom bar, so the chips and the whole pair are on screen together */
  .finish-stage, .finish-stage .ba-frame { --stage-h: max(430px, calc(100svh - 300px)); } }
.finish-stage { --ba-radius: 18px; --stage-h: 70svh; display: flex; justify-content: center; align-items: center; min-height: var(--stage-h); } /* the stage keeps one height whatever the pair's shape, so switching pairs moves nothing below it */
.finish-stage .ba-frame { box-shadow: 0 60px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(240,215,140,.3); }
.finish-stage .ba-knob { width: 68px; height: 68px; margin: -34px 0 0 -34px; border: 2px solid rgba(255,255,255,.55); } .finish-stage .ba-line { width: 3px; left: -1.5px; }
.finish-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 44px; margin: 30px auto 20px; width: min(100%, 1060px); }
.finish-copy { max-width: 560px; min-height: 320px; }
.finish-status { display: inline-block; font: 600 .62rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; margin-bottom: 14px; border: 1px solid rgba(243,239,230,.4); color: var(--ivory); }
.finish-status[data-status="real"] { background: linear-gradient(105deg, #c9a34a, #f0d78c 50%, #d9b45a); color: #1a1306; border-color: transparent; }
[data-sc-count] { font: 500 1.05rem/1 var(--f-spec); letter-spacing: .12em; }
.finish-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 600 .68rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--bf-gold); } .finish-kicker span { white-space: nowrap; } .finish-kicker i { width: 26px; height: 1px; background: var(--bf-gold); }
.finish-title { font: 600 clamp(1.9rem, 3.6vw, 2.8rem)/1.08 var(--f-head); margin-top: 12px; }
.finish-desc { margin-top: 8px; color: var(--bf-steel); max-width: 44ch; } .finish-area { margin-top: 10px; font: 600 .64rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--bf-muted); }
.finish-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.film { width: min(100%, 1060px); margin-inline: auto; min-height: 60px; } .film .chip { display: inline-flex; gap: 8px; align-items: center; } .chip-n { font: 500 1rem/1 var(--f-spec); letter-spacing: .06em; color: var(--bf-gold); } .film .chip.on .chip-n { color: #1a1306; }

/* ================= our work: Concept C filmstrip ================= */
.work { position: relative; z-index: 2; background: var(--night); padding: clamp(50px, 6vw, 84px) 0 clamp(60px, 8vw, 100px); }
.wh { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .wsub { color: var(--bf-steel); max-width: 56ch; margin-top: 12px; font-size: .95rem; }
.fcard { --rot: 0deg; --sc: 1; flex: none; width: min(78vw, 400px); scroll-snap-align: center; cursor: pointer; border-radius: 16px; overflow: hidden; background: var(--night-2); border: 1px solid rgba(195,204,213,.15); transition: border-color .4s, transform .5s var(--bf-ease); }
.fcard:hover { border-color: rgba(240,215,140,.5); transform: translate3d(0, -4px, 0); } .fcard:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 3px; }
.fimg { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bf-atl-800); } .fimg img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 7px 11px; border-radius: 999px; font: 600 .6rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; }
.badge.real { background: linear-gradient(105deg, #c9a34a, #f0d78c 50%, #d9b45a); color: #1a1306; } .badge.ex { background: rgba(9,17,25,.8); color: rgba(243,239,230,.95); border: 1px solid rgba(243,239,230,.3); }
.ftxt { padding: 16px 18px 20px; } .fs { font: 600 .62rem/1.3 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--bf-gold); } .fcard h3 { font: 600 1.6rem/1.1 var(--f-head); margin-top: 8px; } .fa { margin-top: 6px; font-size: .88rem; color: var(--bf-steel); }
@media (min-width: 900px) { .fcard { width: 400px; } }
/* lean showcase: six picture tiles with the title laid over the foot of each, two across on a phone and three on a laptop */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }
.work-grid .fcard { position: relative; width: auto; aspect-ratio: 1 / 1.12; border-radius: 14px; background: var(--night-2); }
.work-grid .fimg { position: absolute; inset: 0; aspect-ratio: auto; } .work-grid .fimg img { transition: transform .9s var(--bf-ease); } .work-grid .fcard:hover .fimg img { transform: scale(1.04); }
.work-grid .ftxt { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 14px 14px; background: linear-gradient(0deg, rgba(6,12,18,.94) 0%, rgba(6,12,18,.6) 55%, rgba(6,12,18,0) 100%); }
.work-grid .fs { font-size: .54rem; letter-spacing: .16em; } .work-grid .fcard h3 { font-size: 1.1rem; margin-top: 5px; } .work-grid .fa { display: none; }
.work-grid .badge { left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 6px 9px; font-size: .5rem; letter-spacing: .09em; line-height: 1.25; }
.work-grid .badge.ex { background: rgba(9,17,25,.62); border-color: rgba(243,239,230,.2); color: rgba(243,239,230,.85); }
.work .fine { margin-top: 18px; }
/* Finished Properties with eight tiles: two across on a phone (four rows), four across from tablet width (two rows) */
@media (min-width: 760px) { .work-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } .work-grid .fcard { aspect-ratio: 1 / 1.08; } .work-grid .ftxt { padding: 56px 16px 16px; } .work-grid .fcard h3 { font-size: 1.22rem; } .work-grid .fs { font-size: .56rem; } .work-grid .badge { left: 10px; top: 10px; padding: 6px 9px; font-size: .52rem; letter-spacing: .09em; } }
@media (min-width: 1040px) { .work-grid { gap: 16px; } .work-grid .fcard h3 { font-size: 1.4rem; } .work-grid .ftxt { padding: 64px 20px 18px; } .work-grid .fs { font-size: .6rem; } .work-grid .badge { left: 14px; top: 14px; padding: 7px 11px; font-size: .56rem; letter-spacing: .11em; } }

/* ================= owner: Concept C's owner-operated card over a photo, Concept D's editorial title and table ================= */
.owner { position: relative; z-index: 2; overflow: hidden; padding: clamp(90px, 12vw, 170px) 0; background: #070e15; }
.owner-bg { position: absolute; inset: 0; } .owner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } .owner-bg::after { content: ""; position: absolute; inset: 0; /* one overlay layer: the section fades in from Our Work above and out into Why below, plus the left-to-right shade for the text */ background: linear-gradient(180deg, var(--night) 0, rgba(11,20,28,.72) clamp(50px, 7vw, 100px), rgba(11,20,28,0) clamp(150px, 22vw, 300px)), linear-gradient(0deg, #1d3245 0, rgba(29,50,69,0) clamp(110px, 16vw, 220px)), linear-gradient(90deg, rgba(5,10,16,.95) 0%, rgba(5,10,16,.8) 55%, rgba(5,10,16,.6) 100%); }
.owner-grid { position: relative; z-index: 2; display: grid; gap: clamp(30px, 5vw, 80px); align-items: start; }
.owner-title { font: 500 clamp(2.4rem, 5.6vw, 4.4rem)/1.02 var(--f-head); font-style: italic; letter-spacing: -.02em; max-width: 12ch; }
.owner-card { margin-top: 28px; display: flex; align-items: center; gap: 16px; } .medal { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; font: 400 1.9rem/1 var(--f-mark); border: 1px solid var(--bf-gold); background: rgba(9,17,25,.55); color: var(--bf-gold-hi); flex: none; }
.owner-card b { display: block; font: 600 1.5rem/1.1 var(--f-head); } .owner-card div span { display: block; font: 600 .64rem/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--bf-steel); margin-top: 4px; } .owner-card small { color: var(--bf-muted); font-size: .72rem; }
.op { color: var(--bf-steel-hi); max-width: 56ch; font-size: 1.06rem; line-height: 1.72; margin-bottom: 20px; } .op.close { font-weight: 500; color: var(--ivory); margin-top: 26px; padding-left: 18px; border-left: 2px solid var(--bf-gold); }
.stds { width: 100%; border-collapse: collapse; margin-top: 26px; } .stds th, .stds td { text-align: left; vertical-align: top; padding: 14px 12px 14px 0; border-top: 1px solid rgba(240,215,140,.28); font-size: .92rem; } .stds th { font: 500 1.2rem/1.4 var(--f-num); font-variant-numeric: lining-nums; letter-spacing: 0; color: var(--bf-gold); width: 48px; } .stds td:nth-child(2) { width: 38%; font-weight: 600; } .stds td { color: var(--bf-steel); } .stds td b { color: var(--bf-steel-hi); font-weight: 600; }
@media (min-width: 900px) { .owner-grid { grid-template-columns: .85fr 1.15fr; } }
@media (max-width: 599px) { .stds, .stds tbody, .stds tr, .stds th, .stds td { display: block; width: auto !important; } .stds tr { padding: 12px 0; border-top: 1px solid rgba(240,215,140,.28); } .stds th, .stds td { border: 0; padding: 0 0 4px; } }

/* ================= why: Concept A's wording, Concept B's presentation ================= */
.why { position: relative; z-index: 2; background: radial-gradient(900px 500px at 10% 18%, rgba(147,167,182,.14), transparent 62%), linear-gradient(180deg, #1d3245 0%, #172a3b 55%, #0b1621 100%); padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 9vw, 120px); }
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tile { position: relative; overflow: hidden; padding: 28px 26px 30px; border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); }
.tn { font-size: clamp(2.7rem, 5.6vw, 3.7rem); line-height: .92; padding-bottom: 18px; margin-bottom: 16px; }
.tile h3 { font: 600 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--f-head); } .tile p { margin-top: 8px; color: var(--bf-steel); max-width: 34ch; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.banner { position: relative; margin: clamp(40px, 6vw, 80px) 0 0; min-height: clamp(400px, 66svh, 620px); border-radius: 30px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 50px 90px -40px rgba(0,0,0,.8); background: #0d1822; }
/* the photograph is softened in the file itself (scripts/prepare-merged-hero.cjs), so no blur filter runs while scrolling */
.banner picture, .banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 55%; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,15,22,.34), rgba(8,15,22,.5)); }
/* smoked glass: dark translucent panel, a small backdrop blur, a silver-to-gold hairline edge, soft depth */
.smoke { position: relative; z-index: 2; margin: 22px; padding: clamp(26px, 5vw, 58px); max-width: 900px; text-align: center; border-radius: 22px; background: linear-gradient(160deg, rgba(16,27,38,.6), rgba(8,15,22,.5)); -webkit-backdrop-filter: blur(14px) saturate(1.12); backdrop-filter: blur(14px) saturate(1.12); box-shadow: 0 34px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12); }
.smoke::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(150deg, rgba(232,237,242,.75), rgba(195,204,213,.14) 38%, rgba(240,215,140,.5) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.q1 { font: 500 clamp(1.45rem, 3.4vw, 2.5rem)/1.22 var(--f-head); color: var(--bf-steel-hi); letter-spacing: -.008em; }
/* the closing words: no masks, no overflow clipping and no moving gradient. Each word is its own unbreakable box with room for the italic's overhang, and it only fades and rises into place. */
.q2 { margin-top: .08em; font: italic 600 clamp(2.7rem, 9.2vw, 6.6rem)/1.1 var(--f-mark); letter-spacing: -.01em; }
.q2 .qw { display: inline-block; white-space: nowrap; font-style: italic; padding: .06em .2em .18em .28em; margin: 0 -.16em 0 -.3em; background-image: var(--gold-flat); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.js .banner:not(.in) .q1, .js .banner:not(.in) .qw { opacity: 0; transform: translate3d(0, .28em, 0); }
.banner .q1, .banner .qw { transition: opacity .9s var(--bf-ease), transform 1.1s var(--bf-ease); }
.banner .qw { transition-delay: .35s; } .banner .qw + .qw { transition-delay: .65s; }
@media (prefers-reduced-motion: reduce) { .js .banner:not(.in) .q1, .js .banner:not(.in) .qw { opacity: 1; transform: none; } .banner .q1, .banner .qw { transition: none; } }

/* ================= request a quote: Concept C ================= */
.quote { position: relative; z-index: 2; padding: clamp(80px, 10vw, 140px) 0; background: radial-gradient(900px 500px at 20% 26%, rgba(79,106,126,.3), transparent 62%), #0b1621; --q-bg: rgba(255,255,255,.04); --q-fg: var(--bf-steel-hi); --q-line: rgba(195,204,213,.2); --q-tile: rgba(255,255,255,.04); --q-tile-on: rgba(217,180,90,.12); --q-field: rgba(255,255,255,.05); --q-tile-radius: 16px; --q-radius: 24px; }
.quote-grid { display: grid; gap: clamp(30px, 6vw, 76px); align-items: start; }
.qcall { margin-top: 24px; color: var(--bf-steel); } .qcall a { color: var(--bf-gold-hi); font-weight: 600; display: inline-block; padding: 12px 0; }
.qform .q-step legend { font: 400 1.6rem/1.2 var(--f-disp); }
.qform .q-card svg { stroke: var(--bf-steel); } .qform .q-tile input:checked + .q-card svg { stroke: var(--bf-gold-hi); } .qform .q-card { min-height: 112px; }
.qform .field label { color: var(--bf-muted); } .qform .field input:focus + label, .qform .field input:not(:placeholder-shown) + label, .qform .field textarea:focus + label, .qform .field textarea:not(:placeholder-shown) + label { color: var(--bf-gold-hi); }
.qform .field input:focus, .qform .field textarea:focus { background: rgba(255,255,255,.08); }
.qform .photo-btn { border-color: rgba(195,204,213,.4); } .qform .photo-btn small { color: var(--bf-muted); }
.q-done p { color: var(--bf-steel); } .q-done a { color: var(--bf-gold-hi); }
@media (min-width: 900px) { .quote-grid { grid-template-columns: .8fr 1.2fr; } .q-intro { position: sticky; top: calc(var(--hdr) + 12px); } }

/* ================= footer with socials ================= */
.site-footer { background: linear-gradient(180deg, #0b1621 0, #060c12 260px); color: var(--bf-steel); padding: clamp(50px, 8vw, 100px) 0 calc(var(--safe-b) + 34px); overflow: hidden; }
.site-footer .wrap { container-type: inline-size; }
/* the big word is sized from the width of its container (the word is 6.35em wide), so every letter is always inside the screen and it still reads as a deliberate, oversized signature */
.site-footer .foot-word { font: 400 calc((100vw - 2 * max(20px, var(--safe-l))) / 6.46)/.98 var(--f-mark); font-size: min(15rem, calc(100cqw / 6.46)); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(240,215,140,.42); white-space: nowrap; margin-bottom: clamp(34px, 5vw, 64px); padding-bottom: .06em; }
.foot-grid { display: grid; gap: 30px; } .site-footer h4 { font: 600 .68rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--bf-gold); margin-bottom: 14px; } .site-footer p { margin-bottom: 4px; }
.site-footer a { text-decoration: none; color: var(--bf-steel-hi); display: inline-block; padding: 11px 0; min-height: 44px; } .site-footer a:hover { color: var(--bf-gold-hi); }
.site-footer .biz, .site-footer .direct, .site-footer .mail { display: grid; grid-template-columns: 7.6rem 1fr; align-items: baseline; gap: 0 12px; }
.lab { font: 500 .78rem/1 var(--f-spec); letter-spacing: .2em; text-transform: uppercase; color: var(--bf-gold); }
.site-footer .mail { margin-top: 4px; } .site-footer .mail a { min-width: 0; font-size: .94rem; overflow-wrap: anywhere; }
@media (max-width: 520px) { .site-footer .biz, .site-footer .direct, .site-footer .mail { grid-template-columns: 6.6rem 1fr; } }
@media (max-width: 400px) { .site-footer .mail a { font-size: .9rem; } }
.direct .ph { font-size: .88rem; font-style: italic; color: var(--bf-muted); padding: 11px 0; border-bottom: 1px dashed rgba(143,161,176,.5); }
.site-footer .biz a { font-size: 1.12rem; font-weight: 500; }
/* social icons: used in the footer, the phone menu and beside the quote form's call line */
.soc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.m .soc { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(240,215,140,.5); color: var(--bf-gold-hi); transition: background .3s, transform .3s var(--bf-ease), border-color .3s; }
.m .soc svg { width: 22px; height: 22px; } .m a.soc:hover { background: rgba(240,215,140,.14); border-color: var(--bf-gold-hi); transform: translateY(-2px); } .m a.soc:focus-visible { outline: 2px solid var(--bf-gold-hi); outline-offset: 3px; }
.m .soc.soon { opacity: .38; border-style: dashed; cursor: default; }
.site-footer a.soc { padding: 0; min-height: 48px; }
.menu-soc { display: flex; align-items: center; gap: 14px; margin-top: 18px; } .menu-soc span, .q-soc span { font: 600 .66rem/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--bf-muted); }
.q-soc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .q-soc .soc { width: 46px; height: 46px; }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(195,204,213,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; font-size: .82rem; color: var(--bf-muted); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.45fr 1fr 1.25fr .8fr; } } /* the contact column is wide enough for the email to sit on one line beside its label */
@media (max-width: 759px) { .site-footer { padding-bottom: calc(var(--safe-b) + 112px); } }

.m .pm-title { font-family: var(--f-head); font-weight: 500; } .m .pm-kicker, .m .pm-area, .m .pm-summary { font-family: var(--f-ui); }

@media (prefers-reduced-motion: reduce) {
  .hero-img { animation: none; } .rise, .rise-fade { transform: none; opacity: 1; animation: none; } .steel-word, .gold-word { background-position: 50% 0; }
  .hero-media, .hero-content { transform: none !important; opacity: 1 !important; } .tilt, .fcard { transform: none !important; }
}

/* ================= Finished Properties viewer: one fixed layout for every tile =================
   The panel no longer takes the height of whatever photo is inside it, so the Close control, the dark information panel and the photo area sit in the same place for every project.
   Pictures are shown whole (letterboxed on the dark panel) rather than cropped. Close is a labelled pill pinned to the panel's corner, outside the scrolling area, so it is always visible. */
.m .pm-panel { width: min(1180px, 100%); height: min(640px, 100%); max-height: none; touch-action: pan-y; overscroll-behavior: contain; }
.m .pm-scroll { flex: 1 1 auto; min-height: 0; }
.m .pm-close { top: 14px; right: 14px; width: auto; min-width: 46px; height: 46px; padding: 0 15px 0 18px; display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; background: rgba(8,15,22,.92); border: 1px solid rgba(232,237,242,.5); -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; font: 600 .66rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.m .pm-close:hover { border-color: var(--bf-gold); } .m .pm-close:focus-visible { outline: 2px solid var(--bf-gold); outline-offset: 3px; }
.m .pm-close .pm-close-t { display: inline; }
.m .pm-media { background: #0a131b; }
.m .pm-hero { aspect-ratio: auto; max-height: none; height: var(--pm-media-h, 46svh); }
.m .pm-hero img { object-fit: contain; }
.m .pm-frame { --stage-h: var(--pm-media-h, 46svh); max-height: none; margin-inline: auto; }
.m .pm-info { padding-top: 24px; }
@media (max-width: 899px) { .m .pm { padding: max(10px, var(--safe-t)) max(10px, var(--safe-r)) max(10px, var(--safe-b)) max(10px, var(--safe-l)); } .m .pm-panel { width: min(100%, 720px); height: 100%; border-radius: 20px; } .m .pm-scroll { overflow-y: auto; display: block; } .m .pm-media { --pm-media-h: clamp(220px, 44svh, 460px); } .m .pm-frame { --stage-h: clamp(300px, 56svh, 560px); } .m .pm-info { padding: 22px 20px 28px; } .m .pm-kicker { padding-right: 0; } }
@media (min-width: 900px) { .m .pm-panel { height: min(640px, 100%); } .m .pm-media { height: 100%; --pm-media-h: 100%; } .m .pm-hero { flex: 1 1 auto; min-height: 0; height: auto; } .m .pm-frame { --stage-h: min(520px, calc(100svh - 150px)); } .m .pm-info { padding: 76px clamp(24px, 3vw, 40px) 32px; } }

/* production: no preview bar above the header */
:root { --hdr: 72px; } @media (min-width: 1040px) { :root { --hdr: 80px; } }
#qSendErr { color: #ffb4aa; margin-top: 12px; } #qSendErr a { color: inherit; text-decoration: underline; }