/* ==========================================================================
   Rosan Properties — Split Monogram
   Fixed navy brand rail + scrolling light content column.
   ========================================================================== */

:root{
  --navy:#101E2E; --navy-deep:#0A1521; --navy-raised:#16273A; --navy-line:#243750;
  --gold:#9B7E4F; --gold-lt:#C2A267; --gold-deep:#7E6539; --gold-hi:#D8BE8A;
  --cream:#F4F2EC; --cream-dim:#AEB6C0;
  --paper:#F4F2EC; --paper-2:#EBE7DD; --paper-3:#DED6C6; --line:#DED6C6;
  --ink:#16202E; --ink-soft:#525C6A;
  --display:'Cinzel', serif; --serif:'Cormorant Garamond', serif; --body:'Hanken Grotesk', sans-serif;
  --rail:380px; --colmax:1180px; --gut:80px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.62;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

.eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}

/* --- photo / placeholder blocks ------------------------------------------ */
.ph{position:relative;background:linear-gradient(155deg,#22384F,#0A1521 74%);overflow:hidden;}
.ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 50px),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 34px);}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 16%,rgba(194,162,103,.2),transparent 55%);}
.ph .tag{position:absolute;left:18px;bottom:16px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,242,236,.82);z-index:2;display:flex;align-items:center;gap:8px;}
.ph .tag::before{content:"";width:18px;height:1px;background:var(--gold-lt);}
.ph.photo{background-size:cover;background-position:center;background-repeat:no-repeat;}
.ph.photo::before{display:none;}
.ph.photo::after{background:linear-gradient(0deg,rgba(8,14,22,.72) 0%,rgba(8,14,22,.14) 48%,rgba(8,14,22,.04) 100%);}
.ph.photo .tag{color:rgba(255,255,255,.92);}

/* ==========================================================================
   SHELL + RAIL
   ========================================================================== */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;align-items:start;}

.rail{position:sticky;top:0;height:100vh;background:var(--navy);color:var(--cream);
  border-right:1px solid var(--navy-line);display:flex;flex-direction:column;
  padding:44px 42px;overflow-y:auto;overscroll-behavior:contain;z-index:30;}
.rail::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 30% 8%,rgba(194,162,103,.16),transparent 60%);pointer-events:none;}
.rail > *{position:relative;z-index:2;}

.rail .brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.rail .brand img{height:54px;width:auto;}
.rail .brand .wm{font-family:var(--display);font-size:18px;letter-spacing:.2em;color:var(--cream);font-weight:600;line-height:1;}
.rail .brand .wm small{display:block;font-family:var(--serif);font-style:italic;font-size:12px;letter-spacing:.05em;color:var(--gold-lt);margin-top:4px;text-transform:none;}

.rail .mid{margin-top:auto;margin-bottom:auto;padding:36px 0;}
.rail .mid .em{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-hi);display:block;}
.rail .mid h2{font-family:var(--display);font-weight:500;font-size:32px;line-height:1.14;letter-spacing:.03em;margin:12px 0 0;color:var(--cream);}

.rail nav{display:flex;flex-direction:column;gap:0;margin-top:26px;}
.rail nav a{display:flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);padding:10px 0;transition:color .25s,gap .25s;}
.rail nav a::before{content:"";width:18px;height:1px;background:var(--gold);opacity:.5;transition:width .25s,opacity .25s;flex-shrink:0;}
.rail nav a:hover{color:var(--gold-hi);gap:18px;}
.rail nav a:hover::before{width:28px;opacity:1;}
.rail nav a.on{color:var(--gold-hi);}
.rail nav a.on::before{width:28px;opacity:1;}

.rail .rail-cta{margin-top:26px;width:100%;justify-content:center;}

.rail .foot{border-top:1px solid var(--navy-line);padding-top:20px;margin-top:auto;
  font-size:12.5px;color:var(--cream-dim);line-height:1.75;flex-shrink:0;}
