/* ==========================================================================
   Kilpatrick Resource Hub: shared stylesheet
   Extracted from guide-page-v4.html (approved template) and
   resource-hub-preview.html. Single source of truth for the whole site:
   change it here, it changes everywhere.

   Design principle: utilitarian, not editorial. Photo bands are thin and
   flat. Decorative treatments (italic numbering, kickers, callouts) are
   used one at a time, never stacked on the same page.
   ========================================================================== */

:root{
  /* The page tone. Panels (cards, figures, calculators) sit on the same value
     and are separated by rules and gaps rather than by fill, so these two move
     together: lighten one and the whole page lifts without losing any
     relationship. --cream-deep is the one step down, used for hovers and for
     any panel that does need to read as a panel. */
  --cream:#F9F7F1;
  --cream-deep:#F2EFE5;
  --ink:#1E2A22;
  --green:#163A2C;
  --green-deep:#0F2A20;
  --clay:#AD6C42;
  --stone:#8B8B7A;
  --line:rgba(30,42,34,0.12);
  --body:#3B4038;
  --body-soft:#5A5E52;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

/* Visible keyboard focus: the reference mockups had none. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:2px;
}

/* Visually hidden but read by screen readers. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--green); color:var(--cream);
  padding:12px 20px; font-size:13px; letter-spacing:0.04em;
}
.skip-link:focus{left:0;}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 40px;}
.wrap-narrow{max-width:720px; margin:0 auto; padding:0 40px;}
@media(max-width:640px){
  .wrap,.wrap-narrow{padding:0 22px;}
}

.section{padding:100px 0;}
.section.tight{padding:70px 0;}
@media(max-width:640px){
  .section{padding:64px 0;}
  .section.tight{padding:48px 0;}
}

/* ---------- NAV ---------- */
nav.top{padding:22px 0; border-bottom:1px solid var(--line);}
nav.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--serif); font-weight:500; font-size:19px;
  letter-spacing:0.06em; text-transform:uppercase;
}
/* The mark reads "K." at rest and types out into the full name on hover.
   The "K." is the LAST K of Kilpatrick, not the first, so the word reveals a
   character at a time from its own end backwards: K. CK. ICK. RICK. and so
   on. The full stop never moves relative to the letters in front of it.

   min-width stops the nav twitching by a pixel as the glyph widths change,
   and the mark grows into empty space because the links are pinned right. */
.brand-mark{display:inline-block; min-width:2.1em; white-space:pre;}
.navlinks{
  display:flex; gap:32px; font-size:12.5px; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--stone);
}
.navlinks a:hover{color:var(--ink);}
.navlinks a.on{color:var(--clay);}

/* Mobile menu: the reference simply hid the nav on small screens,
   which left phone visitors with no way to move around the site. */
.navtoggle{
  display:none; background:none; border:1px solid var(--line);
  border-radius:2px; padding:8px 12px; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink);
}
@media(max-width:760px){
  .navtoggle{display:block;}
  .navlinks{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--cream); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:8px 22px 18px; z-index:50;
  }
  nav.top{position:relative;}
  nav.top.open .navlinks{display:flex;}
  .navlinks a{padding:13px 0; border-bottom:1px solid var(--line); font-size:13px;}
  .navlinks a:last-child{border-bottom:none;}

  /* Open, the menu is the whole screen: an opaque panel over the viewport.
     Nothing shows behind it, so there is no tint to get the colour of, no blur
     to cost anything on an older phone, and no layering to go wrong against
     whatever happens to be on the page underneath. It replaces the earlier
     attempt at dimming rather than sitting on top of it.

     100dvh, where it is understood, is the height with the browser toolbars
     showing. Plain vh reports the taller layout viewport, which on iOS leaves
     the last links sitting under the address bar. */
  nav.top.open{
    position:fixed; inset:0; z-index:900;
    height:100vh; height:100dvh;
    background:var(--cream); border-bottom:none;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  /* The bar keeps its row, and the links wrap onto their own full-width line
     beneath it. align-content keeps that block at the top rather than letting
     the rows spread down a full-height box. */
  nav.top.open .wrap{
    display:flex; flex-wrap:wrap; align-content:flex-start;
    align-items:center; min-height:100%;
  }
  nav.top.open .navlinks{
    display:flex; position:static; flex:0 0 100%;
    background:none; border-bottom:none; z-index:auto;
    margin-top:30px; padding:0;
  }
  /* Room to breathe, now that there is a screenful of it. */
  nav.top.open .navlinks a{font-size:15px; padding:17px 0;}

  /* The panel is fixed, so the page behind would otherwise still scroll under
     it and be somewhere else when the menu closes. */
  body.nav-open{overflow:hidden;}
}

