@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Roboto:wght@400;500;700&display=swap');

/* =========================================================================
   DASH Heating & Cooling — extracted from dashservice.com, 2026-07-23
   Custom Vue/Laravel app; one compiled app.css (240KB) styles all 81 pages.
   Tokens frequency-ranked from that stylesheet — counts in comments.

   The brand's visual grammar, in three moves:
   1. Deep navy (#101f60) headings and grounds with taxi-yellow (#fae80b)
      uppercase pill CTAs — the mascot-truck palette, applied flat.
   2. Asymmetric opposite-corner radius (20px 0 20px 0; 50px 0 50px 0 large)
      on every card, with a blue-cast shadow rgba(43,56,123,.1).
   3. The corner-bracket image treatment (.angles): a yellow mascot wedge
      pinned top-left and a solid yellow border-triangle bottom-right.

   Fonts are the site's own (Montserrat + Roboto, both free) — no substitutes,
   so the source line-heights carry over as-is.
   ========================================================================= */

:root {
  /* colour — extracted, app.css occurrence counts in comments */
  --navy:        #101f60;   /* 46 — headings, panel grounds, primary ink   */
  --royal:       #122c71;   /* 4  — ink on yellow buttons                  */
  --blue:        #0155a6;   /* 14 — secondary blue, links on light         */
  --blue-hover:  #2a458f;   /* button--primary hover                       */
  --yellow:      #fae80b;   /* 35 — the brand accent: CTAs, links, wedges  */
  --yellow-deep: #d7c300;   /* button--warning hover                       */
  --red:         #e63f35;   /* 31 — mascot red, search hover, alerts       */
  --ink:         #242424;   /* 10 — body ink on white                      */
  --muted:       #5a687d;   /* 10 — secondary copy, 4.6:1 on white         */
  --tint:        #f6f6f6;   /* 11 — alt section ground                     */
  --paper:       #ffffff;   /* 142                                         */
  --shadow:      rgba(43,56,123,.1);  /* the blue-cast card shadow         */

  /* signature radius — opposite corners only, transcribed */
  --r-card: 20px 0 20px 0;  /* 10 occurrences */
  --r-lg:   50px 0 50px 0;  /* 10 occurrences */

  --font-head: 'Montserrat', sans-serif;   /* site: Montserrat-ExtraBold */
  --font-body: 'Roboto', sans-serif;       /* site: RobotoRegular 18/32  */
  --container: 1170px;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 1.8;
  color: var(--ink); background: var(--paper);
}
img { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* type — source scale: h1 54, h2 42, h3 24; Montserrat 800, capitalize, navy */
h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  text-transform: capitalize; margin: 0 0 20px;
}
h1, .h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.375rem); line-height: 1.3; }
h2, .h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); line-height: 1.3; }
h3, .h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.35; }
p { margin: 0 0 20px; }
a { color: var(--blue); }
a:not(.button):hover { opacity: .8; }   /* transcribed global link hover */
.muted { color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); }

/* star rating — source paints #fae80b icon-font stars; rendered here as a
   CSS-mask row so the color follows --yellow across palettes */
