/* SAMPLE G — Dynasty Crest: heritage serif, midnight + gypsum + cut ice. Gold is used ONLY for call buttons.
   Display: Fraunces (OFL). Labels: Barlow Condensed (OFL). Body: Barlow (OFL).
   Contrast: ink on gypsum 16.2 · gypsum on ink 16.2 · ink on gold 9.8 · ice on ink 11.8 · link on gypsum 5.3 · copper on gypsum 6.1 */
@property --deg { syntax: "<integer>"; initial-value: 32; inherits: true; }
:root {
  --navy: #0B1524; --navy-2: #13233A; --ink: #0B1524; --muted: #5B5346;
  --ice: #F5F1E8; --frost: #D7ECF6; --frost-2: #9FD8F0; --link: #1B6A8F;
  --amber: #F0B429; --amber-hover: #FFC94D; --line: #E2DACB;
  --copper: #8F4522; --gyp: #F5F1E8; --surface: #FFFDF8;
  --head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
}
body { background: var(--surface); }
h1, h2 { font-family: var(--serif); font-weight: 700; text-transform: none; letter-spacing: -0.015em; line-height: 1.05; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-family: var(--head); font-weight: 700; font-size: 1.3rem; letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { font-family: var(--head); font-size: .95rem; letter-spacing: .2em; color: var(--copper); }
.section--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .dc-deliver .eyebrow, .cta-band .eyebrow { color: var(--frost-2); }
.promise { border-left-color: var(--copper); font-family: var(--serif); font-weight: 600; font-style: italic; }
.card { background: var(--surface); border-color: var(--line); border-radius: .9rem; }
.card .icon { color: var(--link); }
.hero :focus-visible, .dc-deliver :focus-visible, #quote :focus-visible, .cta-band :focus-visible { outline-color: var(--frost-2); }
#quote .quote-box :focus-visible { outline-color: var(--link); }

/* Header */
.site-header { background: rgba(11,21,36,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(159,216,240,.28); }
.brand svg { width: 2.5rem; height: auto; }
.brand-name { font-family: var(--serif); font-weight: 700; text-transform: none; letter-spacing: .01em; font-size: 1.55rem; }
.brand-name small { font-family: var(--head); text-transform: uppercase; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--frost-2); }

/* ---- Hero: centered, the ice gem floats over a frosted desert ---- */
.hero {
  text-align: center; isolation: isolate;
  background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(11,21,36,.93) 0%, rgba(11,21,36,.74) 42%, rgba(11,21,36,.3) 74%, rgba(11,21,36,.82) 100%), url("../img/dc-desert-900.jpg");
  background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}
@media (min-width: 56rem) {
  .hero { background-image: linear-gradient(180deg, rgba(11,21,36,.93) 0%, rgba(11,21,36,.72) 42%, rgba(11,21,36,.22) 74%, rgba(11,21,36,.82) 100%), url("../img/dc-desert-1600.jpg"); background-size: cover; background-position: center bottom; }
}
.hero::after { display: none; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(232,110,40,.6), rgba(240,180,41,.28) 65%, rgba(240,180,41,0));
  animation: dc-cool 3.2s ease-out .3s forwards; }