.back{
  display:inline-flex; align-items:center; gap:6px; margin:16px 0 0;
  font-size:12px; color:var(--stone); letter-spacing:0.02em;
}
.back:hover{color:var(--ink);}

/* ---------- HERO (home + hub pages) ---------- */
.hero{padding:100px 0 80px;}
@media(max-width:640px){ .hero{padding:60px 0 48px;} }
.eyebrow{
  font-size:12.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--clay); font-weight:500; margin-bottom:20px;
}
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.4vw,62px); line-height:1.07;
  max-width:820px; letter-spacing:-0.01em;
}
.hero h1 em{font-style:italic; color:var(--green);}
.hero p.lead{
  margin-top:26px; max-width:520px; font-size:17px;
  color:#4A4E44; font-weight:300;
  /* Space for the rotating line is reserved by site.js, which measures the
     tallest sentence at the current width. A fixed value here would either
     leave a hole under the short lines or let the buttons jump under the
     long ones. Without JavaScript the line never appears, so nothing is
     reserved and the paragraph closes up naturally. */
}

/* The rotating closing line */
.typed{color:var(--ink);}
.typed-caret{
  display:inline-block; width:1px; height:1.05em; margin-left:2px;
  background:var(--clay); vertical-align:-0.16em;
  animation:kp-blink 1.05s step-end infinite;
}
@keyframes kp-blink{50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .typed-caret{display:none;}
}
.hero-actions{margin-top:34px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; padding:15px 30px; font-size:12.5px;
  letter-spacing:0.06em; text-transform:uppercase; border-radius:2px;
  border:1px solid transparent; cursor:pointer; font-family:var(--sans);
  transition:opacity 0.15s ease, background 0.15s ease;
}
.btn-primary{background:var(--green); color:var(--cream);}
.btn-primary:hover{background:var(--green-deep);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{background:var(--cream-deep);}
.btn[disabled]{opacity:0.55; cursor:not-allowed;}

/* ---------- PHOTO BAND ----------
   Thin and flat: a breath between sections, not a scene. No gradient
   overlay, no diagonal stripe texture; those read as boutique-magazine
   on a page people are using functionally. */
.band{
  position:relative;
  height:38vh; min-height:300px; max-height:480px;
  overflow:hidden; background:var(--green);
}
/* Absolute inset makes the image box exactly the band box, whatever the
   photo's intrinsic proportions are. A percentage height can resolve to auto
   and leave the band's green showing above and below; this cannot. */
.band img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.band.solid{background:var(--green);}

/* Section landing pages and the homepage give the photograph more room. */
.band.hub{height:52vh; min-height:380px; max-height:640px;}
.band.hero{height:80vh; min-height:520px; max-height:920px;}
@media(max-width:640px){
  .band{height:30vh; min-height:210px;}
  .band.hub{height:38vh; min-height:260px;}
  .band.hero{height:56vh; min-height:360px;}
}
/* The rotating hero has no src until its inline script runs; without this it
   would briefly show a broken-image glyph on a slow parse. */
.band img.js-rotate:not([src]){visibility:hidden;}

/* ---------- SECTION HEADINGS ---------- */
.kicker{
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--stone); margin-bottom:14px;
}
.section h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(27px,3.2vw,40px); line-height:1.16;
  max-width:640px; letter-spacing:-0.01em;
}
.section p.intro{margin-top:20px; max-width:540px; color:#4A4E44; font-size:16px;}

/* ---------- CARD GRID (home "how can I help you") ---------- */
.grid4{
  margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
}
@media(max-width:900px){ .grid4{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .grid4{grid-template-columns:1fr;} }
.card{
  background:var(--cream); padding:40px 30px; min-height:250px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background 0.2s ease;
}
.card:hover{background:var(--cream-deep);}
.card .num{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--clay); margin-bottom:28px;}
.card h3{font-family:var(--serif); font-weight:500; font-size:22px; line-height:1.25; margin-bottom:10px;}
.card p{font-size:14px; color:var(--body-soft); margin-bottom:24px;}
.card .go{
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--green); border-top:1px solid var(--line); padding-top:16px;
}

