/* homepage.css — styles for the approved homepage design.
   Component classes are prefixed `cc-` and map 1:1 to the sections in
   design_reference/approved-homepage-mockup.jpg. Data fetching lives in
   /static/js/homepage.js; nothing in here depends on it. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #FF4D00;
    --primary-dark: #CC3D00;
    --primary-soft: rgba(255, 77, 0, .08);
    --primary-line: rgba(255, 77, 0, .22);
    --brand-red: #D61A29;
    --brand-red-line: rgba(214, 26, 41, .22);
    --dark: #1a1a1a;
    --dark-2: #111111;
    --text: #1f1f1f;
    --text-2: #5c5c5c;
    --text-3: #8a8a8a;
    --line: #e6e4e1;
    --line-soft: #efedea;
    --surface: #ffffff;
    --surface-warm: #faf8f5;
    --surface-cool: #f5f4f2;
    --radius: 14px;
    --radius-lg: 22px;
    --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --body: 'Inter', system-ui, -apple-system, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow: 0 8px 26px rgba(0,0,0,.07);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.13);
    --wrap: 1240px;
}

/* `clip` rather than `hidden`: the off-canvas mobile drawer parks itself at
   translateX(100%) and would otherwise widen the document, but `overflow: hidden`
   here would also break the sticky header. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: var(--body);
    color: var(--text);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }

.cc-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* Screen-reader-only text (used for icon-only links). */
.cc-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- eyebrows */

.cc-eyebrow {
    font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--primary); margin-bottom: 14px;
}
.cc-eyebrow--light { color: var(--primary); }

.cc-h2 { font-size: clamp(28px, 3.3vw, 42px); margin-bottom: 14px; }
.cc-lede { color: var(--text-2); font-size: 17px; max-width: 620px; }

/* ---------------------------------------------------------------- buttons */

.cc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--body); font-weight: 700; font-size: 15px;
    padding: 15px 26px; border-radius: 10px; border: 1.5px solid transparent;
    cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
    white-space: nowrap;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn--primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(255,77,0,.26); }
.cc-btn--primary:hover { background: var(--primary-dark); box-shadow: 0 10px 24px rgba(255,77,0,.32); }
.cc-btn--outline { background: #fff; color: var(--text); border-color: var(--line); }
.cc-btn--outline:hover { border-color: var(--primary); color: var(--primary); }
.cc-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cc-btn--ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cc-btn--sm { padding: 11px 20px; font-size: 14px; }
.cc-btn__short { display: none; }

.cc-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--primary); font-weight: 700; font-size: 15px;
}
.cc-link i { font-size: 12px; transition: transform .18s; }
.cc-link:hover i { transform: translateX(3px); }

/* ------------------------------------------------------------ alert / banner */

.cc-alert {
    background: var(--dark); color: #fff; text-align: center;
    font-size: 13.5px; padding: 9px 16px;
}
.cc-alert a { color: var(--primary); font-weight: 700; white-space: nowrap; }
.cc-alert i { color: var(--primary); margin-right: 6px; }

/* ---------------------------------------------------------------- header */

.cc-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
}
.cc-header__inner {
    display: flex; align-items: center; gap: 28px;
    height: 76px;
    /* Header uses a wider effective content width than --wrap so the logo
       and phone CTA sit close to the viewport edge, matching the approved
       mockup's tighter header margins (measured ~5.4% of viewport width,
       vs. the page-wide --wrap producing ~10.4%). */
    max-width: 1320px; margin: 0 auto; padding: 0 16px;
}
.cc-logo { display: flex; align-items: center; flex-shrink: 0; }
.cc-logo img { height: 38px; width: auto; }

.cc-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.cc-nav__item { position: relative; }
.cc-nav__link {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    font-size: 14.5px; font-weight: 600; color: var(--text-2);
    padding: 10px 13px; border-radius: 8px; transition: color .15s, background .15s;
}
.cc-nav__link i { font-size: 10px; opacity: .65; }
.cc-nav__link:hover { color: var(--primary); background: var(--primary-soft); }

.cc-dropdown {
    position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 232px; background: #fff; border: 1px solid var(--line);
    border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px;
    opacity: 0; visibility: hidden; transition: opacity .16s, transform .16s, visibility .16s;
}
.cc-nav__item:hover .cc-dropdown,
.cc-nav__item:focus-within .cc-dropdown {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.cc-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; color: var(--text-2);
}
.cc-dropdown a:hover { background: var(--surface-cool); color: var(--primary); }
.cc-dropdown a i { width: 16px; text-align: center; color: var(--primary); font-size: 13px; }