.rail .foot a:hover{color:var(--gold-hi);}
.rail .foot .pillars{font-family:var(--display);font-size:10.5px;letter-spacing:.22em;color:var(--gold-lt);margin-top:12px;}

/* --- mobile top bar (hidden on desktop) ---------------------------------- */
.mobhead{display:none;}

/* ==========================================================================
   CONTENT COLUMN
   ========================================================================== */
.content{min-width:0;}
.wrap{max-width:var(--colmax);margin:0 auto;padding:0 var(--gut);}

section.block{padding:92px 0;border-bottom:1px solid var(--line);}
section.block.tight{padding:66px 0;}
section.block:last-of-type{border-bottom:0;}

.sec-head{margin-bottom:48px;max-width:44em;}
.sec-head h2{font-family:var(--display);font-weight:500;font-size:clamp(27px,3.2vw,40px);letter-spacing:.03em;color:var(--ink);line-height:1.1;}
.sec-head p{color:var(--ink-soft);font-size:16.5px;max-width:42em;font-weight:300;margin-top:14px;}
.sec-head .eyebrow{display:block;margin-bottom:14px;}

/* --- page hero (top of every content column) ----------------------------- */
.page-hero{border-bottom:1px solid var(--line);background:var(--paper);}
.page-hero .hero-img{height:300px;}
.page-hero .body{padding:60px var(--gut) 66px;}
.page-hero .eyebrow{color:var(--gold-deep);}
.page-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(31px,3.9vw,50px);line-height:1.06;letter-spacing:.02em;color:var(--ink);margin-top:18px;}
.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gold);letter-spacing:0;}
.page-hero p.lead{font-size:17.5px;color:var(--ink-soft);max-width:40em;margin-top:20px;font-weight:300;}
.page-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}

/* stat strip under a hero */
.minirow{display:flex;gap:44px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}
.minirow .m .v{font-family:var(--serif);font-size:34px;color:var(--gold);line-height:1;}
.minirow .m .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:7px;}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;padding:13px 26px;transition:all .3s;cursor:pointer;
  white-space:nowrap;border:1px solid transparent;font-family:var(--body);}
.btn.solid{background:var(--navy);color:var(--cream);border-color:var(--navy);}
.btn.solid:hover{background:var(--navy-raised);border-color:var(--navy-raised);color:var(--cream);}
.btn.gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.btn.gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--navy-deep);}
.btn.outline,.btn.ghost{border-color:var(--gold);color:var(--gold-deep);background:transparent;}
.btn.outline:hover,.btn.ghost:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold);}
.btn.outline-lt{border-color:rgba(244,242,236,.4);color:var(--cream);background:transparent;}
.btn.outline-lt:hover{border-color:var(--gold-lt);color:var(--gold-lt);}
/* ghost sitting on the navy rail */
.rail .btn.ghost{border-color:var(--gold);color:var(--gold-hi);}
.rail .btn.ghost:hover{background:var(--gold);color:var(--navy-deep);}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
.card{background:#fff;border:1px solid var(--paper-3);padding:38px 34px;}
.card h3{font-family:var(--display);font-size:20px;letter-spacing:.02em;color:var(--ink);font-weight:500;line-height:1.25;}
.card > p{color:var(--ink-soft);font-size:15px;font-weight:300;margin-top:10px;}
.card .no{font-family:var(--serif);font-size:34px;color:var(--gold);line-height:1;margin-bottom:14px;}

/* pathway cards */
.pathgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.path{background:#fff;border:1px solid var(--paper-3);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;}
.path:hover{transform:translateY(-6px);box-shadow:0 28px 50px -30px rgba(16,30,46,.35);}
.path .img{height:172px;}
.path .bd{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1;}
.path h3{font-family:var(--display);font-size:19px;letter-spacing:.03em;color:var(--ink);font-weight:500;}
.path p{color:var(--ink-soft);font-size:14.5px;font-weight:300;margin:12px 0 20px;flex:1;}
.path .go{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.path:hover .go{color:var(--gold);}

/* numbered service list */
.slist .row{display:grid;grid-template-columns:64px 1fr;gap:26px;padding:28px 0;border-top:1px solid var(--line);align-items:start;}
.slist .row:first-child{border-top:0;padding-top:0;}
.slist .no{font-family:var(--serif);font-size:32px;color:var(--gold);line-height:1;}
.slist h3{font-family:var(--display);font-size:19px;letter-spacing:.03em;color:var(--ink);font-weight:500;line-height:1.25;}
.slist p{color:var(--ink-soft);font-size:15px;font-weight:300;margin-top:8px;}

/* three-up pillar cards */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.pcard{border-top:2px solid var(--gold);padding-top:22px;}
.pcard .rn{font-family:var(--serif);font-size:24px;color:var(--gold);line-height:1;}
.pcard h4{font-family:var(--display);font-size:17px;letter-spacing:.1em;color:var(--ink);margin:12px 0 10px;font-weight:500;}
.pcard p{color:var(--ink-soft);font-size:14.5px;font-weight:300;}

/* dark quote panel */
.quote{background:var(--navy);color:var(--cream);border-bottom:1px solid var(--navy-line);}
.quote .eyebrow{color:var(--gold-lt);}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--cream);
  font-size:clamp(24px,3vw,38px);line-height:1.42;max-width:20em;margin-top:18px;}
.quote cite{display:block;font-family:var(--body);font-style:normal;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-lt);margin-top:26px;}