/* ---------- FEATURED SPLIT ---------- */
.split{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
@media(max-width:800px){ .split{grid-template-columns:1fr; gap:34px;} }
.split .imgbox{aspect-ratio:4/5; overflow:hidden; background:var(--cream-deep);}
.split .imgbox img{width:100%; height:100%; object-fit:cover;}
.split h2{max-width:none;}
.taglist{margin-top:28px; display:flex; flex-direction:column;}
.taglist .item{
  padding:17px 0; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; font-size:15px;
}
.taglist .item:last-child{border-bottom:1px solid var(--line);}
.taglist .item span.meta{
  font-size:11.5px; color:var(--stone); letter-spacing:0.04em;
  text-transform:uppercase; white-space:nowrap;
}

/* ---------- ARTICLE / GUIDE PAGE ---------- */
header.article-head{padding:34px 0 30px;}
h1.title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,4.6vw,40px); line-height:1.14;
  letter-spacing:-0.01em; max-width:640px;
}
.dek{margin-top:12px; font-size:15.5px; color:#5A5E52; max-width:580px; font-weight:300;}
.meta{margin-top:12px; font-size:12.5px; color:var(--stone); letter-spacing:0.02em;}
/* The read-time tag under a guide title. It is a label, not a line of
   the page, so it sits smaller than the body text around it. */
.article-head .meta{font-size:10.5px; letter-spacing:0.07em;
                    text-transform:uppercase; margin-top:14px;}

article{padding:36px 0 30px;}
/* A guide with no photograph gets a hairline instead, so the page still opens
   deliberately rather than looking as though an image failed to load. */
article.no-band{border-top:1px solid var(--line); padding-top:38px; margin-top:6px;}
/* Long-form content laid out in the wide column. The measure is constrained
   for readability, but left aligned, so the text starts at the page margin
   rather than floating in the middle of the screen. */
article.measure{max-width:720px;}
article p{font-size:16px; color:var(--body); margin-bottom:18px; max-width:640px;}
article h2{
  font-family:var(--serif); font-weight:500; font-size:21px; line-height:1.25;
  margin:36px 0 12px; letter-spacing:-0.005em;
}
article h2:first-child{margin-top:0;}
article h3{font-family:var(--serif); font-weight:500; font-size:17px; margin:26px 0 8px;}
article ul,article ol{margin:0 0 18px 20px; max-width:620px;}
article li{font-size:15.5px; color:var(--body); margin-bottom:8px;}
article strong{font-weight:500; color:var(--ink);}
article a:not(.btn){border-bottom:1px solid var(--clay); color:var(--ink);}
article a:not(.btn):hover{color:var(--clay);}

/* Doc list: numbered rows, not cards */
.doc-list{margin:14px 0 8px; border-top:1px solid var(--line);}
.doc-item{
  display:grid; grid-template-columns:26px 1fr; gap:14px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.doc-item .n{font-family:var(--serif); font-style:italic; color:var(--clay); font-size:13px; padding-top:1px;}
.doc-item p{font-size:14.5px; color:var(--body); margin-bottom:0; max-width:none;}
.doc-item p + p{margin-top:10px;}
/* A doc-item is a two-column grid: the number, then the text. Any further
   child is a third grid item and wraps onto a new row under the number, where
   the 26px column squeezes it to one word per line. Everything that is not
   the number belongs in the text column, however many pieces there are. */
.doc-item > *:not(.n){grid-column:2;}

/* Tip callout: left border only, no fill.
   clay = practical tip, green = legal / rights note */
.tip{margin:22px 0; padding:14px 20px; border-left:3px solid var(--clay); max-width:660px;}
.tip.legal{border-left-color:var(--green);}
.tip .k{font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:6px; font-weight:500;}
.tip.legal .k{color:var(--green);}
.tip:not(.legal) .k{color:var(--clay);}
.tip p{font-size:14.5px; color:var(--body); margin-bottom:0; max-width:none;}
.tip p + p{margin-top:11px;}

/* Draft banner: marks pages whose copy James still needs to approve.
   Delete the `draft` flag in content.py to remove it from a page. */
.draftnote{
  margin:0 0 26px; padding:12px 18px;
  border-left:3px solid var(--stone); background:var(--cream-deep);
  font-size:13px; color:var(--body-soft); max-width:660px;
}
.draftnote strong{color:var(--ink); font-weight:500;}

.case-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); margin:18px 0 8px;
}
@media(max-width:640px){ .case-grid{grid-template-columns:1fr;} }
.case-card{background:var(--cream); padding:20px 22px;}
.case-card h4{font-family:var(--serif); font-weight:500; font-size:15px; margin-bottom:8px;}
.case-card p{font-size:14px; color:var(--body-soft); margin-bottom:0; max-width:none;}
/* Two paragraphs in one card ran together with no gap at all. */
.case-card p + p{margin-top:12px;}

