:root{--ink:#f2f0e9;--gold:#d8b36c;--paper:#101c23;--muted:#b4c0c5;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ae7a24;outline-offset:5px}header{display:flex;align-items:center;justify-content:space-between;padding:19px 5%;background:var(--paper);border-bottom:1px solid #30424b;gap:24px}.brand{display:flex;gap:12px;align-items:center;line-height:1.15;font-size:18px;letter-spacing:3px;font-weight:700}.brand img{width:57px;height:57px;border-radius:50%}.brand small{display:block;letter-spacing:3.4px;font-size:9px;margin-top:7px;font-weight:400}nav{display:flex;gap:34px;font-size:13px}nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:6px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;padding:17px 24px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;border:0;cursor:pointer}.button:hover{background:#294956}.button.small{padding:12px 20px}.button.gold{background:var(--gold);color:var(--ink)}.button.gold:hover{background:#e6c489}.button span{font-size:20px}.hero{display:grid;grid-template-columns:1fr 1.03fr;min-height:705px}.hero-copy{padding:60px 10% 30px}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:600;margin:0 0 30px;display:flex;align-items:center;gap:9px}.eyebrow>span{width:6px;height:6px;background:var(--gold);border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-2.9px;line-height:1.03}h1{font-size:clamp(55px,5.7vw,88px);margin-bottom:30px}em{font-weight:400;color:#d8b36c}h1 em{color:#dfbd7a}.intro{font-size:15px;max-width:380px;color:#b4c0c5;line-height:1.8;margin-bottom:30px}.hero-bottom{margin-top:54px;display:flex;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:1px}.hero-bottom a{letter-spacing:0;font-size:11px}.hero-image{position:relative;min-height:600px;overflow:hidden;background:#1c2c34}.hero-image>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.hero-image:after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#152b3190)}.image-label{position:absolute;bottom:66px;left:8%;z-index:1;color:white;font-size:10px;letter-spacing:2px}.image-label small{display:block;font-size:11px;letter-spacing:0;margin-top:8px;opacity:.85}.image-index{position:absolute;z-index:1;right:25px;top:25px;background:#101c23e6;font-size:9px;letter-spacing:1.6px;padding:10px 13px}.ribbon{padding:23px 5%;display:flex;justify-content:space-between;background:var(--ink);color:#e6e6dc;font-size:12px;letter-spacing:.6px}.section{padding:100px 7%}.section-top{display:grid;grid-template-columns:1fr 2fr 1.3fr;gap:35px;align-items:start}h2{font-size:clamp(36px,4vw,56px);margin-bottom:25px;letter-spacing:-1.6px}.section-top>p:last-child{color:var(--muted);font-size:14px;padding-top:5px}.service-list{margin-top:46px}.service-list article{border-top:1px solid #34444d;padding:30px 0;display:grid;grid-template-columns:.25fr 1.8fr 1fr;gap:30px;align-items:start}.service-list article:last-child{border-bottom:1px solid #34444d}.number{font-size:11px;color:#d8b36c;padding-top:7px}h3{font-size:22px;font-weight:400;margin-bottom:9px;line-height:1.3}.service-list p{font-size:14px;color:var(--muted);max-width:570px;margin-bottom:0}.service-tag{font-size:9px;letter-spacing:1.5px;justify-self:end;padding-top:9px}.approach{background:#182a33;padding:90px 7%;display:grid;grid-template-columns:1fr 1fr;gap:11%}.approach-intro>p:not(.eyebrow){color:var(--muted);max-width:420px;font-size:14px}.text-link{font-size:13px;display:inline-block;margin-top:15px;border-bottom:1px solid var(--ink);padding-bottom:5px}.steps article{display:flex;gap:26px;border-top:1px solid #3a4c56;padding:26px 0}.steps article>span{font-size:12px;color:#d8b36c}.steps h3{font-size:19px}.steps p{font-size:13px;color:var(--muted);margin:0}.areas{display:grid;grid-template-columns:1fr 3.3fr;gap:35px}.areas>div{display:grid;grid-template-columns:1.5fr 1fr;gap:20px 50px}.areas p:not(.eyebrow){color:var(--muted);font-size:14px}.area-tags{display:flex;gap:10px;flex-wrap:wrap;grid-column:1/-1}.area-tags span{font-size:11px;border:1px solid #465963;border-radius:30px;padding:8px 18px}.contact{padding:90px 7%;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:9%}.contact em{color:var(--gold)}.contact-copy>p:not(.eyebrow){max-width:360px;font-size:14px;color:#c0cacb}.email{font-size:clamp(13px,1.3vw,18px);border-bottom:1px solid #728088;display:inline-block;padding:10px 0;margin:15px 0 20px}.contact .form-note{font-size:11px;color:#b7c3c5;line-height:1.8}.contact form>h3{font-family:Georgia,serif;font-size:27px;margin-bottom:28px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}label{font-size:11px;display:block;margin-bottom:18px;color:#e6e9e4}input,select,textarea{display:block;width:100%;border:1px solid #6a7a7e;background:#213b45;color:#fff;padding:12px 13px;margin-top:8px;font-size:13px;border-radius:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#aebbc0}.contact button{margin-bottom:12px}.contact .form-note{margin-top:5px}#enquiry{margin-top:22px;border-top:1px solid #607079;padding-top:22px}.form-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.form-actions .button{background:#f5f3ed;color:var(--ink)}.copy{background:transparent;color:white;border:1px solid #839195;padding:14px;cursor:pointer}#feedback{font-size:12px}footer{display:flex;align-items:center;gap:35px;padding:36px 5%;flex-wrap:wrap}footer .brand{font-size:13px}footer .brand img{width:44px;height:44px}footer .brand small{font-size:7px}footer p{font-size:12px;margin:0 auto 0 0;color:var(--muted)}footer>a:not(.brand){font-size:12px}footer>small{width:100%;font-size:10px;color:var(--muted);border-top:1px solid #34444d;padding-top:20px}@media(min-width:1600px){body{max-width:1800px;margin:auto}}@media(max-width:900px){header{padding:15px 5%}nav{gap:18px;font-size:12px}.hero-copy{padding:45px 8% 30px}.hero{min-height:640px}.hero-image{min-height:570px}h1{font-size:64px}.hero-bottom{flex-direction:column;margin-top:30px}.section-top{grid-template-columns:1fr 2fr}.section-top>p:last-child{grid-column:2}.service-tag{display:none}.service-list article{grid-template-columns:.15fr 2fr}.section{padding:70px 6%}.areas>div{grid-template-columns:1fr}.areas{grid-template-columns:1fr 3fr}.approach,.contact{gap:6%;padding:70px 6%}.form-row{grid-template-columns:1fr;gap:0}.email{font-size:13px}}@media(max-width:620px){header nav{display:none}.brand{font-size:14px;letter-spacing:2px}.brand img{width:45px;height:45px}.brand small{font-size:8px;letter-spacing:2.3px}.button.small{font-size:11px;gap:15px;padding:10px 14px}.hero{grid-template-columns:1fr}.hero-copy{padding:40px 6% 30px}.hero h1{font-size:68px}.hero .eyebrow{font-size:9px;margin-bottom:26px}.hero-bottom{flex-direction:row;margin-top:35px}.hero-image{min-height:390px}.image-label{bottom:35px}.ribbon{padding:20px 6%}.ribbon span:last-child{display:none}.section-top{display:block}.section-top>.eyebrow{margin-bottom:24px}.section-top>p:last-child{max-width:360px}.service-list{margin-top:30px}.service-list article{gap:18px;padding:25px 0}.service-list h3{font-size:22px}.service-list p{font-size:13px}.approach,.contact{grid-template-columns:1fr;gap:42px;padding:65px 6%}.areas{display:block}.areas>.eyebrow{margin-bottom:25px}.areas h2{font-size:40px}.areas>div{gap:10px}.contact h2{font-size:55px}.email{font-size:16px}.form-row{grid-template-columns:1fr 1fr;gap:14px}footer{gap:25px;padding:30px 6%}footer p{display:none}footer>a:not(.brand){margin-left:auto}h2{font-size:43px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dark Sea2Sky palette */
header{background:#0d181f}.button{background:#263d49;color:#f2f0e9}.button:hover{background:#345363}.button.gold,.button.gold:hover{color:#101c23}.button.small{background:var(--gold);color:#101c23}.button.small:hover{background:#e6c489}.ribbon{background:#0a141a;border-block:1px solid #30424b}.hero-image>img{filter:brightness(.78) saturate(.88)}.hero-image:after{inset:0;background:linear-gradient(180deg,#101c2312 40%,#101c23a6)}.image-index{color:#e7e9e5}.text-link{border-color:#b4c0c5}.contact{background:#0b161d;color:#f2f0e9}input,select,textarea{background:#172a34;border-color:#536873}.form-actions .button{background:var(--gold);color:#101c23}footer{background:#0d181f}.area-tags span{background:#172a34}.hero-bottom{color:#b4c0c5}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#e4bf7b}::selection{background:#d8b36c;color:#101c23}

/* Larger supplied company logo, shown in its original proportions. */
.brand{gap:20px}.brand img{width:144px;height:auto;aspect-ratio:664/567;object-fit:contain;border-radius:4px;display:block}header{padding-top:14px;padding-bottom:14px}footer .brand img{width:118px;height:auto}.brand small{line-height:1.3}html{scroll-padding-top:165px}@media(max-width:620px){.brand{gap:12px}.brand img{width:100px;height:auto}.brand{font-size:13px;letter-spacing:1.5px}.brand small{font-size:7px;letter-spacing:1.8px}header{gap:12px;padding:12px 5%}.button.small{gap:10px;padding:10px 12px}footer .brand img{width:100px;height:auto}html{scroll-padding-top:120px}}@media(max-width:360px){header .brand>span{display:none}}
/* Company wordmark */
.brand>span{font-family:Georgia,'Times New Roman',serif;font-size:29px;letter-spacing:2px;font-weight:400;color:var(--gold);line-height:1.08}.brand small{font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:500;letter-spacing:5px;color:#e3e7e6;margin-top:11px}footer .brand>span{font-size:25px}footer .brand small{font-size:9px;letter-spacing:4px}@media(max-width:620px){.brand>span{font-size:20px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:2.5px;margin-top:8px}footer .brand>span{font-size:20px}footer .brand small{font-size:8px;letter-spacing:2.5px}}@media(min-width:621px) and (max-width:900px){header nav{gap:16px}header{gap:18px}.brand>span{font-size:23px}.brand small{letter-spacing:3px}.brand{gap:14px}}

.brand-two{font-size:130%;color:#ffe0a1;line-height:1;vertical-align:baseline}

/* Letters rise in size from S through Y, on a shared baseline. */
.brand .brand-letter{font-size:calc(.82em + var(--letter-step)*.07em);line-height:1;vertical-align:baseline}.brand .brand-letter.brand-two{color:#ffe0a1}

/* Header branding and portfolio */
header .wordmark {
  font: 400 43.5px/1.08 Georgia, 'Times New Roman', serif;
  letter-spacing: 2px;
  color: var(--gold);
  white-space: nowrap;
}
header .wordmark small { font-size: 15px; }
header nav { gap: clamp(12px, 2vw, 30px); }
header nav a, header .button.small { white-space: nowrap; }
.logo-trigger { border: 0; background: transparent; padding: 0; cursor: zoom-in; }
.logo-trigger img { transition: transform .2s ease; }
.logo-trigger:is(:hover, :focus-visible) img { transform: scale(1.05); }
.logo-dialog {
  width: min(620px, calc(100vw - 32px), calc(100dvh - 32px));
  padding: 18px;
  border: 1px solid #a77b49;
  background: #101c23;
  color: var(--ink);
}
.logo-dialog::backdrop { background: #071016d9; }
.logo-dialog img { display: block; width: 100%; height: auto; }
.logo-dialog button {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 38px;
  height: 38px;
  border: 1px solid #a77b49;
  background: #101c23;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.button.logo-gold, .button.logo-gold:hover {
  color: #101c23;
  background: linear-gradient(145deg, #ffe2a4, #edbe7b 55%, #dca56b);
}
.button.logo-gold:hover { background: linear-gradient(145deg, #ffedc7, #f4cb90 55%, #e5b27d); }
.image-label a { text-decoration: underline; text-underline-offset: 3px; }
.portfolio { border-bottom: 1px solid #34444d; }
.portfolio-empty {
  margin-top: 36px;
  min-height: 220px;
  display: grid;
  place-content: center;
  padding: 30px;
  border: 1px dashed #536873;
  background: #14242c;
  text-align: center;
}
.portfolio-empty .eyebrow { justify-content: center; color: var(--gold); margin-bottom: 15px; }
.portfolio-empty p:last-child { color: var(--muted); margin-bottom: 0; }
@media (min-width: 621px) and (max-width: 1080px) {
  header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; }
  header nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  header .button.small { justify-self: end; }
}
@media (max-width: 620px) {
  header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  header nav { display: flex; flex-wrap: wrap; grid-column: 1 / -1; grid-row: 2; font-size: 11px; }
  header .wordmark { font-size: 30px; letter-spacing: 1px; }
  header .wordmark small { font-size: 12px; letter-spacing: 2px; }
  header .brand img { width: clamp(64px, 16vw, 100px); }
}
@media (max-width: 380px) {
  header .wordmark { font-size: 24px; }
  header .wordmark small { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-trigger img { transition: none; }
  .logo-trigger:is(:hover, :focus-visible) img { transform: none; }
}

/* Match the subtitle to the width of the main wordmark. */
header .wordmark > span { display: inline-grid; grid-template-columns: max-content; }
header .wordmark-title { display: block; white-space: nowrap; letter-spacing: .015em; }
header .wordmark small {
  display: flex;
  justify-content: space-between;
  width: 0;
  min-width: 100%;
  letter-spacing: 0;
}

/* Page interactions */
header .wordmark { font-size: 57.52875px; }
header .wordmark .brand-letter {
  display: inline-block;
  font-size: calc(.88em + var(--letter-step) * .045em);
}
/* Use a lining numeral to keep the 2 on the same visual progression. */
header .wordmark .brand-two { font-family: 'Times New Roman', serif; font-variant-numeric: lining-nums; }
header .wordmark small > span { display: inline-block; }
header .brand { width: fit-content; }
header .wordmark:focus-visible { color: #ffe0a1; }

@media (min-width: 1081px) and (max-width: 1180px) {
  header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; }
  header nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  header .button.small { justify-self: end; }
}
@media (max-width: 620px) {
  header .wordmark { font-size: 39.675px; }
}
@media (max-width: 380px) {
  header .wordmark { font-size: 31.74px; }
  header .brand { gap: 8px; }
}
@media (hover: hover) and (pointer: fine) {
  a, button, input, textarea, select, .wordmark small, .wordmark .brand-letter,
  .wordmark small > span, .hero-image > img, .image-index, .service-list article,
  .steps article, .portfolio-empty, .area-tags span {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
      filter .2s ease, transform .2s ease, box-shadow .2s ease;
  }

  a:hover { color: #ffe0a1; }
  .button:hover, .copy:hover { transform: translateY(-2px); box-shadow: 0 6px 16px #0004; }
  .button.logo-gold:hover, .button.gold:hover { color: #101c23; }
  .form-actions .button:hover { color: #101c23; background: #ffe0a1; }
  .copy:hover, input:hover, select:hover, textarea:hover { border-color: var(--gold); }

  header .brand:is(:hover, :focus-within) .logo-trigger img { transform: scale(1.05); filter: brightness(1.12); }
  header .brand:is(:hover, :focus-within) .wordmark,
  header .brand:is(:hover, :focus-within) .wordmark small { color: #ffe0a1; }
  .wordmark:hover .wordmark-title, .wordmark:focus-visible .wordmark-title { color: #fff3d4; }
  .hero-image:hover > img { transform: scale(1.025); filter: brightness(.88) saturate(.94); }
  .hero-image:hover .image-index { color: #ffe0a1; }

  .service-list article:hover, .steps article:hover, .portfolio-empty:hover { background-color: #ffffff07; border-color: #a77b49; }
  .service-list article:hover h3, .steps article:hover h3, .portfolio-empty:hover h3 { color: #ffe0a1; }
  .area-tags span:hover { background-color: #263d49; border-color: #a77b49; color: #ffe0a1; }
  .logo-dialog button:hover { color: #ffe0a1; border-color: #ffe0a1; }
}
@media (prefers-reduced-motion: reduce) {
  a, button, input, textarea, select, header .logo-trigger img, .wordmark small,
  .wordmark .brand-letter, .wordmark small > span, .hero-image > img, .image-index,
  .service-list article, .steps article, .portfolio-empty, .area-tags span { transition: none; }
  .button:hover, .copy:hover, .wordmark .brand-letter:hover, .wordmark small > span:hover,
  header .brand:is(:hover, :focus-within) .logo-trigger img, .hero-image:hover > img { transform: none; }
}

#refresh-page {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
}
#refresh-page:is(:hover, :focus-visible) {
  color: #ffe0a1;
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* Layout for the simplified section headings and service list. */
.hero h1 { font-size: clamp(42px, 5.2vw, 78px); overflow-wrap: break-word; }
.services .section-top, .portfolio .section-top, .service-list article, .areas { display: block; }
.areas > div { align-items: start; }
footer > a:not(.brand) { margin-left: auto; }

.portfolio-category { margin-top: 40px; }
.portfolio-category h3 { margin: 0 0 16px; }
.project-gallery,
.portfolio .section-top:has(.project-gallery-less:not([hidden])) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 84px), 104px));
  gap: 12px;
}
.project-gallery { display: grid; }
.project-gallery > a {
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3;
  background: transparent;
}
.project-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-gallery > a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-gallery > a { position: relative; transition: transform 180ms ease; }
  .project-gallery > a:hover { z-index: 2; }
  .project-gallery img { transition: filter 180ms ease; }
  .project-gallery a:hover img { filter: brightness(1.06); }
}
.project-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.project-controls button, .project-viewer form button {
  color: inherit; background: #142630; border: 1px solid #56717c; padding: 8px 12px; cursor: pointer;
}
.project-controls button:disabled { opacity: .5; cursor: default; }
.project-viewer { width: min(94vw, 1100px); color: #fff; background: #101c23; border: 0; }
.project-viewer::backdrop { background: #000c; }
.project-viewer form { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.project-viewer img { background-color: transparent; display: block; width: 100%; height: min(66vh, 660px); object-fit: contain; }
.project-viewer .project-controls { justify-content: center; margin: 12px 0 0; }

/* Match text hover feedback to the logo's gold. */
@media (hover: hover) and (pointer: fine) {
  :is(header nav a, #refresh-page, main h1, main h2, main h3, main p, main label, main .email, main .text-link, footer > a, footer > small, header .wordmark small, footer .brand small, .project-controls button, .project-viewer form button):hover {
    color: var(--gold);
  }
  main :is(h1, h2, h3, p) { width: fit-content; max-width: 100%; }
  main :is(h1, h2, h3, p):hover > em { color: inherit; }
}

@media (max-width: 620px) {
  header nav { column-gap: 16px; row-gap: 0; }
  header nav a, header #refresh-page {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
  }
  #quote-form .form-row { grid-template-columns: minmax(0, 1fr); }
  #quote-form :is(input, select, textarea) { font-size: 16px; }
  .project-viewer form button { min-height: 44px; }
}
@media (max-width: 420px) {
  header { grid-template-columns: minmax(0, 1fr); }
  header nav { grid-row: 2; }
  header .button.small { grid-row: 3; justify-self: start; }
}

.project-hover-preview {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  display: grid;
  place-items: center;
  background: transparent;
}
.project-hover-preview img { width: 100%; height: 100%; object-fit: contain; }

header > a.button.small,
.hero-copy > a.button.gold,
#quote-form > button.button.gold {
  border: 2px solid #000;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 6vw, 92px) clamp(24px, 5vw, 80px);
  background: linear-gradient(180deg, #101c23b8, #101c23d9 63%, #101c2359),
    #101c23 url("assets/vancouver-hero-panorama.jpg") 53% bottom / cover no-repeat;
}
.hero-copy .eyebrow {
  color: var(--gold);
  margin: 0 0 26px;
}
.hero .hero-copy h1 {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
  font-size: clamp(36px, 4.65vw, 76px);
  line-height: 1.03;
  letter-spacing: -.035em;
  margin: 0;
  text-wrap: balance;
}
.hero-copy h1 em { display: block; color: inherit; font-weight: inherit; }
.hero-copy .intro {
  max-width: 39ch;
  margin: 24px 0 30px;
  line-height: 1.65;
}
@media (max-width: 620px) {
  .hero-copy { padding: 40px clamp(20px, 6vw, 36px); }
  .hero-copy .eyebrow { margin-bottom: 18px; }
  .hero-copy .intro { margin: 18px 0 24px; }
  .hero-copy .button { max-width: 100%; gap: 14px; }
}

.service-list .service-subsection {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #34444d;
}

.approach {
  background-image: linear-gradient(100deg, #182a33dc, #182a33b8 38%, #182a33f5 66%), url("assets/renovation-planning-background.jpg");
  background-position: center, center 82%;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 620px) {
  .approach {
    background-image: linear-gradient(#182a33dc, #182a33ef), url("assets/renovation-planning-background.jpg");
    background-position: center, 32% bottom;
  }
}

#services {
  position: relative;
  isolation: isolate;
  background-color: #101c23;
}
#services::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 4vw, 64px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  background: linear-gradient(#101c2340, #101c2340), url("assets/renovation-services-background.jpg") center / cover no-repeat;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
              linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}

.project-gallery-more { margin-top: 24px; }
.project-gallery-button[hidden],
.project-gallery > a[hidden] { display: none; }

.header-stars { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .panorama-motion,
  .panorama-motion > span {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: inherit;
  }
  .panorama-motion {
    display: block;
    z-index: -1;
  }
  .panorama-clouds {
    mask-image: linear-gradient(#000 24%, transparent 50%);
    animation: panorama-cloud-drift 22s linear infinite;
  }
  .panorama-clouds + .panorama-clouds { animation-delay: -11s; }
  .panorama-water {
    mask-image: linear-gradient(transparent 83%, #000 90%, #000 94%, transparent 99%);
    animation: panorama-water-current 10s linear infinite;
  }
  .panorama-water + .panorama-water { animation-delay: -5s; }

  .header-stars {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  .header-stars > span {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--tail, 95px);
    height: 1px;
    transform-origin: right center;
    background: none;
    opacity: 0;
    filter: drop-shadow(0 0 2px #c4ddff80);
  }
  .header-stars > span::before {
    content: '';
    position: absolute;
    inset: -0.5px 0;
    background: linear-gradient(90deg, transparent, #a9caff18 25%, #c9dfff70 70%, #f3f6ff);
    clip-path: polygon(0 50%, 100% 0, 100% 100%);
  }
  .header-stars > span::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -1px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 3px #eaf3ff, 0 0 7px #c7dfff80;
  }
}
@keyframes panorama-cloud-drift {
  0% { transform: translateX(-7%) scaleX(1.17); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(7%) scaleX(1.17); opacity: 0; }
}
@keyframes panorama-water-current {
  0% { transform: translateX(-0.85%) scaleX(1.025); opacity: 0; }
  50% { opacity: 0.85; }
  100% { transform: translateX(0.85%) scaleX(1.025); opacity: 0; }
}

.portfolio .section-top:has(.project-gallery-less:not([hidden])) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  margin-bottom: 25px;
}
.portfolio .section-top:has(.project-gallery-less:not([hidden])) h2 { margin: 0; }
.project-gallery-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  background: #0d181f;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.project-gallery-button:hover { background: #263d49; }
.project-gallery-button img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 4px;
}
.project-gallery-button[hidden] { display: none; }

@media (min-width: 621px) {
  .portfolio .section-top:has(.project-gallery-less:not([hidden])) {
    display: grid;
    gap: 12px;
  }
  .portfolio .section-top:has(.project-gallery-less:not([hidden])) h2,
  .portfolio .project-gallery-less {
    grid-area: 1 / 1 / 2 / -1;
  }
  .portfolio .project-gallery-less { justify-self: end; }
}

body > header {
  position: relative;
  isolation: isolate;
}
body > header {
  background: linear-gradient(180deg, #0d181f12 35%, #0d181fa3),
              #0d181f url("assets/milky-way-header.jpg") 65% center / cover no-repeat;
}

.header-twinkles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.header-twinkles > span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff2d4;
  box-shadow: 0 0 7px 1px #ffe6b4;
  opacity: 0.14;
}

@supports (block-size: calc-size(auto, size * 1.2)) {
  body > header { block-size: calc-size(auto, size * 1.2); }
}
@supports not (block-size: calc-size(auto, size * 1.2)) {
  body > header { padding-block: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .panorama-motion { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .panorama-motion { container-type: size; }
  .panorama-motion > .panorama-harbour {
    --photo-width: max(100cqw, calc(100cqh * 2016 / 1111));
    inset: auto auto 0 calc((100cqw - var(--photo-width)) * 0.53);
    width: var(--photo-width);
    aspect-ratio: 2016 / 1111;
    background: none;
  }
  .panorama-vessel {
    position: absolute;
    width: clamp(10px, 2.5vw, 24px);
    height: 6px;
    translate: -50% -100%;
    opacity: 0;
    animation: harbour-pass 220s -102.5s linear infinite;
  }
  .panorama-vessel-small {
    width: clamp(8px, 1.8vw, 16px);
    margin-top: 3px;
    animation-duration: 260s;
    animation-delay: -97.5s;
  }
  .panorama-vessel::before,
  .panorama-vessel::after {
    content: "";
    position: absolute;
  }
  .panorama-vessel::before {
    inset: 0;
    clip-path: polygon(0 55%, 14% 55%, 14% 30%, 29% 30%, 29% 5%, 42% 5%, 42% 48%, 100% 48%, 90% 96%, 8% 96%);
    background: linear-gradient(#c0cbd2 54%, #344c60 55%);
  }
  .panorama-vessel::after {
    right: 95%;
    bottom: 0;
    width: 85%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #c3dbe17a);
  }
}
@keyframes harbour-pass {
  0.00% { left: 11.409%; top: 80.378%; opacity: 0; }
  2.11% { left: 13.145%; top: 80.558%; opacity: 0.87; }
  26.51% { left: 33.234%; top: 81.008%; opacity: 0.87; }
  28.07% { left: 34.524%; top: 81.278%; opacity: 0; }
  34.04% { left: 39.435%; top: 82.178%; opacity: 0; }
  35.36% { left: 40.526%; top: 82.718%; opacity: 0.87; }
  43.98% { left: 47.619%; top: 84.878%; opacity: 0.87; }
  46.69% { left: 49.851%; top: 85.689%; opacity: 0.87; }
  47.89% { left: 50.843%; top: 85.779%; opacity: 0; }
  48.98% { left: 51.736%; top: 86.049%; opacity: 0.87; }
  56.63% { left: 58.036%; top: 87.489%; opacity: 0.87; }
  67.17% { left: 66.716%; top: 89.199%; opacity: 0.87; }
  84.94% { left: 81.349%; top: 90.729%; opacity: 0.87; }
  97.59% { left: 91.766%; top: 90.189%; opacity: 0.87; }
  100.00% { left: 93.750%; top: 90.009%; opacity: 0; }
}

#contact {
  background: linear-gradient(180deg, #0b161de6, #0b161d80 48%, #0b161d50),
              #0b161d url("assets/contact-entryway-background.jpg") left bottom / cover no-repeat;
}
@media (max-width: 620px) {
  #contact {
    background-image: linear-gradient(180deg, #0b161dc9, #0b161def 43%, #0b161df5),
                      url("assets/contact-entryway-background.jpg");
  }
}

.hero-copy > a.button.gold {
  min-height: 44px;
  gap: 12px;
  padding: 7px 12px;
  color: #fff;
  background: rgb(216 179 108 / 50%);
  border-color: #d8b36c;
  text-shadow: 0 1px 2px #101c23;
}
.hero-copy > a.button.gold:hover {
  background: rgb(239 200 126 / 50%);
}
.hero-copy > a.button.gold span { font-size: 16px; }

body > header > a.button.small,
#quote-form > button.button.gold {
  background: rgb(216 179 108 / 50%);
  border-color: #d8b36c;
  color: #fff;
  text-shadow: 0 1px 2px #101c23;
}
body > header > a.button.small:hover,
#quote-form > button.button.gold:hover {
  background: rgb(239 200 126 / 50%);
  color: #fff;
}
body > footer > a:not(.brand) { font-size: 16.8px; }

.hero-copy {
  position: relative;
  isolation: isolate;
}
.hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: inherit;
  filter: brightness(1.3);
  mask-image: linear-gradient(transparent 62%, #000 72%, #000 78%, transparent 84%);
}

.hero-scene-motion { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .hero-scene-motion {
    position: absolute;
    inset: 0;
    display: block;
    container-type: size;
    pointer-events: none;
    --scene-light: .78;
    --scene-saturation: .88;
  }
  .hero-scene-motion > span {
    position: absolute;
    inset: 50% auto auto 50%;
    width: max(100cqw, calc(100cqh * 1122 / 1402));
    aspect-ratio: 1122 / 1402;
    translate: -50% -50%;
  }
  .hero-scene-motion > span::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/west-coast-fireplace-photo-with-floor-plan.jpg") center / 100% 100% no-repeat;
    filter: brightness(var(--scene-light)) saturate(var(--scene-saturation));
  }
  .hero-flame {
    mask-image: radial-gradient(ellipse 5% 3.4% at 47.7% 59.3%, #000 45%, transparent 100%);
  }
  .hero-flame::before {
    transform-origin: 47.7% 61%;
    animation: hero-flame-tongues 3.8s ease-in-out infinite;
  }
  .hero-flame.hero-flame-side {
    mask-image: radial-gradient(ellipse 4.1% 2.35% at 51.5% 60%, #000 35%, transparent 100%);
  }
  .hero-flame-side::before {
    transform-origin: 51.5% 61.3%;
    animation-duration: 5.26s;
    animation-delay: -1.72s;
  }
  .hero-window-trees {
    clip-path: polygon(81% 25%, 100% 16%, 100% 46%, 83% 46%);
    mask-image: radial-gradient(ellipse 14% 23% at 96% 34%, #000 45%, transparent 100%);
  }
  .hero-window-trees::before {
    transform-origin: 94% 55%;
    animation: hero-window-breeze 8.6s ease-in-out infinite;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-scene-motion { transition: transform 450ms ease; }
  .hero-image:hover .hero-scene-motion {
    transform: scale(1.025);
    --scene-light: .88;
    --scene-saturation: .94;
  }
}
@keyframes hero-flame-tongues {
  0%, 100% { transform: scale(1); }
  14% { transform: translateX(-.22%) scale(.98, 1.12); }
  32% { transform: translateX(.13%) scale(1.01, .91); }
  49% { transform: translateX(.32%) scale(.97, 1.19); }
  61% { transform: translateX(-.08%) scale(1.02, 1.04); }
  77% { transform: translateX(-.24%) scale(1, .94); }
  89% { transform: translateX(.16%) scale(.99, 1.10); }
}
@keyframes hero-window-breeze {
  0%, 100% { transform: skewX(0deg); }
  29% { transform: skewX(1.7deg); }
  49% { transform: skewX(.45deg); }
  68% { transform: skewX(-1.15deg); }
  84% { transform: skewX(.5deg); }
}

.hero-image > img { object-position: 65% center; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scene-motion > span {
    left: 65%;
    translate: -65% -50%;
  }
}

#contact .text-link[href="tel:+16047711830"] { font-size: 18.2px; }