.stars { width: 132px; height: 22px; background: var(--yellow);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.8l3.1 6.7 7.1.9-5.2 5 1.3 7.1L12 18l-6.3 3.5 1.3-7.1-5.2-5 7.1-.9z"/></svg>') 0 0/26.4px 22px repeat-x;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 1.8l3.1 6.7 7.1.9-5.2 5 1.3 7.1L12 18l-6.3 3.5 1.3-7.1-5.2-5 7.1-.9z"/></svg>') 0 0/26.4px 22px repeat-x; }

/* buttons — uppercase Montserrat-Bold, square corners, transcribed states */
.button {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  text-transform: uppercase; text-align: center; letter-spacing: .02em;
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  padding: 16px 34px; transition: all .2s ease-out; background: transparent;
}
.button--warning { background: var(--yellow); color: var(--royal); }
.button--warning:hover { background: var(--yellow-deep); }
.button--primary { background: var(--blue); color: #fff; }
.button--primary:hover { background: var(--blue-hover); }
.button-outline--warning { background: transparent; border: 2px solid var(--yellow); color: var(--yellow); padding: 14px 32px; }
.button-outline--warning:hover { opacity: .8; }
.button--sm { font-size: 12px; padding: 12px 22px; }

/* mount — the card system: white, blue-cast shadow, opposite-corner radius */
.mount { background: var(--paper); padding: 50px; }
.mount--shadow { box-shadow: 0 5px 15px var(--shadow); }
.mount--rounded { border-radius: var(--r-card); }
.mount--rounded-lg { border-radius: var(--r-lg); }

/* section rhythm */
.section { padding: 80px 0; }
.section--tint { background: var(--tint); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.title-center { text-align: center; }

/* 01 util-bar — yellow top strip: tracking link left, utility menu right */
.util-bar { background: var(--navy); }
.util-bar__inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; gap: 16px; }
.util-bar__promo { color: var(--yellow); font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.util-bar__menu { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.util-bar__menu a { color: #fff; font-size: 12px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.util-bar__menu a:hover { opacity: .7; }   /* transcribed */
.util-bar .button { padding: 8px 16px; font-size: 11px; }

/* 02 nav — navy main bar, house Pattern D shape (.nav > .container > .brand-mark) */
.nav { background: var(--navy); position: relative; z-index: 5; }
.nav > .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.nav .brand-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav .brand-mark img { height: 62px; width: auto; }
.nav .menu { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav .menu > li { position: relative; }
.nav .label { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; text-decoration: none; padding: 10px 0; display: inline-block; }
.nav .menu > li:hover > .label { color: var(--yellow); }   /* transcribed */
.nav .dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--paper); box-shadow: 0 10px 25px var(--shadow); opacity: 0; visibility: hidden; transition: .2s ease-out; z-index: 6; border-radius: 0 0 var(--r-card); padding: 12px 0; }
.nav .menu > li:hover .dropdown { opacity: 1; visibility: visible; }   /* transcribed hover-open */
.nav .dropdown a { display: block; padding: 9px 22px; color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; text-decoration: none; }
.nav .dropdown a:hover { color: var(--blue); opacity: 1; }
.nav .actions { display: flex; align-items: center; gap: 18px; }
.nav .phone { color: #fff; text-decoration: none; text-align: right; font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.2; }
.nav .phone small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--yellow); text-transform: none; }
@media (max-width: 768px) {
  .nav .actions { display: none; }
  .nav .menu { display: none; }
  .util-bar__menu { display: none; }
}

/* 03/04/05 hero (source: .promo) — full-bleed photo/video ground, white type,
   review-badge row. Text sits on a navy base under the image so a slow image
   never strands white type on white. */
.hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background-color: var(--navy); background-size: cover; background-position: 50%; overflow: hidden; min-height: 700px; padding: 100px 0; }
.hero--md { min-height: 560px; }
.hero--sm { min-height: 320px; padding: 80px 0; }
.hero__scrim { position: absolute; inset: 0; background: rgba(16,31,96,.45); }
.hero .container { position: relative; }
.hero h1 { color: #fff; text-transform: none; }   /* source computes none on promo titles */
.hero__desc { font-size: 20px; margin: 0 auto 30px; max-width: 640px; }
.hero .buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero__reviews { display: flex; gap: 44px; justify-content: center; align-items: flex-end; list-style: none; margin: 56px 0 0; padding: 0; flex-wrap: wrap; }
.hero__reviews img { height: 26px; width: auto; }


/* 06 svc-grid — 4 icon cards, lifted over the hero (source: .services--lift-lg) */
.svc-grid { position: relative; z-index: 2; }
.svc-grid--lift { margin-top: -90px; }
.svc-grid__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.svc-card { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--navy); background: var(--paper); box-shadow: 0 5px 15px var(--shadow); border-radius: var(--r-card); padding: 40px 26px 32px; text-decoration: none; transition: .2s ease-out; }
.svc-card:hover { opacity: .8; }
.svc-card__icon { width: 74px; height: 74px; margin-bottom: 20px; }
.svc-card__title { font-family: var(--font-head); font-weight: 800; font-size: 20px; text-transform: capitalize; color: var(--navy); text-decoration: none; margin: 0 0 12px; }
.svc-card__link { color: var(--ink); font-size: 15px; text-decoration: none; padding: 3px 0; }
.svc-card__link:hover { color: var(--blue); }
.svc-card__action { margin-top: auto; padding-top: 18px; font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--blue); text-decoration: none; }
.svc-card--compact { justify-content: center; }

/* 07 post — the content block; .angles is the signature image treatment:
   mascot wedge PNG top-left, solid yellow border-triangle bottom-right
   (transcribed from .post__image--angles:before/:after). */
.post__wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.post__content { min-width: 0; }
.post__wrapper--reverse .post__image { order: 2; }
.post__content--single { max-width: 820px; margin: 0 auto; text-align: center; }
.angles { position: relative; }
.angles img { max-width: 94%; margin: 3%; }
.angles::before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: url('assets/dash-service-brand/angle-top-left.png') no-repeat 50%/contain; }
.angles::after { content: ""; position: absolute; right: 0; bottom: 0; border-top: 200px solid var(--yellow); border-left: 200px solid transparent; transform: rotate(90deg); }
@media (max-width: 880px) {
  .post__wrapper { grid-template-columns: 1fr; gap: 36px; }
  .post__wrapper--reverse .post__image { order: 0; }
  .angles::before { width: 110px; height: 110px; }
  .angles::after { border-top-width: 110px; border-left-width: 110px; }   /* transcribed mobile rule */
}