@keyframes dc-cool { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero::before { display: none; } }
.dc-hero-in { position: relative; z-index: 1; max-width: 54rem; padding-top: clamp(2.75rem, 7vw, 5rem); }
.hero h1 { margin-bottom: .45em; }
.hero h1 span { display: block; font-style: italic; color: var(--frost-2); }
.hero .lede { margin-inline: auto; color: #FFFFFF; max-width: 41rem; }
.hero .btn-row { justify-content: center; margin-top: 1.4rem; }
.live-temp { display: inline-block; margin: .2rem 0 0; padding: .35rem .85rem; border-radius: 999px; background: rgba(159,216,240,.12); border: 1px solid rgba(159,216,240,.5); color: #E9F6FC; font-weight: 600; }
.ah-note { display: none; }
html.after-hours .ah-note { display: block; margin: .9rem auto 0; padding: .6rem .9rem; border: 1px solid rgba(159,216,240,.45); border-radius: .6rem; background: rgba(11,21,36,.6); color: #E9F6FC; max-width: 38rem; }

/* Temperature drop: counts 105 → 32 once on load */
.tempdrop { --deg: 32; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .5rem .8rem; margin: 1.5rem 0 0;
  font: 700 .95rem var(--head); letter-spacing: .16em; text-transform: uppercase; color: var(--frost);
  animation: dc-drop 3.2s cubic-bezier(.3,.6,.2,1) .3s both; }
@keyframes dc-drop { from { --deg: 105; } to { --deg: 32; } }
.td-track { width: clamp(4.5rem, 16vw, 10rem); height: 6px; border-radius: 9px; background: linear-gradient(90deg, #F27A3A, #F0C46A 32%, #D7ECF6 68%, #9FD8F0); }
.td-num::after { counter-reset: d var(--deg); content: counter(d) "°F"; font: 700 2.1rem/1 var(--serif); letter-spacing: 0; color: #FFFFFF; }

.dc-gem { position: relative; z-index: 1; display: block; width: min(72vw, 25rem); margin: clamp(.25rem, 1.5vw, 1rem) auto -4.25rem;
  mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 98%); mask-image: radial-gradient(closest-side, #000 60%, transparent 98%); }
.dc-facts { position: relative; z-index: 2; list-style: none; margin-block: 0; padding: 0 0 clamp(2rem, 5vw, 3.25rem); display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
@media (min-width: 56rem) { .dc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dc-facts li { background: rgba(11,21,36,.58); border: 1px solid rgba(215,236,246,.4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: .7rem; padding: .9rem 1rem; }
.dc-facts strong { display: block; font: 700 clamp(1.25rem, 5.2vw, 1.85rem)/1.05 var(--serif); color: #FFFFFF; white-space: nowrap; }
.dc-facts span { display: block; margin-top: .25rem; font: 600 .9rem/1.25 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--frost); }

/* ---- Why it matters: statement + numbered points ---- */
.dc-split { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .dc-split { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }
.dc-points { list-style: none; margin: 0; padding: 0; counter-reset: pt; border-bottom: 1px solid var(--line); }
.dc-points li { counter-increment: pt; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--line); }
.dc-points li::before { content: "0" counter(pt); grid-row: span 2; font: 600 1.6rem/1.1 var(--serif); color: var(--copper); }
.dc-points h3 { margin: 0 0 .2rem; }
.dc-points p { margin: 0; grid-column: 2; }

/* ---- Who we serve: tile grid ---- */
.dc-bento { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 56rem) {
  .dc-bento { grid-template-columns: 1.35fr 1fr 1fr; grid-auto-rows: minmax(11.5rem, auto); }
  .dc-tile--photo { grid-row: span 2; }
  .dc-tile:last-child { grid-column: 2 / 4; }
}
.dc-tile { background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; }
.dc-tile .icon { width: 2.6rem; height: 2.6rem; color: var(--link); margin-bottom: auto; }
.dc-tile h3 { margin: .9rem 0 .25rem; }
.dc-tile p { margin: 0; }
.dc-tile--photo { min-height: 21rem; color: #FFFFFF; border: 0;
  background: var(--navy) linear-gradient(180deg, rgba(11,21,36,0) 28%, rgba(11,21,36,.94) 76%), url("../img/dc-crew-900.jpg");
  background-image: linear-gradient(180deg, rgba(11,21,36,0) 28%, rgba(11,21,36,.94) 76%), url("../img/dc-crew-900.jpg"); background-size: cover; background-position: center 30%; }

/* ---- What we deliver: ice-filled numerals on frost ---- */
.dc-deliver { color: #FFFFFF; background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(11,21,36,.96), rgba(11,21,36,.82)), url("../img/dc-frost-900.jpg"); background-size: cover; background-position: center; }
@media (min-width: 56rem) { .dc-deliver { background-image: linear-gradient(90deg, rgba(11,21,36,.96), rgba(11,21,36,.8)), url("../img/dc-frost-1600.jpg"); } }
.dc-bags { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.25rem; }
.dc-bag { margin: 0; display: flex; flex-direction: column; }
.dc-big { font: 800 clamp(5rem, 13vw, 8.5rem)/.92 var(--serif); color: #DFF3FB;
  background: linear-gradient(rgba(233,246,252,.82), rgba(191,226,243,.62)), url("../img/dc-frost-900.jpg") center / cover;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dc-unit { font: 700 1rem var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--frost-2); }
.dc-desc { color: var(--frost); margin-top: .5rem; }
.dc-price { background: rgba(19,35,58,.9); border: 1px solid #2B4666; border-radius: .9rem; padding: 1.5rem; }
.dc-price h3 { color: #FFFFFF; }
.dc-price .checklist li::before { background-color: var(--link); }

/* ---- The Dynasty Standard ---- */
.dc-standard { background: var(--gyp); }
.dc-std-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.dc-std-head .lede { margin-inline: auto; }
.dc-crest { width: 7rem; height: auto; margin: 0 auto 1.1rem; }
.dc-pledges { list-style: none; margin: 0 0 3rem; padding: 0; counter-reset: pl; display: grid; border-top: 2px solid var(--ink); }
@media (min-width: 48rem) { .dc-pledges { grid-template-columns: 1fr 1fr; } .dc-pledges li:nth-child(odd) { border-right: 1px solid #CFC5B2; } }
.dc-pledges li { counter-increment: pl; position: relative; padding: 1.4rem 1.2rem 1.4rem 4.4rem; border-bottom: 1px solid #CFC5B2; }
.dc-pledges li::before { content: counter(pl, upper-roman); position: absolute; left: .9rem; top: 1.3rem; width: 2.8rem; text-align: center; font: 700 1.55rem/1.1 var(--serif); color: var(--copper); }
.dc-pledges h3 { margin: 0 0 .25rem; }
.dc-pledges p { margin: 0; }

/* ---- How it works: the lease-road timeline ---- */
#how { background: var(--surface); background-image: none; color: var(--ink); padding-bottom: clamp(3rem, 8vw, 5.5rem); }
.dc-road { list-style: none; margin: 2.5rem 0 0; padding: 0; counter-reset: rd; display: grid; gap: 2rem; position: relative; }
.dc-road::before { content: ""; position: absolute; left: 1.4rem; top: .5rem; bottom: .5rem; border-left: 3px dashed #B9AE99; }
.dc-road li { counter-increment: rd; position: relative; padding-left: 4.4rem; }
.dc-road li::before { content: counter(rd); position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #FFFFFF; font: 700 1.4rem var(--serif); box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--ink); }
.dc-road h3 { margin: .1rem 0 .25rem; }
.dc-road p { margin: 0; }
@media (min-width: 56rem) {
  .dc-road { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dc-road::before { left: 0; right: 0; top: 1.4rem; bottom: auto; border-left: 0; border-top: 3px dashed #B9AE99; }
  .dc-road li { padding: 4.5rem 1.5rem 0 0; }
}

/* ---- Quote, map, FAQ, closing band ---- */
#quote { background-image: linear-gradient(90deg, rgba(11,21,36,.95), rgba(11,21,36,.72)), url("../img/dc-mesa-900.jpg"); background-size: cover; background-position: center; }
@media (min-width: 56rem) { #quote { background-image: linear-gradient(90deg, rgba(11,21,36,.95), rgba(11,21,36,.68)), url("../img/dc-mesa-1600.jpg"); } }
.area-map { background-color: var(--navy); background-image: repeating-radial-gradient(circle at 72% 38%, transparent 0 26px, rgba(159,216,240,.09) 26px 27px); border: 1px solid #2B4666; }
.area-map polygon { fill: rgba(19,35,58,.92); stroke: #9FD8F0; }
.area-map circle[fill="#F2A900"] { fill: #9FD8F0; stroke: #FFFFFF; }
.area-map text[fill="#F2A900"] { fill: #9FD8F0; }
.faq summary::after { color: var(--copper); }
.cta-band { color: #FFFFFF; text-align: center; background-color: var(--navy);
  background-image: linear-gradient(180deg, rgba(11,21,36,.74), rgba(11,21,36,.88)), url("../img/dc-jewel-900.jpg"); background-size: cover; background-position: 62% center; }
@media (min-width: 56rem) { .cta-band { background-image: linear-gradient(180deg, rgba(11,21,36,.7), rgba(11,21,36,.88)), url("../img/dc-jewel-1600.jpg"); } }
.cta-band .cta-inner { grid-template-columns: 1fr; justify-items: center; }
.cta-band .cta-inner .btn-row { justify-content: center; }
.cta-band .btn--primary { background: var(--amber); color: var(--navy); }
.cta-band .btn--primary:hover { background: var(--amber-hover); }
.cta-band .btn--outline { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.cta-band .btn--outline:hover { background: rgba(255,255,255,.12); }

/* Other pages */
.page-hero--road { background-image: linear-gradient(180deg, rgba(11,21,36,.92), rgba(11,21,36,.86)), url("../img/dc-crew-900.jpg"); background-size: cover; background-position: center 30%; }
@media (min-width: 56rem) {
  .page-hero--road { background-image: linear-gradient(90deg, #0B1524 0%, #0B1524 46%, rgba(11,21,36,.62) 68%, rgba(11,21,36,.38) 100%), url("../img/dc-crew-1600.jpg"); background-size: auto, auto 100%; background-position: 0 0, right center; background-repeat: no-repeat; }
}

/* ===== FINAL DRAFT additions: client logo + Cold Chain services ===== */
.brand-logo { width: 3.1rem; height: 3.1rem; border-radius: .5rem; object-fit: cover; }
.footer-logo { width: 8.5rem; height: auto; border-radius: .9rem; margin-bottom: 1.25rem; }
.dc-logo-big { width: min(100%, 21rem); height: auto; border-radius: 1.2rem; margin-inline: auto; box-shadow: 0 18px 40px rgba(11,21,36,.25); }
.dc-chain-grid { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 40rem) { .dc-chain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .dc-chain-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dc-chain-grid .dc-svc { grid-column: span 2; }
  .dc-chain-grid .dc-svc:nth-child(4) { grid-column: 2 / span 2; }
}
.dc-svc { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: .9rem; padding: 1.4rem; display: flex; flex-direction: column; }
.section .dc-svc { background: var(--gyp); }
.dc-svc .icon { width: 2.6rem; height: 2.6rem; color: var(--link); margin-bottom: .9rem; }
.dc-svc h3 { margin: 0 0 .3rem; }
.dc-svc p { margin: 0 0 .9rem; }
.dc-svc a { margin-top: auto; display: inline-flex; align-items: center; min-height: 2.75rem; font: 700 1.05rem var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.dc-serve { margin-top: 2.75rem; }
.dc-serve h3 { margin-bottom: .2rem; }
.dc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: .75rem 0 0; }
.dc-chips li { border: 1px solid var(--ink); border-radius: 999px; padding: .45rem 1rem; font: 700 1rem var(--head); letter-spacing: .08em; text-transform: uppercase; }
.split > .prose:only-child { grid-column: 1 / -1; }