/* ==========================================================================
   Branding page rebuild (2026-10-30), br- classes. Sections are plain HTML (not Squarespace grids).
   Concept brand Harbor & Palm Remodeling; art in /assets/img/branding-v2/, sources in punchlist-memory/tools/branding-v2/.
   ========================================================================== */
.br-wrap { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0 var(--sqs-site-gutter, 4vw); }
.br-sec { padding: clamp(56px, 7vw, 120px) 0; }
.br-ph { display: none; }
.br-sec h3 { margin: 0; }
.br-sec .sqs-html-content a, .br-sec p a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.br-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4vw; align-items: start; margin-bottom: clamp(32px, 4vw, 64px); }
.br-head p + p { margin-top: .8em; }
/* Black hand-drawn underline for the orange hero (the site's .ul is orange) */
.ul.ul-ink { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 30 11, 62 9, 98 10 C 134 11, 168 9, 197 6' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22 19 C 70 15, 128 14, 186 13' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

/* 01 Hero: orange, copy left; truck photo over a black block with the card overlapping (one brand, two surfaces) */
.br-hero { background: #FF5E1A; color: #fff; }
.br-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 5vw; align-items: center; padding-top: 32px; padding-bottom: 40px; }
.br-hero-copy p { margin-top: 1em; max-width: 34em; } .br-hero-copy h1 + p { margin-top: 1.1em; }
.br-hero-btn { margin-top: 2em; background: #fff; color: #FF5E1A; border-radius: 300px; padding: 18px 32px; font: 500 16px/1.2 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .64px; }
.br-hero-art { position: relative; aspect-ratio: 1 / 1; width: min(100%, calc(100svh - var(--header-h, 98px) - 170px)); justify-self: end; }
.br-block { position: absolute; right: 0; top: 0; width: 64%; height: 58%; background: #000; }
.br-hero-truck { position: absolute; left: 0; top: 7%; width: 88%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 66% 50%; }
.br-hero-card { position: absolute; right: 0; bottom: 0; width: 52%; height: auto; transform: rotate(-3deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .2); }

/* 02 What branding includes: six square tiles, then the card feature and "Already have a logo?" */
/* Starts close under the hero so the top of its heading shows on the first screen (Sam, round 1) */
@media (min-width: 768px) { .br-inc { padding-top: 44px; } }
.br-tiles, .br-steps, .br-more-grid, .br-show-grid { list-style: none; margin: 0; padding: 0; }
.br-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px); }
.br-tiles img, .br-steps img, .br-more-grid > li > img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.br-tiles h3, .br-steps h3, .br-more-grid h3 { margin-top: 18px; line-height: 1.1; white-space: nowrap; }
.br-tiles p, .br-steps p, .br-more-grid p { margin-top: 8px; max-width: 30em; }
.br-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 5vw; align-items: center; margin-top: clamp(64px, 8vw, 140px); }
.br-card-art { position: relative; aspect-ratio: 1.25 / 1; background: #F4EEE2; }
.br-card-back, .br-card-front { position: absolute; width: 62%; box-shadow: 0 16px 34px rgba(0, 0, 0, .18), 0 2px 5px rgba(0, 0, 0, .12); }
.br-card-back { left: 7%; top: 9%; transform: rotate(-5deg); }
.br-card-front { right: 6%; bottom: 10%; transform: rotate(3deg); }
.br-card-front img { display: block; width: 100%; height: auto; }
/* Hand-drawn circle around the QR (the site's .hl stroke) */
.br-qr-ring { position: absolute; left: 69%; top: 53%; width: 26%; height: 44%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M28 12 C 80 2, 180 4, 194 26 C 204 46, 120 58, 60 55 C 10 52, 2 34, 12 22 C 22 12, 60 6, 96 7' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.br-card-note { position: absolute; right: 4%; top: 22%; width: 27%; height: auto; transform: rotate(-5deg); }
.br-card-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.br-card-copy p { margin-top: 1em; } .br-card-copy p:last-child { color: #555; }
.br-have { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3vw; align-items: center; margin-top: clamp(56px, 6vw, 96px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid #000; }
.br-have h3 { white-space: nowrap; } .br-have p { max-width: 40em; }

/* 03 Showcase: black, asymmetric: big polo square, the sign beside it, the phone overlapping both (print to screen) */
.br-show { background: #000; color: #fff; }
.br-show-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); position: relative; align-items: start; }
.br-show-grid img { display: block; width: 100%; height: auto; object-fit: cover; }
.br-s-polo { grid-column: 1 / 8; grid-row: 1; } .br-s-polo img { aspect-ratio: 1 / 1; object-position: 52% 50%; }
.br-s-sign { grid-column: 8 / 13; grid-row: 1; } .br-s-sign img { aspect-ratio: 1 / 1; object-position: 50% 48%; }
/* The phone straddles the polo's right edge and the sign's lower corner, bottom level with the polo */
.br-s-phone { position: absolute; left: 50.5%; bottom: 0; width: 15.5%; z-index: 2; }
.br-phone { width: 100%; aspect-ratio: 390 / 844; border-radius: 13% / 6%; background: #111; padding: 3.2%; box-shadow: 0 0 0 1.5px #3a3a3a, 0 24px 50px rgba(0, 0, 0, .6); }
.br-phone img { width: 100%; height: 100%; border-radius: 10.5% / 4.8%; object-fit: cover; object-position: 50% 0; }

/* 04 Process: four equal steps, titles on one line */
.br-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }

/* 05 FAQ: orange, the shared accordion */
.br-faq { background: #FF5E1A; color: #fff; }
.br-faq h2 { max-width: 16em; margin-bottom: clamp(28px, 3vw, 52px); }
.br-faq .acc summary, .br-faq .acc-desc, .br-faq .acc-desc p { color: #fff; }
.br-faq .acc-desc p { max-width: 46em; padding-bottom: 26px; }

/* 06 Connected services: three square cards, lowercase orange titles (as on /services/websites/) */
.br-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.br-more-grid h3 { color: #FF5E1A; }
.br-browser { aspect-ratio: 1 / 1; background: #F4EEE2; display: flex; flex-direction: column; justify-content: center; padding: 9%; }
.br-browser span { display: block; height: 4.5%; min-height: 12px; background: #e5ddca; border-radius: 8px 8px 0 0; position: relative; }
.br-browser span::before { content: ''; position: absolute; left: 3%; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #c9bfa8; box-shadow: 11px 0 0 #c9bfa8, 22px 0 0 #c9bfa8; }
.br-browser img { display: block; width: 100%; height: auto; box-shadow: 0 14px 30px rgba(0, 0, 0, .16); }

/* 07 Contact: black, copy left, form right, no photo (Sam: no images in form sections) */
.br-contact { background: #000; color: #fff; }
.br-contact-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 6vw; align-items: start; }
.br-contact-copy p { margin-top: 1em; }
.br-contact-logo { display: block; width: 78%; max-width: 520px; height: auto; margin-top: clamp(80px, 10vw, 180px); opacity: .14; }

/* Tablet */
@media (max-width: 1023px) {
  .br-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .br-card { grid-template-columns: minmax(0, 1fr); }
  .br-have { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
  .br-contact-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1199px) and (min-width: 768px) {
  .br-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: short copy, swipe rows with the site's swipe marks */
@media (max-width: 767px) {
  .br-hero-in { grid-template-columns: minmax(0, 1fr); }
  .br-hero-art { width: 100%; justify-self: stretch; }
  .br-contact-logo { display: none; }
  .br-dk { display: none; } .br-ph { display: block; }
  .br-hero-in { padding-top: 20px; padding-bottom: 44px; gap: 34px; }
  .br-hero-btn { margin-top: 1.4em; padding: 16px 26px; }
  .br-swipe { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--sqs-site-gutter, 6vw)); padding: 0 var(--sqs-site-gutter, 6vw); scroll-padding: 0 var(--sqs-site-gutter, 6vw); }
  .br-swipe::-webkit-scrollbar { display: none; }
  .br-swipe > li { flex: 0 0 80%; scroll-snap-align: start; }
  .br-sec .swipe-dots { display: flex; }
  .br-sec:not(.br-show) .swipe-dots i:not(.on) { background: rgba(0, 0, 0, .22); }
  .br-tiles h3, .br-steps h3, .br-more-grid h3 { white-space: normal; }
  .br-show-grid > li { grid-column: auto; grid-row: auto; margin: 0; }
  .br-s-phone { position: static; width: auto; background: #161616; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
  .br-s-phone .br-phone { width: 44%; }
  .br-card-note { width: 38%; }
}