.cc-header__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cc-header__phone {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 15px; color: var(--text);
}
.cc-header__phone i { color: var(--primary); }
.cc-header__phone:hover { color: var(--primary); }

.cc-burger {
    display: none; background: none; border: 1px solid var(--line);
    border-radius: 9px; width: 42px; height: 42px; cursor: pointer;
    font-size: 17px; color: var(--text);
}

/* mobile nav drawer */
.cc-mobnav {
    position: fixed; inset: 0; z-index: 1000; background: #fff;
    padding: 20px; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
}
.cc-mobnav.open { transform: translateX(0); }
.cc-mobnav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cc-mobnav__close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-2); }
.cc-mobnav a {
    display: block; padding: 13px 4px; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid var(--line-soft);
}
.cc-mobnav__group { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text-3); font-weight: 700; margin: 22px 0 4px; }
.cc-mobnav__cta { margin-top: 24px; display: grid; gap: 10px; }
.cc-mobnav__cta .cc-btn { width: 100%; }

/* ---------------------------------------------------------------- hero */

.cc-hero { position: relative; overflow: hidden; background: var(--surface); }
.cc-hero__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center; gap: 48px;
    max-width: var(--wrap); margin: 0 auto; padding: 74px 0 74px 32px;
}
.cc-hero__copy { max-width: 560px; }
.cc-hero h1 {
    font-size: clamp(36px, 4.6vw, 58px);
    margin-bottom: 20px;
}
.cc-hero h1 .cc-accent { color: var(--primary); }
.cc-hero__sub { font-size: 18px; color: var(--text-2); margin-bottom: 30px; max-width: 520px; }
.cc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* data-driven social proof — hidden until /api/testimonials returns reviews */
.cc-social-proof {
    display: flex; align-items: center; gap: 14px; margin-top: 32px;
    flex-wrap: wrap;
}
.cc-avatars { display: flex; }
.cc-avatars img {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    border: 2.5px solid #fff; box-shadow: var(--shadow-sm);
}
.cc-avatars img + img { margin-left: -13px; }
.cc-social-proof__text { font-size: 14px; color: var(--text-2); line-height: 1.4; }
.cc-stars { color: var(--primary); font-size: 13px; letter-spacing: 1.5px; }
.cc-social-proof__rating { font-weight: 800; color: var(--text); font-family: var(--display); }

.cc-hero__media {
    position: relative;
    /* The mockup runs the hero photo to the top, bottom and right edges of the
       section, so this cell cancels the inner padding on those three sides.
       The gutter maths collapses to 0 once the viewport is under --wrap. */
    align-self: stretch;
    margin: -74px calc((100vw - min(100vw, var(--wrap))) / -2) -74px 0;
    min-height: clamp(360px, 42vw, 520px);
}
.cc-hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.cc-hero__badge {
    position: absolute; right: 34px; bottom: 30px; z-index: 2;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 16px 20px; display: flex; align-items: center; gap: 13px;
    max-width: 320px;
}
.cc-hero__badge i {
    color: var(--primary); font-size: 24px; flex-shrink: 0;
}
.cc-hero__badge strong { display: block; font-family: var(--display); font-size: 15px; }
.cc-hero__badge span { font-size: 12.5px; color: var(--text-2); }

/* ------------------------------------------------------ HomePassport hub */

.cc-passport { padding: 96px 0 84px; background: var(--surface); }
.cc-passport__inner {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 56px; align-items: center;
}
/* Capped so the left-hand hub nodes, which reach back past the hub box, keep
   clear of the paragraph instead of running into it. */
.cc-passport__copy { max-width: 430px; }
.cc-passport__copy p { color: var(--text-2); margin-bottom: 22px; }

.cc-hub-image {
    display: block; width: 100%; max-width: 640px; margin: 0 auto;
}
.cc-hub-image img { display: block; width: 100%; height: auto; }

/* The coded radial hub only becomes visible content at phone width (see the
   700px breakpoint, where it switches to a stacked list); above that the real
   approved graphic (.cc-hub-image) renders instead, so this starts hidden. */