/* Figures: a short row of numbers, given room to be read as numbers rather
   than as sentences. Two up on a phone, four across on a desk. */
.figures{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin:22px 0 8px;
}
@media(max-width:820px){ .figures{grid-template-columns:1fr 1fr;} }
@media(max-width:420px){ .figures{grid-template-columns:1fr;} }
.figure{background:var(--cream); padding:22px 20px;}
.figure .n{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.05;
  letter-spacing:-0.015em; color:var(--green); margin-bottom:8px;
}
.figure p{font-size:13.5px; color:var(--body-soft); margin-bottom:0; max-width:none;}

/* hr.rule and .signoff lived here to close a guide with the brokerage name.
   The footer says it properly now, so both are gone rather than left behind
   for somebody to wonder about later. */

/* Testimonial: kept restrained per the design note */
.testimonial{margin:40px 0; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.testimonial blockquote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:19px; line-height:1.5; color:var(--ink); max-width:600px;
}
.testimonial cite{display:block; margin-top:16px; font-style:normal; font-size:12.5px; color:var(--stone); letter-spacing:0.02em;}
/* Plain variant for pages that already carry an italic serif element */
.testimonial.plain blockquote{font-family:var(--sans); font-style:normal; font-size:16.5px; font-weight:300; color:var(--body);}

/* Related / continue reading: thin link rows, not a card grid */
.related{margin:44px 0 8px;}
.related .k{font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); margin-bottom:16px;}
.related-list{border-top:1px solid var(--line);}
.related-item{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:16px 0; border-bottom:1px solid var(--line);
}
.related-item:hover .related-title{color:var(--clay);}
.related-title{font-family:var(--serif); font-size:15.5px; font-weight:500; color:var(--ink); transition:color 0.15s ease;}
.related-tag{font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--stone); white-space:nowrap;}

/* ---------- HUB PAGE DOC ROWS ---------- */
.lib-hero{padding:70px 0 54px; border-bottom:1px solid var(--line);}
.lib-hero .kicker{color:var(--clay);}
.lib-hero h1{font-family:var(--serif); font-weight:400; font-size:clamp(30px,4.6vw,50px); line-height:1.1; max-width:700px; letter-spacing:-0.01em;}
.lib-hero p.lead{margin-top:20px; max-width:560px; font-size:16.5px; color:#4A4E44;}

.doclist{margin-top:38px;}
.docrow{
  display:grid; grid-template-columns:60px 1fr 150px 90px; gap:24px;
  align-items:center; padding:26px 0; border-bottom:1px solid var(--line);
}
@media(max-width:760px){ .docrow{grid-template-columns:1fr; gap:6px; padding:22px 0;} }
.docrow:hover h4{color:var(--clay);}
.docrow .idx{font-family:var(--serif); font-style:italic; color:var(--clay); font-size:15px;}
.docrow h4{font-family:var(--serif); font-weight:500; font-size:18.5px; line-height:1.3; margin-bottom:6px; transition:color 0.15s ease;}
.docrow p{font-size:13.5px; color:var(--body-soft); max-width:600px;}
.docrow .type{font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone);}
.docrow .dl{font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--green); justify-self:end;}
@media(max-width:760px){ .docrow .dl{justify-self:start; margin-top:6px;} }

/* ---------- CTA STRIP ---------- */
.cta-strip{background:var(--green); color:var(--cream); padding:64px 0;}
/* Button sits below the text, in the same centred column as the intake
   form beneath it, so the whole page foot reads as one block. */