/* portals */
.portals{background:var(--navy);color:var(--cream);border-bottom:1px solid var(--navy-line);}
.portals .sec-head h2{color:var(--cream);}
.portals .sec-head p{color:var(--cream-dim);}
.portals .eyebrow{color:var(--gold-lt);}
.portalgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.portal{background:var(--navy-raised);border:1px solid var(--navy-line);padding:40px 36px;position:relative;}
.portal .bar{position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold);}
.portal h3{font-family:var(--display);font-size:20px;letter-spacing:.06em;color:var(--cream);font-weight:500;}
.portal p{color:var(--cream-dim);font-size:14.5px;font-weight:300;margin:14px 0 24px;}

/* ==========================================================================
   FORMS + RESULTS
   ========================================================================== */
.field{margin-bottom:20px;}
.field label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px;font-weight:600;}
.field input,.field textarea,.field select{width:100%;background:var(--paper);border:1px solid var(--paper-3);
  color:var(--ink);padding:14px 16px;font-family:var(--body);font-size:15px;transition:border-color .25s;
  appearance:none;border-radius:0;}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--gold-deep) 50%),linear-gradient(135deg,var(--gold-deep) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);}
.field textarea{resize:vertical;min-height:92px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form{background:#fff;border:1px solid var(--paper-3);padding:38px 34px;}

.result{background:var(--navy);color:var(--cream);padding:26px 28px;margin-top:8px;}
.result .rline{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--navy-line);gap:16px;}
.result .rline:last-child{border-bottom:0;}
.result .rk{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);}
.result .rv{font-family:var(--serif);font-size:26px;color:var(--gold-hi);white-space:nowrap;}
.result .verdict{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-hi);padding-top:14px;}
.note{font-size:12.5px;color:var(--ink-soft);margin-top:14px;font-weight:300;}
.confirm{display:none;background:var(--navy);color:var(--cream);padding:26px 30px;font-family:var(--serif);font-style:italic;font-size:19px;}
.confirm.show{display:block;}

/* --- Formspree states ----------------------------------------------------
   useDefaultStyles is off in rp-forms.js, so visibility is ours to define.
   The library adds [data-fs-active] to an error element when it has
   something to say.
   ------------------------------------------------------------------------ */