/* 08 privileges — 3-up expert cards on tint */
.privileges__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }
.privilege { background: var(--paper); box-shadow: 0 5px 15px var(--shadow); border-radius: var(--r-card); padding: 44px 36px; display: flex; flex-direction: column; }
.privilege h3 { margin-top: 0; }
.privilege .link { margin-top: auto; padding-top: 16px; font-family: var(--font-head); font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--blue); text-decoration: none; }

/* 09 guarantees — navy band, 3 icon items, lifted */
.guarantees { background: var(--navy); color: #fff; }
.guarantees--lift { padding: 90px 0; }
.guarantees h2 { color: #fff; }
.guarantees__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; }
.guarantee { text-align: center; }
.guarantee img { width: 64px; height: 64px; margin: 0 auto 18px; filter: brightness(0) saturate(100%) invert(88%) sepia(60%) saturate(1000%) hue-rotate(2deg); /* renders the line icons yellow */ }
.guarantee h3 { color: var(--yellow); font-size: 19px; }
.guarantee p { color: #fff; margin: 0; }

/* 10 promos — coupon image cards (source promotions are pure images) */
.promos__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; justify-items: center; }
.promo-card { display: block; max-width: 340px; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 5px 15px var(--shadow); }
.promos__action { text-align: center; margin-top: 40px; }

/* 11 locations — city accordion columns + map ground */
.locations { background: var(--navy) url('assets/dash-service-brand/bg-areas.webp') no-repeat 50%/cover; color: #fff; }
.locations h2 { color: #fff; }
.locations__lede { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.locations__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 30px; list-style: none; margin: 0; padding: 0; }
.locations__city { font-family: var(--font-head); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--yellow); background: none; border: 0; padding: 10px 0; text-align: left; cursor: pointer; }
.locations__links { list-style: none; margin: 0 0 14px; padding: 0; }
.locations__links a { color: #fff; font-size: 15px; text-decoration: none; display: inline-block; padding: 3px 0; }

/* 22 loc-tiles — service-area index grid */
.loc-tiles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
/* source .locations-tile__city: blue photo tile, yellow city name, radius 0 20px 0 20px */
.loc-tile { display: flex; align-items: center; justify-content: center; min-height: 160px; background: #1f5e91; box-shadow: 0 5px 15px var(--shadow); border-radius: 0 20px 0 20px; color: var(--yellow); font-family: var(--font-head); font-weight: 800; font-size: 20px; text-align: center; text-decoration: none; transition: .2s ease-out; }
.loc-tile:hover { background: var(--navy); opacity: 1; }

/* 12 posters — 2 wide image banners with Learn more */
.posters__list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; list-style: none; margin: 0; padding: 0; }
.poster { display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 5px 15px var(--shadow); position: relative; }
.poster .button { position: absolute; left: 30px; bottom: 24px; }
@media (max-width: 880px) { .posters__list { grid-template-columns: 1fr; } }

/* 13 price — True Transparency Pricing: photo band + tier mounts */
.price { color: #fff; background: var(--navy);   /* solid base under the image — overlay-text rule */
  background-image: linear-gradient(rgba(16,31,96,.85), rgba(16,31,96,.85)), url('assets/dash-service-brand/bg-price.webp');
  background-repeat: no-repeat; background-position: 50%; background-size: cover; }
.price h2 { color: #fff; }
.price__intro { max-width: 880px; margin: 0 auto 50px; text-align: center; }
.price__tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.price-tier { background: var(--paper); color: var(--ink); border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); padding: 40px 36px; }
.price-tier h3 { margin-top: 0; }
.price-tier .amount { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--navy); margin: 0 0 14px; }
.price-tier ul { margin: 0; padding-left: 20px; }
.price__fine { text-align: center; font-size: 14px; opacity: .85; max-width: 880px; margin: 0 auto 36px; }
.price .buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 880px) { .price__tiers { grid-template-columns: 1fr; } }

/* 14 reviews — testimonial cards (source: .testimonial, radius 20px 0) */
.reviews__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }
.review-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--paper); color: var(--ink); border-radius: 20px 0; box-shadow: 0 4px 15px var(--shadow); padding: 50px 40px 34px; margin-bottom: 30px; }
/* speech-bubble pointer — transcribed .testimonial:after (white triangle, bottom-left, drop-shadowed) */
.review-card::after { content: ""; position: absolute; left: 0; bottom: -30px; border-style: solid; border-width: 30px 40px 0 0; border-color: var(--paper) transparent transparent; filter: drop-shadow(0 3px 3px rgba(0,0,0,.1)); }
.review-card__stars { margin-bottom: 18px; }
.review-card__text { font-size: 16px; }
.review-card__name { font-family: var(--font-head); font-weight: 800; color: var(--navy); margin: auto 0 0; padding-top: 16px; }