.cta-strip .wrap,.cta-strip .wrap-narrow{display:flex; flex-direction:column; align-items:flex-start; gap:28px;}
.cta-strip h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.7vw,33px); line-height:1.2; max-width:600px;}
/* The rotating ending inherits the strip's own colours, not the ink and clay
   it uses on a cream page, or it disappears into the green. */
.cta-strip .typed{color:var(--cream);}
.cta-strip .typed-caret{background:var(--cream);}
.cta-strip .btn-primary{background:var(--cream); color:var(--green-deep);}
.cta-strip .btn-primary:hover{background:#fff;}

/* ---------- FORMS ---------- */
.formblock{padding:64px 0 20px; margin-top:20px;}
.formblock h2{font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.8vw,32px); line-height:1.2; max-width:560px;}
.formblock p.intro{margin-top:14px; max-width:520px; color:#4A4E44; font-size:15.5px;}

form.intake{margin-top:34px; max-width:720px;}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px 24px;}
@media(max-width:640px){ .fgrid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{
  font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--stone); font-weight:500; margin-bottom:7px;
}
.field label .req{color:var(--clay);}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink);
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:9px 2px; border-radius:0; width:100%;
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238B8B7A' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
  padding-right:22px; cursor:pointer;
}
.field textarea{resize:vertical; min-height:88px; line-height:1.55;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-bottom-color:var(--clay); outline:none;
}
.field input::placeholder,.field textarea::placeholder{color:#B4B4A6;}
.field .hint{font-size:12px; color:var(--stone); margin-top:6px;}

.consent{
  grid-column:1 / -1; display:flex; gap:12px; align-items:flex-start;
  margin-top:6px; padding-top:20px; border-top:1px solid var(--line);
}
.consent input{width:16px; height:16px; margin-top:3px; flex:none; accent-color:var(--green);}
.consent label{
  font-size:13.5px; color:var(--body); text-transform:none;
  letter-spacing:0; font-weight:300; margin:0;
}

/* Honeypot: hidden from people, visible to bots that fill everything in */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-actions{margin-top:28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.form-note{font-size:12px; color:var(--stone); max-width:340px;}
.form-error{
  display:none; margin-top:16px; padding:12px 18px;
  border-left:3px solid var(--clay); font-size:14px; color:var(--body);
}
.form-error.show{display:block;}

/* Thank-you state, styled to match the site rather than the form service */
.form-thanks{
  display:none; margin-top:34px; padding:30px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.form-thanks.show{display:block;}
.form-thanks h3{font-family:var(--serif); font-weight:400; font-size:24px; margin-bottom:10px;}
.form-thanks p{font-size:15.5px; color:var(--body); max-width:520px; margin-bottom:14px;}
.form-thanks .next{
  display:inline-block; font-size:11.5px; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--green); border-bottom:1px solid var(--green);
  padding-bottom:3px;
}

/* ---------- CALCULATORS ---------- */
.calc{
  margin:30px 0 10px; border:1px solid var(--line);
  background:var(--cream); padding:30px 32px;
}
@media(max-width:640px){ .calc{padding:24px 20px;} }
.calc .fgrid{gap:18px 24px;}
.calc-out{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
}
.calc-total{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:14px 0; border-bottom:1px solid var(--line);
}
.calc-total:last-child{border-bottom:none;}
.calc-total .lbl{font-size:14px; color:var(--body);}
.calc-total .val{font-family:var(--serif); font-size:20px; font-weight:500; white-space:nowrap;}
.calc-total.grand{border-top:1px solid var(--ink); border-bottom:none; margin-top:6px; padding-top:18px;}
.calc-total.grand .lbl{font-weight:500; color:var(--ink); font-size:15px;}
.calc-total.grand .val{font-size:27px; color:var(--green);}
.calc-total.neg .val{color:var(--clay);}
/* A label beside its value works for "$4,231". It does not work for
   "Wednesday, December 2, 2026": the value is held on one line by
   white-space:nowrap, so on a phone it ran off the right of the screen while
   the label wrapped to three lines beside it. Below 620px the two stack, and
   the value is free to wrap. */
@media(max-width:620px){
  .calc-total{flex-direction:column; align-items:stretch; gap:5px;
              padding:13px 0;}
  .calc-total .lbl{font-size:13px;}
  .calc-total .val{white-space:normal; font-size:19px; line-height:1.25;}
  .calc-total.grand .val{font-size:23px; line-height:1.2;}
}
.calc-break{margin-top:20px;}
.calc-break .k{font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--stone); margin-bottom:10px;}
.calc-break table{width:100%; border-collapse:collapse; font-size:13.5px;}
.calc-break th{
  text-align:left; font-weight:500; color:var(--stone); font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; padding:0 0 8px;
  border-bottom:1px solid var(--line);
}
.calc-break td{padding:9px 0; border-bottom:1px solid var(--line); color:var(--body);}
.calc-break td:last-child,.calc-break th:last-child{text-align:right;}
.calc-note{margin-top:18px; font-size:12.5px; color:var(--stone); max-width:600px;}
.calc-cta{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.calc-cta p{font-size:13.5px; color:var(--body-soft); margin:0; max-width:340px;}

/* Tenant profile strength meter */
.meter{margin-top:8px; height:6px; background:var(--cream-deep); overflow:hidden;}
.meter span{display:block; height:100%; width:0; background:var(--green); transition:width 0.4s ease;}
.meter.weak span{background:var(--clay);}
.score-label{font-family:var(--serif); font-size:26px; font-weight:500; margin-top:14px;}
.score-detail{font-size:14.5px; color:var(--body); margin-top:8px; max-width:560px;}
.score-list{margin-top:18px; border-top:1px solid var(--line);}
.score-list .row{
  display:flex; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.score-list .row .s{color:var(--stone); font-size:12.5px; white-space:nowrap;}

/* ---------- FOOTER ---------- */
footer{padding:56px 0 46px;}
footer .wrap{
  border-top:1px solid var(--line); padding-top:36px;
}

/* Three columns: where else to go, how to reach me, who holds the licence.
   The brokerage column is widest because it carries the logo. */
.footgrid{
  display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:36px 44px;
  align-items:start;
}
.footk{
  font-size:10px; letter-spacing:0.11em; text-transform:uppercase;
  color:var(--ink); margin-bottom:13px; font-weight:500;
}
.footcol{font-size:10.5px; color:var(--stone); letter-spacing:0.02em;
         line-height:1.75;}
.footcol p{margin-bottom:11px;}
.footcol p:last-child{margin-bottom:0;}
.footcol a:hover{color:var(--ink);}
.footcol .footname{color:var(--body); margin-bottom:0;}
.footcol .footrole{margin-bottom:11px;}
/* Set as written, not in caps. The 0.06em tracking existed to open up capitals
   and reads as gappy on lower case, so it comes back down with them. */
.footnav a{display:block; letter-spacing:0.01em; line-height:2.1;}

/* No kicker over this column: the logo is the label, and a word reading
   "Brokerage" above the brokerage's own mark says it twice. So the logo sits
   on the same line the other two columns start their labels on.

   Sized off the artwork's own 507x218.5 box, so the height is never guessed
   and the row cannot shift as the SVG loads. */
.cplogo{width:186px; height:auto; aspect-ratio:507.4 / 218.5;
        margin:0 0 14px;}

.footbase{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  flex-wrap:wrap;
}
footer .brand{font-size:13.5px;}
footer .colophon{font-size:10.5px; font-style:italic;
                 color:rgba(139,139,122,0.85); letter-spacing:0.02em;}

@media(max-width:820px){
  .footgrid{grid-template-columns:1fr 1fr; gap:32px 36px;}
  .footbrok{grid-column:1 / -1;}
}
@media(max-width:520px){
  .footgrid{grid-template-columns:1fr; gap:30px;}
  .footbase{margin-top:32px;}
}

/* A date field that has not been filled in yet. Some browsers paint today's
   date into an empty one, which reads as an answer rather than a prompt.
   Muted until something is actually chosen. */
input[type="date"]:not(.has-value){color:var(--stone);}
input[type="date"].has-value{color:var(--ink);}

/* A download offered in passing: plain text with an arrow, so it can sit at
   the end of a sentence without turning into an object of its own. */
.dl-link{color:var(--clay); border-bottom:1px solid rgba(173,108,66,0.35);
         white-space:nowrap;}
.dl-link:hover{border-bottom-color:var(--clay);}
.dl-inline{margin:8px 0 0;}
/* Inside a bulleted list there is no grid to align to, so it simply takes
   its own line under the sentence it belongs to. */
li > .dl-inline{display:block; margin-top:6px;}

/* The read-time tag earns its place on a wide screen, where it sits in its
   own column. On a phone it stacks under the standfirst and becomes another
   line to read past, so it goes. Desktop keeps it. */
@media(max-width:760px){
  .docrow .type,
  .article-head .meta{display:none;}
}

/* ---------- GROUPED GUIDE LIST ----------
   A section with two dozen guides reads as a wall in one column. Grouping by
   stage turns it into a map: a seller knows which part of a sale they are in,
   so they know which block is about them and can ignore the rest. */

/* The router: a few sentences somebody can recognise themselves in. */
/* Lifted off the page with the palette's own step down, not with a white
   overlay. An overlay works by the gap between the page and white, so it fades
   out as the page gets lighter: at the old tone it gave 10 levels of blue
   separation, at the new one it gave 6, and on anything lighter it vanishes. */
.router{
  margin:6px 0 46px; padding:22px 24px; border:1px solid var(--line);
  background:var(--cream-deep);
}
.router-k{
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--stone); margin-bottom:12px;
}
.router a{
  display:block; padding:9px 0; font-family:var(--serif); font-size:17px;
  color:var(--ink); border-bottom:1px solid var(--line);
  transition:color 0.15s ease;
}
.router a:last-child{border-bottom:none;}
.router a::after{content:" →"; color:var(--clay);}
.router a:hover{color:var(--clay);}

/* The gap between two groups has to be obviously bigger than the gap between
   two rows, or a new stage reads as just another guide. Rows sit 52px apart on
   desktop and 44px on mobile, so these are set at roughly 2.4x that. */
.docgroup{margin-bottom:96px; scroll-margin-top:28px;}
.dg-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  border-bottom:2px solid var(--ink); padding-bottom:12px;
}
/* Guide titles are 18.5px in the same serif. A heading two or three pixels
   above that is not a hierarchy, it is a near miss, so this sits well clear. */
.dg-head h3{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,2.3vw,27px); line-height:1.2;
  letter-spacing:-0.01em;
}
.dg-meta{
  font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--stone); white-space:nowrap;
}
.dg-blurb{
  margin:14px 0 2px; font-size:15px; color:var(--body-soft); max-width:600px;
}
.docgroup .doclist{margin-top:6px;}
/* Close each group cleanly: without this the last row's hairline sits in the
   run-up to the next heading and reads as the start of it. */