.cc-hub {
    display: none;
    position: relative; width: 100%; max-width: 640px; margin: 0 auto;
    aspect-ratio: 1;
}
.cc-hub__ring {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 54%; aspect-ratio: 1; border-radius: 50%;
    border: 1.5px dashed var(--brand-red-line);
}
.cc-hub__spokes {
    position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
}
.cc-hub__spokes line {
    stroke: var(--brand-red-line); stroke-width: .28; stroke-dasharray: 1.4 1.4;
    stroke-linecap: round;
}
.cc-hub__core {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fff 0%, var(--surface-warm) 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 14px; z-index: 2;
}
.cc-hub__phone {
    width: 34px; height: 50px; margin-bottom: 6px; color: #1a1a1a; font-size: 34px;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.cc-hub__symbol {
    display: block; width: 30px; height: 30px; margin-bottom: 8px;
}
.cc-hub__core strong {
    font-family: var(--display); font-size: 13px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--brand-red);
}
.cc-hub__core span { font-size: 11.5px; color: var(--text-2); line-height: 1.35; }

.cc-hub__node {
    position: absolute; display: flex; align-items: flex-start; gap: 10px;
    width: 176px; z-index: 3;
    /* Every node's icon is anchored so its CENTER sits exactly on the
       8-point circle below (radius 34% at 45-degree increments). This
       transform (half the 46px icon) holds regardless of node text
       length, guaranteeing the icons are perfectly symmetrical. */
    transform: translate(-23px, -23px);
}
.cc-hub__node-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); color: var(--brand-red);
    display: flex; align-items: center; justify-content: center;
}
.cc-hub__node-icon svg { width: 21px; height: 21px; display: block; }
.cc-hub__node b {
    display: block; font-family: var(--display); font-size: 11.5px;
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 2px;
}
.cc-hub__node small { display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.35; }

/* 8 positions at true 45-degree increments around the hub center (50%,50%),
   radius 34% of the square container -- estimate=0deg(top), then clockwise
   in 45deg steps. This is exact trigonometry (sin/cos 45 = .7071), not
   hand-tuned percentages, so radial spacing is provably equal on all sides. */
.cc-hub__node--estimate      { left: 50%;     top: 16%; }
.cc-hub__node--projects      { left: 74.04%;  top: 25.96%; }
.cc-hub__node--documents     { left: 84%;     top: 50%; }
.cc-hub__node--maintenance   { left: 74.04%;  top: 74.04%; }
.cc-hub__node--protection    { left: 50%;     top: 84%; }
.cc-hub__node--improvements  { left: 25.96%;  top: 74.04%; }
.cc-hub__node--inspections   { left: 16%;     top: 50%; }
.cc-hub__node--communication { left: 25.96%;  top: 25.96%; }

/* Readable detail list -- a plain stacked fallback for the 8 hub items.
   Hidden by default; shown only under the phone breakpoint below, directly
   under the compact icon-only ring, so the copy stays legible once the
   circle is too small to hold text. */
.cc-hub__list { display: none; flex-direction: column; margin-top: 4px; }
.cc-hub__list-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.cc-hub__list-item:last-child { margin-bottom: 0; }
.cc-hub__list-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); color: var(--brand-red);
    display: flex; align-items: center; justify-content: center;
}
.cc-hub__list-icon svg { width: 20px; height: 20px; display: block; }
.cc-hub__list-item b {
    display: block; font-family: var(--display); font-size: 12px;
    letter-spacing: .07em; text-transform: uppercase; margin-bottom: 3px;
}
.cc-hub__list-item small { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }

/* Every node keeps the mockup's icon-then-label reading order (icon on the
   left, text on the right) regardless of which side of the hub it's on --
   confirmed by close inspection of the approved mockup, where west-side
   nodes like INSPECTIONS still show icon-left/text-right, with the text
   simply running toward the hub center instead of away from it. */

/* ---------------------------------------------------------------- services */

.cc-services { padding: 88px 0; background: var(--surface-warm); }
.cc-services__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
}
.cc-services__grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
.cc-service-card {
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cc-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--primary-line); }
.cc-service-card__body { padding: 26px 24px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cc-service-card__icon { color: var(--primary); font-size: 26px; margin-bottom: 4px; }
.cc-service-card h3 {
    font-size: 15px; letter-spacing: .09em; text-transform: uppercase; color: var(--primary);
}
.cc-service-card p { font-size: 14.5px; color: var(--text-2); }
.cc-service-card__list {
    margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--text);
    padding-top: 8px;
}
.cc-service-card__media { height: 170px; }
.cc-service-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- trust strip */