/* 15 subservices — related-service chip row under interior heroes */
.subservices__list { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; padding: 0; }
.subservices__list a { display: inline-block; padding: 12px 24px; background: var(--paper); border: 2px solid var(--navy); border-radius: var(--r-card); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 13px; text-transform: uppercase; text-decoration: none; transition: .2s ease-out; }
.subservices__list a:hover { background: var(--navy); color: var(--yellow); opacity: 1; }

/* 16 other-links — sibling-service list band */
.other-links { background: var(--tint); }
.other-links__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px 30px; list-style: none; margin: 0; padding: 0; }
.other-links__list a { display: block; padding: 16px 22px; background: var(--paper); border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.other-links__list a:hover { color: var(--blue); }

/* 17 guides — news/updates cards */
.guides__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0 0 40px; padding: 0; }
.guide-card { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink); }
.guide-card__body { padding: 30px 30px 26px; display: flex; flex-direction: column; flex: 1; }
.guide-card__title { font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--navy); margin: 0 0 10px; }
.guide-card__more { margin-top: auto; padding-top: 14px; font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--blue); }
.guides__action { text-align: center; }

/* 18 faq — accordion (source: .faq-block--item; runtime toggle) */
.faq__list { max-width: 880px; margin: 0 auto; list-style: none; padding: 0; }
.faq-item { background: var(--paper); border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); margin-bottom: 18px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 22px 28px; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--navy); list-style: none; position: relative; padding-right: 56px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 26px; top: 50%; transform: translateY(-50%); font-size: 26px; color: var(--yellow); text-shadow: 0 0 1px var(--navy); font-weight: 700; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 28px 24px; margin: 0; }

/* 19 links-list — small sibling list (Other Services) */
.links-list ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.links-list a { display: inline-block; padding: 10px 20px; background: var(--tint); border-radius: var(--r-card); color: var(--navy); font-family: var(--font-head); font-weight: 700; font-size: 13px; text-decoration: none; }
.links-list a:hover { background: var(--yellow); }

/* 20 feedback — Comfort Club signup band: copy + perk list + form mount */
.feedback { background: var(--navy); color: #fff; }
.feedback h2 { color: #fff; }
.feedback__wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feedback__perks { list-style: none; margin: 0 0 26px; padding: 0; }
.feedback__perks li { padding: 6px 0 6px 30px; position: relative; }
.feedback__perks li::before { content: "\2713"; position: absolute; left: 0; color: var(--yellow); font-weight: 700; }
.feedback__form { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 5px 15px var(--shadow); padding: 44px 40px; }
.feedback__form .field { margin-bottom: 18px; }
.feedback__form label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--navy); margin-bottom: 6px; }
.feedback__form input, .feedback__form textarea { width: 100%; min-width: 150px; padding: 13px 16px; border: 1px solid var(--muted); border-radius: 0; font-family: var(--font-body); font-size: 16px; }
@media (max-width: 880px) { .feedback__wrapper { grid-template-columns: 1fr; gap: 36px; } }