.docgroup .doclist .docrow:last-child{border-bottom:none;}
@media(max-width:640px){
  .router{padding:18px 18px;}
  .dg-head{flex-direction:column; gap:4px;}
  .docgroup{margin-bottom:84px;}
}

/* Hub pages: a quiet line under the guide list inviting a topic request. */
.askfor{margin-top:22px; font-size:14px; color:var(--stone);}
.askfor a{color:var(--clay); border-bottom:1px solid rgba(173,108,66,0.35);}
.askfor a:hover{border-bottom-color:var(--clay);}

/* ---------- PRINT ---------- */
@media print{
  nav.top,.band,.cta-strip,.formblock,footer .footnav,.back{display:none;}
  body{background:#fff;}
  .wrap,.wrap-narrow{max-width:none; padding:0;}
}

/* ---------- CLIENT PORTAL ----------
   Private per-client pages. Same materials as the rest of the site, with no
   navigation to anywhere else and a state marker on every row so the page can
   be read at a glance. */

.portal-nav .wrap{display:flex; align-items:baseline; justify-content:space-between; gap:20px;}
.portal-nav .brand{transition:color 0.15s ease;}
.portal-nav .brand:hover{color:var(--clay);}
.portal-tag{font-size:11.5px; letter-spacing:0.07em; text-transform:uppercase;
            color:var(--stone);}

.portal-head{padding:52px 0 18px;}
.portal-head h1{
  font-family:var(--serif); font-weight:400; line-height:1.1;
  font-size:clamp(32px,4.6vw,48px); letter-spacing:-0.01em; margin-top:10px;
}
.plede{margin-top:16px; font-size:16.5px; line-height:1.62;
       color:var(--body); max-width:640px;}
.plede + .plede{margin-top:18px;}
/* Sections already carry their own generous bottom margin, so the
   heading that follows one does not need a top margin as well. */
.psum + h2,
.plist + h2{margin-top:0;}

/* two-column fact rows, no boxes */
.psum{margin:0 0 54px; border-top:1px solid var(--line);}
.psum-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.psum-row .k{font-size:14.5px; color:var(--body-soft);}
.psum-row .v{font-family:var(--serif); font-size:20px; color:var(--green);}
.pquotes .v{font-family:var(--sans); font-size:15.5px; color:var(--ink);}
/* A row whose value is a link out. Sized as text rather than as one of
   the headline figures beside it. */
.psum-row .v a{font-family:var(--sans); font-size:14.5px; color:var(--clay);
               border-bottom:1px solid rgba(173,108,66,0.35);}
.psum-row .v a:hover{border-bottom-color:var(--clay);}

/* schedule and work share one row */
.plist{margin:12px 0 58px; border-top:1px solid var(--line);}
.prow{
  display:grid; grid-template-columns:150px 1fr 20px; gap:18px;
  align-items:center; padding:15px 0; border-bottom:1px solid var(--line);
  width:100%; text-align:left; background:none; border-left:0; border-right:0;
  border-top:0; color:inherit;
  /* The work rows are <button> elements. A button does not inherit the
     page's font at all, so without this the two lists render at different
     weights and sizes and the work list looks bolder than the schedule. */
  font:inherit; font-family:var(--sans); font-weight:inherit;
  -webkit-font-smoothing:inherit;
}
.plist .ptick{grid-template-columns:1fr auto 20px; cursor:pointer;}
.ptick .when{text-align:right;}
.prow .when{font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
            color:var(--stone);}

/* Narrow screens: the three-column grid has nowhere to go, so both kinds of
   row become two lines. What it is and its marker on the first, the date
   underneath. Written at the same specificity as the .plist .ptick rule
   above, which otherwise keeps its desktop columns and wraps the label to one
   word per line. */
@media(max-width:620px){
  .plist .prow,
  .plist .ptick{
    display:flex; flex-wrap:wrap; align-items:center;
    column-gap:14px; row-gap:5px; padding:14px 0;
  }
  /* The item is the thing being read; the date is a footnote to it. On a
     narrow column the uppercase letter-spacing made the date look larger than
     the label it belonged to, so the two swap emphasis here. */
  .plist .prow .what{order:1; flex:1 1 auto; min-width:0;}
  .plist .prow .mark{order:2; flex:none; margin-left:auto;}
  /* Small caps with letter-spacing read as a label and take up far more
     visual room than their point size suggests. On a narrow column they are
     better as plain small text: same size, much quieter. */
  .plist .prow .when,
  .plist .ptick .when{order:3; flex:0 0 100%; text-align:left;
                      font-size:11px; letter-spacing:0;
                      text-transform:none; opacity:0.75;}
}
.prow .what{font-size:15.5px; color:var(--body);}
.prow .mark{
  position:relative;
  width:17px; height:17px; border-radius:50%; justify-self:end;
  border:1px solid var(--line); transition:background 0.15s ease,
  border-color 0.15s ease;
}
/* Done is a tick, not a filled dot: two borders on a rotated box. The offsets
   put the ink, not the box, in the middle of the 17px slot, because a rotated
   L sits low and left of where its own bounding box suggests. */
.prow.is-done .mark{background:none; border-color:transparent;}
.prow.is-done .mark::after{
  content:""; position:absolute; left:6px; top:2.7px;
  width:5px; height:9.5px; border:solid var(--ink);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.prow.is-done .what{color:var(--stone); text-decoration:line-through;
                    text-decoration-color:rgba(139,139,122,0.5);}
.prow.is-next .mark{border-color:var(--clay);}
/* Hovering a ticked item must not draw a ring back around the checkmark. */
.ptick:not(.is-done):hover .mark{border-color:var(--clay);}
.ptick:focus-visible{outline:2px solid var(--clay); outline-offset:3px;}

/* A heading inside the work list, so thirteen items read as four groups. */
.pgroup{
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--clay); padding:44px 0 10px; border-bottom:1px solid var(--line);
}
.plist > .pgroup:first-child{padding-top:16px;}

.pnote{margin-top:28px; font-size:14px; color:var(--stone); max-width:620px;}
.pupdated{display:block; margin-top:8px; font-size:11.5px; letter-spacing:0.06em;
          text-transform:uppercase;}