/* dkpropertysolve.com -- Direction A, "Bold blue".
   Almost every value below is copied from the approved design canvas (Main, Legal, ThankYou, NotFound, Brand). The page markup
   carries no inline styles: colors, sizes, radii and spacing live here as custom properties and classes. Box-sizing is left at the
   browser default on purpose, because the canvas was drawn that way and the pixel sizes below assume it.

   Deliberate departures from the canvas, each one a single line to revert:
     --field-border   #c5cee6 -> #8590ae   the canvas border is 1.57:1 on white; a form control's edge needs 3:1 (WCAG 1.4.11)
     :focus-visible   gold ring + ink inner edge   gold alone is 1.6:1 on white
     fallback fonts   metric-matched local faces, so the swap to the web fonts barely moves the layout
     safe areas       .container gutters clear a phone notch in landscape
     link hit areas   footer links are padded to 44px tall without changing the line rhythm
     phone card       the form card's 36px padding drops to 20px below 480px (the consent text had a column about 180px wide at 375)
   The one media query in this file is that last one; test_brand_direction_a.py pins it as the only conditional rule. */

:root{
  --royal:#0B3BEF;        /* mark, hero, links, form submit */
  --gold:#F7C531;         /* halo, dot, primary button, focus ring */
  --ink:#0B1437;          /* text, trust strip, footer */
  --mist:#F3F6FF;         /* cards, consent box */
  --white:#FFFFFF;
  --royal-light:#2a54f2;  /* the hero photo's backing block while it loads */
  --line:#e3e8f4;
  --field-border:#8590ae;
  --text-muted:#4b5878;
  --text-soft:#3d4a6b;
  --text-body:#2c3858;
  --text-legal:#1d2a4d;
  --on-royal:#e3e9ff;
  --on-ink:#c4cce4;
  --error-ink:#8a1212;
  --error-bg:#fdecec;
  --error-line:#f1b4b4;
  --font-display:'DM Serif Display', 'DM Serif Display Fallback', Georgia, 'Times New Roman', serif;
  --font-body:'Public Sans', 'Public Sans Fallback', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --maxw:1120px;
  --gutter:24px;
}

/* What the page paints in before the web fonts arrive. Sizes and vertical metrics are measured from the fonts themselves
   (average advance width over this site's own copy, hhea ascent/descent), so lines wrap in the same places before and after. */
@font-face{font-family:'DM Serif Display Fallback'; src:local('Georgia'); size-adjust:99.5%; ascent-override:104.2%; descent-override:33.7%; line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback'; src:local('Arial'); size-adjust:103.4%; ascent-override:91.9%; descent-override:21.8%; line-gap-override:0%}

html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--white); color:var(--ink);
  font:400 17px/1.65 var(--font-body)}
main{flex:1 0 auto}
.page-legal{line-height:1.7}
svg{max-width:100%}
a{color:var(--royal)}
[hidden]{display:none !important}

/* Visible keyboard focus on every surface: a gold ring with an ink inner edge, so it reads on white (gold alone is only 1.6:1
   against white) as well as on royal and ink. */
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 2px var(--ink)}

.container{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);
  padding-left:max(var(--gutter), env(safe-area-inset-left)); padding-right:max(var(--gutter), env(safe-area-inset-right))}
.container--narrow{max-width:720px}
.container--reading{max-width:760px}

/* the mark: live "dk" in the display face, a gold dot, and a gold halo (inline SVG). One snippet, sized by --mark-size. */
.mark{position:relative; display:inline-flex; align-items:baseline; padding-top:.3em; font-family:var(--font-display);
  font-size:var(--mark-size, 40px); line-height:1; color:var(--royal)}
.mark-halo{position:absolute; left:0; top:0; width:1em; height:.35em; overflow:visible}
.mark-halo ellipse{fill:none; stroke:var(--gold); stroke-width:3}
.mark-dot{color:var(--gold)}