/* 21 choices — Comfort Club membership card */
.choices__card { max-width: 560px; margin: 0 auto; background: var(--paper); border-radius: var(--r-lg); box-shadow: 0 5px 15px var(--shadow); padding: 50px 46px; text-align: center; }
.choices__tier { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); margin: 0 0 6px; }
.choices__rate { font-family: var(--font-head); font-weight: 800; font-size: 40px; color: var(--navy); margin: 0 0 24px; }
.choices__rate small { font-size: 16px; font-weight: 700; color: var(--muted); }
.choices__perks { list-style: none; margin: 0 0 30px; padding: 0; text-align: left; }
.choices__perks li { padding: 9px 0 9px 30px; position: relative; border-bottom: 1px solid var(--tint); }
.choices__perks li::before { content: "\2713"; position: absolute; left: 0; color: var(--red); font-weight: 700; }

/* 23 motions — blog quick-action ribbons */
.motions__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.motion { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--navy); color: var(--yellow); font-family: var(--font-head); font-weight: 700; font-size: 15px; text-transform: uppercase; text-decoration: none; padding: 26px 20px; border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); }
.motion:hover { opacity: .85; }

/* 24 articles — blog post cards */
.articles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; list-style: none; margin: 0; padding: 0; }

/* 25 contacts — phone/address mounts */
.contacts__list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; list-style: none; margin: 0; padding: 0; }
.contact-card { background: var(--paper); border-radius: var(--r-card); box-shadow: 0 5px 15px var(--shadow); padding: 44px 40px; text-align: center; }
.contact-card h3 { margin-top: 0; }
.contact-card .phone-link { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--navy); text-decoration: none; display: block; margin-bottom: 10px; }
@media (max-width: 880px) { .contacts__list { grid-template-columns: 1fr; } }

/* 26 footer — navy, logo + link columns + phone */
.footer { background: var(--navy); color: #fff; padding: 70px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
.footer__logo img { height: 74px; width: auto; margin-bottom: 18px; }
.footer h4 { color: var(--yellow); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul a { color: #fff; text-decoration: none; font-size: 15px; display: inline-block; padding: 4px 0; }
.footer .phone-big { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--yellow); text-decoration: none; display: block; }
.footer .phone-note { font-size: 13px; opacity: .85; margin: 4px 0 0; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.15); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; opacity: .85; }
.footer__legal a { color: #fff; }
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

/* =========================================================================
   Doc chrome — ds-nav, sections catalog, page gallery (never in demo pages)
   ========================================================================= */
:root { --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --grey-line: #e4e4e4; }

.ds-nav { background: var(--navy); padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ds-nav .lockup-text { margin: 0; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .74rem; letter-spacing: .04em; text-transform: none; color: rgba(255,255,255,.6); }
.ds-nav .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-nav .tab { color: rgba(255,255,255,.72); text-decoration: none; font-size: .86rem; padding: 7px 14px; border-radius: 10px 0 10px 0; }
.ds-nav .tab:hover { color: #fff; opacity: 1; }
.ds-nav .tab.active { background: var(--yellow); color: var(--royal); }

.ds-hero { background: var(--tint); padding: 74px 0 56px; border-bottom: 1px solid var(--grey-line); }
.ds-hero .meta { display: flex; flex-wrap: wrap; gap: 14px 44px; margin-top: 30px; }
.ds-hero .meta > div { font-size: .8rem; color: var(--muted); }
.ds-hero .meta strong { display: block; color: var(--navy); font-size: .96rem; }
.ds-section { padding: 66px 0; border-bottom: 1px solid var(--grey-line); }

.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 20px; }
.door { display: block; text-decoration: none; padding: 26px 24px; background: var(--paper);
  border: 1px solid var(--grey-line); border-radius: var(--r-card);
  transition: box-shadow .18s ease, transform .18s ease; }
.door:hover { box-shadow: 0 5px 15px var(--shadow); transform: translateY(-2px); opacity: 1; }
.door h3 { margin-bottom: 6px; font-size: 1.3rem; }
.door p { margin: 0; font-size: .9rem; color: var(--muted); }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 20px; }
.swatch { border: 1px solid var(--grey-line); border-radius: var(--r-card); overflow: hidden; }
.swatch .chip-color { height: 84px; }
.swatch .meta { padding: 12px 14px; }
.swatch .t { font-family: var(--font-mono); font-size: .78rem; color: var(--navy); }
.swatch .v { font-size: .74rem; color: var(--muted); }

.type-spec { display: grid; grid-template-columns: 210px 1fr; gap: 30px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--grey-line); }
.type-spec .spec { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); line-height: 1.6; }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 20px; }
.asset-card { border: 1px solid var(--grey-line); border-radius: var(--r-card); overflow: hidden; }
.asset-card .thumb { aspect-ratio: 4/3; background: var(--tint); display: grid; place-items: center; overflow: hidden; }
.asset-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-card .thumb img.contain { object-fit: contain; padding: 14px; }
.asset-card .thumb.ink { background: var(--navy); }
.asset-card .meta { padding: 11px 14px; font-size: .74rem; color: var(--muted); }
.asset-card .meta strong { display: block; font-family: var(--font-mono); font-size: .76rem; color: var(--navy); }

