/* ============================================================
   Chateau Concepts — site styles
   Palette taken straight from Jan's business card / logo file:
     orange #F48026   blue #005DAB
   (The demo shipped a bronze #A5762E recolor; note #1 in Jan's
   notes was "I'd like the colors of my logo to be the same as on
   my card", so nothing bronze survives in here.)

   Contrast, checked against WCAG AA:
     white on --blue ............ 6.6:1  -> primary buttons
     --navy on --orange ......... 5.7:1  -> CTA band, accent buttons
     --orange-ink on --cream .... 4.7:1  -> small uppercase labels
   Flat --orange is used for fills, rules and large display text
   only: at 2.6:1 on white it must never carry small copy.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --orange:#F48026; --orange-deep:#D9661A; --orange-ink:#B4520C;
  --blue:#005DAB; --blue-deep:#004A88; --blue-light:#7FAED5;
  --navy:#0E2745; --navy-soft:#1B3A5C;
  --cream:#FBF9F6; --panel:#F1EFEA; --line:#E3E0D9;
  --ink:#1E2A38; --muted:#5C6675;
  --sans:'Segoe UI',Arial,Helvetica,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:Georgia,'Times New Roman',serif;background:var(--cream);color:var(--ink);line-height:1.6}
/* height:auto is not optional here. build.py stamps intrinsic width/height on
   every <img> so nothing shifts while the page loads; without height:auto a
   picture whose width is reduced by max-width:100% keeps its literal pixel
   height and stretches vertically. The contact photograph was rendering
   542x1399 from a 1600x1399 original. Rules that genuinely want a fixed height
   (.gal img, .split .photo img, .card .imgbox img) are more specific and still
   win. */
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:#C6D4E4;font-family:var(--sans);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 24px}
.topbar a{color:#fff}
.topbar a:hover{color:var(--orange)}

/* ---------- header ---------- */
header{background:var(--cream);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 24px}
.logo{display:block;line-height:0}
.logo img{height:66px;width:auto}
nav{font-family:var(--sans);font-size:13px;letter-spacing:1.8px;display:flex;align-items:center}
nav > a,.nav-btn{color:var(--ink);margin-left:22px;text-transform:uppercase;letter-spacing:1.8px;
  font-family:var(--sans);font-size:13px;background:none;border:none;cursor:pointer;padding:0}
nav > a:hover,.nav-btn:hover{color:var(--orange-ink)}
nav a.cta{background:var(--blue);color:#fff;padding:12px 20px}
nav a.cta:hover{background:var(--blue-deep);color:#fff}

/* --- mega panels --- */
.nav-item{display:flex;align-items:center}
.nav-btn{display:inline-flex;align-items:center;gap:7px}
.nav-btn .chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.nav-item.open .nav-btn{color:var(--orange-ink)}
.nav-item.open .nav-btn .chev{transform:rotate(-135deg) translate(-3px,-3px)}
.panel{position:absolute;left:0;right:0;top:100%;background:var(--cream);border-top:1px solid var(--line);
  border-bottom:3px solid var(--orange);box-shadow:0 18px 40px rgba(14,39,69,.13);z-index:60}
.panel[hidden]{display:none}
/* NB: the panel sits inside <header>, and `header .wrap` (specificity 0-1-1)
   outranks a bare `.panel-inner` (0-1-0) — without the `header` prefix the
   panel silently inherits the header's flex row, which staggers the columns
   and lets the CTA card eat half the width. */
header .panel-inner{display:grid;grid-template-columns:repeat(3,1fr) 1.3fr;gap:30px;
  padding:34px 24px 38px;align-items:start;justify-content:normal}
header .panel-sm .panel-inner{grid-template-columns:repeat(2,1fr);max-width:720px;margin:0 auto}
.pcol h3{font-family:var(--sans);font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:14px;font-weight:600}
.pcol > a{display:block;margin:0 0 14px;text-transform:none;letter-spacing:0;color:var(--ink)}
/* Jan, 2026-08-23: the bold menu names italic, the line under each left as it
   was. The <b> is the name, the <span> is the description — the button in the
   last column has no <b>, so it is untouched. */
.pcol > a b{display:block;font-family:Georgia,serif;font-size:16.5px;font-weight:normal;
  font-style:italic;letter-spacing:0}
.pcol > a span{display:block;font-size:12.5px;color:var(--muted);letter-spacing:0;margin-top:2px;line-height:1.45}
.pcol > a:hover b{color:var(--orange-ink)}
.pcta{background:#fff;border:1px solid var(--line);padding:22px;align-self:start}
.pcta h3{letter-spacing:2.2px}
.pcta p{font-size:13px;color:var(--muted);letter-spacing:0;text-transform:none;line-height:1.55;margin-bottom:18px}
.pcol > a.btn{display:inline-block;color:#fff;text-transform:uppercase;letter-spacing:1.6px;
  padding:13px 20px;font-size:11.5px;margin:0;white-space:nowrap}
.pcta .plain{display:block;margin-top:12px;font-size:12.5px;color:var(--muted);letter-spacing:0;text-transform:none}
.pcta .plain:hover{color:var(--orange-ink)}

.menu-toggle{display:none}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{display:block;width:24px;height:2px;
  background:var(--ink);transition:transform .25s,opacity .2s}
.menu-toggle .bars{position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
.menu-toggle .bars::before{top:-7px}
.menu-toggle .bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--blue);color:#fff !important;font-family:var(--sans);
  font-size:13px;letter-spacing:2.2px;padding:15px 30px;text-transform:uppercase;border:none;cursor:pointer}
.btn:hover{background:var(--blue-deep)}
.btn.accent{background:var(--orange);color:var(--navy) !important}
.btn.accent:hover{background:var(--orange-deep);color:#fff !important}
.btn.ghost{background:transparent;border:1px solid var(--orange);color:var(--orange) !important;margin-left:14px}
.btn.ghost:hover{background:var(--orange);color:var(--navy) !important}

/* ---------- hero ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,26,46,.86) 0%,rgba(9,26,46,.62) 50%,rgba(9,26,46,.18) 100%)}
.hero .inner{position:relative;z-index:2;padding:92px 24px;max-width:680px}
.hero h1{font-size:47px;font-weight:normal;color:#fff;line-height:1.16}
.hero h1 em{color:var(--orange);font-style:italic}
.hero p{font-family:var(--sans);color:#E7EDF4;font-size:17px;margin-top:20px;max-width:540px}
.hero .btns{margin-top:32px}

/* ---------- credential strip ---------- */
.strip{background:var(--navy);color:#fff;font-family:var(--sans);border-top:3px solid var(--orange)}
.strip .wrap{display:flex;justify-content:center;align-items:center;gap:14px 34px;
  padding:18px 24px;flex-wrap:wrap;text-align:center}
.strip .cred{font-size:13.5px;letter-spacing:2.6px;text-transform:uppercase}
.strip .sep{color:var(--orange);font-size:14px}
.strip .areas-line{font-size:13.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--blue-light)}

/* ---------- sections ---------- */
section{padding:70px 0}
.label{font-family:var(--sans);font-size:12px;letter-spacing:4px;color:var(--orange-ink);
  text-transform:uppercase;margin-bottom:12px}
h2{font-size:33px;font-weight:normal;margin-bottom:12px}
h3{font-size:21px;font-weight:normal;margin-bottom:8px}
.sub{font-family:var(--sans);color:var(--muted);font-size:15px;max-width:700px}
.alt{background:var(--panel)}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
.card{background:#fff;border:1px solid var(--line);transition:border-color .25s,box-shadow .25s,transform .25s}
.card .imgbox{height:230px;overflow:hidden}
.card .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .imgbox img{transform:scale(1.04)}
.card .pad{padding:20px 22px 24px}
.card .pad p{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:6px}
.card .more{font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  display:inline-block;margin-top:14px;color:var(--blue)}
a.card{display:block;color:inherit}
a.card h3{color:var(--ink)}
a.card:hover{border-color:var(--orange);box-shadow:0 8px 26px rgba(14,39,69,.10);transform:translateY(-2px)}
a.card:hover .more{color:var(--orange-ink)}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.gal figure{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line)}
.gal img{width:100%;height:280px;object-fit:cover;transition:transform .5s;cursor:zoom-in}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  background:linear-gradient(transparent,rgba(9,26,46,.85));color:#fff;font-size:15px}
.gal figcaption span{font-family:var(--sans);display:block;font-size:11px;letter-spacing:1.6px;
  color:var(--orange);text-transform:uppercase}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split .photo img{width:100%;height:460px;object-fit:cover}
.split ul{margin:16px 0 0 18px;font-family:var(--sans);font-size:15px;color:var(--muted)}
.split ul li{margin-bottom:8px}
.split ul li::marker{color:var(--orange)}

/* ---------- quote band ---------- */
.quoteband{background:var(--navy);text-align:center;padding:62px 24px}
.quoteband .stars{color:var(--orange);font-size:17px;letter-spacing:4px;margin-bottom:16px}
.quoteband p{font-size:22px;font-style:italic;color:#E7EDF4;max-width:790px;margin:0 auto;line-height:1.5}
.quoteband .who{font-family:var(--sans);font-size:12px;letter-spacing:2.5px;color:var(--blue-light);
  margin-top:18px;text-transform:uppercase}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.step{background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);padding:24px}
.step .num{font-family:var(--sans);font-size:13px;letter-spacing:2px;color:var(--orange-ink)}
.step h3{margin-top:6px}
.step p{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:6px}

/* ---------- areas ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;font-family:var(--sans);font-size:13px}
.areas a{border:1px solid #C9D3DE;padding:10px 17px;color:var(--ink);letter-spacing:1px}
.areas a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- faq ---------- */
.faq{margin-top:30px;max-width:860px}
.faq details{background:#fff;border:1px solid var(--line);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 20px;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--orange-ink);font-size:20px;line-height:1.2}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 20px 18px;font-family:var(--sans);font-size:14.5px;color:var(--muted)}

/* ---------- CTA band ---------- */
.ctaband{background:var(--orange);text-align:center;padding:58px 24px}
.ctaband h2{color:var(--navy)}
.ctaband p{font-family:var(--sans);color:#3A2410;margin-top:8px}
.ctaband .btn{background:var(--navy);margin-top:26px}
.ctaband .btn:hover{background:#071A2E}

/* ---------- inner page hero ---------- */
.pagehero{background:var(--navy);padding:66px 0 58px;color:#fff;border-bottom:3px solid var(--orange)}
.pagehero h1{font-size:39px;font-weight:normal}
.pagehero p{font-family:var(--sans);color:#C6D4E4;margin-top:10px;max-width:660px}
.crumbs{font-family:var(--sans);font-size:12px;letter-spacing:1.5px;color:#8CA3BC;
  margin-bottom:14px;text-transform:uppercase}
.crumbs a{color:var(--blue-light)}
.crumbs a:hover{color:var(--orange)}

/* ---------- contact ---------- */
/* align-items:start stops the white form card stretching to match the taller
   right-hand column, which left a large empty panel under the Send button. */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:36px;align-items:start}
.contactcard{background:#fff;border:1px solid var(--line);padding:30px}
form label{display:block;font-family:var(--sans);font-size:13px;letter-spacing:1px;
  margin:14px 0 6px;color:var(--muted);text-transform:uppercase}
form input,form textarea,form select{width:100%;padding:12px;border:1px solid #C9D3DE;background:#FCFDFE;
  font-family:var(--sans);font-size:15px;color:var(--ink)}
form input:focus,form textarea:focus,form select:focus{border-color:var(--blue);outline:none;
  box-shadow:0 0 0 3px rgba(0,93,171,.14)}
form textarea{min-height:130px}
.info p{font-family:var(--sans);font-size:15px;color:var(--muted);margin-bottom:12px}
.info .big{font-size:25px;font-family:Georgia,serif;color:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#AFC0D2;font-family:var(--sans);font-size:13.5px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding:56px 24px}
footer h4{color:#fff;font-family:Georgia,serif;font-weight:normal;font-size:17px;margin-bottom:14px}
footer a{color:#AFC0D2;display:block;margin-bottom:8px}
footer a:hover{color:var(--orange)}
footer .foot-logo{width:210px;height:auto;margin-bottom:14px}
footer .foot-tagline{font-family:Georgia,serif;font-style:italic;color:var(--orange);
  font-size:15px;margin-bottom:12px}
footer .foot-contact{margin-top:14px}
footer .foot-contact a{display:inline}
footer .sub-area{padding-left:12px;font-size:12.5px;color:#8CA3BC}
footer .bottom{position:relative;border-top:1px solid var(--navy-soft);padding:16px 24px;
  text-align:center;font-size:12px;color:#8CA3BC}
footer .bottom .credit{display:block;margin-top:8px}
footer .bottom .credit a{display:inline;color:#B8C9DA;font-weight:600;text-decoration:none}
footer .bottom .credit a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
/* Wide enough for both to share the line: the copyright stays optically
   centred and the credit sits in the right corner. Narrower than that it
   simply becomes a second centred line rather than crowding the copyright. */
@media(min-width:1120px){
  footer .bottom .credit{position:absolute;right:24px;top:50%;transform:translateY(-50%);
    margin-top:0}
}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(9,26,46,.95);z-index:200;display:none;
  align-items:center;justify-content:center}
.lightbox.open{display:flex}
.lightbox img{max-width:88vw;max-height:86vh;width:auto;height:auto;object-fit:contain;
  box-shadow:0 10px 60px rgba(0,0,0,.6)}
.lightbox .lb-close{position:absolute;top:18px;right:26px;color:var(--orange);font-size:34px;
  background:none;border:none;cursor:pointer;line-height:1}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(14,39,69,.7);color:var(--orange);border:none;font-size:30px;padding:10px 16px;cursor:pointer}
.lightbox .lb-prev{left:16px}
.lightbox .lb-next{right:16px}
.lightbox .lb-prev:hover,.lightbox .lb-next:hover{background:var(--orange);color:var(--navy)}
.lightbox .lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#E7EDF4;
  font-family:var(--sans);font-size:14px;letter-spacing:1px}

/* ---------- responsive ---------- */
@media(max-width:980px){
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .grid3,.steps,.gal{grid-template-columns:repeat(2,1fr)}
  .split,.contactgrid{grid-template-columns:1fr}
  .split .photo img{height:340px}
  .split .photo{order:-1}
  .hero h1{font-size:36px}
  .hero{min-height:480px}
  section{padding:54px 0}
  /* mobile drawer: the mega panels become accordions */
  nav{display:none}
  .menu-toggle{display:block;background:none;border:none;cursor:pointer;padding:8px 4px}
  nav.open{display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:var(--cream);padding:12px 24px 22px;border-bottom:3px solid var(--orange);
    max-height:calc(100vh - 100%);overflow-y:auto;box-shadow:0 18px 40px rgba(14,39,69,.16)}
  body.nav-locked{overflow:hidden}
  nav.open > a,nav.open .nav-btn{margin:0;padding:14px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
  nav.open .nav-item{display:block;width:100%}
  nav.open .nav-btn{display:flex;justify-content:space-between}
  nav.open a.cta{margin-top:16px;padding:15px 20px;text-align:center;border-bottom:none}
  .panel{position:static;box-shadow:none;border:none;background:transparent}
  header .panel-inner,header .panel-sm .panel-inner{grid-template-columns:1fr;gap:20px;
    padding:8px 0 16px;max-width:none}
  .pcol > a{margin-bottom:16px}
  .pcta{padding:18px}
  .logo img{height:54px}
  .topbar .wrap{flex-direction:column;gap:4px;text-align:center;font-size:12.5px}
}
@media(max-width:560px){
  .grid3,.steps,.gal,.grid2{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr;gap:28px;padding:40px 24px}
  .hero h1{font-size:29px}
  .hero .inner{padding:64px 0}
  h2{font-size:27px}
  .pagehero h1{font-size:30px}
  .strip .sep{display:none}
  .strip .wrap{flex-direction:column;gap:8px}
  .strip .cred,.strip .areas-line{font-size:11.5px;letter-spacing:1.8px}
  .btn{display:block;text-align:center}
  .btn.ghost{margin-left:0;margin-top:12px}
  .logo img{height:46px}
  .quoteband p{font-size:19px}
}

/* ---------- testimonial cards ---------- */
.card .quote{font-family:Georgia,serif;font-size:16px;color:var(--ink);line-height:1.55}
.card .attrib{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- portraits ----------
   A person photo must not be cropped to a fixed height at all: the demo's
   460px cover-crop cut Jan off through the eyes, and biasing the crop only
   moved which part of her face got sliced. Show the whole frame instead. */
.split .photo img.portrait{height:auto;max-height:540px;width:auto;max-width:100%;margin:0 auto}

/* ---------- before/after ----------
   Two kinds exist on the site.

   .gal.ba  — the legacy tiles used on service pages and guides. Each ba-*.jpg
   is ONE image with "before" and "after" squeezed side by side (up to 900x400),
   so object-fit:cover would crop one half straight off. These letterbox.

   .baset / .bapair — the real thing on /portfolio/. Jan sent the two halves as
   separate camera files on 2026-08-20, so each pair is now two full photographs
   that enlarge independently in the lightbox. */
.gal.ba img{object-fit:contain;background:#fff;height:230px}
.gal.ba figure:hover img{transform:none}
.gal.ba figcaption{background:linear-gradient(transparent,rgba(9,26,46,.9))}

.baset{display:grid;gap:36px;margin-top:32px}
@media(min-width:940px){.baset{grid-template-columns:1fr 1fr;gap:42px 32px}}
.bapair h3{font-family:var(--serif);font-size:21px;margin:0 0 12px;color:var(--navy)}
.gal.ba2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
/* Both photographs in a pair share one aspect ratio so the comparison is fair —
   the eye should be reading the room, not the difference in frame shape. */
.gal.ba2 figure{margin:0;aspect-ratio:4/3}
.bapair.is-portrait .gal.ba2 figure{aspect-ratio:3/4}
/* One pair (the staircase) was shot landscape before and portrait after. Any
   shared crop mangles one of them — a 1/1 crop reduced the "before" to the
   middle of the handrail, so the two frames no longer showed the same thing.
   This pair letterboxes instead: a white bar costs nothing, a destroyed
   framing costs the comparison. */
.bapair.is-mixed .gal.ba2 figure{aspect-ratio:4/3}
.bapair.is-mixed .gal.ba2 img{object-fit:contain;background:#fff}
/* build.py wraps every <img> in <picture>, which is display:inline with auto
   height — so height:100% on the img has no definite parent to resolve against
   and both dimensions collapse to zero. The picture must become the block that
   fills the figure. (The older .gal rules escape this only because they use a
   fixed 230px height rather than a percentage.) */
.gal.ba2 picture{display:block;width:100%;height:100%}
.gal.ba2 img{width:100%;height:100%;object-fit:cover;display:block}
.gal.ba2 figcaption{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;
  font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:#fff;background:linear-gradient(transparent,rgba(9,26,46,.86))}

/* ============================================================
   Insights — article pages
   ============================================================ */
.artmeta{font-family:var(--sans);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--blue-light);margin-top:20px}
.wrap.narrow{max-width:760px}
.prose{padding:56px 0 66px}
.prose p,.prose li{font-family:var(--sans);font-size:16.5px;line-height:1.75;color:#3A4452}
.prose p{margin-bottom:20px}
.prose h2{font-size:29px;margin:44px 0 14px;line-height:1.25}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 22px 22px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--orange)}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose strong{color:var(--ink)}
.prose figure{margin:30px 0}
.prose figure img{width:100%;height:auto}
.prose figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}

/* answer-first summary — the block a search engine or assistant quotes */
.answerbox{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  padding:24px 26px;margin-bottom:36px}
.answerbox h2{font-family:var(--sans);font-size:11.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 10px}
.answerbox p{margin-bottom:0;font-size:17px;color:var(--ink);line-height:1.65}
.answerbox p + p{margin-top:14px}

/* on-page contents */
.toc{background:var(--panel);padding:22px 26px;margin-bottom:36px}
.toc h2{font-family:var(--sans);font-size:11.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--orange-ink);margin:0 0 12px}
.toc ol{margin:0 0 0 20px}
.toc li{font-size:15px;margin-bottom:7px}

/* key takeaways */
.takeaways{background:var(--navy);color:#E7EDF4;padding:28px 30px;margin:44px 0}
.takeaways h2{color:#fff;font-size:22px;margin:0 0 14px}
.takeaways ul{margin:0 0 0 20px}
.takeaways li{color:#C6D4E4;font-size:15.5px;margin-bottom:10px}
.takeaways li::marker{color:var(--orange)}
.takeaways a{color:var(--orange)}

/* comparison tables */
.prose .tablewrap{overflow-x:auto;margin:26px 0}
.prose table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:14.5px;min-width:520px}
.prose th,.prose td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--panel);font-weight:600;color:var(--ink)}
.prose td{color:#3A4452}

/* article FAQ */
.faq-block{margin:44px 0 0}
.faq-block h2{margin-bottom:18px}

/* next steps / internal links */
.nextsteps{border-top:3px solid var(--orange);background:var(--panel);padding:32px 30px;margin-top:52px}
.nextsteps h2{margin:0 0 8px;font-size:25px}
.nextsteps > p{font-family:var(--sans);font-size:15px;color:var(--muted);margin-bottom:22px}
.nextgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nextgrid a{display:block;background:#fff;border:1px solid var(--line);padding:16px 18px;text-decoration:none}
.nextgrid a:hover{border-color:var(--orange)}
.nextgrid b{display:block;font-family:Georgia,serif;font-size:16.5px;font-weight:normal;color:var(--ink)}
.nextgrid span{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.nextgrid a:hover b{color:var(--orange-ink)}

/* related reading */
.related{background:var(--panel)}
.related .grid3{margin-top:26px}

/* insights index cards */
.card .pad .label{margin-bottom:8px}
@media(max-width:700px){
  .nextgrid{grid-template-columns:1fr}
  .prose h2{font-size:25px}
  .prose{padding:40px 0 48px}
}

/* ---------- licence / insurance line ---------- */
.credline{border-left:3px solid var(--orange);background:#fff;border-top:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 18px;margin-top:18px}
.credline b{display:block;font-family:var(--sans);font-size:11px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:5px}
.credline span{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.55}

/* ============================================================
   Insights index — search, filter, pagination
   ============================================================ */
.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}

.findbar{display:grid;grid-template-columns:340px 1fr;gap:18px 24px;align-items:start;
  margin:30px 0 8px}

/* search */
.searchbox{position:relative}
.searchbox .mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.searchbox input{width:100%;padding:14px 40px 14px 40px;border:1px solid #C9D3DE;background:#fff;
  font-family:var(--sans);font-size:15px;color:var(--ink)}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,93,171,.14)}
#search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
  font-size:22px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
#search-clear:hover{color:var(--orange-ink)}

.suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px rgba(14,39,69,.16);max-height:340px;
  overflow-y:auto}
.suggest li{padding:10px 12px;cursor:pointer}
.suggest li b{display:block;font-family:Georgia,serif;font-size:15.5px;font-weight:normal;color:var(--ink);
  line-height:1.35}
.suggest li span{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--orange-ink);margin-top:3px}
.suggest li:hover,.suggest li[aria-selected="true"]{background:var(--panel)}
.suggest li[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--orange)}

/* category chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:12.5px;letter-spacing:.6px;padding:11px 15px;cursor:pointer;
  background:#fff;border:1px solid #C9D3DE;color:var(--ink);transition:background .15s,border-color .15s}
.chip span{color:var(--muted);font-size:11.5px;margin-left:4px}
.chip:hover{border-color:var(--orange)}
.chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.is-on span{color:#BBD4EC}

.findmeta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;
  font-family:var(--sans);font-size:13.5px;color:var(--muted);min-height:22px;margin-bottom:6px}
#did-you-mean{color:var(--ink)}
.dym{background:none;border:none;padding:0;font:inherit;color:var(--blue);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.dym:hover{color:var(--orange-ink)}

#insights-grid{margin-top:12px}
#insights-grid .insight-card[hidden]{display:none}

.emptystate{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
  padding:30px 32px;margin-top:24px;max-width:720px}
.emptystate h3{margin-bottom:8px}
.emptystate p{font-family:var(--sans);font-size:15px;color:var(--muted);line-height:1.6}

/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.pg{font-family:var(--sans);font-size:13px;letter-spacing:1px;min-width:44px;padding:11px 14px;
  background:#fff;border:1px solid #C9D3DE;color:var(--ink);cursor:pointer}
.pg:hover:not(:disabled){border-color:var(--orange);color:var(--orange-ink)}
.pg.is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.pg:disabled{opacity:.4;cursor:default}

@media(max-width:860px){
  .findbar{grid-template-columns:1fr}
}
@media(max-width:560px){
  .chips{gap:6px}
  .chip{font-size:12px;padding:9px 12px}
  .pg{min-width:38px;padding:10px 11px;font-size:12px}
}

/* ============================================================
   Author / reviewed-by block on articles
   ============================================================ */
.authorbox{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);
  padding:26px 28px;margin:48px 0 0}
.authorbox img{width:96px;height:96px;object-fit:cover;object-position:center 15%;border-radius:50%}
.authorbox .who{font-family:Georgia,serif;font-size:19px;color:var(--ink);margin-bottom:2px}
.authorbox .role{font-family:var(--sans);font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:12px}
.authorbox p{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:10px}
.authorbox .verified{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:12.5px;
  letter-spacing:.4px;color:var(--ink);background:var(--panel);padding:7px 12px;margin-top:4px}
.authorbox .verified svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:560px){
  .authorbox{grid-template-columns:1fr;gap:14px}
  .authorbox img{width:76px;height:76px}
}

/* ============================================================
   Jan Revels profile page
   ============================================================ */
.profilehero{background:var(--navy);color:#fff;padding:64px 0;border-bottom:3px solid var(--orange)}
.profilehero .wrap{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:center}
.profilehero img{width:240px;height:240px;object-fit:cover;object-position:center 12%;border-radius:50%;
  border:4px solid var(--orange)}
.profilehero h1{font-size:40px;font-weight:normal;line-height:1.15}
.profilehero .role{font-family:var(--sans);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px}
.profilehero p{font-family:var(--sans);color:#C6D4E4;font-size:16px;margin-top:14px;max-width:640px}
.profilehero .quickfacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.profilehero .quickfacts span{font-family:var(--sans);font-size:12.5px;letter-spacing:.6px;
  border:1px solid #3C5674;padding:8px 14px;color:#E7EDF4}
@media(max-width:820px){
  .profilehero .wrap{grid-template-columns:1fr;gap:26px;text-align:center;justify-items:center}
  .profilehero p{margin-left:auto;margin-right:auto}
  .profilehero .quickfacts{justify-content:center}
  .profilehero h1{font-size:31px}
}

.speclist{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.speclist div{background:#fff;border:1px solid var(--line);padding:20px 22px}
.speclist h3{font-size:18px;margin-bottom:6px}
.speclist p{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:700px){.speclist{grid-template-columns:1fr}}

/* legal link in the footer baseline */
footer .bottom a.legal{display:inline;color:#8CA3BC;text-decoration:underline;text-underline-offset:3px}
footer .bottom a.legal:hover{color:var(--orange)}

/* ============================================================
   Service pages — show the work, not just describe it
   ============================================================ */

/* intro: a real photograph beside the answer, above the fold */
.svc-intro{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
.svc-intro .shot{position:relative}
.svc-intro .shot img{width:100%;height:440px;object-fit:cover}
.svc-intro .shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;
  background:linear-gradient(transparent,rgba(9,26,46,.85));color:#fff;font-family:var(--sans);font-size:13px}
.svc-intro .answerbox{margin-bottom:0}
@media(max-width:900px){
  .svc-intro{grid-template-columns:1fr;gap:26px}
  .svc-intro .shot img{height:300px}
}

/* prose blocks inside a normal section */
section.prose{padding:64px 0}
section.prose .wrap.narrow{max-width:760px}

/* before & after pairs, with the reading order made explicit */
.ba-band{background:var(--navy);padding:62px 0}
.ba-band .label{color:var(--orange)}
.ba-band h2{color:#fff}
.ba-band .sub{color:#C6D4E4}
.ba-key{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;
  letter-spacing:1.6px;text-transform:uppercase;color:#C6D4E4;margin-top:16px}
.ba-key i{display:inline-block;width:34px;height:8px;background:linear-gradient(90deg,#7B8794 50%,var(--orange) 50%)}
.ba-band .gal{margin-top:26px}
.ba-band .gal figure{border-color:#26405F;background:#0B1F38}
.ba-band .gal img{object-fit:contain;background:#0B1F38;height:230px}
.ba-band .gal figure:hover img{transform:none}

/* strengths — why this designer, in four claims that are all verifiable */
.strengths{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.strength{background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange);padding:24px 22px}
.strength svg{width:30px;height:30px;fill:none;stroke:var(--blue);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.strength h3{font-size:18px;margin-bottom:6px}
.strength p{font-family:var(--sans);font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:900px){.strengths{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.strengths{grid-template-columns:1fr}}

/* process strip */
.svcsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px}
.svcstep{border-top:2px solid var(--line);padding-top:16px}
.svcstep b{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:6px}
.svcstep h3{font-size:17px;margin-bottom:6px}
.svcstep p{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.55}
@media(max-width:900px){.svcsteps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svcsteps{grid-template-columns:1fr}}

/* ---------- testimonials ---------- */
.testimonial{background:#fff;border:1px solid var(--line);border-left:3px solid var(--orange);
  padding:28px 30px;margin:0}
.testimonial .stars{color:var(--orange);font-size:14px;letter-spacing:3px;margin-bottom:14px}
.testimonial p{font-family:Georgia,serif;font-size:16.5px;line-height:1.6;color:var(--ink)}
.testimonial cite{display:block;margin-top:16px;font-family:var(--sans);font-size:12.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--orange-ink);font-style:normal}

/* response promise on the contact page */
.info .promise{background:var(--panel);border-left:3px solid var(--orange);padding:14px 18px;
  margin-top:18px;font-size:15px;color:var(--ink)}

/* Jan's own wording for the service area, 2026-08-20. The compact
   AREAS_LINE keeps the named neighbourhoods (that is what people search);
   this sentence exists so a lead in the rest of DFW is not turned away by a
   list that leaves them out. */
.areas-note{margin:0 0 14px}

/* Jan, 2026-08-21: "Under services, can we italicize the text underneath to
   set it apart from the title?" Scoped to the services hub only. */
.svc-cards .pad p{font-style:italic}

/* Jan, 2026-08-22: "What about italicizing the Titles under each section?"
   She means the main page title — "Full-Service Interior Design" and the like.
   Three containers cover all 52 pages: .hero (home), .pagehero (50 pages,
   including everything built from the service, article and area partials) and
   .profilehero (Jan's profile). The home page H1 already italicises the <em>
   in orange; that rule stays and simply sits inside an italic heading now.
   Photo captions were italicised here first on a misreading and are back
   upright — the request was about page titles, not picture titles. */
.hero h1,
.pagehero h1,
.profilehero h1{font-style:italic}

/* ---------- contact page ----------
   The right column used to be seven same-weight paragraphs in a row. Phone and
   email are now the two things the eye lands on, the photograph breaks the
   column, and the reference details sit underneath in a labelled pair of
   columns instead of a stack of look-alike sentences. */
.contact-line{display:flex;align-items:baseline;gap:14px;padding:14px 0;
  border-top:1px solid var(--line);text-decoration:none}
.contact-line:last-of-type{border-bottom:1px solid var(--line)}
.cl-label{font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--muted);min-width:52px}
.cl-value{font-family:Georgia,serif;font-size:22px;color:var(--blue);word-break:break-word}
.contact-line:hover .cl-value{color:var(--orange-ink)}
.contact-shot{margin:24px 0 0}
.contact-shot img{width:100%;border:1px solid var(--line)}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line)}
.contact-meta h3{font-family:var(--sans);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:7px}
.contact-meta p{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--muted);margin:0}
@media(max-width:900px){
  .contact-meta{grid-template-columns:1fr;gap:20px}
  .cl-value{font-size:20px}
}