[data-fs-error]{display:none;}
[data-fs-error][data-fs-active]{display:block;font-size:13.5px;color:#8A2E2E;margin-top:-10px;margin-bottom:18px;}
/* form-level errors read as a block, not a field footnote */
form > [data-fs-error][data-fs-active]{background:#FBF0EE;border-left:2px solid #8A2E2E;
  padding:13px 16px;margin:0 0 20px;font-size:14px;line-height:1.5;}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:#8A2E2E;}
button[data-fs-submit-btn][disabled]{opacity:.55;cursor:progress;}

/* Client-side validation messages, styled to match Formspree's own. */
.rp-invalid{display:none;font-size:13px;color:#8A2E2E;margin-top:7px;line-height:1.45;}
.rp-invalid[data-fs-active]{display:block;}

/* Honeypot — must be reachable in the DOM for bots but never seen or
   focusable by a real visitor. Not display:none, which some bots skip. */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;
  height:1px!important;overflow:hidden!important;opacity:0!important;}

/* contact rows */
.cline{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--line);}
.cline:first-child{border-top:0;padding-top:0;}
.cline .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);min-width:74px;padding-top:5px;font-weight:600;}
.cline .v{font-size:17px;color:var(--ink);font-weight:300;}
.cline .v a:hover{color:var(--gold-deep);}

/* ==========================================================================
   COMMUNITY & SPONSORSHIPS
   ========================================================================== */
.comm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.comm-card{background:#fff;border:1px solid var(--paper-3);display:flex;flex-direction:column;overflow:hidden;}
.comm-card .img{height:190px;}
.comm-card .bd{padding:28px 28px 30px;display:flex;flex-direction:column;flex:1;}
.comm-card .kind{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.comm-card h3{font-family:var(--display);font-size:18px;letter-spacing:.03em;color:var(--ink);font-weight:500;line-height:1.3;margin-top:10px;}
.comm-card p{color:var(--ink-soft);font-size:14.5px;font-weight:300;margin-top:10px;flex:1;}
.comm-card .when{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}

/* partner strip */
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line);}
.partner{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 24px;background:#fff;
  display:flex;flex-direction:column;justify-content:center;min-height:132px;transition:background .25s;}
.partner:hover{background:var(--paper-2);}
.partner .nm{font-family:var(--display);font-size:15px;letter-spacing:.05em;color:var(--ink);font-weight:500;line-height:1.3;}
.partner .rel{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-top:10px;font-weight:600;}

/* impact numbers on navy */
.impact{background:var(--navy);color:var(--cream);border-bottom:1px solid var(--navy-line);}
.impact .eyebrow{color:var(--gold-lt);}
.impact .sec-head h2{color:var(--cream);}
.impact .sec-head p{color:var(--cream-dim);}
.inums{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.inum{border-top:1px solid var(--navy-line);padding-top:22px;}
.inum .v{font-family:var(--serif);font-size:clamp(34px,4.4vw,52px);color:var(--gold-hi);line-height:1;}
.inum .k{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim);margin-top:12px;}

/* alternating photo + text rows */
.crow{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--line);}
.crow:first-of-type{border-top:0;padding-top:0;}
.crow .ph{height:300px;}
.crow.flip .txt{order:2;}
.crow h3{font-family:var(--display);font-size:22px;letter-spacing:.03em;color:var(--ink);font-weight:500;line-height:1.25;}
.crow p{color:var(--ink-soft);font-size:15.5px;font-weight:300;margin-top:14px;}
.crow ul{margin-top:18px;}
.crow li{list-style:none;display:flex;gap:12px;align-items:baseline;padding:8px 0;color:var(--ink-soft);font-size:15px;font-weight:300;}
.crow li::before{content:"—";color:var(--gold);flex-shrink:0;}

/* ==========================================================================
   FOOTER (bottom of content column)
   ========================================================================== */
