/* Official supplied logo, preserved as provided. Cropping is layout-only:
   the original JPEG remains intact in assets/planus-roofing-logo.jpeg. */
:root {
  --navy: #123d4b;
  --navy-deep: #0c2936;
  --slate: #245766;
  --accent: #edb65c;
  --accent-hover: #f6ca81;
  --paper: #f7f5ef;
  --ink: #293338;
  --muted: #636c70;
  --line: #dce4e3;
}
.header { background: #e7e7e5; }
.header-inner { min-height: 112px; }
.logo-window { position: relative; display: block; width: 136px; height: 96px; overflow: hidden; flex-shrink: 0; }
.logo-window img { width: 216px; height: auto; max-width: none; position: absolute; left: -39px; top: -59px; mix-blend-mode: darken; }
.header-button { background: var(--accent); color: var(--navy-deep); }
.header-button:hover { background: var(--accent-hover); }
.navigation a:after { background: #b17a23; }
.brand-footer { background: #e7e7e5; padding: 10px 19px; border-radius: 2px; }
.eyebrow { color: #316575; }
.light-eyebrow, .service-cta .eyebrow { color: #edc27a; }
.hero h1 em, .contact-copy h2 em { color: var(--accent); }
.hero .eyebrow span { background: var(--accent); }
.button-primary { background: var(--accent); color: var(--navy-deep); }
.button-primary:hover { background: var(--accent-hover); }
.quote-form .button-primary { background: var(--navy); color: #fff; }
.quote-form .button-primary:hover { background: var(--slate); }
.trust-item svg { color: #a56b1b; }
.service-tags, .prototype-label { color: #3c6571; }
.quote-mark { color: #b8822e; }
.example-disclosure { border-left-color: #c38b33; background: #f0eadd; }
.footer-label { color: var(--accent); }
.field label>span { color: #286276; }
.draft-note { color: #566468; }
.service-tags, .project-info>p, .hero-footnote, .socials small { font-size: .6875rem; }
.topbar-inner>span, .image-caption { font-size: .6875rem; }
.form-note, .footer-bottom { font-size: .75rem !important; }
.hero-project-link>span:first-child { font-size: .6875rem; }
.socials>span { font-size: .8125rem; }
:focus-visible { outline-color: #bb842e; }
.hero-image:after { background: linear-gradient(90deg,var(--navy-deep),#0c29367d 24%,#0c293610 65%),linear-gradient(0deg,#0c2936ae,transparent 45%); }
.hero-project-link .round-arrow { background: #edb65c; color: #0c2936; border-color: #edb65c; }
.hero-description { color: #d3e0e3; }
.trust-section { background: #faf7f0; }
.muted-heading, .about-intro h2 em { color: #376e7c; }
.service-card:hover { background: #f0f7f8; box-shadow: 0 8px 28px #123d4b12; }
.service-top svg { color: #397386; }
.service-number { color: #9a691f; }
.service-cta { background: linear-gradient(135deg,#123d4b,#1c5362); }
.about-section { background: #f1f6f5; }
.audience-tags span { color: #265765; border-color: #c7d9db; }
.why-section { background: linear-gradient(115deg,#0c2936,#164957); }
.why-grid article { border-top-color: #c9994c80; }
.why-grid p, .why-section .section-heading>p { color: #c6d9df; }
.why-grid small { border-left-color: var(--accent); color: #b5ccd4; }
.phase-frame { position: relative; overflow: hidden; background: #cbd8d9; }
.phase-image, .photo-slot img.phase-image { position: absolute; width: 300%; height: auto; max-width: none; top: 50%; left: 0; right: auto; bottom: auto; transform: translate(var(--phase-offset,0%),-50%); object-fit: initial; }
.about-photo { aspect-ratio: 16/10; margin-top: 30px; }
.about-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 12px; padding: 25px 20px 17px; font-size: .625rem; letter-spacing: .09em; color: #fff; background: linear-gradient(transparent,#0c2936d9); }
.about-photo figcaption span { letter-spacing: 0; }
.approach-list { margin: 31px 0; border-top: 1px solid #ccdcdd; }
.approach-list>div { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #ccdcdd; }
.approach-list>div>span { color: #9a691f; font-size: .8125rem; padding-top: 3px; }
.approach-list p { font-size: .875rem; }
.approach-list strong { display: block; color: var(--navy); font-size: 1rem; margin-bottom: 3px; }
.project-photo { display: block; width: 100%; aspect-ratio: 4/3; border: 0; padding: 0; color: white; text-align: left; }
.project-photo:after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,#0c293618 50%,#0c2936ae); transition: background .2s; }
.photo-badge { position: absolute; top: 16px; left: 16px; z-index: 1; color: #fff; background: #0c2936d9; padding: 5px 8px; font-size: .5625rem; letter-spacing: .1em; }
.project-index { position: absolute; bottom: 24px; left: 20px; z-index: 1; font-size: .6875rem; letter-spacing: .12em; font-weight: 600; }
.project-open { position: absolute; right: 18px; bottom: 17px; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #ffffff80; border-radius: 50%; transition: background .2s,color .2s; }
.project-photo:hover .project-open { background: var(--accent); color: var(--navy-deep); border-color: var(--accent); }
.project-info>p.project-summary { font-size: .875rem; letter-spacing: 0; font-weight: 400; line-height: 1.7; margin-bottom: 22px; }
.project-card { display: flex; flex-direction: column; min-width: 0; }
.project-info { flex: 1; display: flex; flex-direction: column; }
.project-info .text-link { margin-top: auto; }
.testimonial { box-shadow: 0 8px 24px #123d4b06; border-top: 3px solid #cf9a48; }
.testimonial .portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 4px #f7f5ef; }
.testimonial figcaption { gap: 16px; }
.testimonial figcaption small { line-height: 1.6; }
.contact-section { background: radial-gradient(ellipse at left top,#1b5261,transparent 65%),#0c2936; }
.contact-copy>p:not(.eyebrow) { color: #c4d6dd; }
.contact-method>span { color: #bfd2d9; }
.contact-method>p, .contact-bottom-note { color: #b1c9d1; }
.contact-method>a:hover { color: #ffe0a7; }
.quote-form { border-top: 4px solid var(--accent); box-shadow: 0 20px 70px #0002; }
.form-kicker { color: #397080; font-size: .625rem; letter-spacing: .16em; font-weight: 700; margin-bottom: 15px; }
.field input,.field select,.field textarea { background: #f7f9f8; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: #397080; }
.submit-button { gap: 12px; }
.submit-button svg { width: 23px; height: 23px; }
.submit-button .button-label { font-size: .875rem; font-weight: 650; text-align: left; flex: 1; }
.form-result { background: #eff7f5; border-color: #bad4d0; }
.copy-enquiry { display: inline-block; padding: 10px 14px; margin-top: 10px; border: 1px solid #aec9c7; background: white; color: #123d4b; font-size: .8125rem; border-radius: 3px; }
.copy-enquiry:hover { background: #e3efec; }
#copy-status:empty { display: none; }
.draft-details { margin-top: 16px; border-color: #b9d0cf; }
.draft-details summary { padding-block: 12px; font-size: .8125rem; }
#enquiry-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.6 var(--font); padding: 0 0 14px; color: #31525d; }
.footer { background: #091e28; }
.footer-main>div>p,.footer-links { color: #b0c5ce; }
.footer-bottom { color: #a2bbc6; }
.socials small { color: #a8bdc5; }
.project-description { font-size: 1rem; margin-top: 20px; max-width: 820px; }
.dialog-note { margin-top: 12px; }
.photo-slot { border: 0; }
.photo-state { background: #0c2936ed; border-left: 3px solid var(--accent); }
.upload-message { position: absolute; bottom: 12px; right: 12px; background: #ffffffeb; color: #123d4b; padding: 6px 10px; font-size: .6875rem; border-radius: 2px; }
.photo-slot input { z-index: 2; }
.project-facts dt { color: #346574; }
@media (max-width:900px) {
  html { scroll-padding-top: 110px; }
  .header-inner { min-height: 99px; }
  .logo-window { width: 120px; height: 84px; }
  .logo-window img { width: 192px; left: -35px; top: -53px; }
  .navigation { top: 99px; background: #e7e7e5; }
  .menu-toggle { border-color: #c5cdca; background: transparent; }
  .hero-image:after { background: linear-gradient(90deg,#0c2936f5,#0c2936c7 40%,#0c293659); }
  .testimonial figcaption { flex-direction: column; gap: 13px; }
  .project-index { left: 13px; font-size: .5625rem; }
  .project-open { width: 30px; height: 30px; right: 10px; bottom: 18px; }
  .photo-badge { top: 10px; left: 10px; font-size: .5rem; }
}
@media (max-width:640px) {
  .header-inner { min-height: 87px; }
  .logo-window { width: 106px; height: 74px; }
  .logo-window img { width: 170px; left: -31px; top: -47px; }
  .navigation { top: 87px; }
  .topbar-inner>span { font-size: .625rem; max-width: 145px; line-height: 1.4; }
  .topbar a { font-size: .6875rem; }
  .topbar-inner { min-height: 42px; }
  .hero h1 br:first-child { display: initial; }
  .hero .eyebrow, .hero-footnote { font-size: .6875rem; letter-spacing: .07em; }
  .image-caption { font-size: .5625rem; }
  .brand-footer { padding: 9px 18px; }
  .hero-image:after { background: linear-gradient(90deg,#0c2936f5,#0c2936b5),linear-gradient(0deg,#0c2936c9,transparent); }
  .about-photo { aspect-ratio: 3/2; }
  .project-photo { aspect-ratio: 3/2; }
  .project-index { left: 20px; font-size: .6875rem; }
  .photo-badge { top: 16px; left: 16px; font-size: .5625rem; }
  .project-open { width: 38px; height: 38px; right: 18px; bottom: 17px; }
  .testimonial figcaption { flex-direction: row; }
}