.cc-trust { background: var(--dark-2); color: #fff; padding: 34px 0; }
.cc-trust__grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cc-trust-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 4px 20px;
    border-left: 1px solid rgba(255,255,255,.12);
}
.cc-trust-item:first-child { border-left: none; padding-left: 0; }
.cc-trust-item:last-child { padding-right: 0; }
.cc-trust-item i { color: var(--primary); font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.cc-trust-item strong {
    display: block; font-family: var(--display); font-size: 14px;
    line-height: 1.25; margin-bottom: 3px;
}
.cc-trust-item span { display: block; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.4; }

/* ---------------------------------------------------------------- process */

.cc-process { padding: 88px 0; background: var(--surface); }
.cc-process__head { text-align: center; margin-bottom: 52px; }
.cc-process__head .cc-lede { margin: 0 auto; }
.cc-process__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.cc-step__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cc-step__num {
    width: 34px; height: 34px; border-radius: 50%; background: var(--primary);
    color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cc-step h3 { font-size: 17px; }
.cc-step__icon { color: var(--primary); font-size: 26px; margin-bottom: 12px; }
.cc-step p { font-size: 14.5px; color: var(--text-2); }

/* ------------------------------------------------------ technology / HomePassport */

.cc-tech { padding: 88px 0; background: var(--surface-cool); }
.cc-tech__head { margin-bottom: 46px; max-width: 720px; }
.cc-tech__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr);
    gap: 40px; align-items: center;
}
.cc-checklist { display: grid; gap: 13px; margin-bottom: 26px; }
.cc-checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; list-style: none; }
.cc-checklist i { color: var(--primary); font-size: 14px; margin-top: 4px; flex-shrink: 0; }

.cc-tech__phone { display: flex; justify-content: center; }
.cc-tech__phone-frame {
    background: var(--dark); border-radius: 30px; padding: 10px;
    box-shadow: var(--shadow-lg); width: 100%; max-width: 250px;
}
.cc-tech__phone-frame img { width: 100%; border-radius: 22px; }

/* Coded HomePassport phone screen - replaces a low-resolution raster
   mockup that had a fabricated address baked into its pixels. Built from
   real markup so every label is accurate and it stays crisp at any size. */
.cc-phone-screen {
    background: #fff; border-radius: 22px; overflow: hidden;
    font-family: var(--body); color: #16181d;
}
.cc-phone-screen__bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 16px 3px; font-size: 11px; font-weight: 700;
}
.cc-phone-screen__status { display: flex; gap: 5px; font-size: 10px; color: #16181d; }
.cc-phone-screen__nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px; font-family: var(--display); font-weight: 700;
    font-size: 13px; color: var(--primary); border-bottom: 1px solid #eef0f3;
}
.cc-phone-screen__nav i { font-size: 12px; color: var(--primary); }
.cc-phone-screen__photo {
    height: 108px; background-size: cover; background-position: center;
}
.cc-phone-screen__label {
    padding: 11px 14px 4px; font-size: 12.5px; font-weight: 700; color: #16181d;
}
.cc-phone-screen__list { list-style: none; margin: 0; padding: 2px 0 10px; }
.cc-phone-screen__list li {
    display: flex; align-items: center; gap: 10px; padding: 8px 14px;
    font-size: 12px; font-weight: 600; color: #33363d; border-bottom: 1px solid #f3f4f6;
}
.cc-phone-screen__list li:last-child { border-bottom: none; }
.cc-phone-screen__list li i:first-child { width: 16px; text-align: center; font-size: 12px; color: var(--primary); }
.cc-phone-screen__list li span { flex: 1; }
.cc-phone-screen__list li i:last-child { color: #c3c6cc; font-size: 10px; }

.cc-homepassport {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 32px 30px; box-shadow: var(--shadow);
}
.cc-homepassport h3 {
    font-size: 15px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--primary); margin-bottom: 10px;
}
.cc-homepassport > p { font-size: 15.5px; font-weight: 600; margin-bottom: 22px; }

/* ---------------------------------------------------- gallery + testimonial */

.cc-proof { padding: 88px 0; background: var(--surface-warm); }
.cc-proof__inner {
    display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(0, 1fr);
    gap: 40px; align-items: start;
}
/* The mockup reads this row as three bands — intro copy, four project cards,
   then the review card — so the gallery splits its own column in two. */