footer.site{background:var(--navy-deep);color:var(--cream-dim);padding:50px 0 40px;}
.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;}
footer.site .brand{display:flex;align-items:center;gap:12px;}
footer.site .brand img{height:36px;}
footer.site .wm{font-family:var(--display);font-size:15px;letter-spacing:.18em;color:var(--cream);font-weight:600;line-height:1;}
footer.site .wm small{display:block;font-family:var(--serif);font-style:italic;font-size:11px;letter-spacing:.05em;color:var(--gold-lt);margin-top:3px;text-transform:none;}
footer.site p{font-size:13px;}
footer.site a:hover{color:var(--gold-lt);}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1400px){:root{--gut:64px;}}
@media(max-width:1180px){
  :root{--rail:310px;--gut:48px;}
  .rail{padding:36px 30px;}
  .rail .mid h2{font-size:27px;}
  .rail .brand img{height:46px;}
  .pathgrid,.three,.comm-grid{grid-template-columns:1fr 1fr;}
  .inums{grid-template-columns:repeat(2,1fr);}
}

/* short viewports: let the rail breathe rather than clip */
@media(max-height:760px){
  .rail .mid{padding:24px 0;}
  .rail .mid h2{font-size:24px;}
  .rail .mid .em{font-size:16px;}
  .rail nav a{padding:8px 0;font-size:12px;}
}

@media(max-width:900px){
  .shell{grid-template-columns:1fr;}
  .rail{display:none;}
  .mobhead{display:flex;position:sticky;top:0;z-index:60;background:var(--navy);color:var(--cream);
    align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--navy-line);}
  .mobhead .brand{display:flex;align-items:center;gap:10px;}
  .mobhead .brand img{height:34px;}
  .mobhead .wm{font-family:var(--display);font-size:13px;letter-spacing:.16em;color:var(--cream);font-weight:600;line-height:1.1;}
  .mobhead .wm small{display:block;font-family:var(--serif);font-style:italic;font-size:10px;color:var(--gold-lt);text-transform:none;letter-spacing:.04em;}
  .mobhead .tel{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);}

  /* hamburger via <details> — no JS */
  .mobnav{position:relative;}
  .mobnav summary{list-style:none;cursor:pointer;width:34px;height:30px;display:flex;flex-direction:column;
    justify-content:center;gap:6px;}
  .mobnav summary::-webkit-details-marker{display:none;}
  .mobnav summary::before,.mobnav summary::after{content:"";}
  .mobnav summary span,.mobnav summary::before,.mobnav summary::after{display:block;height:1.5px;background:var(--gold-hi);transition:transform .25s,opacity .25s;}
  .mobnav[open] summary::before{transform:translateY(7.5px) rotate(45deg);}
  .mobnav[open] summary span{opacity:0;}
  .mobnav[open] summary::after{transform:translateY(-7.5px) rotate(-45deg);}
  .mobnav nav{position:absolute;top:calc(100% + 14px);right:-22px;width:min(84vw,300px);
    background:var(--navy);border:1px solid var(--navy-line);border-right:0;padding:10px 22px 18px;
    box-shadow:0 26px 50px -20px rgba(0,0,0,.6);
    /* eight destinations plus a section list outgrows a short phone */
    max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;}
  .mobnav nav a{display:block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cream-dim);padding:13px 0;border-bottom:1px solid var(--navy-line);}
  .mobnav nav a:last-of-type{border-bottom:0;}
  .mobnav nav a.on{color:var(--gold-hi);}
  .mobnav nav .btn{margin-top:16px;width:100%;justify-content:center;}

  section.block{padding:60px 0;}
  section.block.tight{padding:48px 0;}
  .sec-head{margin-bottom:34px;}
  .page-hero .hero-img{height:200px;}
  .page-hero .body{padding:40px var(--gut) 44px;}
  .pathgrid,.three,.comm-grid,.frow,.portalgrid,.inums{grid-template-columns:1fr;}
  .crow{grid-template-columns:1fr;gap:26px;padding:32px 0;}
  .crow.flip .txt{order:0;}
  .crow .ph{height:220px;}
  .minirow{gap:26px;}
  .card,.form,.portal{padding:30px 24px;}
  .partners{grid-template-columns:1fr 1fr;}
  .foot-grid{justify-content:flex-start;}
}

