/* CASAFORTA — shared design system (elevated to match the homepage) */
:root{
  --navy:#0B1D34; --navy-2:#0d2440; --ink0:#06101f; --ink1:#0a1728;
  --gold:#D4AF37; --gold-2:#e6c766; --gold-d:#876722;
  --charcoal:#1F1F1F; --white:#FFFFFF; --cream:#F7F5EF; --line:#e7e2d6;
  --ink:#20242c; --txt:#20242c; --muted:#5f6b7a; --navy-muted:#8ea1b8; --nmut:#8ea1b8;
  --wrap:1180px; --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Montserrat',system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.75;font-weight:400;font-size:17px;overflow-x:hidden}
h1,h2,h3,.serif{font-family:'Cinzel',Georgia,serif;font-weight:500;letter-spacing:.01em;line-height:1.14}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.over{font-family:'Montserrat';font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.eyebrow-row{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.eyebrow-row .ln{width:60px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.hair{width:56px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:20px 0}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;text-wrap:balance;line-height:1.25;min-height:52px;gap:8px;font-family:'Montserrat';font-weight:600;font-size:13.5px;letter-spacing:.04em;padding:15px 30px;border-radius:6px;cursor:pointer;transition:.25s;border:1px solid transparent}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn-line,.btn-ghost{border-color:rgba(212,175,55,.45);color:var(--gold);background:transparent}
.btn-line:hover,.btn-ghost:hover{border-color:var(--gold);background:rgba(212,175,55,.08)}

section{position:relative;padding:clamp(64px,9vw,120px) 0}
.navy{background:var(--navy);color:#eaf0f7}
.cream{background:var(--cream)}
.navy h2,.navy h3{color:#fff}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted)}
.navy .lead{color:var(--navy-muted)}
.rule{width:54px;height:2px;background:var(--gold);margin:18px 0}
.center{text-align:center}
.center .rule{margin:18px auto}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:19px;font-weight:600}

/* reveal motion — only hidden when JS is on (.js set by inline script); no-JS shows all content */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.15,1),transform 1s cubic-bezier(.2,.7,.15,1)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}.d5{transition-delay:.4s}

/* header — solid ink bar, gold thread on top */
header.site{position:sticky;top:0;z-index:60;background:linear-gradient(180deg,rgba(9,18,32,.97),rgba(6,13,24,.96));border-top:2px solid var(--gold);border-bottom:1px solid rgba(212,175,55,.2);transition:.3s}
header.site.scrolled{box-shadow:0 14px 38px rgba(0,0,0,.42);border-bottom-color:rgba(212,175,55,.38)}
.nav{display:flex;align-items:center;gap:26px;height:78px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand img{height:38px;width:auto}
.brand .wm{display:flex;flex-direction:column;line-height:1.15;font-family:'Cinzel';font-weight:500;font-size:19px;letter-spacing:.2em;color:#fff}
.brand .bt{font-style:normal;font-family:'Montserrat';font-weight:600;font-size:7px;letter-spacing:.22em;text-transform:uppercase;color:var(--navy-muted);margin-top:3px;white-space:nowrap}
@media(max-width:1100px){.brand .bt{display:none}}
.menu{display:flex;gap:22px;align-items:center}
.menu a{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#d6dfeb;transition:.2s;position:relative;padding-bottom:4px;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s ease}
.menu a:hover{color:var(--gold)}
.menu a:hover::after{right:0}
.lang{font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--navy-muted)}
.lang a{color:var(--gold)}
.burger{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer}

/* page hero */
.pagehero{background:radial-gradient(130% 120% at 82% 0%,#173357 0%,var(--navy) 52%,var(--ink0) 100%);color:#fff;padding:clamp(60px,8vw,104px) 0 clamp(56px,7vw,88px);overflow:hidden;border-bottom:1px solid rgba(212,175,55,.16)}
.pagehero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 46px,rgba(212,175,55,.035) 47px),repeating-linear-gradient(90deg,transparent,transparent 46px,rgba(212,175,55,.035) 47px);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent 78%);pointer-events:none}
.pagehero .wrap{position:relative;z-index:2}
.pagehero .hgrid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.crumb{font-size:12px;letter-spacing:.05em;color:var(--navy-muted);margin-bottom:18px}
.crumb a:hover{color:var(--gold)}
.crumb span{color:var(--gold)}
.pagehero h1{font-size:clamp(32px,5vw,58px);color:#fff;max-width:20ch;font-weight:500;letter-spacing:0;margin-top:4px}
.pagehero .intro{color:#c7d3e2;max-width:56ch;margin-top:20px;font-size:clamp(16px,1.7vw,18.5px)}
.pagehero .hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero-mark{flex:none;width:min(230px,34vw)}
.hero-mark svg{width:100%;height:auto;filter:drop-shadow(0 20px 46px rgba(0,0,0,.4))}
.hero-mark .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.45,.05,.2,1) forwards .25s}
.hero-mark .dot{opacity:0;animation:fadein .7s ease forwards 3.1s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

/* prose — editorial long-form */
article.prose{padding:clamp(60px,8vw,104px) 0;background:var(--white)}
.prose .wrap{max-width:860px}
.prose .blk{margin-top:46px}
.prose .blk:first-child{margin-top:0}
.prose h2{font-size:clamp(22px,2.8vw,30px);margin:0 0 16px;color:var(--navy);position:relative;padding-top:22px}
.prose *+h2{margin-top:46px}
.prose .blk h2{margin-top:0}
.prose h2::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--gold)}
.prose .role{font-family:'Montserrat';font-weight:500;font-size:14px;letter-spacing:.05em;color:var(--gold-d);margin:-6px 0 18px;line-height:1.55}
.pagehero h1,.prose h2,.ctaband h2,.faq .q{text-wrap:balance}
.prose p{margin-bottom:16px;color:#3a4351}
.prose ul{margin:4px 0 20px 0;list-style:none}
.prose li{margin-bottom:10px;color:#44505f;padding-left:26px;position:relative}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
.prose strong{color:var(--navy);font-weight:600}

.related{background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;margin-top:44px}
.related h3{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-d);margin-bottom:16px}
.related ul{margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
.related li{margin:0}
.related a{color:var(--navy);font-weight:500;font-size:15px;border-bottom:1px solid var(--gold);padding-bottom:2px}
.related a:hover{color:var(--gold-d)}

/* faq */
.faq{max-width:840px;margin:0 auto}
.faq .item{border-bottom:1px solid var(--line);padding:22px 0}
.faq .item:first-child{border-top:1px solid var(--line)}
.faq .q{font-family:'Cinzel',serif;font-weight:500;color:var(--navy);font-size:18px;display:flex;gap:12px}
.faq .q::before{content:"—";color:var(--gold-d)}
.faq .a{color:var(--muted);margin-top:9px;font-size:15.5px;padding-left:26px}

/* services — editorial index (matches homepage) */
.svcs{margin-top:8px;border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:baseline;padding:26px 4px;border-bottom:1px solid var(--line);transition:.3s;color:inherit}
.svc:hover{background:#fbfaf6;padding-left:14px}
.svc .no{font-family:'Cinzel';color:var(--gold-d);font-size:20px}
.svc .ti{font-family:'Cinzel';font-size:clamp(18px,2.2vw,25px);color:var(--navy);font-weight:500;display:block}
.svc .de{font-size:13.5px;color:var(--muted);margin-top:6px;max-width:62ch;display:block}
.svc .pr{font-size:13px;color:var(--gold-d);font-weight:600;white-space:nowrap;text-align:right}

/* cta band */
.ctaband{text-align:center;background:linear-gradient(180deg,var(--ink1),var(--ink0));color:#eaf0f7}
.ctaband .over{color:var(--gold)}
.ctaband h2{color:#fff;font-size:clamp(28px,4.4vw,50px);max-width:18ch;margin:16px auto 0}
.ctaband p{color:var(--navy-muted);max-width:54ch;margin:18px auto 28px}

.discp{font-size:11.5px;color:var(--muted);line-height:1.7;max-width:var(--wrap);margin:0 auto;padding:26px 24px}

/* footer */
footer{background:var(--ink0);color:#c7d3e2;padding:70px 0 32px;border-top:1px solid rgba(212,175,55,.16)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:32px}
.fbrand img{height:44px;width:auto;margin-bottom:14px}
.fbrand p{font-size:13px;color:var(--navy-muted);max-width:32ch}
footer h2{line-height:inherit;font-family:'Montserrat';font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
footer li{list-style:none;margin-bottom:9px}
footer a{font-size:13.5px;color:#c7d3e2}
footer a:hover{color:var(--gold)}
.zones{font-size:12px;color:var(--navy-muted);margin-bottom:16px}
.zones b{color:var(--gold);font-weight:600}
.disc{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;font-size:11px;color:var(--navy-muted);line-height:1.7}
.copy{margin-top:14px;font-size:12px;color:#6f7f93;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.copy a{color:#6f7f93}.copy a:hover{color:var(--gold)}

/* territoires — hub /secteurs */
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
.tcard{display:grid;grid-template-columns:104px 1fr;gap:22px;align-items:center;border:1px solid rgba(212,175,55,.24);border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);transition:border-color .3s,transform .3s}
.tcard:hover{border-color:rgba(212,175,55,.6);transform:translateY(-3px)}
.tcard .tseal svg{width:104px;height:auto;display:block}
.tcard .draw{stroke-dasharray:1;stroke-dashoffset:1}
.tcard.in .draw{animation:draw 2.4s cubic-bezier(.45,.05,.2,1) forwards}
.tcard .dot{opacity:0}
.tcard.in .dot{animation:fadein .6s ease forwards 2.7s}
.tcard h2{font-family:'Cinzel',serif;font-weight:500;font-size:21px;color:#fff;letter-spacing:.02em}
.tcard .ttag{color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:4px 0 10px;font-family:'Montserrat';font-weight:600}
.tcard .tcities{font-size:13px;color:var(--navy-muted);line-height:1.8}
.tcard .tlink{display:inline-block;margin-top:12px;color:var(--gold);font-size:13px;font-weight:600;border-bottom:1px solid rgba(212,175,55,.4);padding-bottom:2px;transition:.2s}
.tcard .tlink:hover{border-color:var(--gold)}
@media(max-width:820px){.tcards{grid-template-columns:1fr}}
@media(max-width:460px){.tcard{grid-template-columns:1fr}.tcard .tseal svg{margin:0 auto}}

/* bandes photo — soutien tactile, jamais concurrence */
.pband{position:relative;height:clamp(200px,30vw,340px);overflow:hidden;background:var(--ink0)}
.pband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.pveil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,31,.82),rgba(11,29,52,.38) 45%,rgba(6,16,31,.85)),linear-gradient(90deg,rgba(6,16,31,.55),transparent 45%)}
.pcap{position:absolute;left:0;right:0;bottom:20px;z-index:2}

@media(max-width:900px){
  .fcols{grid-template-columns:1fr 1fr}
  .pagehero .hgrid{grid-template-columns:1fr}
  .hero-mark{display:none}
}
/* tablet / small-laptop header fit (761–960px): tighten so the nav + Diagnostic
   button never overflow the viewport. Desktop (>960) and mobile (<=760) unchanged. */
@media(max-width:960px){
  .nav{gap:16px}
  .menu{gap:15px}
  .menu a{letter-spacing:.09em;font-size:11px}
  header.site .btn-gold{padding:13px 18px}
}
/* below ~820px the crest alone carries the brand so the nav links + CTA keep their room */
@media(max-width:820px){.brand .wm{display:none}}
@media(max-width:760px){
  .menu,.lang.desk{display:none}
  header.site .btn-gold{display:none}
  .menu.open{display:flex;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--ink0);padding:20px 24px;gap:18px;border-bottom:1px solid rgba(212,175,55,.2)}
  .burger{display:block}
  .related ul{grid-template-columns:1fr}
  .svc{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .svc>span{min-width:0}
  .svc .pr{grid-column:2;text-align:left;margin-top:8px;white-space:normal}
  .brand .wm{display:none}
  .pagehero h1{font-size:29px}
  .pagehero .hero-cta{flex-direction:column}
  .pagehero .hero-cta .btn{width:100%;justify-content:center}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* mobile sticky CTA — the thumb door */
.mcta{display:none}
@media(max-width:760px){
  .mcta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;background:var(--gold);color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.04em;justify-content:center;align-items:center;padding:16px;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(185%);pointer-events:none;visibility:hidden;transition:opacity .24s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
  .mcta.show{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .24s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
  .mcta.show:active{transform:translateY(1px)}
}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .mcta{transition:none!important}
  .hero-mark .draw,.tcard .draw{stroke-dashoffset:0!important;animation:none!important}
  .hero-mark .dot,.tcard .dot{opacity:1!important;animation:none!important}
}
html:not(.js) .tcard .draw{stroke-dashoffset:0}
html:not(.js) .tcard .dot{opacity:1}

/* Guide #4 neutral hero anchors (no conversion tracking) + anchor/mcta helpers */
.btn-guide-anchor{background:var(--gold);color:var(--navy)}
.btn-guide-anchor:hover{background:var(--gold-2);transform:translateY(-2px)}
.btn-guide-anchor.alt{background:transparent;border-color:rgba(212,175,55,.45);color:var(--gold)}
.btn-guide-anchor.alt:hover{border-color:var(--gold);background:rgba(212,175,55,.08)}
.blk h2[id]{scroll-margin-top:96px}
.mcta.mcta-wait{display:none!important}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy,#0a1a2f);color:#fff;padding:10px 16px;z-index:1000;border-radius:0 0 6px 0}.skip:focus{left:0}

/* P2-HDR-SITEWIDE 2026-08-31. The interior pages fall back to the burger only at 760px,
   so from 761 to 899 the header row keeps the full navigation in a box too narrow for it.
   The two homepages received this in P2-RESPONSIVE-FINAL; this brings the rest to the same
   behaviour.

   NOTE: these pages use header.site / .lang.desk / #burger, NOT the homepages'
   header.nav / .lang.dk / #bg. A first attempt written against the homepage selectors
   matched nothing and shipped as an inert change set; the before/after render showed no
   difference, which is how it was caught. The selectors below are the ones the shared
   stylesheet itself uses.

   The Diagnostic button is KEPT between 761 and 899 - unlike below 760, where the sticky
   .mcta takes over and the header button is hidden. The target is 48x48: the base rule
   sized the button to its glyph. */
@media(max-width:899px){
.menu,.lang.desk{display:none}
.burger{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;padding:0;margin-right:-6px;font-size:22px;line-height:1;border-radius:8px;-webkit-tap-highlight-color:transparent}
.burger:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.brand .bt{display:none}
header.site .btn-gold{min-width:130px;height:42px;font-size:12.2px;padding:0 14px}
.menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:4px;background:var(--ink0);padding:14px 24px 18px;border-bottom:1px solid rgba(212,175,55,.2);z-index:60}
.menu.open a{display:block;width:100%;padding:11px 0;font-size:13px;letter-spacing:.12em}
.menu.open a:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
}
/* two English interior pages (condo-reserve-fund, contingency-fund-study) still overran
   by 8px at exactly 900 - one pixel above the burger breakpoint - because the English nav
   is wider. The sheet already tightens the nav at 960; three pixels less gap covers the
   8px without moving the ruled 899 boundary. */
@media(max-width:960px){
.menu{gap:12px}
}
/* the sticky Diagnostic bar is 57px at a 12px offset = 69px occupied; the 72px reserve
   left 3px, inside the noise of rounding and mobile browser chrome. It appears at 760 in
   this sheet, so the reserve is raised at the same width. */
@media(max-width:760px){
body{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* P2-HDR-A11Y 2026-09-01. The opened mobile menu carries its own language switch,
   because `.lang.desk` is hidden below 899 and a visitor on a phone otherwise has no way
   to change language at all. It is display:none above 899 rather than visually hidden -
   a sixth item in the desktop navigation would be a visual regression on 76 pages, and
   an off-screen-but-present link is still in the tab order. */
.mobile-lang{display:none}
@media(max-width:899px){
  .mobile-lang{display:block}
  .menu.open .mobile-lang{width:100%;padding:11px 0;font-size:13px;letter-spacing:.12em;
    border-top:1px solid rgba(212,175,55,.18);margin-top:4px}
}