/* Blue Door Creation visual system. Updated to a cooler blue-collar / clean craft palette. */
:root {
  --ink: #1e2433;
  --deep: #273550;
  --deep-2: #344568;
  --steel: #63708e;
  --copper: #6877c6;
  --copper-hover: #7b88d7;
  --bone: #f5f6fb;
  --paper: #ebedf7;
  --white: #ffffff;
  --muted: #6c7387;
  --line: #d5d9e8;
  --line-dark: #4a5675;
  --body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --wrap: 1240px;
  --radius: 3px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 106px; }
body { background: var(--bone); color: var(--ink); font-family: var(--body); margin: 0; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #8f9be0; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .68; }
::selection { background: #7786d6; color: white; }
.wrap { width: min(var(--wrap), calc(100% - 72px)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: -80px; padding: 12px 17px; z-index: 1000; background: white; color: var(--ink); }
.skip-link:focus { top: 12px; }
.topline { height: 32px; color: #d0d6ee; background: #1f2840; font-size: 10px; letter-spacing: .16em; font-weight: 700; }
.topline-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.topline-dash { color: var(--copper); padding-left: 8px; }
.site-header { position: sticky; top: 0; z-index: 40; height: 80px; color: var(--white); background: #273550; box-shadow: 0 8px 24px #1f284014; }
.nav-shell { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; }
.brand-symbol { display: grid; place-items: center; height: 48px; width: 48px; color: var(--white); background: linear-gradient(180deg,#7a88d6,#5f6fbe); font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; position: relative; border-radius: 10px; letter-spacing: -1px; box-shadow: inset 0 0 0 2px #ffffff22; }
.brand-notch { font: 900 11px var(--display); position: absolute; right: 5px; bottom: 5px; color: #dde4ff; letter-spacing: .06em; }
.brand-words { display: flex; flex-direction: column; justify-content: center; line-height: .89; }
.brand-words strong { font-family: var(--display); font-size: 29px; letter-spacing: .045em; font-weight: 800; }
.brand-words small { font-family: var(--display); font-size: 12px; color: #d4dbf4; letter-spacing: .24em; margin-top: 6px; }
.site-nav { display: flex; align-items: center; gap: clamp(17px, 2vw, 36px); margin-left: auto; }
.nav-link { font-family: var(--display); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; padding: 13px 0; color: #eef1fb; position: relative; white-space: nowrap; }
.nav-link::after { content: ''; position: absolute; height: 2px; left: 0; right: 100%; background: var(--copper); bottom: 6px; transition: right .2s; }
.nav-link:hover::after, .nav-link.is-current::after { right: 0; }
.nav-link.is-current { color: var(--white); }
.nav-quote, .button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; border: 0; border-radius: var(--radius); font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; transition: background .2s, transform .2s, color .2s, border-color .2s; white-space: nowrap; }
.nav-quote { background: var(--copper); color: #fff; padding: 15px 18px; margin-left: 5px; }
.nav-quote:hover, .button--copper:hover { background: var(--copper-hover); transform: translateY(-2px); }
.nav-toggle { display: none; }
.button { min-height: 52px; padding: 16px 24px; }
.button--copper { color: #fff; background: var(--copper); }
.button--outline-light { color: #fdfbf5; border: 1px solid #a9b1ad; background: transparent; }
.button--outline-light:hover { background: #ffffff18; border-color: white; transform: translateY(-2px); }
.button--dark { background: var(--deep); color: var(--white); }
.button--dark:hover { background: #304651; transform: translateY(-2px); }
.text-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--deep); border-bottom: 1px solid var(--copper); padding-bottom: 4px; }
.text-link:hover { color: #ba4b24; }
.text-link svg { transition: transform .2s; }
.text-link:hover svg { transform: translateX(4px); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3, .service-lead, .nav-link, .button { font-family: var(--display); }
.eyebrow { color: var(--copper); font-family: var(--display); font-size: 15px; line-height: 1.2; font-weight: 800; letter-spacing: .125em; display: flex; gap: 12px; align-items: center; text-transform: uppercase; }
.eyebrow--light { color: #ffb18a; }
.eyebrow-mark { background: var(--copper); display: inline-block; width: 24px; height: 3px; transform: skew(-23deg); }
.section { padding-block: 108px; }
.section-label { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: .1em; color: #4d5d60; text-transform: uppercase; }
.section-label>span:first-child { color: var(--copper); font-size: 18px; }
.section-label>i { width: 70px; height: 1px; background: var(--copper); }
.section-heading-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); align-items: end; gap: 45px; margin-bottom: 44px; }
.section h2 { font-size: clamp(48px, 5.6vw, 82px); font-weight: 800; line-height: .92; text-transform: uppercase; letter-spacing: -.017em; margin-bottom: 0; }
.section h2 span { color: var(--copper); }
.section-heading-grid p { max-width: 435px; margin-bottom: 0; font-size: 16px; color: #566568; }
.section-heading-grid .text-link { margin-top: 24px; }
/* Hero */
.hero { position: relative; background: var(--deep); overflow: hidden; color: #fff; }
.hero-noise { pointer-events: none; position: absolute; inset: 0; opacity: .25; background: repeating-linear-gradient(118deg,transparent 0,transparent 34px,#ffffff07 35px,#ffffff04 36px),radial-gradient(circle at 5% 3%,#34515a78,transparent 54%); }
.hero-grid { min-height: 635px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.97fr); position: relative; }
.hero-content { position: relative; z-index: 1; padding: 90px 35px 55px 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero h1 { font-size: clamp(67px, 6.85vw, 106px); font-weight: 900; line-height: .84; letter-spacing: -.019em; margin: 26px 0 28px; text-transform: uppercase; max-width: 790px; }
.hero h1 em, .inner-hero h1 em { font-style: normal; color: #f29362; }
.hero-content>p { font-size: 18px; line-height: 1.7; color: #cdd7d5; max-width: 560px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 28px; color: #a5b7b8; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.hero-stamp { color: #ef8a5c; }
.hero-stamp b { font-size: 17px; padding-left: 5px; }
.hero-foot .slash { color: #e27b4c; padding: 0 4px; }
.hero-media { position: relative; min-height: 600px; margin-right: calc((min(100vw, var(--wrap)) - 100vw)/2); }
.hero-image-wrap { height: 100%; min-height: 585px; overflow: hidden; position: absolute; inset: 0 0 0 0; background: #33423d; }
.hero-image-wrap::before { content: ''; background: linear-gradient(90deg,#17262df5 0%,#17262d50 27%,transparent 70%),linear-gradient(0deg,#17262dbe 0%,transparent 28%); position: absolute; inset: 0; z-index: 1; }
.hero-image-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(.95) contrast(1.06); }
.image-corner { position: absolute; width: 60px; height: 60px; z-index: 2; }
.image-corner--tl { border-top: 2px solid #db7f4f; border-left: 2px solid #db7f4f; top: 36px; left: 36px; }
.image-corner--br { border-bottom: 2px solid #db7f4f; border-right: 2px solid #db7f4f; right: 34px; bottom: 35px; }
.photo-credit { position: absolute; z-index: 2; bottom: 38px; left: 34px; right: 38px; display: flex; gap: 12px; align-items: center; font-family: var(--display); letter-spacing: .08em; }
.tiny-square { height: 29px; width: 4px; background: var(--copper); }
.photo-credit div { display: flex; flex-direction: column; line-height: 1.3; }
.photo-credit strong { font-size: 20px; }
.photo-credit small { color: #d0d9d6; font-size: 13px; }
.photo-count { margin-left: auto; font-size: 16px; }
.hero-bottom-line { height: 4px; background: linear-gradient(90deg,var(--copper) 18%,#576971 18%,#576971 70%,var(--copper) 70%); }
.ticker { background: #e9e5db; border-bottom: 1px solid #d4d1c7; }
.ticker-content { min-height: 58px; display: flex; gap: 16px; justify-content: space-between; align-items: center; color: #485a5e; font-family: var(--display); font-size: 15px; letter-spacing: .12em; font-weight: 800; }
.ticker-content b { color: var(--copper); margin-right: 16px; font-size: 22px; vertical-align: middle; }
/* Service tiles */
.section-services { background: var(--bone); }
.services-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.service-tile { background: var(--white); min-height: 335px; padding: 25px 24px; border: 1px solid #d7dad4; display: flex; flex-direction: column; box-shadow: 0 3px 0 #14272d06; transition: transform .2s,border-color .2s,box-shadow .2s; }
.service-tile:hover { transform: translateY(-5px); border-color: #d18762; box-shadow: 0 15px 22px #17262d10; }
.tile-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 46px; }
.tile-top>span:first-child { font-family: var(--display); font-size: 25px; font-weight: 800; color: var(--copper); }
.tile-icon { height: 52px; width: 52px; display: grid; place-items: center; border: 1px solid #d1d8d6; color: var(--deep); }
.service-tile h3 { font-size: 31px; font-weight: 800; line-height: .94; text-transform: uppercase; margin-bottom: 12px; }
.service-tile p { color: #677478; font: 400 14px/1.65 var(--body); margin-bottom: 19px; }
.service-tile .text-link { font-size: 11px; margin-top: auto; align-self: flex-start; }
.services-tail { padding-top: 26px; display: flex; justify-content: flex-end; gap: 25px; align-items: center; }
.services-tail p { margin: 0; font-size: 13px; color: #6b7677; }
/* Work */
.work-section { background: #e7e7e0; }
.featured-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.project-card { background: var(--white); overflow: hidden; border: 1px solid #d5d9d2; }
.project-cover { height: 410px; overflow: hidden; display: block; position: relative; background: #33463d; }
.project-cover::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,transparent 55%,#07101463); }
.project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.project-card:hover .project-cover img { transform: scale(1.045); }
.project-view { position: absolute; right: 19px; bottom: 18px; background: var(--copper); color: white; font-family: var(--display); font-weight: 800; letter-spacing: .1em; padding: 12px 13px; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.project-info { padding: 24px 28px 30px; }
.project-index { color: #b25a36; font: 800 14px var(--display); letter-spacing: .1em; }
.project-info h3 { font: 800 38px/.98 var(--display); text-transform: uppercase; margin: 8px 0 11px; }
.project-info h3 a:hover { color: #ad4e2c; }
.project-info p { font: 400 15px/1.6 var(--body); color: #69777a; max-width: 540px; margin-bottom: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 5px 10px; background: #e8ece9; color: #52656b; border-radius: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Personalization */
.statement-section { background: var(--white); overflow: hidden; padding-block: 0; }
.statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.statement-visual { background: #26363d; margin-left: calc((min(100vw, var(--wrap)) - 100vw)/2); min-height: 565px; display: grid; place-items: center; position: relative; overflow: hidden; }
.statement-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%,transparent,#0b14198a 87%); pointer-events: none; }
.sign-sketch { border: 1px dashed #a1b2b255; padding: 31px; width: min(80%,470px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; color: #c3cfcb; text-align: center; transform: rotate(-3deg); }
.sign-top, .sign-bottom { font: 700 13px var(--display); letter-spacing: .18em; }
.sign-bottom { font-size: 11px; }
.sign-plate { width: 100%; aspect-ratio: 2 / 1; border: 9px solid #c28f6d; background: linear-gradient(145deg,#2d4349,#18242a); display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(5% 0,95% 0,100% 15%,100% 85%,95% 100%,5% 100%,0 85%,0 15%); box-shadow: inset 0 0 0 3px #637881; }
.sign-plate>span { color: #e7d0b8; text-shadow: 1px 1px 0 #131a1e; font: 800 clamp(39px,5vw,75px)/.8 var(--display); letter-spacing: .04em; }
.sign-plate>span b { color: var(--copper); }
.sign-plate small { margin-top: 22px; color: #93b0b2; font: 700 12px var(--display); letter-spacing: .24em; }
.statement-copy { padding: 92px 3vw 100px min(7vw,90px); }
.statement-copy h2 { margin-bottom: 24px; }
.statement-copy>p { max-width: 500px; color: #5e6c6f; font-size: 16px; line-height: 1.75; }
.statement-copy .legal-note { font-size: 12px; margin: 18px 0 29px; max-width: 430px; }
/* Process */
.process-section { background: #eef1f8; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2px; border: 1px solid #cbd2ce; }
.step { background: var(--white); padding: 31px; min-height: 235px; position: relative; }
.step:not(:last-child)::after { content: '→'; font: 600 23px var(--display); color: #6877c6; position: absolute; right: -10px; top: 50%; z-index: 1; }
.step-no { font: 800 44px var(--display); color: #6877c6; display: block; margin-bottom: 14px; }
.step h3 { font: 800 28px var(--display); letter-spacing: .02em; margin-bottom: 9px; }
.step p { font: 400 14px/1.7 var(--body); color: #67767a; max-width: 260px; margin-bottom: 0; }
/* Quote */
.quote-section { background: var(--deep); color: white; }
.quote-grid { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: min(8vw,95px); }
.quote-intro h2 { margin-bottom: 23px; }
.quote-intro>p { color: #c0ccca; font-size: 16px; line-height: 1.75; max-width: 415px; }
.quote-intro-photo { margin: 32px 0 23px; height: 310px; overflow: hidden; position: relative; }
.quote-intro-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.photo-note { position: absolute; bottom: 0; left: 0; background: #253659e0; padding: 10px 15px; font: 700 12px var(--display); letter-spacing: .1em; }
.facebook-cta { color: #dbe6e1; font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--copper); text-underline-offset: 6px; display: inline-flex; align-items: center; gap: 8px; }
.quote-panel { background: #ffffff; color: var(--ink); border-top: 4px solid var(--copper); align-self: start; padding: 28px 29px; }
.quote-panel-head { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 9px; border-bottom: 1px solid #d8ddec; padding-bottom: 18px; font: 700 13px var(--display); letter-spacing: .09em; }
.quote-panel-head strong { color: var(--copper); }
.quote-form { display: grid; gap: 19px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 12px; letter-spacing: .01em; font-weight: 800; color: #283a3e; }
.field label span { color: #5369b8; }
.field label em { color: #7c8b8d; font-weight: 400; font-style: normal; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #c8d1cd; border-radius: 1px; background: white; min-height: 48px; padding: 12px; color: var(--ink); font-size: 14px; outline: none; }
.field textarea { min-height: 126px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8b9697; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #6f7fd0; outline-offset: 1px; border-color: #6f7fd0; }
.field [aria-invalid='true'] { border-color: #b33b22; }
.field-help { font-size: 11px; color: #657474; margin-bottom: 0; }
.trap-field { position: absolute; left: -20000px; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 3px; }
.form-footer>p { color: #6d7b7b; margin: 0; max-width: 210px; font-size: 11px; line-height: 1.5; }
.form-footer button { flex-shrink: 0; }
.form-status { font-size: 14px; border-left: 3px solid var(--copper); background: #f9e9da; padding: 13px 14px; color: #5b3224; }
.form-status[data-state='success'] { background: #edf2ff; border-color: #6276c1; color: #2f4378; }
/* Internal heroes */
.inner-hero { background: var(--deep); color: white; padding-block: 100px 105px; position: relative; overflow: hidden; }
.inner-hero::before { content: ''; position: absolute; inset: 0; opacity: .34; pointer-events: none; background: repeating-linear-gradient(120deg,transparent,transparent 45px,#ffffff07 46px),radial-gradient(ellipse at 100% 0%,#8695d8aa,transparent 50%); }
.inner-hero .wrap { position: relative; z-index: 1; }
.inner-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.inner-hero h1 { font: 900 clamp(65px, 7vw, 106px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin: 23px 0 24px; max-width: 900px; }
.inner-hero p { max-width: 620px; color: #c6d3d0; line-height: 1.7; font-size: 17px; margin: 0; }
.inner-aside { border-left: 3px solid var(--copper); padding: 23px 30px; color: #9fbbbf; font: 700 32px/1.2 var(--display); letter-spacing: .04em; }
.inner-aside strong, .inner-aside span { display: block; }
.inner-aside strong { color: white; }
.inner-aside span:last-child { color: #9fb3b5; font: 400 15px/1.6 var(--body); margin-top: 18px; letter-spacing: 0; }
/* Service page */
.service-list { display: grid; }
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: min(8vw,110px); align-items: center; padding: 68px 0; border-bottom: 1px solid #cbd0c9; }
.service-row:first-child { padding-top: 0; }
.service-row:last-child { padding-bottom: 0; border-bottom: 0; }
.service-row:nth-child(even) .service-text { order: 2; }
.service-row:nth-child(even) .service-illustration { order: 1; }
.service-text h2 { font-size: clamp(50px,5vw,75px); margin-bottom: 18px; }
.service-text p { color: #58686b; line-height: 1.75; }
.service-text .service-lead { font: 700 27px/1.13 var(--display); color: #33464c; margin-bottom: 17px; }
.check-list { list-style: none; padding: 0; margin: 25px 0 28px; display: grid; gap: 10px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #46595f; }
.check-list svg { color: var(--copper); flex-shrink: 0; margin-top: 2px; }
.service-illustration { height: 490px; background: #32405f; position: relative; display: grid; place-items: center; overflow: hidden; }
.service-photo { object-fit: cover; width: 100%; height: 100%; }
.sign-illustration { background: repeating-linear-gradient(0deg,#243251,#243251 42px,#2d3d61 43px); display: flex; flex-direction: column; gap: 30px; padding: 30px; }
.sign-illustration .sign-plate { transform: rotate(-5deg); max-width: 420px; }
.sign-illustration>small, .schematic>small { color: #a4bcb9; font: 700 11px var(--display); letter-spacing: .15em; }
.schematic { background: linear-gradient(145deg,#243251,#2e4651); color: white; }
.schematic-shape { width: 200px; position: relative; height: 300px; filter: drop-shadow(13px 20px 10px #030d1240); }
.schematic-smoke { position: absolute; left: 87px; top: 5px; width: 45px; height: 140px; border: 3px solid #7c8ada; background: #4b5e5d; }
.schematic-pit { position: absolute; top: 142px; left: 19px; width: 180px; height: 122px; border: 5px solid #7c8ada; background: #5667a6; clip-path: polygon(20% 0,80% 0,100% 40%,82% 100%,18% 100%,0 40%); }
.schematic-base { position: absolute; left: 45px; top: 266px; height: 20px; width: 130px; border: 3px solid #7c8ada; }
.schematic>span { color: #dbe5e0; font: 800 25px var(--display); letter-spacing: .08em; margin-top: -33px; }
.schematic>small { margin-top: -50px; }
.dark-cta { background: var(--deep); color: white; }
.dark-cta-content { display: flex; justify-content: space-between; align-items: center; gap: 35px; }
.dark-cta h2 { font-size: clamp(45px,4.6vw,70px); margin: 16px 0 0; }
/* Gallery */
.inner-hero--gallery { padding-block: 75px; }
.hero-mini-image { height: 295px; border: 5px solid #44557a; overflow: hidden; }
.hero-mini-image img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main { background: #e9e7df; }
.gallery-top { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 35px; }
.gallery-top h2 { font-size: 63px; }
.gallery-filter { display: flex; gap: 5px; flex-wrap: wrap; }
.gallery-filter button { border: 1px solid #bfc9c7; background: transparent; padding: 9px 17px; text-transform: uppercase; font: 800 14px var(--display); letter-spacing: .08em; }
.gallery-filter button:hover, .gallery-filter button.is-active { color: white; background: var(--deep); border-color: var(--deep); }
.gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
.gallery-grid [hidden] { display: none; }
.gallery-empty { padding: 30px; background: white; }
.gallery-promise { margin-top: 30px; border: 1px dashed #b3bddf; padding: 25px 31px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.gallery-promise>div { display: flex; align-items: center; gap: 19px; }
.gallery-promise-mark { color: var(--copper); font: 900 55px var(--display); }
.gallery-promise h3 { font: 800 30px var(--display); margin-bottom: 0; }
.gallery-promise p { font-size: 13px; color: #647477; margin-bottom: 0; max-width: 480px; }
.quote-rail { background: #2d3d61; color: white; padding-block: 51px; }
.quote-rail-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.quote-rail-inner>div>span { font: 700 14px var(--display); letter-spacing: .12em; color: #b5c0ff; }
.quote-rail h2 { font: 800 clamp(40px,4vw,59px)/1 var(--display); margin: 8px 0 0; }
/* Project details */
.project-hero { background: var(--deep); color: white; padding-block: 42px 75px; }
.back-link { color: #a8bbbc; font: 800 14px var(--display); letter-spacing: .1em; }
.back-link:hover { color: white; }
.project-hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 45px; margin-top: 26px; }
.project-hero h1 { font: 900 clamp(70px,7vw,110px)/.86 var(--display); text-transform: uppercase; margin: 23px 0; }
.project-hero p { color: #c1ccca; max-width: 480px; line-height: 1.7; margin-bottom: 32px; }
.project-hero-image { height: 500px; overflow: hidden; border: 4px solid #49626a; }
.project-hero-image img { object-fit: cover; height: 100%; width: 100%; }
.project-detail { background: var(--bone); }
.project-detail-layout { display: grid; grid-template-columns: 1.4fr .6fr; gap: min(10vw,120px); }
.project-detail h2 { font-size: 60px; margin-bottom: 25px; }
.project-detail-layout>div:first-child>p { color: #4c6164; line-height: 1.85; max-width: 780px; }
.project-facts { display: grid; gap: 10px; margin-top: 30px; }
.project-facts div { display: flex; align-items: center; gap: 11px; font-size: 14px; }
.project-facts svg { color: var(--copper); }
.project-detail-meta { border-top: 4px solid var(--copper); background: #e6e8e2; padding: 25px; align-self: start; }
.project-detail-meta dl { margin: 16px 0 0; }
.project-detail-meta dl>div { border-top: 1px solid #c6d0cb; padding: 12px 0; }
.project-detail-meta dt { font: 800 13px var(--display); letter-spacing: .1em; color: #8a5e49; }
.project-detail-meta dd { margin: 5px 0 0; font-size: 14px; font-weight: 700; }
.project-photo-section { padding-top: 80px; }
.project-photo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 16px; }
.project-photo { position: relative; border: 0; padding: 0; background: #2d3d61; overflow: hidden; height: 310px; }
.project-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.project-photo:hover img { transform: scale(1.04); }
.project-photo>span { position: absolute; bottom: 0; right: 0; font: 800 12px var(--display); letter-spacing: .06em; background: #15252ccb; color: white; display: flex; align-items: center; gap: 10px; padding: 11px 15px; }
.related-section { padding-top: 80px; background: #e9e7df; }
.related-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px; }
.related-grid .project-card { max-width: 560px; }
.related-grid .project-cover { height: 290px; }
.lightbox { border: 0; padding: 25px 65px; background: #111c21f4; color: white; width: 100vw; height: 100dvh; max-width: none; max-height: none; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: #000c; }
.lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox figure img { max-height: calc(100dvh - 110px); width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { margin-top: 15px; font-size: 14px; text-align: center; }
.lightbox-close, .lightbox-prev, .lightbox-next { border: 0; background: #ffffff22; color: white; border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; }
.lightbox-close { position: fixed; z-index: 1; top: 17px; right: 23px; }
.lightbox-prev, .lightbox-next { position: fixed; font-size: 33px; top: 50%; }
.lightbox-prev { left: 17px; } .lightbox-next { right: 17px; }
/* About */
.about-story { background: var(--bone); }
.about-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: min(10vw,120px); align-items: center; }
.about-portrait { min-height: 635px; position: relative; overflow: hidden; background: #24363f; }
.about-portrait img { height: 635px; width: 100%; object-fit: cover; }
.about-portrait>span { position: absolute; bottom: 0; left: 0; color: white; background: #192c32eb; padding: 10px 17px; font: 700 12px var(--display); letter-spacing: .1em; }
.about-copy h2 { margin-bottom: 25px; }
.about-copy p { color: #5a6b6d; max-width: 610px; line-height: 1.85; }
.about-copy .text-link { margin-top: 20px; }
.values-section { background: #e6e7e1; }
.value-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.value-grid article { padding: 26px 24px; background: #fffdf8; border-top: 3px solid #cb6b41; }
.value-grid article>span { color: #c76c45; font: 900 35px var(--display); }
.value-grid h3 { font: 800 29px var(--display); margin: 15px 0 10px; }
.value-grid p { font: 400 14px/1.7 var(--body); color: #647579; margin: 0; }
/* Contact */
.contact-mini { border: 1px solid #697e8280; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.contact-mini span { color: #93b9bc; font: 700 25px var(--display); }
.contact-mini strong { font: 800 42px/.95 var(--display); }
.contact-mini svg { margin-top: 20px; color: #e07e50; }
.contact-main { background: #e9e7df; }
.contact-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: min(7vw,85px); }
.contact-sidebar h2 { margin-bottom: 21px; }
.contact-sidebar h2 span { display: block; }
.contact-sidebar>p { color: #617175; line-height: 1.8; }
.contact-hints { list-style: none; margin: 28px 0; padding: 0; }
.contact-hints li { padding: 13px 0; border-top: 1px solid #c2cbc6; font-size: 14px; display: flex; align-items: baseline; gap: 13px; }
.contact-hints li:last-child { border-bottom: 1px solid #c2cbc6; }
.contact-hints li span { color: #bf6742; font: 800 20px var(--display); }
.contact-alt { display: grid; gap: 8px; margin-bottom: 30px; }
.contact-alt>span { font: 800 14px var(--display); color: #b66d4d; letter-spacing: .1em; }
.contact-alt>a { text-decoration: underline; text-underline-offset: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 800; }
.contact-thumb { height: 275px; overflow: hidden; }
.contact-thumb img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 54%; }
.contact-form-surface { padding: 37px 40px 43px; background: var(--white); border-top: 5px solid var(--copper); box-shadow: 0 16px 36px #10202b0c; }
.form-title { margin-bottom: 30px; }
.form-title>span { color: #be623d; font: 800 14px var(--display); letter-spacing: .1em; }
.form-title h2 { font: 800 45px var(--display); margin: 12px 0 7px; }
.form-title p { font-size: 14px; color: #6a777b; margin: 0; }
/* FAQ / legal */
.faq-section { background: var(--bone); }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
.faq-layout h2 { font-size: 62px; margin-bottom: 20px; }
.faq-layout>div>p { font-size: 14px; color: #647579; line-height: 1.8; max-width: 315px; }
.faq-layout .button { margin-top: 22px; }
.faq-items details { border-top: 1px solid #bfcac5; padding: 0; }
.faq-items details:last-child { border-bottom: 1px solid #bfcac5; }
.faq-items summary { font: 800 24px var(--display); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq-items summary::-webkit-details-marker { display: none; }
.faq-items summary span { color: var(--copper); transition: transform .2s; }
.faq-items details[open] summary span { transform: rotate(45deg); }
.faq-items details p { color: #617174; font-size: 14px; line-height: 1.8; max-width: 680px; margin-bottom: 24px; }
.prose-page { background: var(--bone); }
.prose-wrap { max-width: 800px; }
.prose-wrap h2 { font-size: 35px; margin: 33px 0 13px; }
.prose-wrap h2:first-child { margin-top: 0; }
.prose-wrap p { line-height: 1.8; color: #566a6d; }
.prose-wrap a { text-decoration: underline; text-underline-offset: 4px; }
.privacy-disclaimer { padding: 19px; border-left: 3px solid var(--copper); background: #e3e5df; font-size: 13px; }
/* Footer */
.site-footer { background: #0d181d; color: white; padding-top: 66px; }
.footer-head { display: grid; grid-template-columns: 1.8fr .65fr .65fr; gap: 75px; padding-bottom: 60px; }
.footer-brand { font: 900 36px var(--display); line-height: 1; }
.footer-brand span { color: var(--copper); }
.footer-head p { color: #a9bbba; max-width: 365px; font-size: 13px; line-height: 1.75; margin-top: 14px; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-links strong { color: #dc8965; font: 800 15px var(--display); letter-spacing: .12em; margin-bottom: 10px; }
.footer-links a { color: #bec9c7; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.footer-links a:hover, .footer-bottom a:hover { color: white; }
.footer-bottom { border-top: 1px solid #334249; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #8fa3a5; font-size: 11px; }
.footer-bottom>span:last-child { display: flex; gap: 10px; align-items: center; }
.footer-sep { color: #cb7b50; }
/* Responsive */
@media (max-width: 1160px) {
 .wrap { width: min(var(--wrap), calc(100% - 48px)); }
 .site-nav { gap: 19px; }
 .brand { min-width: 175px; }
 .nav-link { font-size: 16px; }
 .hero h1 { font-size: clamp(60px,6.7vw,88px); }
 .service-tile { padding: 22px 18px; }
 .service-tile h3 { font-size: 28px; }
 .form-footer { align-items: stretch; flex-direction: column; }
 .form-footer>p { max-width: none; }
 .statement-copy { padding-left: 50px; }
}
@media (max-width: 930px) {
 .topline-inner>span:last-child { display: none; }
 .nav-toggle { display: inline-flex; gap: 7px; align-items: center; border: 1px solid #71858b; background: transparent; color: white; padding: 9px 12px; font: 800 13px var(--display); letter-spacing: .1em; }
 .site-nav { display: none; position: absolute; background: #17262d; left: 0; right: 0; top: 80px; z-index: 39; padding: 20px 24px 28px; gap: 0; box-shadow: 0 14px 24px #0b1923a0; flex-direction: column; align-items: stretch; }
 .site-nav.open { display: flex; }
 .nav-link { font-size: 23px; padding: 13px; border-bottom: 1px solid #415157; }
 .nav-link::after { display: none; }
 .nav-quote { align-self: flex-start; margin: 20px 0 0; }
 .hero-grid { min-height: 610px; grid-template-columns: 1fr .83fr; }
 .hero-content { padding: 90px 15px 55px 0; }
 .hero h1 { font-size: clamp(65px,7.6vw,84px); }
 .hero-media { min-height: 590px; }
 .hero-actions .button { padding: 15px 17px; font-size: 16px; }
 .services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .service-tile { min-height: 275px; }
 .tile-top { margin-bottom: 27px; }
 .statement-copy { padding: 68px 10px 68px 38px; }
 .statement-visual { min-height: 540px; }
 .quote-grid { grid-template-columns: .8fr 1.2fr; gap: 30px; }
 .form-row { grid-template-columns: 1fr; }
 .quote-panel { padding: 24px; }
 .inner-hero-grid { gap: 22px; }
 .service-row { gap: 35px; }
 .contact-layout { gap: 30px; }
 .contact-form-surface { padding: 30px; }
 .footer-head { gap: 30px; }
}
@media (max-width: 720px) {
 .wrap { width: min(var(--wrap), calc(100% - 34px)); }
 .topline { height: 25px; font-size: 9px; }
 .site-header { height: 70px; }
 .site-nav { top: 70px; }
 .brand-symbol { width: 38px; height: 40px; font-size: 31px; }
 .brand-words strong { font-size: 26px; }
 .brand-words small { font-size: 10px; }
 .section { padding-block: 74px; }
 .section-label { margin-bottom: 23px; }
 .section h2 { font-size: clamp(46px,10vw,70px); }
 .section-heading-grid { grid-template-columns: 1fr; gap: 18px; margin-bottom: 31px; }
 .section-heading-grid p { max-width: 600px; }
 .hero-grid { display: flex; flex-direction: column; min-height: 0; }
 .hero-content { padding: 73px 0 34px; }
 .hero h1 { font-size: clamp(62px,11.5vw,93px); margin: 21px 0; }
 .hero-content>p { max-width: 560px; margin-bottom: 23px; font-size: 16px; }
 .hero-foot { display: none; }
 .hero-media { min-height: 405px; margin: 0 -17px; }
 .hero-image-wrap { min-height: 405px; }
 .hero-image-wrap::before { background: linear-gradient(0deg,#15232ed9,transparent 40%); }
 .hero-image-wrap img { object-position: center 45%; }
 .image-corner--tl { top: 15px; left: 15px; }
 .image-corner--br { bottom: 15px; right: 15px; }
 .photo-credit { left: 20px; right: 20px; bottom: 23px; }
 .ticker-content { min-height: 53px; gap: 20px; justify-content: flex-start; overflow: hidden; }
 .ticker-content span { white-space: nowrap; font-size: 12px; }
 .ticker-content span:last-child { display: none; }
 .featured-grid, .gallery-grid, .related-grid { grid-template-columns: 1fr; }
 .project-cover { height: 360px; }
 .statement-grid, .quote-grid, .service-row, .inner-hero-grid, .about-layout, .contact-layout, .project-hero-layout, .project-detail-layout, .faq-layout { grid-template-columns: 1fr; }
 .statement-visual { min-height: 430px; margin-right: -17px; margin-left: -17px; }
 .statement-copy { padding: 65px 0 75px; }
 .steps-grid { grid-template-columns: 1fr; }
 .step { min-height: 0; }
 .step:not(:last-child)::after { display: none; }
 .quote-intro-photo { display: none; }
 .quote-panel { margin-top: 16px; }
 .quote-intro h2 { margin-bottom: 14px; }
 .form-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .inner-hero { padding-block: 69px; }
 .inner-hero h1, .project-hero h1 { font-size: clamp(60px,11vw,85px); }
 .inner-aside { display: none; }
 .hero-mini-image { display: none; }
 .service-row { padding-block: 55px; gap: 27px; }
 .service-row:nth-child(even) .service-text, .service-row:nth-child(even) .service-illustration { order: unset; }
 .service-illustration { height: 405px; }
 .gallery-top { align-items: flex-start; flex-direction: column; }
 .gallery-top h2 { font-size: 51px; }
 .gallery-promise { align-items: flex-start; flex-direction: column; }
 .dark-cta-content, .quote-rail-inner { align-items: flex-start; flex-direction: column; }
 .project-hero-image { height: 430px; }
 .project-photo-section { padding-top: 45px; }
 .about-portrait { min-height: 480px; }
 .about-portrait img { height: 480px; }
 .value-grid { grid-template-columns: 1fr; }
 .contact-thumb { display: none; }
 .contact-form-surface { padding: 28px 20px 32px; }
 .form-title h2 { font-size: 40px; }
 .faq-layout { gap: 30px; }
 .footer-head { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; }
 .footer-head>div:first-child { grid-column: 1/-1; }
 .footer-bottom { padding-block: 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 450px) {
 .hero h1 { font-size: clamp(55px,12vw,67px); }
 .hero-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 9px; }
 .hero-actions .button { font-size: 14px; gap: 4px; padding: 12px 8px; }
 .hero-media, .hero-image-wrap { min-height: 355px; }
 .services-grid { grid-template-columns: 1fr; }
 .service-tile { min-height: 255px; }
 .services-tail { flex-direction: column; align-items: flex-start; gap: 8px; }
 .project-cover { height: 300px; }
 .project-info h3 { font-size: 31px; }
 .form-row { grid-template-columns: 1fr; }
 .inner-hero h1 { font-size: 59px; }
 .service-illustration { height: 330px; }
 .project-hero-image { height: 330px; }
 .project-photo { height: 285px; }
 .lightbox { padding: 15px 42px; }
 .lightbox-prev { left: 4px; } .lightbox-next { right: 4px; }
 .footer-head { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* Disable unconfigured contact forms without hiding the fields or altering page layout. */
.quote-form[data-form-ready="false"] .submit-button { opacity: .5; cursor: not-allowed; }
.form-setup-note { margin: .7rem 0; font-size: .9rem; line-height: 1.5; color: var(--copper); }

/* ===============================================================
   BLUE DOOR CREATION / 2026 BRAND REFRESH
   The established brand mark informs this warmer, cleaner visual
   language: off-white, ink, periwinkle and honest project photography.
   =============================================================== */
:root {
  --ink: #272a38;
  --deep: #2c3449;
  --deep-2: #3c4565;
  --steel: #707997;
  --copper: #6f78bd;
  --copper-hover: #5665b0;
  --bone: #faf9f5;
  --paper: #f0f0f6;
  --white: #fff;
  --muted: #707382;
  --line: #e1e1e8;
  --line-dark: #626985;
  --script: 'Caveat', cursive;
  --radius: 8px;
  --wrap: 1200px;
}
body { background:var(--bone); color:var(--ink); line-height:1.65; }
.topline { background:#30364d; color:#e3e6f3; height:32px; letter-spacing:.07em; font-size:10px; }
.topline-dash { color:#bfc6ff; }
.site-header { background:rgba(255,255,255,.975); color:var(--ink); height:92px; box-shadow:0 3px 16px #252a3910; border-bottom:1px solid #e7e8ef; }
.nav-shell { gap:24px; }
.brand { min-width:235px; gap:11px; }
.brand-logo { width:60px; height:60px; object-fit:contain; flex-shrink:0; }
.brand-words { line-height:.84; padding-top:4px; }
.brand-words strong { font:700 33px/.9 var(--script); color:#353742; letter-spacing:-.04em; white-space:nowrap; text-transform:none; }
.brand-words small { font:800 11px/1.3 var(--body); color:var(--copper); letter-spacing:.31em; margin:5px 0 0 6px; }
.nav-link { color:#3c4052; font:700 13px var(--body); letter-spacing:.015em; text-transform:none; }
.nav-link.is-current,.nav-link:hover { color:#5a64ae; }
.nav-link::after { background:var(--copper); bottom:7px; }
.nav-quote,.button { font:800 12px var(--body); letter-spacing:.055em; text-transform:uppercase; border-radius:7px; transition:background .18s,transform .18s,box-shadow .18s; }
.nav-quote { color:white; background:var(--deep); padding:17px 18px; }
.nav-quote:hover { background:var(--copper-hover); }
.button { min-height:52px; padding:17px 23px; }
.button--copper { background:#6472bd; color:white; box-shadow:0 7px 20px #5363ab2b; }
.button--copper:hover { background:#4d5ca4; box-shadow:0 10px 23px #5363ab32; }
.button--dark { background:#323c54; }
.button--dark:hover { background:#4b5685; }
.button--outline-light { color:var(--ink); border:1px solid #adb3d4; background:white; }
.button--outline-light:hover { border-color:var(--copper); background:#efeff9; color:#4d5694; }
.button--light { background:#fff; color:#303851; }
.button--light:hover { background:#e2e5f8; transform:translateY(-2px); }
.text-link { border-bottom:1px solid #9ca5da; color:#3d497f; font-size:12px; }
.text-link:hover { color:#6975be; }
.eyebrow,.eyebrow--light { color:#6472bc; font:800 12px var(--body); letter-spacing:.13em; }
.eyebrow-mark { width:17px; border-radius:4px; background:var(--copper); }
.section { padding-block:100px; }
.section-label { font:800 11px var(--body); letter-spacing:.14em; color:#697089; margin-bottom:25px; }
.section-label>span:first-child { color:#707ac5; font:800 12px var(--body); }
.section-label>i { background:#c4c9e6; width:48px; }
.section h2 { font:800 clamp(42px,4.5vw,67px)/1.09 var(--body); text-transform:none; letter-spacing:-.05em; text-wrap:balance; }
.section h2 span { color:#6572b8; }
.section-heading-grid { align-items:end; margin-bottom:39px; }
.section-heading-grid p { color:#626677; font-size:16px; line-height:1.8; }
/* Spacious editorial hero with a real project photo */
.hero { background:linear-gradient(115deg,#faf9f5 15%,#f4f4fa 100%); color:var(--ink); overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1.04fr .96fr; min-height:630px; align-items:stretch; gap:0; }
.hero-content { padding:92px 44px 48px 0; justify-content:center; }
.hero-kicker { display:inline-flex; align-items:center; gap:9px; border:1px solid #d8dbee; border-radius:90px; background:white; color:#58649f; padding:10px 14px; font:800 10px var(--body); letter-spacing:.12em; }
.kicker-dot { background:#7280c6; height:7px; width:7px; border-radius:100%; }
.hero h1 { color:#272b3a; font:800 clamp(55px,5.45vw,78px)/1.055 var(--body); letter-spacing:-.071em; max-width:690px; text-transform:none; margin:29px 0 23px; }
.hero h1 em { color:#6875bf; font:600 clamp(62px,6.2vw,90px)/.85 var(--script); letter-spacing:-.04em; display:inline-block; margin-top:8px; transform:rotate(-2deg); }
.hero-content>p { color:#626677; font-size:16px; line-height:1.85; max-width:500px; margin-bottom:29px; }
.hero-actions { gap:10px; }
.hero-foot { margin-top:49px; color:#7e8290; font:800 9px var(--body); letter-spacing:.095em; gap:10px; }
.hero-stamp { color:#505c9c; }
.hero-foot .slash { color:#8b94cc; }
.hero-media { min-height:620px; margin:36px 0 36px 5%; position:relative; border-radius:90px 10px 10px 10px; }
.hero-media::before { content:''; position:absolute; z-index:0; inset:-13px -13px 13px 13px; border:2px solid #d9dcef; border-radius:97px 12px 14px 14px; }
.hero-image-wrap { position:absolute; inset:0; min-height:0; height:100%; background:#788090; border-radius:90px 10px 10px 10px; }
.hero-image-wrap::before { content:''; background:linear-gradient(0deg,#0c1421a6,transparent 39%); z-index:1; position:absolute; inset:0; }
.hero-image-wrap img { height:100%; width:100%; object-fit:cover; object-position:50% 40%; filter:none; }
.hero-photo-note { position:absolute; top:22px; right:19px; color:#f7f8ff; background:#303a50bb; padding:8px 11px; font:700 9px var(--body); letter-spacing:.12em; border-radius:4px; }
.photo-credit { bottom:23px; left:24px; right:23px; font-family:var(--body); letter-spacing:.025em; }
.photo-credit strong { font-size:12px; }
.photo-credit small { color:#e9e9f0; font-size:11px; }
.photo-credit a { background:white; color:#333c57; width:38px; height:38px; border-radius:50%; margin-left:auto; display:grid; place-items:center; }
.tiny-square { width:3px; height:35px; background:#bac2fa; }
.hero-bottom-line,.image-corner { display:none; }
.ticker { background:#e9ebf6; border-bottom:1px solid #dadef0; border-top:1px solid #dadef0; }
.ticker-content { display:flex; justify-content:center; gap:32px; min-height:63px; font:800 10px var(--body); letter-spacing:.15em; color:#535d87; }
.ticker-content b { margin:0; font-size:17px; color:#8893cc; }
/* Service cards: category-first, tasteful icons, no invented portfolio photos */
.section-services { background:#fff; }
.services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.service-tile { min-height:320px; padding:27px 24px; border:1px solid #e1e4ef; background:#fbfbfe; border-radius:13px; box-shadow:none; }
.service-tile:hover { transform:translateY(-3px); border-color:#aab4e2; box-shadow:0 15px 27px #343b6a10; }
.tile-top { margin-bottom:40px; }
.tile-top>span:first-child { font:700 11px var(--body); color:#8b91aa; }
.tile-icon { width:48px; height:48px; border:1px solid #dce0f1; background:#f0f1fa; border-radius:12px; color:#6b76bc; }
.service-tile h3 { font:800 25px/1.18 var(--body); letter-spacing:-.035em; text-transform:none; margin-bottom:12px; }
.service-tile p { color:#737786; font-size:13px; }
.services-tail p { color:#737787; }
/* Dark studio feature gives the brand depth */
.maker-feature { background:#30384e; color:white; overflow:hidden; padding-block:0; }
.maker-grid { display:grid; grid-template-columns:1.04fr .96fr; gap:7vw; align-items:stretch; }
.maker-photo { position:relative; height:600px; margin-left:calc((min(100vw,var(--wrap)) - 100vw)/2); overflow:hidden; }
.maker-photo img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.maker-photo::after { content:''; pointer-events:none; position:absolute; inset:0; background:linear-gradient(0deg,#20293b91,transparent 34%); }
.maker-photo>span { position:absolute; bottom:23px; left:27px; z-index:1; border:1px solid #ffffff85; color:white; padding:10px 13px; font:700 10px var(--body); letter-spacing:.12em; background:#232b3c88; border-radius:6px; }
.maker-copy { padding-block:100px 90px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.maker-copy .section-label { color:#c4cbea; }
.maker-copy h2 { font-size:clamp(46px,4.9vw,72px); max-width:490px; }
.maker-copy h2 em { font:600 1.22em/.78 var(--script); color:#b8c1ff; }
.maker-copy p { color:#d3d8e8; margin:24px 0 30px; line-height:1.9; max-width:440px; }
.maker-note { font:700 10px var(--body); color:#b2bde7; letter-spacing:.13em; padding-top:42px; }
.maker-note span { color:white; padding:0 7px; }
/* Finished work */
.work-section,.gallery-main,.related-section { background:#f5f5fa; }
.featured-grid,.related-grid { gap:20px; }
.project-card { border:1px solid #e4e6f0; border-radius:13px; box-shadow:0 5px 26px #282a4710; }
.project-cover { background:#777c83; }
.project-view { background:#fff; color:#343d5b; font:800 10px var(--body); border-radius:5px; letter-spacing:.06em; }
.project-index { font:800 10px var(--body); letter-spacing:.12em; color:#7b83bd; }
.project-info { padding:27px 29px 32px; }
.project-info h3 { font:800 26px/1.2 var(--body); letter-spacing:-.04em; text-transform:none; }
.project-info h3 a:hover { color:#626eb3; }
.project-info p { color:#6b7080; font-size:14px; }
.tag-list span { background:#edf0fa; border-radius:80px; color:#636b9a; font:700 10px var(--body); padding:7px 11px; }
/* The custom-sign section is an explicitly labeled concept, not a purported build. */
.statement-section { background:#fff; }
.statement-visual { background:#e8eaf3; min-height:555px; }
.statement-visual::after { background:radial-gradient(circle at 50% 50%,transparent,#cfd3e17c); }
.sign-sketch { border:1px dashed #9ea7ca; color:#59617a; transform:rotate(-3deg); background:#f9f9ff; padding:32px; border-radius:6px; }
.sign-plate { border:8px solid #454c67; background:linear-gradient(135deg,#596583,#29354b); box-shadow:inset 0 0 0 3px #bdc4d8; }
.sign-plate>span { color:#fff; text-shadow:none; }
.sign-plate>span b { color:#b7c2ff; }
.sign-plate small { color:#d8ddf7; }
.concept-note { position:absolute; top:23px; left:28px; font:800 10px var(--body); color:#53618e; letter-spacing:.13em; }
.statement-copy { padding-block:87px; }
.statement-copy h2 { font:800 clamp(42px,4.7vw,68px)/1.12 var(--body); text-transform:none; letter-spacing:-.055em; }
.statement-copy h2 span { font:600 1.23em/.9 var(--script); letter-spacing:0; }
.statement-copy>p { color:#6d7081; }
.statement-copy .legal-note { color:#858895; }
.process-section { background:#f6f6fb; }
.steps-grid { gap:14px; border:0; }
.step { background:#fff; border:1px solid #e2e5f0; border-radius:12px; padding:32px; }
.step:not(:last-child)::after { display:none; }
.step-no { font:700 15px var(--body); color:#7680bc; }
.step h3 { font:800 21px var(--body); letter-spacing:-.03em; }
.step p { color:#727687; }
/* Contact form on homepage and contact page */
.quote-section { background:#343d56; color:white; }
.quote-section .section-label { color:#c1caed; }
.quote-grid { gap:6vw; }
.quote-intro h2 { font-size:clamp(46px,5vw,70px); }
.quote-intro h2 span { font:600 1.25em/.8 var(--script); color:#b8c2ff; }
.quote-intro>p { color:#d1d6e8; }
.quote-intro-photo { height:260px; border-radius:12px; }
.photo-note { background:#333c56d9; font:700 10px var(--body); letter-spacing:.09em; }
.facebook-cta { color:#e3e7f9; }
.quote-panel { background:#fff; border:1px solid #e7e9f2; border-top:6px solid #9ba6e5; padding:33px; border-radius:14px; box-shadow:0 15px 30px #11192a1f; }
.quote-panel-head { font:800 10px var(--body); color:#555d7a; }
.quote-panel-head strong { color:#6572bc; }
.field label { color:#454b60; }
.field label span { color:#6975bc; }
.field input,.field select,.field textarea { border:1px solid #dadee9; border-radius:6px; background:#fcfcff; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#7180c4; outline:2px solid #a4ade0; }
.form-status { background:#f3f2fb; color:#4a5684; border-color:#7b87cf; }
.form-setup-note { color:#626eb6; background:#f0f1fc; padding:12px 14px; border-radius:5px; }
/* All inner pages share the soft blue studio identity */
.inner-hero { background:#353e58; padding-block:93px; }
.inner-hero::before { background:radial-gradient(ellipse at 90% 35%,#6879a28c,transparent 62%); opacity:.5; }
.inner-hero h1,.project-hero h1 { font:800 clamp(52px,5.6vw,80px)/1.03 var(--body); letter-spacing:-.06em; text-transform:none; }
.inner-hero h1 em { font:600 1.15em/.85 var(--script); color:#c5cdfb; }
.inner-hero p { color:#d4d9ed; }
.inner-hero .eyebrow--light,.project-hero .eyebrow--light { color:#c5cdf9; }
.inner-aside { border-left:3px solid #98a4db; color:#d8def0; font:700 21px/1.4 var(--body); }
.inner-aside strong { color:#fff; }
.inner-aside span:last-child { color:#c4cee4; }
.service-row { border-color:#d8dbe9; }
.service-text h2 { font:800 clamp(35px,4vw,58px)/1.1 var(--body); text-transform:none; }
.service-text .service-lead { font:700 23px/1.25 var(--body); }
.service-illustration,.hero-mini-image { border-radius:13px; overflow:hidden; }
.sign-illustration { background:#313b54; }
.schematic { background:linear-gradient(155deg,#333f60,#64729c); }
.check-list svg { color:#6476c5; }
.quote-rail,.dark-cta { background:#37415c; }
.project-hero { background:#343d57; }
.project-hero-image { border:0; border-radius:12px; }
.project-detail-meta { background:#eeeff8; border-top:4px solid #7785cf; border-radius:8px; }
.project-detail-meta dt { color:#6975ae; }
.project-photo { border-radius:9px; }
.about-portrait { border-radius:12px; }
.about-portrait>span { background:#323b58de; }
.values-section { background:#f1f1f8; }
.value-grid article { border-top:3px solid #8792cf; border-radius:8px; }
.value-grid article>span { color:#737fc4; }
.value-grid h3 { font:800 20px var(--body); }
.contact-main { background:#f5f5fa; }
.contact-mini { border-color:#67759b; border-radius:9px; }
.contact-mini span { color:#bbc6ed; }
.contact-mini strong { font:800 31px/1.2 var(--body); }
.contact-mini svg { color:#a6b2ee; }
.contact-hints li { border-color:#dbe0ed; }
.contact-hints li span,.contact-alt>span,.form-title>span { color:#6b78bd; }
.contact-form-surface { border-top:5px solid #8492d0; border-radius:12px; box-shadow:0 13px 35px #252b3d12; }
.form-title h2 { font:800 29px var(--body); letter-spacing:-.03em; }
.faq-items details { border-color:#dce0ed; }
.faq-items details:last-child { border-color:#dce0ed; }
.faq-items summary { font:700 19px var(--body); }
.privacy-disclaimer { background:#eaecf8; }
/* Footer now uses the actual door mark as a consistent brand asset */
.site-footer { background:#262d40; padding-top:68px; }
.footer-head { gap:66px; }
.footer-brand { display:inline-flex; align-items:center; gap:12px; }
.footer-brand img { border-radius:50%; }
.footer-brand>span { display:grid; }
.footer-brand strong { font:700 37px/.9 var(--script); color:#fff; }
.footer-brand small { color:#abb7f2; font:800 10px var(--body); letter-spacing:.3em; padding:7px 0 0 6px; }
.footer-head p { color:#bbc1d7; }
.footer-links strong { color:#b4c0f7; font:800 11px var(--body); }
.footer-links a,.footer-bottom { color:#c8cee2; }
.footer-bottom { border-color:#4c536b; }
.footer-sep { color:#a7b4eb; }
/* Responsive adjustments follow all legacy responsive rules. */
@media (max-width: 1100px) {
 .brand { min-width:195px; }
 .nav-shell { gap:12px; }
 .site-nav { gap:17px; }
 .hero-grid { grid-template-columns:1fr .95fr; }
 .hero h1 { font-size:clamp(47px,5.65vw,70px); }
 .hero h1 em { font-size:clamp(58px,6vw,82px); }
 .hero-content { padding-right:30px; }
 .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .service-tile { min-height:260px; }
}
@media (max-width: 930px) {
 .site-header { height:82px; }
 .brand-logo { width:52px; height:52px; }
 .brand-words strong { font-size:30px; }
 .nav-toggle { color:#424a64; border-color:#d6dbe9; border-radius:7px; background:white; font:800 11px var(--body); }
 .site-nav { top:82px; background:#fff; border-top:1px solid #e6e8f0; box-shadow:0 15px 30px #252a3a19; }
 .nav-link { color:#31394b; font:800 15px var(--body); border-color:#e9ecf4; }
 .nav-quote { margin-top:20px; }
 .hero-grid { grid-template-columns:1.1fr .9fr; min-height:575px; }
 .hero-content { padding-block:58px; }
 .hero h1 { font-size:clamp(49px,6.1vw,66px); }
 .hero h1 em { font-size:clamp(57px,7.1vw,77px); }
 .hero-media { min-height:525px; }
 .hero-foot { padding-top:0; margin-top:27px; }
 .maker-grid { grid-template-columns:1fr 1fr; gap:35px; }
 .maker-photo { height:560px; }
 .maker-copy { padding-block:65px; }
}
@media (max-width: 720px) {
 .wrap { width:min(var(--wrap), calc(100% - 38px)); }
 .topline { height:29px; }
 .site-header { height:75px; }
 .site-nav { top:75px; }
 .brand-logo { width:48px; height:48px; }
 .brand-words strong { font-size:29px; }
 .brand-words small { font-size:9px; }
 .section { padding-block:75px; }
 .section h2 { font-size:clamp(37px,9vw,55px); line-height:1.13; }
 .section-heading-grid { grid-template-columns:1fr; gap:17px; }
 .hero-grid { display:flex; flex-direction:column; }
 .hero-content { padding:62px 0 31px; }
 .hero h1 { font-size:clamp(49px,10.2vw,72px); }
 .hero h1 em { font-size:clamp(61px,12.2vw,91px); }
 .hero-content>p { font-size:15px; line-height:1.78; }
 .hero-foot { display:none; }
 .hero-media { margin:0 0 42px; width:100%; height:470px; min-height:0; border-radius:65px 8px 8px 8px; }
 .hero-image-wrap { border-radius:65px 8px 8px 8px; }
 .hero-media::before { inset:-9px -9px 9px 9px; border-radius:72px 10px 10px 10px; }
 .hero-photo-note { top:14px; right:13px; font-size:8px; }
 .photo-credit { left:17px; right:17px; }
 .ticker-content { min-height:56px; justify-content:center; gap:13px; }
 .ticker-content span { font-size:9px; }
 .ticker-content span:last-child { display:inline; }
 .ticker-content b { margin:0; font-size:12px; }
 .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
 .service-tile { padding:23px 20px; }
 .service-tile h3 { font-size:22px; }
 .service-tile p { font-size:12px; }
 .maker-grid { grid-template-columns:1fr; gap:0; }
 .maker-photo { height:405px; margin-right:calc((min(100vw,var(--wrap)) - 100vw)/2); }
 .maker-copy { padding-block:70px; }
 .maker-copy h2 { font-size:clamp(42px,9vw,64px); }
 .featured-grid,.gallery-grid,.related-grid { grid-template-columns:1fr; }
 .statement-grid,.quote-grid,.inner-hero-grid,.service-row,.about-layout,.contact-layout,.project-hero-layout,.project-detail-layout,.faq-layout { grid-template-columns:1fr; }
 .statement-visual { min-height:420px; margin-left:-19px; margin-right:-19px; }
 .statement-copy { padding:65px 0; }
 .quote-grid { gap:24px; }
 .quote-intro-photo { display:block; height:230px; }
 .quote-panel { margin-top:7px; }
 .inner-hero { padding-block:73px; }
 .inner-hero h1,.project-hero h1 { font-size:clamp(47px,10vw,69px); }
 .service-illustration { height:375px; }
 .footer-head { grid-template-columns:1fr 1fr; gap:34px; }
 .footer-head>div:first-child { grid-column:1/-1; }
}
@media (max-width: 460px) {
 .hero-kicker { font-size:8px; letter-spacing:.09em; }
 .hero h1 { font-size:clamp(43px,10.7vw,55px); }
 .hero h1 em { font-size:clamp(56px,14vw,70px); }
 .hero-actions { display:grid; grid-template-columns:1fr 1fr; }
 .hero-actions .button { font-size:10px; gap:7px; padding:13px 9px; white-space:normal; }
 .hero-media { height:355px; }
 .ticker-content { gap:9px; }
 .ticker-content span { font-size:8px; white-space:nowrap; }
 .services-grid { grid-template-columns:1fr; }
 .service-tile { min-height:235px; }
 .tile-top { margin-bottom:25px; }
 .maker-photo { height:330px; }
 .form-row { grid-template-columns:1fr; }
 .quote-panel { padding:23px 18px; }
 .project-cover { height:295px; }
 .project-info h3 { font-size:24px; }
 .service-illustration { height:320px; }
 .footer-brand strong { font-size:32px; }
}