@media(max-width:520px){
  :root{--gut:22px;}
  .partners{grid-template-columns:1fr;}
  .slist .row{grid-template-columns:44px 1fr;gap:16px;}
}

@media print{
  .rail,.mobhead{display:none;}
  .shell{grid-template-columns:1fr;}
}

/* ==========================================================================
   SUB-NAVIGATION — "mini tabs"
   Two coordinated surfaces, so a section is reachable from wherever the
   visitor's eye already is:
     .rail nav .sub   nested links under the ACTIVE main nav item only. Only
                      the current page's sections are ever in the markup, so
                      the rail can't grow unbounded as pages are added.
     .subtabs         a sticky strip under the hero, highlighting the section
                      being read. Scroll-spied by rp-subnav.js.
   ========================================================================== */
.rail nav.has-sub a{padding:8px 0;}
.rail nav .sub{display:flex;flex-direction:column;margin:2px 0 10px 32px;padding-left:15px;
  border-left:1px solid var(--navy-line);}
.rail nav .sub a{font-family:var(--serif);font-style:italic;font-size:15.5px;text-transform:none;
  letter-spacing:.01em;padding:5px 0;color:var(--cream-dim);gap:0;}
.rail nav .sub a::before{display:none;}
.rail nav .sub a:hover{color:var(--gold-hi);gap:0;}
.rail nav .sub a.on{color:var(--gold-hi);}

/* sticky section strip at the top of the content column */
.subtabs{position:sticky;top:0;z-index:25;background:rgba(244,242,236,.94);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);border-bottom:1px solid var(--line);}
.subtabs .in{max-width:var(--colmax);margin:0 auto;padding:0 var(--gut);display:flex;gap:30px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.subtabs .in::-webkit-scrollbar{display:none;}
.subtabs a{white-space:nowrap;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);padding:17px 0;border-bottom:2px solid transparent;
  transition:color .25s,border-color .25s;}
.subtabs a:hover{color:var(--gold-deep);}
.subtabs a.on{color:var(--gold-deep);border-bottom-color:var(--gold);}

/* Anchored sections must clear the sticky strip when jumped to. */
section[id]{scroll-margin-top:66px;}

/* ==========================================================================
   GALLERY — past work
   Cards are built in JS from data/gallery.json (admin-managed), so nothing
   here assumes a fixed number of projects or categories.
   ========================================================================== */
.gal-filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:34px;}
.gal-filters button{font-family:var(--body);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);background:transparent;border:1px solid var(--paper-3);
  padding:10px 18px;cursor:pointer;transition:all .25s;}
.gal-filters button:hover{border-color:var(--gold);color:var(--gold-deep);}
.gal-filters button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--cream);}

.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.gal-card{background:#fff;border:1px solid var(--paper-3);display:flex;flex-direction:column;
  overflow:hidden;text-align:left;padding:0;font-family:var(--body);cursor:pointer;
  transition:transform .3s,box-shadow .3s;}
.gal-card:hover{transform:translateY(-5px);box-shadow:0 26px 46px -30px rgba(16,30,46,.4);}
.gal-card .img{height:200px;}
.gal-card .bd{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.gal-card .cat{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.gal-card h3{font-family:var(--display);font-size:17.5px;letter-spacing:.03em;color:var(--ink);
  font-weight:500;line-height:1.3;margin-top:10px;}
.gal-card p{color:var(--ink-soft);font-size:14.5px;font-weight:300;margin-top:9px;flex:1;}
.gal-card .when{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line);}

/* honest empty state — the gallery ships before the photos do */
.gal-empty{border:1px dashed var(--paper-3);background:#fff;padding:52px 34px;text-align:center;}
.gal-empty h3{font-family:var(--display);font-size:20px;letter-spacing:.03em;font-weight:500;color:var(--ink);}
.gal-empty p{color:var(--ink-soft);font-size:15.5px;font-weight:300;margin:12px auto 24px;max-width:36em;}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,14,22,.93);display:none;
  align-items:center;justify-content:center;padding:40px 24px;}