.sx-header { background: var(--tint); padding: 70px 0 46px; }
.sx-header .meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 28px; }
.sx-header .meta > div { font-size: .8rem; color: var(--muted); }
.sx-header .meta strong { display: block; color: var(--navy); font-size: .96rem; }
.sx-header .lede { max-width: 800px; }
.sx-index { border-bottom: 1px solid var(--grey-line); background: var(--paper); }
.sx-index .grid { max-width: var(--container); margin: 0 auto; padding: 20px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 2px 14px; }
.sx-index a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  font-size: .82rem; color: var(--muted); text-decoration: none; border-radius: 6px; }
.sx-index a:hover { background: var(--tint); color: var(--blue); opacity: 1; }
.sx-index a .num { color: var(--muted); }

.sx-pattern { border-bottom: 1px solid var(--grey-line); }
.pattern-meta { max-width: var(--container); margin: 0 auto; padding: 40px 24px 18px;
  display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; }
.pattern-meta .id { font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
  display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pattern-meta .id .num { font-weight: 600; color: var(--blue); }
.pattern-meta .id .signature { background: var(--yellow); color: var(--royal);
  font-size: .64rem; letter-spacing: 1px; padding: 3px 8px; border-radius: 8px 0 8px 0; font-weight: 700; }
.pattern-meta .name { margin: 0; font-family: var(--font-head); font-weight: 800; color: var(--navy); }
.pattern-meta .purpose { margin: 2px 0 0; font-size: .86rem; color: var(--muted); }
.sx-demo { position: relative; border-top: 1px dashed var(--grey-line); padding: 44px 0; }
.sx-demo .demo-label { position: absolute; top: 0; right: 24px; transform: translateY(-50%);
  background: var(--paper); padding: 0 10px; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: 1px; color: var(--muted); z-index: 5; }

.page-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 26px; }
.page-card { border: 1px solid var(--grey-line); border-radius: var(--r-card); overflow: hidden;
  background: var(--paper); text-decoration: none; display: block; transition: box-shadow .18s ease; }
.page-card:hover { box-shadow: 0 5px 15px var(--shadow); }
.page-card .preview { aspect-ratio: 16/10; overflow: hidden; background: var(--tint); position: relative; }
.page-card .preview iframe { width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; border: 0; pointer-events: none; }
.page-card .preview::after { content: ""; position: absolute; inset: 0; }
.page-card .body { padding: 20px 24px 24px; }
.page-card .body h3 { margin-bottom: 6px; font-size: 1.3rem; }
.page-card .body p { margin: 0; font-size: .87rem; color: var(--muted); }

@media (max-width: 880px) {
  .section { padding: 60px 0; }
  .type-spec { grid-template-columns: 1fr; gap: 10px; }
  .pattern-meta { flex-direction: column; gap: 10px; }
  .pattern-meta .id { white-space: normal; flex-wrap: wrap; }
  .svc-grid--lift { margin-top: -50px; }
}