.cc-gallery {
    display: grid; grid-template-columns: minmax(190px, .85fr) minmax(0, 2.5fr);
    gap: 28px; align-items: start;
}
.cc-gallery__head .cc-h2 { font-size: clamp(24px, 2.1vw, 30px); }
.cc-gallery__head .cc-link { margin-top: 18px; }
.cc-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cc-gallery-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.cc-gallery-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cc-gallery-card__media { aspect-ratio: 4 / 3; background: var(--surface-cool); }
.cc-gallery-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-gallery-card__body { padding: 15px 17px 18px; }
.cc-gallery-card__body strong { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 3px; }
.cc-gallery-card__body span { font-size: 13px; color: var(--text-3); }

.cc-testimonial-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 34px 32px 26px; box-shadow: var(--shadow); position: relative;
}
.cc-testimonial-card .cc-h2 { font-size: clamp(24px, 2.4vw, 30px); }
.cc-testimonial__stars { color: var(--primary); font-size: 15px; letter-spacing: 2px; margin: 20px 0 14px; }
.cc-testimonial__quote { font-size: 16.5px; line-height: 1.7; color: var(--text); min-height: 118px; }
.cc-testimonial__attr { margin-top: 18px; font-weight: 700; font-size: 14.5px; color: var(--text-2); }
.cc-testimonial__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.cc-testimonial__nav button {
    width: 38px; height: 38px; border-radius: 50%; background: #fff;
    border: 1px solid var(--line); cursor: pointer; color: var(--text-2);
    transition: border-color .15s, color .15s;
}
.cc-testimonial__nav button:hover { border-color: var(--primary); color: var(--primary); }
.cc-testimonial__nav button:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- CTA band */

.cc-cta { padding: 0 0 88px; background: var(--surface-warm); }
.cc-cta__box {
    background: var(--surface-cool); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 34px 38px;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    flex-wrap: wrap;
}
.cc-cta__copy { display: flex; align-items: center; gap: 18px; }
.cc-cta__copy > i { color: var(--primary); font-size: 30px; }
.cc-cta__copy h2 { font-size: clamp(22px, 2.3vw, 30px); margin-bottom: 4px; }
.cc-cta__copy p { color: var(--text-2); font-size: 15.5px; }
.cc-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- footer */

.cc-footer { background: var(--dark-2); color: rgba(255,255,255,.68); padding: 62px 0 0; font-size: 14px; }
.cc-footer__grid {
    display: grid; grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 40px; padding-bottom: 46px;
}
.cc-footer__brand-mark {
    font-family: var(--display); font-weight: 800; font-size: 21px; color: #fff;
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.cc-footer__brand-mark i { color: var(--primary); }
.cc-footer__brand p { max-width: 320px; line-height: 1.65; margin-bottom: 20px; }
.cc-social { display: flex; gap: 9px; }
.cc-social a {
    width: 36px; height: 36px; border-radius: 9px;
    background: rgba(255,255,255,.07); display: flex; align-items: center;
    justify-content: center; color: rgba(255,255,255,.75); transition: background .15s, color .15s;
}
.cc-social a:hover { background: var(--primary); color: #fff; }

.cc-footer h4 {
    color: #fff; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 16px;
}
.cc-footer ul { list-style: none; display: grid; gap: 9px; }
.cc-footer a:hover { color: var(--primary); }
.cc-footer__contact li { display: flex; gap: 10px; line-height: 1.5; }
.cc-footer__contact i { color: var(--primary); width: 14px; margin-top: 4px; flex-shrink: 0; }
.cc-footer__areas { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.5); }

.cc-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; font-size: 13px;
}
.cc-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
    .cc-nav { gap: 0; }
    .cc-nav__link { padding: 10px 9px; font-size: 13.5px; }
    /* Between the 1180px tightening and the 1024px collapse to a burger, the
       logo + full nav + phone + CTA still exceed the viewport — ~1093px was
       measured at scrollWidth 1099. Dropping the phone number (still reachable
       from the alert bar and the footer) buys back the difference without
       collapsing the nav earlier than the design intends. */
    .cc-header__inner { gap: 16px; }
    .cc-header__phone { display: none; }
    .cc-trust__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 0; }
    .cc-trust-item:nth-child(3n+1) { border-left: none; padding-left: 0; }
    .cc-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The hub draws itself in before the two-column passport row breaks apart,
       otherwise the left-hand nodes reach back into the paragraph beside it. */
    .cc-hub-image { max-width: 560px; }
    .cc-hub { max-width: 560px; }
    .cc-hub__node { width: 150px; transform: translate(-20px, -20px); }
    .cc-hub__node-icon { width: 40px; height: 40px; }
    .cc-hub__node-icon svg { width: 18px; height: 18px; }
    .cc-hub__node small { font-size: 11px; }
    .cc-hub__core { width: 186px; height: 186px; padding: 10px; }
    .cc-hub__phone { width: 28px; height: 40px; font-size: 28px; margin-bottom: 4px; }
    .cc-hub__symbol { width: 24px; height: 24px; margin-bottom: 6px; }
}