.lightbox.open{display:flex;}
.lightbox figure{max-width:min(1000px,92vw);width:100%;}
.lightbox img{width:100%;max-height:74vh;object-fit:contain;margin:0 auto;}
.lightbox figcaption{color:var(--cream);text-align:center;margin-top:20px;}
.lightbox figcaption .t{font-family:var(--display);font-size:18px;letter-spacing:.04em;}
.lightbox figcaption .m{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lt);margin-top:9px;}
.lightbox .x{position:absolute;top:20px;right:24px;background:transparent;border:1px solid var(--navy-line);
  color:var(--cream);font-size:22px;line-height:1;width:44px;height:44px;cursor:pointer;transition:all .25s;}
.lightbox .x:hover{border-color:var(--gold);color:var(--gold-hi);}

/* ==========================================================================
   CONTRACTING — service areas
   ========================================================================== */
.areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line);}
.area{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 22px;
  background:#fff;transition:background .25s;}
.area:hover{background:var(--paper-2);}
.area .nm{font-family:var(--display);font-size:15px;letter-spacing:.05em;color:var(--ink);font-weight:500;}
.area .st{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);
  margin-top:7px;font-weight:600;}

@media(max-width:1180px){
  .galgrid{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
  .galgrid{grid-template-columns:1fr;}
  .areas{grid-template-columns:1fr 1fr;}
  /* Sticky under the mobile bar rather than behind it — the bar measures
     63px (14px padding + 34px logo + 14px + 1px border). */
  .subtabs{top:63px;}
  .subtabs .in{gap:22px;}
  section[id]{scroll-margin-top:125px;}
  .mobnav nav .sub{display:flex;flex-direction:column;padding:0 0 10px 16px;
    border-bottom:1px solid var(--navy-line);}
  .mobnav nav .sub a{border-bottom:0;padding:8px 0;font-family:var(--serif);font-style:italic;
    font-size:15px;text-transform:none;letter-spacing:.01em;}
}
@media(max-width:520px){
  .areas{grid-template-columns:1fr;}
}

/* Rail with sub-navigation needs more room than the stock layout leaves it. */
@media(max-height:900px){
  .rail nav.has-sub{margin-top:18px;}
  .rail nav.has-sub a{padding:6.5px 0;font-size:12px;}
  .rail nav.has-sub .sub a{padding:4px 0;font-size:14.5px;}
  .rail .mid:has(nav.has-sub){padding:20px 0;}
  .rail .mid:has(nav.has-sub) h2{font-size:25px;}
  .rail .mid:has(nav.has-sub) .em{font-size:17px;}
}

/* Eight nav entries plus a sub-list is taller than the original six. On a
   laptop-height viewport, tighten the rail rather than making the visitor
   scroll it to reach Contact. */
@media(max-height:800px){
  .shell:has(nav.has-sub) .rail{padding:30px 34px;}
  .shell:has(nav.has-sub) .rail .brand img{height:44px;}
  .rail .mid:has(nav.has-sub){padding:12px 0;}
  .rail .mid:has(nav.has-sub) .em{font-size:15.5px;}
  .rail .mid:has(nav.has-sub) h2{font-size:21px;margin-top:8px;}
  .rail nav.has-sub{margin-top:12px;}
  .rail nav.has-sub a{padding:5px 0;}
  .rail nav.has-sub .sub{margin:1px 0 5px 26px;padding-left:13px;}
  .rail nav.has-sub .sub a{padding:3px 0;font-size:14px;}
  .shell:has(nav.has-sub) .rail .rail-cta{margin-top:15px;padding:10px 20px;}
  .shell:has(nav.has-sub) .rail .foot{padding-top:14px;font-size:12px;}
  .shell:has(nav.has-sub) .rail .foot .pillars{margin-top:8px;}
}

/* Below laptop height there isn't room for both. The rail keeps the eight
   main destinations; the sticky strip still carries the section tabs. */
@media(max-height:700px){
  .rail nav.has-sub .sub{display:none;}
}