/* header */
.site-header{background:var(--white); border-bottom:1px solid var(--line)}
.header-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; padding-bottom:18px}
.brand{display:flex; align-items:flex-end; gap:14px; text-decoration:none}
.brand-name{font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--ink); padding-bottom:4px}
.site-nav{display:flex; flex-wrap:wrap; align-items:center; gap:24px; font-size:15px}
.site-nav a{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--text-muted); text-decoration:none}
.site-nav a:hover{text-decoration:underline}
.site-nav a.nav-primary,.site-nav a[aria-current="page"]{color:var(--royal); font-weight:700}

/* headings. Only the homepage title is tracked tight and balanced (as in the canvas); the other four h1s are plain. */
h1{margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(40px,6vw,64px); line-height:1.04}
.hero-title{letter-spacing:-.01em; text-wrap:balance}
h2{margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(32px,4vw,44px); line-height:1.1; color:var(--ink)}

/* buttons: primary is gold, secondary is an outline, and the form submit is royal (see .form-card .btn) */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 32px; background:var(--gold);
  color:var(--ink); font-weight:700; font-size:17px; text-decoration:none; border-radius:999px; border:0; cursor:pointer}
.btn.secondary{padding:0 28px; border:2px solid var(--white); color:var(--white); background:transparent; font-weight:600}
.btn:disabled{opacity:.7; cursor:not-allowed}

/* hero */
.hero{background:var(--royal); color:var(--white)}
.hero-inner{display:flex; flex-wrap:wrap; gap:56px; align-items:center; padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(64px,8vw,104px)}
.hero-copy{flex:1 1 540px; min-width:0; display:flex; flex-direction:column; gap:28px}
.lede{margin:0; font-size:19px; line-height:1.6; color:var(--on-royal); max-width:54ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px}
.sms-notice{margin:0; max-width:62ch; font-size:14px; line-height:1.55; color:var(--on-royal)}
.sms-notice a{color:var(--white)}
.hero-panel{flex:1 1 360px; min-width:0; position:relative; padding-top:28px}
.hero-panel .halo{position:absolute; z-index:1; left:50%; top:0; transform:translateX(-50%); width:220px; height:56px}
.hero-panel-block{position:relative; overflow:hidden; min-height:440px; border-radius:18px; background:var(--royal-light)}
.hero-panel-block img{position:absolute; top:0; left:0; display:block; width:100%; height:100%; object-fit:cover; object-position:55% 50%}

/* the large halos on the hero panel, thank-you and 404 pages (sizes come from the SVG width and height attributes) */
.halo ellipse{fill:none; stroke:var(--gold); stroke-width:6}
.halo--thanks ellipse{stroke-width:5}

.hero-inner--stack,.hero-inner--404{padding-bottom:clamp(56px,8vw,96px)}
.hero-inner--stack{flex-direction:column; flex-wrap:nowrap; gap:20px; align-items:flex-start}
.hero-inner--404{gap:40px}
.hero-inner--404 .hero-copy{flex:1 1 520px; gap:20px}
.hero-inner--stack .lede,.hero-inner--404 .lede{max-width:52ch; line-height:1.65}
.nf-art{flex:0 1 260px; display:flex; flex-direction:column; align-items:center; gap:4px}
.nf-code{font-family:var(--font-display); font-size:120px; line-height:1; color:var(--white)}
.gold{color:var(--gold)}

/* trust strip */
.trust{background:var(--ink); color:var(--white)}
.trust-grid{list-style:none; margin:0; padding:26px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%),1fr));
  gap:20px; font-size:15px; font-weight:600}
.trust-item{display:flex; align-items:center; gap:12px}
.trust-dot{width:10px; height:10px; border-radius:50%; background:var(--gold); flex:none}