@media (max-width: 1024px) {
    .cc-wrap { padding: 0 24px; }
    .cc-nav, .cc-header__phone { display: none; }
    .cc-burger { display: flex; align-items: center; justify-content: center; }
    .cc-header__inner { justify-content: space-between; }
    .cc-header__actions { gap: 10px; }

    .cc-hero__inner { grid-template-columns: 1fr; padding: 52px 24px 60px; gap: 44px; }
    /* Stacked: the photo becomes a normal rounded block again instead of
       bleeding out of a side column that no longer exists. */
    .cc-hero__media { align-self: auto; margin: 0; min-height: 0; }
    .cc-hero__media img {
        position: static; border-radius: 18px; height: clamp(280px, 44vw, 400px);
    }
    .cc-hero__badge { right: 18px; bottom: 18px; }

    .cc-passport__inner { grid-template-columns: 1fr; gap: 44px; }
    .cc-tech__grid { grid-template-columns: 1fr; gap: 36px; }
    .cc-tech__phone { order: -1; }
    .cc-proof__inner { grid-template-columns: 1fr; gap: 44px; }
    .cc-gallery { grid-template-columns: 1fr; gap: 26px; }
    .cc-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .cc-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}

@media (max-width: 780px) {
    .cc-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .cc-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .cc-hero h1 { font-size: 33px; }
    .cc-hero__sub { font-size: 16.5px; }
    .cc-hero__actions .cc-btn { width: 100%; }
    .cc-services__grid { grid-template-columns: 1fr; }
    .cc-services__head { flex-direction: column; align-items: flex-start; }
    .cc-process__grid { grid-template-columns: 1fr; }
    .cc-trust__grid { grid-template-columns: 1fr; gap: 18px; }
    .cc-trust-item { border-left: none; padding: 0; }
    .cc-gallery__grid { grid-template-columns: 1fr; }
    .cc-cta__box { padding: 26px 22px; }
    .cc-cta__copy { align-items: flex-start; }
    .cc-cta__actions { width: 100%; }
    .cc-cta__actions .cc-btn { flex: 1; }
    .cc-testimonial-card { padding: 26px 22px 20px; }

    /* At phone width the ring visual stays the real, approved graphic
       (same pixels as desktop/tablet, just scaled down by .cc-hub-image's
       own responsive width) instead of a recreated coded circle -- that
       guarantees it actually matches the desktop image pixel-for-pixel.
       The in-image labels are too small to read at this width, so the
       readable .cc-hub__list stack (built in the template right after
       .cc-hub-image) supplies the title/description copy underneath it.
       The coded .cc-hub circle stays hidden (its base rule already sets
       display:none) since it's only ever a fallback for when the real
       graphic is unavailable. */
    .cc-hub__list { display: flex; }
}

/* Below this the full "Get My Free Estimate" label no longer fits beside the
   logo and the burger, so the header CTA switches to its short form. */
@media (max-width: 560px) {
    .cc-logo img { height: 31px; }
    .cc-btn__long { display: none; }
    .cc-btn__short { display: inline; }
    .cc-header__actions .cc-btn--sm { padding: 10px 14px; }
}

/* The two-column footer stops fitting before 420px — 430px devices (Pixel,
   iPhone Pro Max) landed between the 780px rule and the 420px one and scrolled
   sideways. Collapsing at 480 covers them. */
@media (max-width: 480px) {
    .cc-footer__grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .cc-wrap { padding: 0 18px; }
    .cc-hero__inner { padding: 40px 18px 54px; }
}

/* 320px (iPhone SE 1st gen) is the narrowest supported viewport. The logo,
   the CTA and the burger together exceed it at the default header spacing. */
@media (max-width: 360px) {
    .cc-header__inner { gap: 10px; padding: 0 12px; }
    .cc-header__actions { gap: 8px; }
    .cc-header__actions .cc-btn--sm { padding: 9px 11px; font-size: 13px; }
    .cc-logo img { height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}