/* sections */
.section-inner{display:flex; flex-direction:column; gap:40px; padding-top:96px; padding-bottom:96px}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px,100%),1fr)); gap:24px}
.card{display:flex; flex-direction:column; gap:12px; padding:32px; border-radius:16px; background:var(--mist)}
.card .num{font-family:var(--font-display); font-size:48px; line-height:1; color:var(--royal)}
.card h3{margin:0; font-size:20px; color:var(--ink)}
.card p{margin:0; color:var(--text-soft)}
.band{background:var(--royal); color:var(--white)}
.band h2{color:inherit}
.band-inner{display:flex; flex-wrap:wrap; gap:48px; padding-top:88px; padding-bottom:88px}
.band-inner h2{flex:1 1 280px}
.band-copy{margin:0; flex:2 1 480px; min-width:0; font-size:19px; line-height:1.7; color:var(--on-royal)}

/* the request form */
.offer-inner{display:flex; flex-direction:column; gap:28px; padding-top:96px; padding-bottom:96px}
.form-card{display:flex; flex-direction:column; gap:18px; padding:36px; border:1px solid var(--line); border-radius:18px;
  background:var(--white); box-shadow:0 24px 48px -28px rgba(11,59,239,.45)}
@media (max-width:479px){.form-card{padding:20px}}
.form-card form{display:flex; flex-direction:column; gap:18px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; font-size:15px}
.field .optional{font-weight:400; color:var(--text-muted)}
.field input,.field textarea{min-height:48px; padding:0 14px; border:1px solid var(--field-border); border-radius:10px; font:inherit; color:var(--ink); background:var(--white)}
.field textarea{min-height:0; padding:12px 14px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error-ink)}
.field-error{margin:0; font-size:14px; line-height:1.4; color:var(--error-ink)}
.consent{display:flex; gap:12px; align-items:flex-start; padding:16px; background:var(--mist); border-radius:12px}
.consent input{width:20px; height:20px; margin-top:3px; flex:none; accent-color:var(--royal)}
.consent label{font-size:14px; line-height:1.55}
.consent a{color:var(--royal)}
.form-card .btn{min-height:56px; background:var(--royal); color:var(--white); font:inherit; font-weight:700; font-size:17px}
.msg.err{padding:12px 16px; border:1px solid var(--error-line); border-radius:10px; background:var(--error-bg); color:var(--error-ink); font-size:15px}
.progline{margin:0; font-size:13px; color:var(--text-muted)}

/* thank-you and 404 body copy */
.next-inner{display:flex; flex-direction:column; gap:18px; padding-top:88px; padding-bottom:88px}
.body-lg{margin:0; font-size:18px; color:var(--text-body)}
.next-inner a{font-weight:600}
.note{margin:0; padding:16px 20px; background:var(--mist); border-radius:12px; font-size:15px; color:var(--text-soft)}

/* legal reading layout (Terms and Privacy) */
.legal-hero{background:var(--mist); border-bottom:1px solid var(--line)}
.legal-hero-inner{display:flex; flex-direction:column; gap:14px; padding-top:72px; padding-bottom:56px}
.legal-hero h1{font-size:clamp(40px,5vw,56px); line-height:1.05}
.eff{margin:0; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink)}
.eff::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--gold)}
.legal-body{display:flex; flex-direction:column; gap:18px; padding-top:56px; padding-bottom:96px; color:var(--text-legal)}
.legal-body > *{margin:0}
.legal-body h2{margin-top:24px; font-size:30px; line-height:1.2}
.legal-body ul{padding-left:1.4em}
.legal-body li + li{margin-top:6px}

/* footer. The links are inline, padded to a 44px-tall hit area (the padding of an inline box does not move the lines around it). */
.site-footer{background:var(--ink); color:var(--on-ink); font-size:14px}
.footer-inner{display:flex; flex-direction:column; gap:14px; padding-top:64px; padding-bottom:64px}
.footer-inner p{margin:0}
.footer-inner .mark{--mark-size:34px; align-self:flex-start; color:var(--white)}
.footer-disclaimer{max-width:80ch}
.footer-inner .footer-links{margin-top:9px}  /* the contact line and this one both hold padded links; this keeps their 44px boxes from overlapping */
.site-footer a{padding:14px 0; color:var(--white)}