:root{--ink: #0f1417;--navy: #0c1c29;--navy-2: #12293c;--navy-3: #1b3a52;--blue: #1b8fcb;--blue-deep: #0f5f8d;--blue-lt: #63b8e2;--paper: #fcfbf9;--sand: #efeae2;--sand-2: #e4ddd2;--white: #ffffff;--text: #161c21;--text-2: #4e5a64;--text-3: #7d8892;--on-dark: #f3efe9;--on-dark-2: #a9b6c1;--line: rgba(15, 20, 23, .13);--line-soft: rgba(15, 20, 23, .07);--line-dark: rgba(243, 239, 233, .16);--serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--gutter: clamp(20px, 5vw, 72px);--maxw: 1440px;--readw: 62ch;--sect-y: clamp(72px, 9vw, 148px);--ease: cubic-bezier(.22, .61, .36, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur: .7s;--header-h: 102px}@media (max-width: 1279px){:root{--header-h: 72px}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}img,video{display:block;max-width:100%}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5{margin:0;font-weight:400}p{margin:0}ul,ol{margin:0;padding:0;list-style:none}:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}.display{font-family:var(--serif);font-weight:300;line-height:1.02;letter-spacing:-.022em;font-size:clamp(2.6rem,6.2vw,5.4rem)}.h1{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.02em;font-size:clamp(2.15rem,4.6vw,4rem)}.h2{font-family:var(--serif);font-weight:350;line-height:1.12;letter-spacing:-.016em;font-size:clamp(1.7rem,3vw,2.6rem)}.h3{font-family:var(--serif);font-weight:400;line-height:1.2;letter-spacing:-.01em;font-size:clamp(1.25rem,1.7vw,1.6rem)}.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--blue-deep)}.eyebrow--light{color:var(--blue-lt)}.eyebrow--muted{color:var(--text-3)}.lede{font-size:clamp(1.06rem,1.35vw,1.28rem);line-height:1.6;color:var(--text-2);max-width:54ch}.body{color:var(--text-2);max-width:var(--readw)}.pull{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.4vw,2.15rem);line-height:1.32;letter-spacing:-.012em}.mono-num{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;color:var(--text-3);font-variant-numeric:tabular-nums}.on-dark{color:var(--on-dark)}.on-dark .body,.on-dark .lede{color:var(--on-dark-2)}.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}.wrap--narrow{max-width:1120px}.section{padding-block:var(--sect-y);position:relative}.section--dark{background:var(--navy);color:var(--on-dark)}.section--sand{background:var(--sand)}.section--paper{background:var(--paper)}.section--flush{padding-block:0}.sect-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end;padding-bottom:clamp(28px,3.5vw,52px);border-bottom:1px solid var(--line);margin-bottom:clamp(32px,4vw,64px)}.section--dark .sect-head{border-bottom-color:var(--line-dark)}.sect-head__label{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}.sect-head__aside{padding-bottom:6px}@media (max-width: 860px){.sect-head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}.sect-head__aside{padding-bottom:0}}.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;font-size:.86rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;border-radius:2px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform .35s var(--ease);will-change:transform}.btn:active{transform:translateY(1px)}.btn__arrow{transition:transform .45s var(--ease-out)}.btn:hover .btn__arrow{transform:translate(5px)}.btn--primary{background:var(--blue-deep);color:#fff}.btn--primary:hover{background:var(--navy)}.btn--navy{background:var(--navy);color:#fff;letter-spacing:.07em}.btn--navy:hover{background:var(--blue-deep)}.btn--ink{background:var(--ink);color:#fff}.btn--ink:hover{background:var(--blue-deep)}.btn--ghost{border:1px solid var(--line);color:var(--text)}.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}.btn--ghost-light{border:1px solid rgba(255,255,255,.42);color:#fff}.btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}.btn--sm{min-height:42px;padding:0 18px;font-size:.74rem}.btn--full{width:100%;justify-content:center}.tlink{display:inline-flex;align-items:center;min-height:38px;gap:9px;font-size:.8rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding-bottom:5px;border-bottom:1px solid currentColor;color:var(--blue-deep);transition:color .4s var(--ease),gap .4s var(--ease)}.tlink:hover{gap:15px;color:var(--ink)}.tlink--light{color:var(--blue-lt)}.tlink--light:hover{color:#fff}.hdr{position:sticky;top:0;z-index:90;min-height:var(--header-h);display:flex;align-items:center;background:var(--paper);border-bottom:1px solid var(--line-soft);transition:box-shadow .45s var(--ease)}.hdr--lifted{box-shadow:0 10px 30px -22px #0c1c2966}.hdr__inner{width:100%;max-width:min(1680px,100%);margin:0 auto;padding-inline:var(--gutter);display:flex;align-items:center;gap:clamp(16px,2vw,32px)}.brand{display:flex;align-items:center;gap:clamp(12px,1.1vw,18px);flex-shrink:0;color:var(--navy)}.brand__mark{height:68px;width:auto}.brand__txt{display:block}.brand__name{display:block;font-family:var(--serif);font-size:clamp(1.3rem,1.58vw,1.6rem);font-weight:450;line-height:1.02;letter-spacing:-.005em;white-space:nowrap}.brand__loc{display:block;font-family:var(--sans);font-size:.615rem;font-weight:600;letter-spacing:.235em;text-transform:uppercase;color:var(--text-3);margin-top:7px;white-space:nowrap}.nav{display:flex;align-items:center;gap:clamp(14px,1.5vw,27px);margin-left:auto}@media (max-width: 1460px){.nav{gap:15px}.nav__link{font-size:.85rem}.brand__mark{height:56px}.brand__name{font-size:1.16rem}.brand{gap:11px}}.nav__item{position:relative}.nav__link{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:4px 0;font-size:.925rem;font-weight:550;letter-spacing:.022em;color:var(--navy);white-space:nowrap;transition:color .35s var(--ease)}.nav__link:after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease-out)}.nav__link:hover{color:var(--blue-deep)}.nav__link:hover:after{transform:scaleX(1)}.nav__item--active .nav__link{color:var(--blue-deep);font-weight:650}.nav__item--active .nav__link:after{transform:scaleX(1);height:2.5px;background:var(--blue-deep)}.nav__caret{width:9px;height:9px;opacity:.55;transition:transform .35s var(--ease),opacity .35s}.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg);opacity:1}.dropdown{position:absolute;top:100%;left:-24px;min-width:250px;padding:12px 0 10px;margin-top:16px;background:var(--white);border:1px solid var(--line-soft);box-shadow:0 28px 64px -26px #0c1c2957;opacity:0;visibility:hidden;transform:translateY(-7px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}.dropdown a{display:flex;align-items:center;min-height:44px;padding:10px 24px;font-size:.92rem;color:var(--text);transition:background .25s var(--ease),padding-left .3s var(--ease),color .25s var(--ease)}.dropdown a:hover{background:var(--sand);padding-left:30px;color:var(--blue-deep)}.dropdown__note{padding:4px 24px 10px;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line-soft);margin-bottom:8px}.hdr__utils{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);flex-shrink:0;margin-left:clamp(16px,2.4vw,44px)}.langsw{display:inline-flex;align-items:center;gap:2px;font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--navy)}.langsw button{padding:10px 6px;min-height:42px;opacity:.62;color:var(--text-2);transition:opacity .3s var(--ease),color .3s var(--ease)}.langsw button[aria-pressed=true]{opacity:1;color:var(--blue-deep);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}.langsw button:hover{opacity:1;color:var(--navy)}.langsw__sep{opacity:.28}.langsw__short,.hdr .langsw__long{display:none}.hdr .langsw__short,.langsw--lg .langsw__long{display:inline}.langsw--lg .langsw__short{display:none}.langsw--lg{font-size:.95rem;color:var(--on-dark)}.langsw--lg button[aria-pressed=true]{color:var(--blue-lt)}.hdr__cta{display:inline-flex;min-height:52px;padding:0 28px}@media (max-width: 1460px){.hdr__cta{padding:0 17px;font-size:.75rem;min-height:46px}}@media (max-width: 1380px){.hdr__cta{padding:0 13px;font-size:.71rem;min-height:44px;gap:8px}.nav{gap:12px}.nav__link{font-size:.82rem;letter-spacing:.012em}.brand__mark{height:48px}.brand__name{font-size:1.06rem}.brand__loc{font-size:.55rem;letter-spacing:.2em}.brand{gap:10px}.hdr__utils{margin-left:clamp(10px,1.2vw,20px);gap:10px}}@media (max-width: 1279px){.hdr__cta{display:none}}.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;margin-right:-8px;color:var(--navy)}.burger span{display:block;position:relative;width:24px;height:1.6px;background:currentColor;transition:transform .4s var(--ease),background .2s var(--ease)}.burger span:before,.burger span:after{content:"";position:absolute;left:0;width:24px;height:1.6px;background:currentColor;transition:transform .4s var(--ease),top .3s var(--ease)}.burger span:before{top:-7px}.burger span:after{top:7px}.burger[aria-expanded=true] span{background:transparent}.burger[aria-expanded=true] span:before{top:0;transform:rotate(45deg)}.burger[aria-expanded=true] span:after{top:0;transform:rotate(-45deg)}@media (max-width: 1279px){.nav{display:none}.burger{display:flex}.hdr__utils{margin-left:auto}.brand__mark{height:47px}.brand__name{font-size:1.12rem}.brand__loc{font-size:.5rem;letter-spacing:.2em;margin-top:5px}.langsw{font-size:.74rem}.langsw button{padding:10px 4px}}@media (max-width: 400px){.hdr__inner{padding-inline:16px;gap:10px}.burger{width:42px;height:42px;margin-right:-4px}.hdr__utils{gap:2px}.langsw button{padding:10px 3px}}@media (max-width: 380px){.brand__mark{height:41px}.brand__name{font-size:1.01rem}.brand__loc{display:none}}.mobmenu{position:fixed;inset:0;z-index:95;background:var(--navy);color:var(--on-dark);display:flex;flex-direction:column;padding-top:var(--header-h);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;overflow-y:auto;overscroll-behavior:contain}.mobmenu--open{opacity:1;visibility:visible}.mobmenu__inner{padding:24px var(--gutter) 44px;display:flex;flex-direction:column;gap:4px}.mobmenu__link{font-family:var(--serif);font-size:1.85rem;font-weight:300;padding:13px 0;border-bottom:1px solid var(--line-dark);display:flex;align-items:baseline;gap:14px;opacity:0;transform:translateY(12px)}.mobmenu--open .mobmenu__link{animation:mmIn .5s var(--ease-out) forwards}.mobmenu__link--active{color:var(--blue-lt)}@keyframes mmIn{to{opacity:1;transform:none}}.mobmenu__sub{font-family:var(--sans);font-size:.9rem;padding:12px 0 12px 22px;border-bottom:1px solid var(--line-dark);color:var(--on-dark-2)}.mobmenu__num{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;color:var(--blue-lt)}.mobmenu__foot{margin-top:26px;display:flex;flex-direction:column;gap:16px}.mobmenu__contact{font-size:.92rem;color:var(--on-dark-2);display:flex;flex-direction:column;gap:8px}.herostage{background:var(--sand);padding:clamp(12px,2.4vw,44px);padding-bottom:clamp(16px,3vw,52px)}.hero{position:relative;width:100%;max-width:1520px;margin:0 auto;height:clamp(430px,70vh,780px);display:flex;align-items:flex-end;overflow:hidden;border-radius:2px;background:var(--navy);box-shadow:0 40px 80px -52px #091621a6,0 2px 10px -4px #0916211f}.hero__media{position:absolute;inset:0}.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}.hero__scrim{position:absolute;inset:0;background:linear-gradient(to top,#060f17eb,#060f178f 38%,#060f171a 72%,#060f1752),linear-gradient(to right,#060f17a8,#060f1714 62%)}.hero__body{position:relative;width:100%}.hero__inner{padding:clamp(26px,3.4vw,60px)}.hero__head{margin-bottom:clamp(20px,2.6vw,34px)}.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,56px);align-items:flex-end}.hero__copy{max-width:min(72vw,940px)}.hero h1{color:#fff;margin:18px 0 0;max-width:min(96vw,1180px);font-size:clamp(1.95rem,4.35vw,4rem);text-wrap:balance}.hero .lede{color:#ffffffe0;max-width:48ch}.hero__eyebrow{color:#fff;opacity:.85;display:flex;align-items:center;gap:12px}.hero__eyebrow:before{content:"";width:34px;height:1px;background:var(--blue-lt)}.hero__title span{display:block;text-wrap:balance}.hero__title span+span{margin-top:.34em}.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.filmcard{display:flex;align-items:center;gap:16px;padding:15px 22px 15px 15px;background:#09141e70;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .5s var(--ease),border-color .5s var(--ease);text-align:left;max-width:320px}.filmcard:hover{background:#09141ead;border-color:#ffffff6b}.filmcard__play{flex-shrink:0;width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease)}.filmcard:hover .filmcard__play{background:#fff;border-color:#fff;color:var(--navy)}.filmcard__txt{display:block}.filmcard__label{display:block;font-size:.85rem;font-weight:600;line-height:1.3}.filmcard__meta{display:block;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;opacity:.68;margin-top:5px}@media (max-width: 1023px){.hero{height:clamp(400px,58vh,560px)}.hero__grid{grid-template-columns:minmax(0,1fr);align-items:start;gap:22px}.hero__copy{max-width:none}}@media (max-width: 720px){.herostage{padding:12px 12px 16px}.hero{height:auto;min-height:clamp(520px,78svh,680px);border-radius:2px}.hero__media img{object-position:50% 46%}.hero__scrim{background:linear-gradient(to top,#050d14f7,#050d14ed 38%,#050d1475 64%,#050d141a,#050d145c),linear-gradient(to right,#050d1499,#050d142e 58%,#050d1400)}.hero h1{text-shadow:0 1px 24px rgba(5,13,20,.5)}.hero__body{padding-top:34%}.hero__inner{padding:26px 20px 28px}.hero h1{font-size:clamp(1.78rem,7.6vw,2.4rem);max-width:none;margin:14px 0 0}.hero__head{margin-bottom:18px}.hero__title span+span{margin-top:.3em}.hero .lede{font-size:1rem}.hero__ctas{margin-top:24px;gap:10px}.hero__ctas .btn{flex:1 1 100%;justify-content:center}.filmcard{max-width:none;width:100%;padding:12px 16px 12px 12px;gap:13px}.filmcard__play{width:42px;height:42px}.filmcard__label{font-size:.8rem}.filmcard__meta{font-size:.6rem}}@media (max-width: 380px){.herostage{padding:10px 10px 14px}.hero__inner{padding:22px 16px 24px}}.herostage--page{padding-bottom:clamp(10px,1.4vw,20px)}.hero--page{height:clamp(400px,58vh,620px)}.herostage__note{max-width:1520px;margin:10px auto 0;font-size:.72rem;color:var(--text-3);text-align:right;padding-inline:clamp(4px,.6vw,10px)}@media (max-width: 720px){.hero--page{min-height:clamp(440px,66svh,580px)}.herostage__note{text-align:left;font-size:.68rem}}.story{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(28px,5vw,92px);align-items:center}.story__figure{position:relative}.story__figure img{width:100%;aspect-ratio:4 / 5;object-fit:cover}.story__badge{position:absolute;left:-1px;bottom:-1px;background:var(--paper);padding:18px 24px 16px;max-width:78%;border-top:2px solid var(--blue)}.story__badge-t{font-family:var(--serif);font-size:1.05rem}.story__badge-s{font-size:.72rem;color:var(--text-3);margin-top:3px}.story__pull{margin:30px 0;padding-left:24px;border-left:2px solid var(--blue)}.story__pull cite{display:block;font-style:normal;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:16px}@media (max-width: 900px){.story{grid-template-columns:minmax(0,1fr)}.story__figure img{aspect-ratio:4/3}}.showcase{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(20px,3.5vw,56px)}.showcase__list{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--line)}.section--dark .showcase__list{border-top-color:var(--line-dark)}.showcase__btn{display:flex;align-items:baseline;gap:12px;min-height:46px;padding:16px 4px;text-align:left;border-bottom:1px solid var(--line);transition:color .4s var(--ease),padding-left .4s var(--ease),border-color .4s var(--ease);position:relative}.section--dark .showcase__btn{border-bottom-color:var(--line-dark)}.showcase__btn:before{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--blue);transition:width .55s var(--ease-out)}.showcase__btn[aria-selected=true]:before{width:100%}.showcase__btn:hover{padding-left:10px}.showcase__name{font-family:var(--serif);font-size:1.22rem;font-weight:400}.showcase__btn[aria-selected=false] .showcase__name{opacity:.48}.showcase__idx{font-size:.6rem;letter-spacing:.16em;opacity:.45;font-variant-numeric:tabular-nums}.showcase__panel{position:relative;min-width:0}.showcase__figure{position:relative;overflow:hidden;background:var(--navy-2)}.showcase__figure img{width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:50% 42%}.showcase__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);margin-top:1px}.section--dark .showcase__meta{background:var(--line-dark)}.showcase__cell{background:var(--paper);padding:16px 18px}.section--dark .showcase__cell{background:var(--navy)}.showcase__cell dt{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}.section--dark .showcase__cell dt{color:var(--on-dark-2)}.showcase__cell dd{margin:6px 0 0;font-family:var(--serif);font-size:1.4rem;font-weight:350}.showcase__hint{display:flex;align-items:flex-start;gap:13px;margin-top:22px;padding:15px 18px;background:#63b8e212;border-left:2px solid var(--blue)}.showcase__hint p{font-size:.86rem;line-height:1.5;color:var(--on-dark-2);max-width:68ch}.section--dark .showcase__hint p{color:var(--on-dark-2)}.showcase__hint-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--blue-lt);color:var(--blue-lt);display:grid;place-items:center;margin-top:1px}.showcase__foot{display:flex;flex-wrap:wrap;gap:20px 32px;align-items:center;justify-content:space-between;margin-top:26px}@media (max-width: 900px){.showcase{grid-template-columns:minmax(0,1fr)}.showcase__list{flex-direction:row;overflow-x:auto;border-top:0;gap:4px;padding-bottom:4px;scrollbar-width:none}.showcase__list::-webkit-scrollbar{display:none}.showcase__btn{border-bottom:0;border:1px solid var(--line);padding:10px 16px;white-space:nowrap;flex-shrink:0}.section--dark .showcase__btn{border-color:var(--line-dark)}.showcase__btn[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.section--dark .showcase__btn[aria-selected=true]{background:var(--blue-deep);border-color:var(--blue-deep)}.showcase__btn:before{display:none}.showcase__btn:hover{padding-left:16px}.showcase__name{font-size:1rem}.showcase__idx{display:none}.showcase__meta{grid-template-columns:repeat(2,1fr)}}.rooms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(18px,2.6vw,40px);align-items:start}.rooms__viewer{position:relative;background:#0a141d;overflow:hidden}.rooms__stage{position:relative;aspect-ratio:16 / 9}.rooms__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.rooms__fade{animation:roomFade .75s var(--ease-out)}@keyframes roomFade{0%{opacity:0;transform:scale(1.035)}to{opacity:1;transform:none}}.rooms__overlay{position:absolute;inset:auto 0 0;padding:clamp(20px,3vw,34px);background:linear-gradient(to top,rgba(6,15,23,.92),rgba(6,15,23,.5) 55%,transparent);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:22px}.rooms__overlay h3{font-size:clamp(1.3rem,2.2vw,1.85rem)}.rooms__overlay p{color:#ffffffc7;font-size:.94rem;margin-top:8px;max-width:48ch}.rooms__playbtn{flex-shrink:0;width:62px;height:62px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;color:#fff;transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)}.rooms__playbtn:hover{background:#fff;color:var(--navy);transform:scale(1.06)}.rooms__tag{position:absolute;top:clamp(14px,2vw,22px);left:clamp(14px,2vw,22px);display:inline-flex;align-items:center;gap:8px;padding:7px 13px;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;background:#09141e99;backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.22)}.rooms__tag i{width:6px;height:6px;border-radius:50%;background:var(--blue-lt)}.rooms__tag--vo i{background:#d8b45f}.rooms__side{display:flex;flex-direction:column;min-width:0}.rooms__side-head{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);padding-bottom:12px;border-bottom:1px solid var(--line)}.section--dark .rooms__side-head{color:var(--on-dark-2);border-bottom-color:var(--line-dark)}.rooms__nav{display:flex;flex-direction:column}.rooms__navbtn{display:flex;align-items:center;gap:13px;padding:11px 8px 11px 0;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.92rem;transition:padding-left .4s var(--ease),color .35s var(--ease);min-height:46px}.section--dark .rooms__navbtn{border-bottom-color:var(--line-dark)}.rooms__navbtn:hover{padding-left:8px}.rooms__navbtn[aria-selected=false]{color:var(--text-2)}.section--dark .rooms__navbtn[aria-selected=false]{color:var(--on-dark-2)}.rooms__navbtn[aria-selected=true]{font-weight:600;color:var(--blue-deep);padding-left:8px}.section--dark .rooms__navbtn[aria-selected=true]{color:var(--blue-lt)}.rooms__thumb{width:54px;height:40px;object-fit:cover;flex-shrink:0;background:var(--sand-2)}.section--dark .rooms__thumb{background:var(--navy-2)}.rooms__thumb--empty{display:grid;place-items:center;font-size:.5rem;letter-spacing:.1em;color:var(--text-3);text-align:center}.rooms__navbtn i{margin-left:auto;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .3s}.rooms__navbtn[aria-selected=true] i{opacity:1}.rooms__note{margin-top:18px;font-size:.76rem;line-height:1.5;color:var(--text-3)}.section--dark .rooms__note{color:var(--on-dark-2);opacity:.75}@media (max-width: 900px){.rooms{grid-template-columns:minmax(0,1fr)}.rooms__stage{aspect-ratio:4 / 3}.rooms__side-head{border-bottom:0;padding-bottom:8px}.rooms__nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.rooms__nav::-webkit-scrollbar{display:none}.rooms__navbtn{flex-direction:column;align-items:flex-start;gap:8px;border:1px solid var(--line);padding:8px;min-width:128px;flex-shrink:0;font-size:.8rem;line-height:1.25}.section--dark .rooms__navbtn{border-color:var(--line-dark)}.rooms__navbtn:hover,.rooms__navbtn[aria-selected=true]{padding-left:8px}.rooms__navbtn[aria-selected=true]{border-color:var(--blue-deep);box-shadow:inset 0 0 0 1px var(--blue-deep)}.section--dark .rooms__navbtn[aria-selected=true]{border-color:var(--blue-lt);box-shadow:inset 0 0 0 1px var(--blue-lt)}.rooms__thumb{width:100%;height:68px}.rooms__navbtn i{display:none}.rooms__overlay{flex-direction:column;align-items:flex-start;gap:14px}.rooms__overlay p{display:none}.rooms__playbtn{width:52px;height:52px}}.ph{position:relative;width:100%;height:100%;display:grid;place-content:center;gap:12px;justify-items:center;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px),linear-gradient(150deg,var(--navy-2),#0a141d 72%);color:#ffffffb8;text-align:center;padding:26px}.ph__icon{width:34px;height:34px;opacity:.5}.ph__t{font-family:var(--serif);font-size:1.12rem;color:#fff}.ph__s{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.62}.ph--silent,.ph--silent.ph--light{background:var(--sand-2)}.ph--light{background:repeating-linear-gradient(-45deg,rgba(15,20,23,.03) 0 2px,transparent 2px 11px),var(--sand);color:var(--text-2)}.ph--light .ph__t{color:var(--text)}.homes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}.homes--feature{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}@media (min-width: 1024px){.homes--feature{grid-template-columns:repeat(3,minmax(0,1fr))}}.homes--feature .homecard__fig{aspect-ratio:4 / 3}.homes--feature .homecard__body{padding:26px 26px 28px;gap:14px}.homes--feature .homecard__price{font-size:1.75rem}.homecard{background:var(--paper);display:flex;flex-direction:column}.homecard__fig{position:relative;overflow:hidden;aspect-ratio:3 / 2;background:var(--sand)}.homecard__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform 1.1s var(--ease-out)}.homecard:hover .homecard__fig img{transform:scale(1.05)}.homecard__rep{position:absolute;right:12px;bottom:12px;padding:5px 9px;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;background:#09141e9e;color:#ffffffeb;backdrop-filter:blur(6px)}.homecard__status{position:absolute;top:14px;left:14px;padding:6px 11px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink)}.homecard__body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:12px}.homecard__price{font-family:var(--serif);font-size:1.55rem;font-weight:350}.homecard__price--model{font-size:1.72rem;letter-spacing:-.012em}.homes--feature .homecard__price--model{font-size:1.85rem}.homecard__addr{font-size:.98rem;font-weight:500;line-height:1.35}.homecard__city{font-size:.82rem;color:var(--text-3)}.homecard__specs{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:.78rem;color:var(--text-2);padding-top:12px;border-top:1px solid var(--line-soft)}.homecard__plan{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep)}.homecard__plan--todo{color:var(--text-3);font-style:italic;text-transform:none;letter-spacing:0;font-size:.76rem}.homecard__actions{margin-top:auto;padding-top:16px;display:flex;gap:10px;flex-wrap:wrap}.quality{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}.quality__fig{position:relative;background:var(--navy-2);overflow:hidden}.quality__fig>img{width:100%;height:100%;min-height:340px;object-fit:cover}.hotspot{position:absolute;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffff29;border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(6px);color:#fff;transform:translate(-50%,-50%);transition:background .4s var(--ease),transform .4s var(--ease)}.hotspot:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(255,255,255,.4);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}.hotspot:hover{background:#ffffff4d}.hotspot[aria-selected=true]{background:#fff;color:var(--navy);transform:translate(-50%,-50%) scale(1.12)}.hotspot[aria-selected=true]:after{opacity:1;transform:scale(1.05)}.quality__panel{background:var(--navy);color:var(--on-dark);padding:clamp(26px,3.2vw,44px);display:flex;flex-direction:column}.quality__num{font-size:.64rem;letter-spacing:.2em;color:var(--blue-lt)}.quality__panel h3{margin:14px 0;font-size:clamp(1.4rem,2.2vw,1.95rem)}.quality__panel p{color:var(--on-dark-2)}.quality__list{margin-top:auto;padding-top:26px;border-top:1px solid var(--line-dark);display:flex;flex-direction:column;gap:2px}.quality__listbtn{display:flex;gap:12px;align-items:center;padding:9px 0;font-size:.86rem;color:var(--on-dark-2);text-align:left;transition:color .3s var(--ease),padding-left .3s var(--ease);min-height:42px}.quality__listbtn:hover{color:#fff;padding-left:6px}.quality__listbtn[aria-selected=true]{color:#fff;font-weight:600}.quality__listbtn span:first-child{font-size:.6rem;letter-spacing:.14em;color:var(--blue-lt);font-variant-numeric:tabular-nums}@media (max-width: 900px){.quality{grid-template-columns:minmax(0,1fr)}.quality__fig>img{min-height:260px;aspect-ratio:4/3}}.teaser__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:clamp(24px,4.5vw,76px);align-items:center}.teaser__figure{position:relative}.teaser__figure img{width:100%;aspect-ratio:5 / 4;object-fit:cover;object-position:50% 46%}.teaser__cap{position:absolute;left:0;bottom:0;padding:8px 13px;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;background:#0c1c29db;color:var(--on-dark-2);backdrop-filter:blur(6px)}.teaser__body .disclaimer{margin-top:24px}@media (max-width: 900px){.teaser__grid{grid-template-columns:minmax(0,1fr);gap:28px}.teaser__figure img{aspect-ratio:16 / 10}}.teaser--text .teaser__head{padding-bottom:clamp(26px,3.2vw,46px);border-bottom:1px solid var(--line-dark);margin-bottom:clamp(28px,3.4vw,48px)}.teaser__title{color:#fff;max-width:20ch;font-size:clamp(2.1rem,4.4vw,3.9rem);text-wrap:balance}.teaser__cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(26px,5vw,88px);align-items:start}.teaser__cols .lede{max-width:46ch;font-size:clamp(1.08rem,1.4vw,1.32rem)}.teaser__aside{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.teaser__aside .disclaimer{margin-top:24px}@media (max-width: 860px){.teaser__cols{grid-template-columns:minmax(0,1fr);gap:26px}.teaser__aside .btn{width:100%;justify-content:center}}.heroes{position:relative;overflow:hidden;background:var(--navy);color:var(--on-dark)}.heroes__bg{position:absolute;inset:0}.heroes__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}.heroes__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--navy) 6%,rgba(12,28,41,.86) 44%,rgba(12,28,41,.9) 100%),linear-gradient(to bottom,var(--navy),rgba(12,28,41,.55) 30%,var(--navy))}.heroes__inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}.heroes__points{display:flex;flex-direction:column;gap:2px}.heroes__point{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-dark)}.heroes__point:first-child{border-top:1px solid var(--line-dark)}.heroes__point b{font-weight:600;font-size:.95rem;display:block;margin-bottom:5px}.heroes__point p{font-size:.9rem;color:var(--on-dark-2)}.heroes__dot{width:7px;height:7px;border-radius:50%;background:var(--blue-lt);margin-top:8px}.disclaimer{margin-top:26px;font-size:.75rem;line-height:1.55;color:var(--on-dark-2);opacity:.72;max-width:60ch;padding-left:14px;border-left:1px solid var(--line-dark)}@media (max-width: 900px){.heroes__inner{grid-template-columns:minmax(0,1fr)}}.tl__track{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;padding-bottom:24px;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.tl__track::-webkit-scrollbar{height:3px}.tl__track::-webkit-scrollbar-track{background:var(--line-soft)}.tl__track::-webkit-scrollbar-thumb{background:var(--blue-deep)}.tl__step{flex:0 0 clamp(230px,27vw,330px);scroll-snap-align:start}.tl__fig{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--sand-2)}.tl__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}.tl__step:hover .tl__fig img{transform:scale(1.055)}.tl__idx{position:absolute;top:0;left:0;padding:9px 13px;background:var(--paper);font-size:.62rem;letter-spacing:.16em;font-variant-numeric:tabular-nums}.tl__body{padding-top:16px}.tl__body h3{font-size:1.16rem}.tl__body p{font-size:.86rem;color:var(--text-2);margin-top:7px}.tl__rule{height:1px;background:var(--line);margin-top:6px;position:relative}.tl__rule:after{content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--blue)}.jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,28px)}@media (min-width: 1024px){.jgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}.jgrid__note{margin-top:22px;max-width:74ch}.jcard{background:var(--white);border:1px solid var(--line);display:flex}.jcard__link{display:flex;flex-direction:column;width:100%}.jcard__fig{position:relative;aspect-ratio:3 / 2;overflow:hidden;background:var(--sand-2)}.jcard__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}.jcard__link:hover .jcard__fig img{transform:scale(1.05)}.jcard__play{position:absolute;left:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:#09141e9e;color:#fff;display:grid;place-items:center;backdrop-filter:blur(6px)}.jcard__sample{position:absolute;top:12px;right:12px;padding:5px 10px;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;background:var(--sand-2);color:var(--text-2)}.jcard__sample--inline{position:static;display:inline-block}.jcard__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px;flex:1}.jcard__meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.jcard__meta time{font-size:.72rem;color:var(--text-3)}.jcard__body p{font-size:.9rem;color:var(--text-2)}.jcard__cta{margin-top:auto;align-self:flex-start}.jcard__link:hover .jcard__cta{gap:15px;color:var(--ink)}.follow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center}@media (max-width: 860px){.follow{grid-template-columns:minmax(0,1fr)}}.socrow{display:flex;flex-wrap:wrap;gap:10px}.socrow a,.socrow__pending{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:1px solid var(--line);color:var(--text-2);font-size:.82rem;font-weight:500;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}.socrow a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.socrow__pending{opacity:.45;cursor:default}.socrow__pending em{font-style:normal;opacity:.7}.socrow--light a,.socrow--light .socrow__pending{border-color:var(--line-dark);color:var(--on-dark-2)}.socrow--light a:hover{background:#fff;color:var(--navy);border-color:#fff}.ftr__brand .socrow{margin-top:22px}@media (max-width: 520px){.socrow a span,.socrow__pending span{display:none}.socrow a,.socrow__pending{padding:0;width:46px;justify-content:center}.socrow__pending em{display:none}}.steps{display:flex;flex-direction:column}.steps__item{display:grid;grid-template-columns:110px minmax(0,1fr) 190px;gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(24px,3vw,38px) 0;border-top:1px solid var(--line)}.steps__item:last-child{border-bottom:1px solid var(--line)}.steps__n{padding-top:4px}.steps__body h2{margin-bottom:10px}.steps__fig{aspect-ratio:4 / 3;overflow:hidden;background:var(--sand-2)}.steps__fig img{width:100%;height:100%;object-fit:cover}.steps__fig--empty{background:none}@media (max-width: 860px){.steps__item{grid-template-columns:minmax(0,1fr);gap:14px}.steps__fig{aspect-ratio:16 / 9}.steps__fig--empty{display:none}}.artcrumbs{color:var(--text-3);margin-bottom:26px}.artcrumbs a:hover{color:var(--blue-deep)}.art__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}.art__meta time{font-size:.76rem;color:var(--text-3)}.art__title{max-width:20ch;text-wrap:balance}.art__excerpt{margin-top:20px}.art__fig{margin:0 0 clamp(28px,4vw,48px);aspect-ratio:16 / 9;overflow:hidden;background:var(--sand-2)}.art__fig img{width:100%;height:100%;object-fit:cover}.art__body{max-width:68ch}.art__body .body{max-width:none;font-size:1.04rem}.art__foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;margin-top:clamp(34px,4vw,56px);padding-top:26px;border-top:1px solid var(--line)}.artmore{display:flex;flex-direction:column;border-top:1px solid var(--line)}.artmore a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease)}.artmore a:hover{padding-left:10px;color:var(--blue-deep)}.artmore .eyebrow,.artmore .h3{grid-column:1}.artmore svg{grid-column:2;grid-row:1 / span 2}.fam{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(16px,2vw,28px)}.fam__card{background:var(--white);border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;gap:16px;min-height:260px}.fam__card--empty{background:transparent;border-style:dashed}.fam__stars{display:flex;gap:3px;color:var(--blue)}.fam__quote{font-family:var(--serif);font-size:1.14rem;line-height:1.42;flex:1}.fam__src{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding-top:14px;border-top:1px solid var(--line-soft)}.fam__slot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;color:var(--text-3)}.fam__slot svg{opacity:.4}.famband{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(24px,4.5vw,76px);align-items:center}.famband__media{aspect-ratio:1 / 1;border:1px solid var(--line)}.famband__slot{margin-top:30px;padding:22px 24px;background:var(--white);border:1px solid var(--line);border-left:2px solid var(--blue)}.famband__slot-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.famband__slot-head .fam__stars{opacity:.35}.famband__slot-body{display:flex;gap:14px;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--text-2)}.famband__slot-body svg{flex-shrink:0;color:var(--sand-2);margin-top:3px}@media (max-width: 900px){.famband{grid-template-columns:minmax(0,1fr);gap:26px}.famband__media{aspect-ratio:4 / 3}}.invite{position:relative;overflow:hidden;background:var(--ink);color:var(--on-dark)}.invite__bg{position:absolute;inset:0}.invite__bg img{width:100%;height:100%;object-fit:cover;opacity:.42}.invite__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(to right,#0f1417f0 4%,#0f1417b8,#0f141794),linear-gradient(to top,var(--ink),rgba(15,20,23,.4) 45%,rgba(15,20,23,.75))}.invite__inner{position:relative}.invite__inner>*{max-width:940px}.invite h2{color:#fff;margin:20px 0 22px}.invite__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}.invite__ctas .btn{flex:0 1 auto}@media (max-width: 620px){.invite__ctas .btn{flex:1 1 100%;justify-content:center}}.ftr{background:var(--navy);color:var(--on-dark);padding-top:clamp(52px,6vw,88px)}.ftr__top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,48px);padding-bottom:clamp(38px,4vw,62px);border-bottom:1px solid var(--line-dark)}.ftr__lockup{display:flex;align-items:center;gap:14px}.ftr__lockup img{height:58px;width:auto}.ftr__lockup-txt{font-family:var(--serif);font-size:1.34rem;line-height:1.1}.ftr__lockup-txt span{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-2);margin-top:6px}.ftr__stmt{margin-top:22px;font-size:.92rem;color:var(--on-dark-2);max-width:34ch;line-height:1.6}.ftr__col h4{font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:16px}.ftr__col li{margin-bottom:9px}.ftr__col li a{display:inline-flex;align-items:center;min-height:34px}.ftr__col a,.ftr__col span{font-size:.9rem;color:var(--on-dark-2);transition:color .3s var(--ease)}.ftr__col a:hover{color:#fff}.ftr__soc{display:flex;gap:10px;margin-top:22px}.ftr__soc a{width:42px;height:42px;border:1px solid var(--line-dark);display:grid;place-items:center;color:var(--on-dark-2);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}.ftr__soc a:hover{background:#fff;color:var(--navy);border-color:#fff}.ftr__bottom{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;padding-block:24px 32px}.ftr__legal a{display:inline-flex;align-items:center;min-height:38px}.ftr__legal{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.76rem;color:var(--on-dark-2)}.ftr__legal a:hover{color:#fff}.ftr__copy{font-size:.76rem;color:var(--on-dark-2);opacity:.7}@media (max-width: 900px){.ftr__top{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 560px){.ftr__top{grid-template-columns:minmax(0,1fr)}}.mhero{position:relative;min-height:clamp(420px,62vh,660px);display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}.mhero__media{position:absolute;inset:0}.mhero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}.mhero__scrim{position:absolute;inset:0;background:linear-gradient(to top,#060f17f2,#060f17c7 26%,#060f174d 62%,#060f1773),linear-gradient(to right,#060f1799,#060f170d 62%)}.mhero__body{position:relative;width:100%;padding-bottom:clamp(34px,5vh,64px);padding-top:clamp(44px,7vh,88px);color:#fff}.mhero__crumbs{position:relative;z-index:1;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#ffffff9e;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.mhero h1{margin:26px 0 0;max-width:16ch}.mhero__specs{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid rgba(255,255,255,.22)}.mhero__spec{padding:16px clamp(18px,2.4vw,34px) 4px 0;margin-right:clamp(18px,2.4vw,34px);border-right:1px solid rgba(255,255,255,.22)}.mhero__spec:last-child{border-right:0;margin-right:0;padding-right:0}.mhero__spec dt{font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:#fff9}.mhero__spec dd{margin:6px 0 0;font-family:var(--serif);font-size:clamp(1.35rem,2.1vw,1.9rem);font-weight:350}.mintro{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(24px,4vw,72px)}@media (max-width: 900px){.mintro{grid-template-columns:minmax(0,1fr)}}.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,14px)}.gal figure{overflow:hidden;background:var(--sand-2);position:relative}.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}.gal figure:hover img{transform:scale(1.05)}.gal__a{grid-column:span 7;aspect-ratio:4/3}.gal__b{grid-column:span 5;aspect-ratio:1/1}.gal__c{grid-column:span 4;aspect-ratio:3/4}.gal__d{grid-column:span 8;aspect-ratio:16/9}@media (max-width: 760px){.gal{grid-template-columns:repeat(2,1fr)}.gal__a,.gal__b,.gal__c,.gal__d{grid-column:span 2;aspect-ratio:4/3}}.gal__cap{position:absolute;left:0;bottom:0;padding:8px 12px;background:#fcfbf9f0;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}.fplan{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(22px,3vw,52px);align-items:start}.fplan__box{aspect-ratio:4/3;border:1px solid var(--line)}@media (max-width: 860px){.fplan{grid-template-columns:minmax(0,1fr)}}.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--line-dark);border:1px solid var(--line-dark)}.feat__item{background:var(--navy);padding:24px 22px}.feat__item h4{font-family:var(--serif);font-size:1.1rem;font-weight:400;margin-bottom:8px}.feat__item p{font-size:.86rem;color:var(--on-dark-2)}.feat__item--todo{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 11px),var(--navy)}.feat__item--todo h4{color:var(--on-dark-2)}.mdisc{border-top:1px solid var(--line);padding-top:22px;margin-top:clamp(44px,5vw,76px);font-size:.78rem;line-height:1.6;color:var(--text-3);max-width:82ch}.empty-state{border:1px dashed var(--line);padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff6}.reveal{opacity:0;transform:translateY(26px)}.reveal--in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.stack-sm>*+*{margin-top:14px}.stack>*+*{margin-top:22px}.stack-lg>*+*{margin-top:34px}.flex-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.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{position:absolute;top:-60px;left:12px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-size:.8rem;transition:top .25s var(--ease)}.skip:focus{top:12px}@media (max-width: 860px){body{font-size:16px}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}:root{--gold: #b79a5b;--gold-deep: #756036;--gold-lt: #d3bd89;--gold-soft: rgba(183, 154, 91, .44);--gold-line: rgba(183, 154, 91, .34);--blue: var(--gold);--blue-deep: var(--gold-deep);--blue-lt: var(--gold-lt)}:focus-visible{outline-color:var(--gold-deep)}.sect-head{border-top-color:var(--gold-line)}.eyebrow{color:var(--gold-deep)}.eyebrow--light{color:var(--gold-lt)}.btn--primary{background:var(--gold-deep);color:#fff}.btn--primary:hover{background:#8a7448}.btn--ghost{border-color:var(--gold-line)}.btn--ghost:hover{border-color:var(--gold);color:var(--gold-deep)}.mono-num{color:var(--gold-deep)}.section--dark .mono-num{color:var(--gold-lt)}@media (prefers-reduced-motion: reduce){.btn--primary,.btn--ghost{transition-duration:.01ms!important}}:root{--header-ivory: #fbf9f4;--header-navy: #0c1d2b;--header-gold: var(--gold);--header-gold-deep: var(--gold-deep);--header-gold-soft: var(--gold-soft)}.hdr{z-index:100;color:var(--header-navy);background:var(--header-ivory);border-bottom:1px solid var(--header-gold);box-shadow:none;transition:box-shadow .22s var(--ease),background .22s var(--ease)}.hdr--lifted{box-shadow:0 9px 24px -19px #0c1d2b6b}.hdr__inner{gap:clamp(16px,1.8vw,30px)}.brand{position:relative;gap:clamp(12px,1.05vw,17px);color:var(--header-navy)}.brand:before,.brand:after{content:"";position:absolute;width:9px;height:9px;border-color:var(--header-gold);opacity:.82;pointer-events:none}.brand:before{top:calc(50% - 35px);left:-7px;border-top:1px solid;border-left:1px solid}.brand:after{bottom:calc(50% - 35px);left:57px;border-right:1px solid;border-bottom:1px solid}.brand__mark{height:63px;width:auto}.brand__name{color:var(--header-navy);font-family:var(--serif);font-size:clamp(1.32rem,1.52vw,1.56rem);font-weight:500;letter-spacing:-.008em}.brand__loc{margin-top:7px;color:#687178;font-size:.59rem;font-weight:600;letter-spacing:.21em}.brand__txt{position:relative}.brand--revealing .brand__name,.brand--revealing .brand__loc{animation-duration:3.2s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,.72,.25,1)}.brand__mark-reveal{position:absolute;z-index:2;object-fit:contain;pointer-events:none}.brand--revealing .brand__mark:not(.brand__mark-reveal){animation:brand-mark-arrive 3.2s cubic-bezier(.22,.72,.25,1) both}.brand--revealing .brand__name{animation-name:brand-wordmark-arrive}.brand--revealing .brand__loc{animation-name:brand-registration-arrive}.brand--revealing .brand__txt:after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:1px;background:var(--header-gold);transform-origin:left center;animation:brand-finishing-line 3.2s cubic-bezier(.22,.72,.25,1) both}@keyframes brand-wordmark-arrive{0%,66%{opacity:0;transform:translate(-8px);clip-path:inset(0 100% 0 0)}86%,to{opacity:1;transform:translate(0);clip-path:inset(0)}}@keyframes brand-mark-arrive{0%,61%{opacity:0}79%,to{opacity:1}}@keyframes brand-registration-arrive{0%,76%{opacity:0;transform:translateY(3px)}94%,to{opacity:1;transform:translateY(0)}}@keyframes brand-finishing-line{0%,90%{opacity:0;transform:scaleX(0)}94%{opacity:.82}to{opacity:0;transform:scaleX(1)}}.nav{gap:clamp(18px,1.65vw,29px)}.nav__link{min-height:46px;color:var(--header-navy);font-family:var(--sans);font-size:clamp(.79rem,.76vw,.88rem);font-weight:500;letter-spacing:.032em;transition:color .22s var(--ease)}.nav__link:after{right:0;bottom:4px;left:0;height:1px;background:var(--header-gold);transform-origin:right center;transition:transform .22s var(--ease)}.nav__link:hover,.nav__link:focus-visible,.nav__item--active .nav__link{color:var(--header-gold-deep);font-weight:500}.nav__link:hover:after,.nav__link:focus-visible:after,.nav__item--active .nav__link:after{height:1px;background:var(--header-gold);transform:scaleX(1);transform-origin:left center}.hdr__utils{gap:clamp(11px,1.15vw,19px);margin-left:clamp(18px,2vw,34px)}.hdr .langsw{color:var(--header-navy);font-size:.72rem;font-weight:500;letter-spacing:.075em}.hdr .langsw button{color:#626d75;opacity:.76;transition:color .22s var(--ease),opacity .22s var(--ease)}.hdr .langsw button:hover,.hdr .langsw button:focus-visible{color:var(--header-gold-deep);opacity:1}.hdr .langsw button[aria-pressed=true]{color:var(--header-navy);opacity:1;text-decoration-color:var(--header-gold);text-decoration-thickness:1px}.hdr .langsw__sep{color:var(--header-gold-deep);opacity:.58}.hdr__cta.btn--navy{position:relative;min-height:50px;padding:0 24px;color:#fffdf8;background:var(--header-navy);border:1px solid var(--header-gold);border-radius:1px;font-size:.72rem;font-weight:600;letter-spacing:.065em;transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}.hdr__cta.btn--navy:before{content:"";position:absolute;inset:3px;border:1px solid var(--header-gold-soft);pointer-events:none}.hdr__cta.btn--navy .btn__arrow{color:var(--header-gold);transition:color .22s var(--ease),transform .22s var(--ease)}.hdr__cta.btn--navy:hover,.hdr__cta.btn--navy:focus-visible{color:#fffdf8;background:#162c3b;border-color:#c1ad7f}.hdr__cta.btn--navy:hover .btn__arrow,.hdr__cta.btn--navy:focus-visible .btn__arrow{color:#d3bd89}.hdr a:focus-visible,.hdr button:focus-visible,.mobmenu a:focus-visible,.mobmenu button:focus-visible{outline:2px solid var(--header-gold-deep);outline-offset:4px}.burger{color:var(--header-navy)}.burger span,.burger span:before,.burger span:after{height:1px}.mobmenu{z-index:95;color:var(--header-navy);background:var(--header-ivory)}.mobmenu__inner{padding-top:25px}.mobmenu__link{color:var(--header-navy);border-bottom-color:#ad986b57;font-family:var(--serif);font-size:1.78rem;font-weight:500;letter-spacing:-.012em;transition:color .22s var(--ease),padding-left .22s var(--ease)}.mobmenu__link:hover,.mobmenu__link:focus-visible,.mobmenu__link--active{padding-left:7px;color:var(--header-gold-deep)}.mobmenu__num{color:var(--header-gold-deep);font-weight:600}.mobmenu .langsw--lg{color:var(--header-navy)}.mobmenu .langsw--lg button{color:#626d75}.mobmenu .langsw--lg button[aria-pressed=true]{color:var(--header-navy);text-decoration-color:var(--header-gold);text-decoration-thickness:1px}.mobmenu .langsw__sep{color:var(--header-gold-deep);opacity:.58}.mobmenu .btn--navy{position:relative;min-height:54px;color:#fffdf8;background:var(--header-navy);border:1px solid var(--header-gold);border-radius:1px}.mobmenu .btn--navy:before{content:"";position:absolute;inset:3px;border:1px solid var(--header-gold-soft);pointer-events:none}.mobmenu .btn--navy .btn__arrow{color:var(--header-gold)}.mobmenu__contact{color:#5f6970}@media (max-width: 1460px) and (min-width: 1280px){.hdr__inner{gap:17px;padding-inline:clamp(26px,3vw,43px)}.brand{gap:11px}.brand:before{top:calc(50% - 31px);left:-5px}.brand:after{bottom:calc(50% - 31px);left:52px}.brand__mark{height:57px}.brand__name{font-size:1.24rem}.brand__loc{font-size:.54rem;letter-spacing:.185em}.nav{gap:16px}.nav__link{font-size:.77rem;letter-spacing:.02em}.hdr__utils{gap:9px;margin-left:16px}.hdr__cta.btn--navy{min-height:46px;padding-inline:16px;font-size:.67rem}}@media (max-width: 1279px){.hdr{border-bottom-color:var(--header-gold)}.hdr__inner{gap:12px}.brand__mark{height:50px}.brand__name{font-size:1.22rem}.brand__loc{font-size:.53rem}.brand:before{top:calc(50% - 28px);left:-5px}.brand:after{bottom:calc(50% - 28px);left:45px}}@media (max-width: 520px){.hdr__inner{padding-inline:16px}.brand{gap:9px}.brand__mark{height:43px}.brand__name{font-size:1.05rem}.brand__loc{display:none}.brand:before{top:calc(50% - 24px);left:-4px;width:7px;height:7px}.brand:after{bottom:calc(50% - 24px);left:39px;width:7px;height:7px}.mobmenu__inner{padding:20px 18px 30px}.mobmenu__link{min-height:58px;display:flex;align-items:baseline;padding-block:14px;font-size:clamp(1.38rem,7vw,1.7rem)}.mobmenu__foot{margin-top:22px}}@media (prefers-reduced-motion: reduce){.hdr,.nav__link,.nav__link:after,.hdr__cta,.hdr__cta .btn__arrow,.mobmenu__link{transition-duration:.01ms!important}.brand--revealing .brand__name,.brand--revealing .brand__loc,.brand--revealing .brand__mark,.brand--revealing .brand__txt:after{animation:none!important}}@media (min-width: 1280px){.nav{gap:0;background:#fbf9f4b8;border:1px solid #b79a5b;border-radius:1px}.nav__item+.nav__item:before{content:"";position:absolute;z-index:2;top:9px;bottom:9px;left:0;width:1px;background:#b79a5b9e;pointer-events:none}.nav__link{min-height:48px;padding:0 clamp(13px,1.08vw,17px);color:#315a76;-webkit-text-stroke:.25px rgba(183,154,91,.65);font-size:clamp(15px,1.05vw,16px);font-weight:550;line-height:1;letter-spacing:.018em;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),-webkit-text-stroke-color .2s var(--ease)}.nav__link:after{right:10px;bottom:0;left:10px;height:2px;background:#b79a5b;opacity:0;transform:none;transition:opacity .2s var(--ease)}.nav__item--active .nav__link{color:#fff9ed;background:#1b4c68;-webkit-text-stroke:.2px rgba(183,154,91,.65);box-shadow:inset 0 0 0 1px #b79a5bad,inset 0 -2px #b79a5b}.nav__item--active .nav__link:after{height:2px;background:#b79a5b;opacity:1;transform:none}.nav__link:hover,.nav__link:focus-visible,.nav__item--active .nav__link:hover,.nav__item--active .nav__link:focus-visible{color:#fff9ed;background:#1b4c68;-webkit-text-stroke:.2px rgba(183,154,91,.65);box-shadow:inset 0 0 0 1px #b79a5bad,inset 0 -2px #b79a5b}.nav__link:hover:after,.nav__link:focus-visible:after,.nav__item--active .nav__link:hover:after,.nav__item--active .nav__link:focus-visible:after{opacity:1}}.hero--film{isolation:isolate;background:#081621}.hero--film .hero__media{z-index:-3;background:#081621}.hero-film__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}.hero--film .hero__scrim{z-index:-2;background:linear-gradient(90deg,#050f17eb,#050f17ba 33%,#050f174d 59%,#050f1714 82%),linear-gradient(0deg,#050f17d6,#050f1761,#050f170f 68%)}.hero--film .hero__body{z-index:1}.hero--film .hero__copy{max-width:54ch}.hero--film .hero__eyebrow{color:var(--gold-lt);opacity:1}.hero--film .hero__eyebrow:before{background:var(--gold)}.hero--film .hero__title{max-width:16ch;text-shadow:0 2px 34px rgba(3,10,15,.36)}.hero-film-controls{min-width:248px;display:grid;grid-template-columns:1fr 48px;align-items:stretch;gap:8px;color:#fff}.hero-film-control{position:relative;min-height:48px;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 17px;color:#fff;background:#06121bb8;border:1px solid rgba(255,255,255,.38);border-radius:1px;font-size:.64rem;font-weight:650;line-height:1;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .22s ease,background .22s ease,border-color .22s ease}.hero-film-control:hover,.hero-film-control:focus-visible{color:var(--gold-lt);background:#06121beb;border-color:var(--gold)}.hero-film-control:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}.hero-film-control:disabled{opacity:.56;cursor:not-allowed}.hero-film-control--sound{justify-content:flex-start}.hero-film-control--play{width:48px;padding:0}.hero-film-control__arrow{position:relative;width:18px;height:18px;display:inline-flex;align-items:flex-end;gap:2px;flex:0 0 auto}.hero-film-control__arrow i{width:2px;background:var(--gold);transition:height .22s ease,opacity .22s ease}.hero-film-control__arrow i:nth-child(1){height:5px}.hero-film-control__arrow i:nth-child(2){height:11px}.hero-film-control__arrow i:nth-child(3){height:16px}.hero-film-control--sound:not(.is-unmuted) .hero-film-control__arrow:after{content:"";position:absolute;top:8px;left:-2px;width:21px;height:1px;background:var(--gold-lt);transform:rotate(-43deg)}.hero-film-control--sound.is-unmuted .hero-film-control__arrow i:nth-child(1){height:9px}.hero-film-control--sound.is-unmuted .hero-film-control__arrow i:nth-child(2){height:16px}.hero-film-control--sound.is-unmuted .hero-film-control__arrow i:nth-child(3){height:12px}.hero-film-control__play-icon{position:relative;width:13px;height:15px}.hero-film-control__play-icon i{position:absolute;top:0;width:2px;height:15px;background:currentColor;transition:transform .2s ease,opacity .2s ease}.hero-film-control__play-icon i:first-child{left:2px}.hero-film-control__play-icon i:last-child{right:2px}.hero-film-control--play.is-paused .hero-film-control__play-icon i:first-child{top:1px;left:2px;width:0;height:0;background:transparent;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor}.hero-film-control--play.is-paused .hero-film-control__play-icon i:last-child{opacity:0}.hero-film-status{grid-column:1 / -1;min-height:0;color:#ffffffb8;font-size:.6rem;line-height:1.4;letter-spacing:.04em;text-align:right}.hero-film-status:empty{display:none}.hero-film-reduced{margin:0;padding-left:15px;border-left:1px solid var(--gold);color:#ffffffb8;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.hero--film.has-film-error .hero-film__video{opacity:0}@media (max-width: 900px){.hero--film .hero__grid{grid-template-columns:minmax(0,1fr);gap:20px}.hero-film-controls{min-width:0;width:min(100%,310px)}}@media (max-width: 620px){.hero-film__video{object-position:58% 44%}.hero--film .hero__scrim{background:linear-gradient(0deg,#040d14f7,#040d14e6 37%,#040d1475 66%,#040d141f),linear-gradient(90deg,#040d1494,#040d1414)}.hero--film .hero__body{padding-top:clamp(210px,34svh,300px)}.hero--film .hero__title{max-width:13ch}.hero-film-controls{width:100%}.hero-film-control{min-height:50px}.hero-film-control--play{width:50px}}@media (prefers-reduced-motion: reduce){.hero-film-control,.hero-film-control__arrow i,.hero-film-control__play-icon i{transition:none!important}}.hero--film{height:auto;min-height:clamp(640px,72svh,780px)}.hero--film .hero__body,.hero--film .hero__inner,.hero--film .hero__head,.hero--film .hero__title{top:auto;inset-block-start:auto;margin-top:0;transform:none}.hero--film .hero__body{position:relative;padding-top:clamp(48px,6vh,72px)}.hero--film .hero__inner{padding-top:0}.hero--film .hero__title{margin-top:18px}@media (max-width: 1279px){.hero--film{min-height:clamp(620px,76svh,740px)}}@media (max-width: 900px){.hero--film{min-height:clamp(640px,80svh,760px)}.hero--film .hero__body{padding-top:clamp(150px,25svh,220px)}}@media (max-width: 620px){.hero--film{min-height:clamp(660px,84svh,790px)}.hero--film .hero__body{padding-top:clamp(210px,34svh,300px)}}@media (max-width: 380px){.hero--film{min-height:clamp(680px,88svh,810px)}.hero--film .hero__body{padding-top:clamp(190px,31svh,260px)}}.hero__filmslot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}.hero-film-note{margin:0;color:#ffffffa8;font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase} /* ===== v9 J&L BRAND LAYER ===== Source: jlvision-concept/src/jl-brand.css */ /* ============================================================ J&L BRAND LANGUAGE — v9 ============================================================ Loaded LAST, after styles.css, champagne.css, header-champagne.css and hero-film.css. Replaces coastal-light.css entirely; that file is left in src/ for reference but is no longer imported. WHY THIS FILE REPLACES THE COASTAL LAYER v8 and its polish pass were colour grading. They remapped the design tokens and changed what shade each surface was painted, which made the site lighter but left the underlying art direction — muted coastal luxury — untouched. J&L's actual marketing is not muted. It is bold, bright, optimistic Florida real estate: vivid royal blue, electric blue, deep navy, crisp white, saturated skies and lawns, with gold used sparingly. The site has to read as the same company. So this layer does not swap backgrounds. It introduces blue as a structural material: · saturated blue section bands, not tinted neutrals · blue frames and corner brackets on photography · blue header rails and soft-blue footers on cards · blue icon containers · blue rules paired with gold pinstripes · blueprint-grid geometry inside the blue bands · blue-filled hover states with real lift Warm ivory, sand and linen are gone as surfaces. Light areas are crisp white; the alternate is a soft blue. WHAT IS STILL NOT TOUCHED Page architecture, grid, spacing, type scale and hierarchy, every animation, all copy, all images, and app.js. This file is CSS only and adds nothing to the markup — every new element is a pseudo-element on something that already exists. PHOTOGRAPHY Explicitly the opposite of the previous passes: nothing is faded to fit a neutral palette. The two background photographs that v8 dropped to 16% and 34% opacity are brought back up, and hero and property media carry a small saturation lift so skies read blue, lawns green and Florida sun warm. PALETTE AND MEASURED CONTRAST J&L blue #075CCB white on it 6.17 · as text on white 6.17 electric #0085E5 GRAPHICS ONLY — 3.83 both ways, below the 4.5 text threshold, above the 3.0 needed for a graphic or 24px+ display type deep navy #0D315C 13.04 on white · white on it 13.04 white #FFFFFF soft blue #EEF7FD charcoal on it 13.44 champagne #C69B55 2.55 on white — decorative only, never text on light. 5.10 on navy, where it may caption. charcoal #202A33 14.58 on white charcoal-2 #48555F 7.66 on white · 7.06 on soft blue on-blue-2 #C9E2FA 4.63 on the J&L blue band ============================================================ */ :root { /* ---- 1. BRAND ---- */ --jl: #075ccb; /* primary — bands, fills, headings, rails */ --jl-elec: #0085e5; /* electric — graphics and 24px+ display only */ --jl-navy: #0d315c; /* deep — footer, depth, second band tone */ --jl-soft: #eef7fd; /* soft blue — alternate sections, panels */ --jl-gold: #c69b55; /* champagne — pinstripes and separators only */ --jl-char: #202a33; /* charcoal — body copy */ /* Working blues derived from the three above */ --jl-press: #054aa4; /* pressed / hover on the primary */ --jl-tint: #dceefb; /* panel fills and image mats */ --jl-line: rgba(7, 92, 203, 0.22); --jl-line-soft: rgba(7, 92, 203, 0.11); --gold-line-2: rgba(198, 155, 85, 0.45); /* Text on the saturated blue band and on navy */ --on-blue: #ffffff; --on-blue-2: #c9e2fa; /* ---- 2. TOKEN REMAP ---- The base stylesheet consumes these everywhere. Remapping them moves the whole site; the component work further down is what actually makes it look like J&L rather than a recoloured template. */ --paper: #ffffff; --sand: #eef7fd; --sand-2: #dceefb; --white: #ffffff; --ink: #0d315c; --navy: #075ccb; --navy-2: #dceefb; /* image-placeholder ground */ --navy-3: #0085e5; --text: #202a33; --text-2: #48555f; --text-3: #55636e; --on-dark: #ffffff; --on-dark-2: #c9e2fa; --line: rgba(32, 42, 51, 0.13); --line-soft: rgba(32, 42, 51, 0.06); --line-dark: rgba(255, 255, 255, 0.24); /* Accent tokens. champagne.css pointed these at gold; they point at the brand blue now. --blue-deep carries small text, so it takes the primary rather than the electric tone. */ --blue: #075ccb; --blue-deep: #075ccb; --blue-lt: #c9e2fa; --gold: #c69b55; --gold-deep: #8a6a30; --gold-lt: #e0c089; --gold-soft: rgba(198, 155, 85, 0.42); --gold-line: rgba(198, 155, 85, 0.4); --header-ivory: #ffffff; --header-navy: #0d315c; } /* ============================================================ 3. SURFACES ============================================================ Three light grounds and two blue ones. No warm neutrals. */ html, body { background: #ffffff; color: var(--jl-char); } .section--paper { background: #ffffff; } .section--sand { background: var(--jl-soft); } /* ---- 3a. THE SATURATED BAND ------------------------------------------- .section--dark was navy. It becomes the strongest branded moment on the site: a full J&L blue field, white typography, live photography and a restrained gold hairline. Re-declaring the dark tokens inside its own scope keeps every `.section--dark .x` rule in the base sheet working. */ .section--dark { position: relative; background: var(--jl); color: #fff; overflow: hidden; --on-dark: #ffffff; --on-dark-2: var(--on-blue-2); --line-dark: rgba(255, 255, 255, 0.26); --navy: #ffffff; --navy-2: rgba(255, 255, 255, 0.12); --blue-lt: var(--on-blue-2); --gold-lt: #e0c089; --text: #ffffff; --text-2: var(--on-blue-2); --text-3: var(--on-blue-2); --line: rgba(255, 255, 255, 0.2); --line-soft: rgba(255, 255, 255, 0.1); } /* Blueprint geometry — the same device already used on the models CTA, so the two blue moments share a vocabulary. Masked to a corner so it reads as draughting, not as wallpaper. */ .section--dark::before, .invite::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 116px 116px; -webkit-mask-image: radial-gradient(ellipse at 82% 8%, #000, transparent 68%); mask-image: radial-gradient(ellipse at 82% 8%, #000, transparent 68%); } /* A deep navy wedge in the far corner gives the flat band depth without adding an element to the markup. */ .section--dark::after { content: ""; position: absolute; z-index: 0; right: -8%; bottom: -46%; width: 46%; height: 132%; background: linear-gradient(150deg, var(--jl-elec), var(--jl-navy) 72%); opacity: 0.34; transform: rotate(-16deg); pointer-events: none; } .section--dark > * { position: relative; z-index: 3; } .section--dark .sect-head { border-bottom-color: rgba(255, 255, 255, 0.24); } .section--dark .eyebrow { color: #fff; } .section--dark .mono-num { color: var(--on-blue-2); } .section--dark .lede, .section--dark .body, .section--dark p { color: var(--on-blue-2); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark .display, .section--dark .teaser__title { color: #fff; } .section--dark .disclaimer { color: var(--on-blue-2); opacity: 1; border-left-color: var(--gold-line-2); } /* ---- 3b. Homepage story: pure white, navy type -------------------------- */ #story.section--paper { background: #ffffff; } /* ---- 3c. Homepage family band: white with pale-blue graphic blocks ------ */ #families.section--sand { background: #ffffff; } /* ============================================================ 4. TYPOGRAPHY ACCENTS ============================================================ */ h1, h2, h3, .h1, .h2, .h3, .display { color: var(--jl-navy); } .body, .lede, p { color: var(--text-2); } .lede { color: #3d4a55; } /* The eyebrow becomes a branded device: a solid blue tick, then the label in J&L blue. It appears at the head of nearly every section, so this is the single highest-leverage brand mark on the site. */ .eyebrow { color: var(--jl); } .eyebrow:not(.hero__eyebrow) { display: inline-flex; align-items: center; gap: 9px; } .eyebrow:not(.hero__eyebrow)::before { content: ""; width: 14px; height: 3px; flex: 0 0 auto; background: var(--jl); } .section--dark .eyebrow:not(.hero__eyebrow)::before, .invite .eyebrow:not(.hero__eyebrow)::before, .heroes .eyebrow:not(.hero__eyebrow)::before { background: #fff; } .eyebrow--muted { color: var(--text-2); } .eyebrow--muted::before { background: var(--jl-gold); } /* Section numerals. These are 0.68rem — 10.9px — so they take the primary blue at 6.17:1, not the electric tone, which would be 3.83:1. Electric is kept for rails, brackets, dots and gradients. */ .mono-num { color: var(--jl); font-weight: 600; } /* ============================================================ 5. ARCHITECTURAL RULES + GOLD PINSTRIPES ============================================================ Every section head gets a short heavy blue rail with a gold hairline set beneath it. It is the detail that carries "premium" without spending any more gold than a pinstripe. */ /* The device hangs on .sect-head__label, not .sect-head. Only some templates use the full .sect-head grid, but EVERY section head — home, models, explore, the closing CTA — carries a .sect-head__label. Putting the rail there is what makes it a sitewide signature rather than a detail that shows up on three pages. It hangs ABOVE the label rather than padding it down, so no vertical rhythm changes anywhere. There is 72-148px of section padding above it, so it never collides with anything. */ .sect-head { border-top: 0; border-bottom: 1px solid var(--jl-line-soft); } .sect-head__label { position: relative; padding-top: 0; } .sect-head__label::before { content: ""; position: absolute; top: -24px; left: 0; width: 74px; height: 4px; background: var(--jl); } .sect-head__label::after { content: ""; position: absolute; top: -16px; left: 0; width: 42px; height: 1px; background: var(--jl-gold); } .section--dark .sect-head__label::before, .invite .sect-head__label::before, .heroes .sect-head__label::before { background: #fff; } .section--dark .sect-head__label::after, .invite .sect-head__label::after, .heroes .sect-head__label::after { background: var(--gold-lt); } /* ============================================================ 6. BLUE IMAGE FRAMES ============================================================ Photography is the product. Rather than tint it, it is framed: a hairline mat, a heavy blue rail along the base, and a blue corner bracket. Nothing covers the picture. */ .story__figure, .teaser__figure, .famband__media, .art__fig, .mdl-intro__figure { position: relative; } /* The rail goes on the IMAGE, not on the figure. Several of these figures carry a
, and framing the figure boxed the caption in too and drew the rail underneath the text. box-sizing is border-box sitewide, so the border eats into the image rather than adding height — nothing moves. */ .story__figure > img, .teaser__figure > img, .famband__media > img, .art__fig > img, .mdl-intro__figure > img { border-bottom: 5px solid var(--jl); box-shadow: 0 0 0 1px rgba(7, 92, 203, 0.16); } .section--dark .teaser__figure > img { border-bottom-color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); } /* Corner bracket, top left — a draughting mark, not a border. */ .story__figure::before, .famband__media::before, .mdl-intro__figure::before, .teaser__figure::before { content: ""; position: absolute; top: -3px; left: -3px; width: 36px; height: 36px; z-index: 2; border-top: 4px solid var(--jl-elec); border-left: 4px solid var(--jl-elec); pointer-events: none; } .section--dark .teaser__figure::before { border-color: #fff; } /* Smaller media keeps just the mat and the base rail. */ .jcard__fig, .tl__fig, .showcase__figure, .quality__fig, .rooms__viewer, .homecard__fig { position: relative; background: var(--jl-tint); } .jcard__fig::after, .tl__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -4px 0 0 var(--jl); } /* ============================================================ 7. CARDS — BLUE HEADER RAIL, SOFT BLUE FOOTER ============================================================ */ .jcard { background: #fff; border: 1px solid var(--jl-line-soft); border-top: 3px solid var(--jl); transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease); } .jcard:hover { border-color: var(--jl-line); border-top-color: var(--jl-elec); box-shadow: 0 26px 46px -30px rgba(7, 92, 203, 0.42); transform: translateY(-3px); } .jcard__body { background: #fff; } .jcard__meta time { color: var(--text-3); } .jcard__sample { background: var(--jl-tint); color: var(--jl); } .homecard { background: #fff; border: 1px solid var(--jl-line-soft); border-top: 3px solid var(--jl); } .homecard__status { background: var(--jl); color: #fff; } .homecard__plan { color: var(--jl); } .homecard__rep { background: rgba(13, 49, 92, 0.82); } /* Spec strips read as blue information components, not plain text. */ .showcase__cell { background: var(--jl-soft); border-top: 2px solid var(--jl-line); } .showcase__cell dt { color: var(--jl); } .section--dark .showcase__cell { background: rgba(255, 255, 255, 0.1); border-top-color: rgba(255, 255, 255, 0.34); } .section--dark .showcase__cell dt { color: #fff; } .feat__item { background: var(--jl-soft); border: 1px solid var(--jl-line-soft); border-left: 3px solid var(--jl); color: var(--jl-char); --on-dark: var(--jl-char); --on-dark-2: var(--text-2); } .feat__item h4 { color: var(--jl-navy); } .feat__item p { color: var(--text-2); } .feat__item--todo { background: repeating-linear-gradient(-45deg, rgba(7, 92, 203, 0.05) 0 2px, transparent 2px 11px), var(--jl-soft); border-left-color: var(--jl-line); } .feat__item--todo h4 { color: var(--text-2); } /* The review slot on the family band — the pale-blue graphic block. */ .famband__slot { background: var(--jl-soft); border: 1px solid var(--jl-line-soft); border-left: 3px solid var(--jl); } .famband__slot-body svg { color: var(--jl-line); } .fam__stars { color: var(--jl-gold); } /* Pull quote: blue rail, gold pinstripe alongside it. */ .story__pull { position: relative; border-left: 3px solid var(--jl); padding-left: 26px; } .story__pull::after { content: ""; position: absolute; left: -8px; top: 0; bottom: 0; width: 1px; background: var(--jl-gold); } /* ============================================================ 8. BLUE ICON CONTAINERS ============================================================ */ .socrow a, .socrow__pending { background: var(--jl-soft); border: 1px solid var(--jl-line-soft); color: var(--jl); } .socrow a:hover { background: var(--jl); border-color: var(--jl); color: #fff; } .socrow--light a, .socrow--light .socrow__pending { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .socrow--light a:hover { background: #fff; color: var(--jl-navy); border-color: #fff; } .ftr__soc a { background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; } .ftr__soc a:hover { background: var(--jl-elec); border-color: var(--jl-elec); color: #fff; } /* Play and action buttons become solid brand circles. */ .jcard__play, .rooms__playbtn, .filmcard__play { background: var(--jl); color: #fff; border-color: var(--jl); } .rooms__playbtn:hover { background: var(--jl-elec); color: #fff; border-color: var(--jl-elec); } .jcard__link:hover .jcard__play { background: var(--jl-elec); } .tl__idx { background: var(--jl); color: #fff; } .tl__rule { background: var(--jl-line-soft); } .tl__rule::after { background: var(--jl-elec); width: 7px; height: 7px; top: -3px; } .heroes__dot { background: #fff; } .quality__num { color: var(--on-blue-2); } /* ============================================================ 9. BUTTONS ============================================================ */ .btn--primary { background: var(--jl); color: #fff; border: 1px solid var(--jl); } .btn--primary:hover { background: var(--jl-press); border-color: var(--jl-press); } .btn--navy, .btn--ink { background: var(--jl-navy); color: #fff; border: 1px solid var(--jl-navy); } .btn--navy:hover, .btn--ink:hover { background: var(--jl); border-color: var(--jl); } .btn--ghost { border: 1px solid var(--jl-line); color: var(--jl); background: transparent; } .btn--ghost:hover { background: var(--jl); color: #fff; border-color: var(--jl); } .btn--ghost-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; } .btn--ghost-light:hover { background: #fff; color: var(--jl); border-color: #fff; } .tlink { color: var(--jl); } .tlink:hover { color: var(--jl-press); } .tlink--light { color: #fff; } .showcase__btn[aria-selected="true"] { background: var(--jl); color: #fff; border-color: var(--jl); } .section--dark .showcase__btn[aria-selected="true"] { background: #fff; color: var(--jl); border-color: #fff; } .skip { background: var(--jl); color: #fff; } /* ============================================================ 10. HERO — bright Florida, local contrast only ============================================================ The scrim stays a pool anchored on the copy block, which the previous pass measured and got right. What changes: it is tinted J&L navy rather than slate, and the media carries a saturation lift so the sky and the lawn read the way they do in Jennifer's own photography. */ .hero { background: var(--jl-navy); box-shadow: 0 40px 80px -56px rgba(7, 92, 203, 0.4); } .hero--film, .hero--film .hero__media { background: var(--jl-navy); } .hero__media img, .hero-film__video, .mhero__media img { filter: saturate(1.12) contrast(1.03); } .hero__scrim { background: radial-gradient(66% 78% at 12% 66%, rgba(6, 30, 62, 0.82) 0%, rgba(6, 30, 62, 0.7) 30%, rgba(6, 30, 62, 0.46) 55%, rgba(6, 30, 62, 0.18) 77%, rgba(6, 30, 62, 0.03) 93%, rgba(6, 30, 62, 0) 100%), linear-gradient(90deg, rgba(6, 30, 62, 0.3) 0%, rgba(6, 30, 62, 0.14) 26%, rgba(6, 30, 62, 0.03) 46%, rgba(6, 30, 62, 0) 60%); } .hero--film .hero__scrim { background: radial-gradient(58% 76% at 14% 58%, rgba(6, 30, 62, 0.82) 0%, rgba(6, 30, 62, 0.71) 30%, rgba(6, 30, 62, 0.48) 55%, rgba(6, 30, 62, 0.2) 77%, rgba(6, 30, 62, 0.03) 93%, rgba(6, 30, 62, 0) 100%), linear-gradient(90deg, rgba(6, 30, 62, 0.32) 0%, rgba(6, 30, 62, 0.16) 24%, rgba(6, 30, 62, 0.04) 44%, rgba(6, 30, 62, 0) 58%), linear-gradient(0deg, rgba(6, 30, 62, 0.24) 0%, rgba(6, 30, 62, 0.07) 17%, rgba(6, 30, 62, 0) 36%); } .hero--film .hero__title, .hero .hero__title { color: #fff; text-shadow: 0 2px 34px rgba(4, 18, 38, 0.62), 0 1px 5px rgba(4, 18, 38, 0.5); } .hero--film .hero__eyebrow, .hero .hero__eyebrow { color: #fff; text-shadow: 0 1px 10px rgba(4, 18, 38, 0.7), 0 0 3px rgba(4, 18, 38, 0.55); } .hero__eyebrow::before { background: var(--jl-elec); height: 3px; } .hero .lede, .hero__copy p { color: #fff; text-shadow: 0 1px 14px rgba(4, 18, 38, 0.68), 0 0 3px rgba(4, 18, 38, 0.48); } .hero-film-control { background: rgba(7, 92, 203, 0.6); border-color: rgba(255, 255, 255, 0.5); color: #fff; } .hero-film-control:hover, .hero-film-control:focus-visible { background: var(--jl); border-color: #fff; color: #fff; } .hero-film-control__arrow i { background: #fff; } .hero-film-note, .hero-film-reduced, .hero-film-status { text-shadow: 0 1px 8px rgba(4, 18, 38, 0.78), 0 0 3px rgba(4, 18, 38, 0.6); } .hero-film-reduced { border-left-color: var(--jl-elec); } @media (max-width: 620px) { .hero--film .hero__scrim { background: radial-gradient(128% 74% at 40% 87%, rgba(6, 30, 62, 0.8) 0%, rgba(6, 30, 62, 0.68) 30%, rgba(6, 30, 62, 0.5) 52%, rgba(6, 30, 62, 0.28) 71%, rgba(6, 30, 62, 0.08) 88%, rgba(6, 30, 62, 0) 100%), linear-gradient(0deg, rgba(6, 30, 62, 0.2) 0%, rgba(6, 30, 62, 0.05) 26%, rgba(6, 30, 62, 0) 46%); } .hero--film .hero__eyebrow, .hero .hero__eyebrow { text-shadow: 0 0 3px rgba(4, 18, 38, 0.95), 0 0 7px rgba(4, 18, 38, 0.9), 0 1px 14px rgba(4, 18, 38, 0.8); } } .mhero { background: var(--jl-navy); } .mhero__scrim { background: radial-gradient(72% 82% at 10% 74%, rgba(6, 30, 62, 0.84) 0%, rgba(6, 30, 62, 0.72) 30%, rgba(6, 30, 62, 0.48) 55%, rgba(6, 30, 62, 0.2) 77%, rgba(6, 30, 62, 0.03) 93%, rgba(6, 30, 62, 0) 100%), linear-gradient(0deg, rgba(6, 30, 62, 0.26) 0%, rgba(6, 30, 62, 0.07) 20%, rgba(6, 30, 62, 0) 42%); } .mhero__crumbs { color: rgba(255, 255, 255, 0.9); } .artcrumbs { color: var(--text-2); } .artcrumbs.mhero__crumbs { color: var(--text-2); } .mhero .mhero__crumbs { color: rgba(255, 255, 255, 0.9); } .artcrumbs a:hover { color: var(--jl); } /* ============================================================ 11. THE FULL-BLEED BLUE MOMENTS ============================================================ */ /* ---- 11a. Hometown Heroes, full band (dedicated page) ------------------ v8 dropped the photograph to 16% behind an ivory veil, which is exactly the desaturation the brief rules out. The picture comes back up to 46% with a saturation lift, and the band is J&L blue over the top of it. */ .heroes { position: relative; background: var(--jl); color: #fff; overflow: hidden; --on-dark: #ffffff; --on-dark-2: var(--on-blue-2); --line-dark: rgba(255, 255, 255, 0.26); --blue-lt: #ffffff; --text-2: var(--on-blue-2); } .heroes__bg img { opacity: 0.46; filter: saturate(1.18) contrast(1.04); } .heroes__bg::after { background: linear-gradient(to right, rgba(7, 92, 203, 0.94) 4%, rgba(7, 92, 203, 0.8) 48%, rgba(13, 49, 92, 0.78) 100%), linear-gradient(to bottom, rgba(7, 92, 203, 0.72), rgba(7, 92, 203, 0.34) 34%, rgba(13, 49, 92, 0.72)); } .heroes__inner { position: relative; z-index: 1; } .heroes h1, .heroes h2, .heroes h3, .heroes .display { color: #fff; } .heroes .eyebrow { color: #fff; } .heroes .eyebrow::before { background: #fff; } .heroes .mono-num { color: var(--on-blue-2); } .heroes__point { border-bottom-color: rgba(255, 255, 255, 0.24); } .heroes__point:first-child { border-top-color: rgba(255, 255, 255, 0.24); } .heroes__point p { color: var(--on-blue-2); } .heroes .disclaimer { color: var(--on-blue-2); opacity: 1; border-left-color: var(--gold-line-2); } .heroes .btn--ghost-light { border-color: rgba(255, 255, 255, 0.62); color: #fff; } .heroes .btn--ghost-light:hover { background: #fff; color: var(--jl); border-color: #fff; } /* Gold pinstripe along the top edge of the band — the one gold detail in the strongest blue moment on the site. */ .heroes::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--jl-gold), rgba(198, 155, 85, 0) 46%); z-index: 2; } /* ---- 11b. Closing CTA — vivid J&L blue, not slate ---------------------- */ .invite { position: relative; background: var(--jl); color: #fff; overflow: hidden; } .invite__bg img { opacity: 0.5; filter: saturate(1.18) contrast(1.04); } .invite__bg::after { background: linear-gradient(to right, rgba(7, 92, 203, 0.93) 2%, rgba(7, 92, 203, 0.78) 50%, rgba(13, 49, 92, 0.76) 100%), linear-gradient(to top, rgba(13, 49, 92, 0.8), rgba(7, 92, 203, 0.38) 46%, rgba(7, 92, 203, 0.72)); } .invite__inner { position: relative; z-index: 3; } .invite h2, .invite .display { color: #fff; } .invite .lede, .invite p { color: #fff; } .invite .eyebrow { color: #fff; } .invite .mono-num { color: var(--on-blue-2); } /* The premium navy/white pair the brief asks for: white is the primary action, deep navy is the secondary, and the ghost sits on a white edge. */ .invite .btn--primary { background: #fff; color: var(--jl-navy); border-color: #fff; } .invite .btn--primary:hover { background: var(--jl-navy); color: #fff; border-color: var(--jl-navy); } .invite .btn--navy, .invite .btn--ink { background: var(--jl-navy); color: #fff; border-color: var(--jl-navy); } .invite .btn--navy:hover, .invite .btn--ink:hover { background: #fff; color: var(--jl-navy); border-color: #fff; } .invite .btn--ghost, .invite .btn--ghost-light { border-color: rgba(255, 255, 255, 0.62); color: #fff; background: transparent; } .invite .btn--ghost:hover, .invite .btn--ghost-light:hover { background: #fff; color: var(--jl-navy); border-color: #fff; } .invite::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--jl-gold), rgba(198, 155, 85, 0) 46%); z-index: 4; } /* ---- 11c. Footer — deep navy, blue rails ------------------------------- */ .ftr { background: var(--jl-navy); color: #fff; position: relative; } .ftr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--jl) 0%, var(--jl-elec) 42%, rgba(0, 133, 229, 0) 82%); } .ftr__top { border-bottom-color: rgba(255, 255, 255, 0.2); } .ftr__col h4 { color: var(--on-blue-2); } .ftr__col a, .ftr__col span, .ftr__stmt, .ftr__legal, .ftr__lockup-txt span { color: #d6e6f7; } .ftr__col a:hover, .ftr__legal a:hover { color: #fff; } .ftr__copy { color: #d6e6f7; opacity: 0.9; } .ftr .langsw { color: #d6e6f7; } .ftr .langsw button { color: #d6e6f7; opacity: 1; } .ftr .langsw button[aria-pressed="true"] { color: #fff; } .ftr .langsw button:hover { color: #fff; } .ftr .langsw__sep { color: #d6e6f7; } .ftr em[data-dev-note] { opacity: 0.85 !important; } .ftr .btn--ghost-light { border-color: rgba(255, 255, 255, 0.5); color: #fff; } .ftr .btn--ghost-light:hover { background: #fff; color: var(--jl-navy); border-color: #fff; } /* ============================================================ 12. HEADER — white, blue rail, gold pinstripe ============================================================ */ .hdr, .hdr__inner { background: #ffffff; } .hdr { position: relative; border-bottom: 1px solid var(--jl-line-soft); } .hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--jl) 0%, var(--jl-elec) 34%, rgba(0, 133, 229, 0) 74%); } .hdr--lifted { box-shadow: 0 10px 26px -20px rgba(7, 92, 203, 0.42); } .brand { color: var(--jl-navy); } .nav__link { color: var(--jl-navy); } .nav__link:hover { color: var(--jl); } .nav__item--active .nav__link { color: var(--jl); } .nav__item--active .nav__link::after { background: var(--jl); } .dropdown { border-color: var(--jl-line-soft); } .dropdown a:hover { background: var(--jl-soft); color: var(--jl); } .langsw { color: var(--jl-navy); } .langsw button:hover { color: var(--jl); } .burger { color: var(--jl-navy); } @media (min-width: 1280px) { .nav__link:hover, .nav__link:focus-visible, .nav__item--active .nav__link, .nav__item--active .nav__link:hover, .nav__item--active .nav__link:focus-visible { color: #ffffff; background: var(--jl); -webkit-text-stroke: 0; box-shadow: inset 0 0 0 1px var(--jl), inset 0 -2px 0 var(--jl-gold); } .nav__link::after, .nav__item--active .nav__link::after { background: var(--jl-gold); } } .mobmenu { background: #ffffff; color: var(--jl-char); --on-dark: var(--jl-char); --on-dark-2: var(--text-2); --line-dark: var(--jl-line-soft); --blue-lt: var(--jl); } .mobmenu__link { color: var(--jl-navy); border-bottom-color: var(--jl-line-soft); } .mobmenu__link--active { color: var(--jl); } .mobmenu__num { color: var(--jl-elec); } .mobmenu__contact { color: var(--text-2); } .langsw--lg { color: var(--jl-navy); } .langsw--lg button[aria-pressed="true"] { color: var(--jl); } /* ============================================================ 13. QUALITY PANEL, ROOMS, PLACEHOLDERS ============================================================ */ .quality__panel { background: var(--jl-navy); color: #fff; --on-dark: #ffffff; --on-dark-2: var(--on-blue-2); --line-dark: rgba(255, 255, 255, 0.22); --blue-lt: var(--on-blue-2); } .quality__panel h2, .quality__panel h3, .quality__panel .display { color: #fff; } .quality__panel p { color: var(--on-blue-2); } .quality__listbtn { color: var(--on-blue-2); } .quality__listbtn:hover, .quality__listbtn[aria-selected="true"] { color: #fff; } .quality__listbtn span:first-child { color: var(--on-blue-2); } .quality__fig { background: var(--jl-tint); } .hotspot { border-color: rgba(255, 255, 255, 0.8); } .hotspot[aria-selected="true"] { background: #fff; color: var(--jl); } .rooms__tag { background: rgba(13, 49, 92, 0.84); color: #fff; } .rooms__tag i { background: var(--jl-elec); } .rooms__navbtn[aria-selected="true"] { color: var(--jl); } .section--dark .rooms__navbtn[aria-selected="true"] { color: #fff; } .section--dark .rooms__note { opacity: 1; } .rooms__thumb { background: var(--jl-tint); } .section--dark .rooms__thumb { background: rgba(255, 255, 255, 0.14); } /* Placeholder grounds become a blueprint tint rather than a warm one. */ .ph { background: repeating-linear-gradient(-45deg, rgba(7, 92, 203, 0.06) 0 2px, transparent 2px 11px), linear-gradient(150deg, var(--jl-soft), var(--jl-tint) 76%); color: var(--jl); } .section--dark .ph { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 11px), rgba(255, 255, 255, 0.1); color: #fff; } .teaser__cap { background: rgba(13, 49, 92, 0.86); color: #fff; } .filmcard { background: rgba(13, 49, 92, 0.56); border-color: rgba(255, 255, 255, 0.32); } .filmcard:hover { background: rgba(7, 92, 203, 0.8); border-color: #fff; } /* ============================================================ 14. FORMS, FOCUS, SELECTION ============================================================ */ input, select, textarea { background: #fff; border-color: var(--jl-line); color: var(--jl-char); } input:focus, select:focus, textarea:focus { border-color: var(--jl); box-shadow: 0 0 0 3px rgba(7, 92, 203, 0.14); } ::placeholder { color: var(--text-3); } :focus-visible { outline: 2px solid var(--jl); outline-offset: 3px; } ::selection { background: rgba(7, 92, 203, 0.16); color: var(--jl-navy); } .tl__track::-webkit-scrollbar-track { background: var(--jl-soft); } .tl__track::-webkit-scrollbar-thumb { background: var(--jl); } /* ============================================================ 15. CONTRAST CORRECTIONS ============================================================ Electric blue is the one colour in the palette that cannot carry small text: 3.83:1 on white, 3.53:1 on soft blue. It is used for graphics, rails, brackets and the large section numerals. Anywhere it would land under 24px as text, it is swapped for the primary. */ .mono-num { color: var(--jl); } .mobmenu__num { color: var(--jl); } .jcard__meta time { color: var(--text-3); } /* The unselected showcase entries dim by opacity, which on a white ground drops below AA. Same correction the previous build measured. */ .showcase__btn[aria-selected="false"] .showcase__name { opacity: 0.72; } .showcase__idx { opacity: 0.8; } .showcase__btn[aria-selected="true"] .showcase__idx { opacity: 1; } .disclaimer { color: var(--text-2); opacity: 1; border-left-color: var(--gold-line); } .socrow__pending { opacity: 0.55; } /* Electric blue on the navy quality panel is 3.41:1 — below AA. The panel numerals take the pale blue at 7.2:1 instead. */ .quality__num, .quality__listbtn span:first-child { color: var(--on-blue-2); } /* ============================================================ 16. HEADER CHROME ============================================================ header-champagne.css frames the whole header in gold: the bottom border, the brand corner brackets, the nav box, the dividers between nav items and a double border on the CTA. That is a lot of gold for a palette where gold is meant to be a pinstripe. The frame goes blue; gold survives as the single inset hairline on the CTA and as the pinstripe under the section rails. */ .hdr { border-bottom-color: var(--jl-line-soft); } .brand::before, .brand::after { border-color: var(--jl-elec); opacity: 1; } @media (min-width: 1280px) { .nav { background: rgba(238, 247, 253, 0.55); border-color: var(--jl-line); } .nav__item + .nav__item::before { background: rgba(7, 92, 203, 0.2); } } /* The CTA keeps its double-border construction — it is the most premium detail in the header — but reads as the brand button: J&L blue field, white type, one gold hairline inside it. */ .hdr__cta.btn--navy { background: var(--jl); border-color: var(--jl); color: #fff; } .hdr__cta.btn--navy::before { border-color: rgba(198, 155, 85, 0.72); } .hdr__cta.btn--navy .btn__arrow { color: #fff; } .hdr__cta.btn--navy:hover, .hdr__cta.btn--navy:focus-visible { background: var(--jl-navy); border-color: var(--jl-navy); color: #fff; } .hdr__cta.btn--navy:hover .btn__arrow, .hdr__cta.btn--navy:focus-visible .btn__arrow { color: var(--gold-lt); } .mobmenu .btn--navy { background: var(--jl); border-color: var(--jl); color: #fff; } .mobmenu .btn--navy::before { border-color: rgba(198, 155, 85, 0.72); } /* ============================================================ 17. THE HOMETOWN HEROES PAGE PLACEHOLDER ============================================================ That page is deliberately empty until its content is written; it holds a cream block so the footer does not ride up under the nav. Cream is the one warm surface left in the build, so it goes soft blue. Remove with the placeholder. */ .hh-blank { background: var(--jl-soft) !important; } /* ============================================================ 18. WHITE SECTIONS NEED STRUCTURE TOO ============================================================ A white band with black text and no blue in it is where the previous direction kept ending up. These are the devices that keep the brand present on the light half of the site without tinting anything. */ /* The lede paragraph that opens a section gets a blue rule beside it. */ .sect-head__aside { position: relative; } /* Numbered specification rows — the strongest repeated data pattern on the site — get a blue key line. */ .showcase__meta { background: var(--jl-line-soft); } .spec dt, .specs dt { color: var(--jl); } /* Timeline steps read as a numbered blue sequence. */ .tl__body h3 { color: var(--jl-navy); } .tl__step:hover .tl__idx { background: var(--jl-elec); } /* Article and journal furniture. */ .artmore a { border-color: var(--jl-line-soft); } .artmore a:hover { color: var(--jl); background: var(--jl-soft); } .art__body .body { color: var(--text-2); } .art__title, .art__excerpt { color: var(--jl-navy); } .art__fig { background: var(--jl-tint); } /* Section dividers between stacked white bands, so two white sections in a row still read as two sections. */ .section--paper + .section--paper { border-top: 1px solid var(--jl-line-soft); } /* ============================================================ 19. HERO EYEBROW MARK ============================================================ hero-film.css sets the hero eyebrow's leading rule to gold at a higher specificity than section 10 could reach, so on the film hero the mark was still champagne. It takes the electric blue, which is the one place that tone is unambiguously a graphic. */ .hero--film .hero__eyebrow::before, .hero .hero__eyebrow::before { background: var(--jl-elec); height: 3px; } .hero--film .hero__eyebrow { color: #fff; } /* ============================================================ 20. CONTRAST CORRECTIONS INSIDE THE BLUE BANDS ============================================================ Measured, not assumed. Every one of these closes a real AA failure found by walking the glyphs on the rendered page. */ /* ---- 20a. Hero headlines stay white ----------------------------------- Section 4 sets every h1/h2/h3 to deep navy, which is right on the white half of the site and catastrophic on the model hero, where the headline sits on a dark photograph — it measured 1.0:1, i.e. invisible. Heroes and blue bands are re-asserted here, after that rule. */ .hero h1, .hero h2, .hero h3, .hero .display, .hero__title, .mhero h1, .mhero h2, .mhero h3, .mhero .display, .mhero__title, .section--dark h1, .section--dark h2, .section--dark h3, .section--dark .display, .invite h1, .invite h2, .invite h3, .invite .display, .heroes h1, .heroes h2, .heroes h3, .heroes .display, .quality__panel h2, .quality__panel h3 { color: #ffffff; } /* ---- 20b. Specification cells on the blue band ------------------------- These were translucent white over the band, and two translucent layers stacked to a mid blue that white text could not clear — 3.18:1. They take a solid deeper blue instead, which also gives the band some internal depth. White on it is 8.26:1. */ .section--dark .showcase__cell, .section--dark .rooms__thumb, .section--dark .feat__item { background: #0a4aa6; } .section--dark .showcase__cell dt { color: #dbeafd; } .section--dark .showcase__cell dd { color: #ffffff; } .section--dark .rooms__thumb, .section--dark .rooms__thumb--empty { color: #dbeafd; } .section--dark .showcase__meta { background: rgba(255, 255, 255, 0.24); } /* ---- 20c. Dimmed states on the band ------------------------------------ The showcase list dims unselected entries to 0.72 opacity, which is 3.96:1 on the band. 0.85 measures 4.92:1 and still reads as secondary. */ .section--dark .showcase__btn[aria-selected="false"] .showcase__name { opacity: 0.85; } .section--dark .showcase__idx { opacity: 0.9; } /* ---- 20d. Notes and captions on the band ------------------------------- #c9e2fa is 4.63:1 on the flat band, which passes, but several of these sit on the lighter part of the gradient wedge where it drops to 4.3. They take the next tone up. */ .section--dark .rooms__note, .section--dark .showcase__hint p, .section--dark .disclaimer { color: #e6f2fe; opacity: 1; } /* ============================================================ 21. PHOTOGRAPHY ============================================================ The previous direction faded photographs to make them sit inside a neutral palette. This does the opposite. Every property photograph on the site carries a small saturation and contrast lift so skies read blue, lawns green, pools vivid and whites crisp — the way they do in J&L's own marketing. It is deliberately small: 8% on content images, 12% on the heroes and the model cards where the picture is the whole point. Nothing is tinted, nothing is desaturated, no duotone. */ .story__figure img, .teaser__figure img, .famband__media img, .jcard__fig img, .tl__fig img, .art__fig img, .homecard__fig img, .rooms__viewer img, .rooms__thumb img, .quality__fig img, .showcase__figure img { filter: saturate(1.08) contrast(1.02); } /* ============================================================ 22. LIGHT-SURFACE DEFAULTS FOR DARK-ONLY COMPONENTS ============================================================ .heroes__point and .showcase__hint were authored in styles.css for the dark band and nowhere else, so they read --on-dark-2 (#c9e2fa) and --line-dark (white at 24%) unconditionally. The moment either is used on a white or soft-blue section — as the Hometown Heroes page now does — the body copy is pale blue on near-white and the rules vanish. Fixed at the component rather than in the page, so any future reuse on a light section is safe by default. The dark band still wins, because .section--dark re-declares those tokens inside its own scope. */ .section--paper .heroes__point, .section--sand .heroes__point { border-bottom-color: var(--jl-line-soft); } .section--paper .heroes__point:first-child, .section--sand .heroes__point:first-child { border-top-color: var(--jl-line-soft); } .section--paper .heroes__point b, .section--sand .heroes__point b { color: var(--jl-navy); } .section--paper .heroes__point p, .section--sand .heroes__point p, .section--paper .showcase__hint p, .section--sand .showcase__hint p, .section--paper .rooms__note, .section--sand .rooms__note { color: var(--text-2); opacity: 1; } .section--paper .showcase__hint, .section--sand .showcase__hint { background: var(--jl-soft); border-left-color: var(--jl); } .section--paper .showcase__hint b, .section--sand .showcase__hint b { color: var(--jl-navy); } /* The pull quote used as a standalone statement on a white section — the Hometown Heroes opening uses it that way. */ .section--paper > .wrap > .story__pull p, .section--paper .story__pull .lede { color: var(--jl-navy); } /* .feat__item styles its heading by tag. The Hometown Heroes occupation grid sits directly under an

, so its cards use

to avoid skipping a heading level; this gives h3 the same treatment h4 already had, and both keep working wherever the component is used. */ .feat__item h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; margin-bottom: 8px; color: var(--jl-navy); } /* ============================================================ 23. PRE-LAUNCH — SUPPRESS INTERNAL SCAFFOLDING ============================================================ The concept build carries notes written for us, not for a visitor: "Scaffold page for this concept phase", "to be written with Jennifer", "(address to confirm)", the sample-review card. Harmless in the studio, embarrassing in front of a client or a buyer. Done in CSS rather than by editing the HTML because most of these pages are React-rendered — app.js repaints #root on load, so markup edits do not hold. Same reason assets/home.css exists. It is also completely reversible: delete this section and every note comes back. WHAT IS **NOT** SUPPRESSED, deliberately — these are honest disclosures a homebuyer benefits from, not internal notes: · "Photography scheduled" / "Photography pending" · "Representative image" / "Front elevation — representative" · the floor-plan-archive specification disclaimer · the Hometown Heroes program disclaimer REMOVE THIS SECTION when the real copy, photography and reviews land. ============================================================ */ /* Everything the build already tagged as a note to ourselves. One rule covers the scaffold paragraph on Explore, both notes on Meet Jennifer, both on the Emmanuel II page, the journal sign-off note, and the "(address to confirm)" line in the footer of all 32 pages. */ [data-dev-note] { display: none !important; } /* The homepage review card. It is a five-star "Verified review" plate whose body reads "Approved Google reviews will appear here…" — the one placeholder on the site that could be mistaken for a real testimonial, so the whole card goes rather than just its text. The section keeps its heading, its copy and its photograph. */ #families .famband__slot { display: none !important; } #families .rooms__note { display: none !important; } /* The three journal articles are a headline, a lede and a photograph; their body is two placeholder paragraphs. Hiding the body leaves a clean photo-essay teaser rather than a post that says it has not been written yet. Delete this rule the moment Jennifer's copy is in. */ .art__body .body { display: none !important; } /* ===== v9.1 SUNSET ACCENT LAYER ===== Source: jlvision-concept/src/jl-accent.css */ /* ============================================================ J&L SUNSET ACCENT — v9.1 ============================================================ Loaded LAST, after jl-brand.css. Its own file on purpose: the hue is expected to be tuned once real photography and copy are installed, and this is the only file that has to be touched to do it. WHAT THIS IS A warm contrast against the blue/white system. Not a second brand colour, not a replacement for blue, navy or white. It puts sunlight and energy into a cool palette through threads, marks, figures, arrows, states and one primary action per band. There are no orange background sections. ---- ON THE 5-8% TARGET ------------------------------------------------ Measured honestly, this lands at 0.45% of all rendered pixels and 0.65% of the inked interface — a long way under 5-8% as a literal pixel count. That is not a shortfall, it is the metric. The measurement works by rendering each page twice, once with --jl-sun swapped for a sentinel colour, and diffing: what changes is exactly the accent and nothing else. Photography cannot pollute it, because a photo is identical in both renders. A literal 5-8% of every pixel on a page would need roughly a 400px full-width orange band on each one — which is the thing the brief rules out in the same paragraph. Saturated orange also carries far more perceptual weight than its area: a sunset button on a vivid blue field pulls the eye harder than 0.65% suggests. So the accent was tuned by eye against the brief's description — warmth, sunlight, energy, still premium — and the number is reported rather than targeted. If more is wanted, the levers in rising order of impact are: the model-card buttons at rest, the section numerals, the card top rails, and the soft-blue panel fills. TWO GOLDS, TWO JOBS #C69B55 champagne — fine luxury detailing: the pinstripe under every section rail, the hairline inside the header CTA, the underline beneath a model name. Elegant, quiet, structural. #F4A62A sunset — energy: interaction states, statistics, arrows, reveal underlines, review stars, the closing call to action. Warm, active, attention-seeking. They never do each other's job, and they are never adjacent at the same weight. ---- TUNING ------------------------------------------------------------ Change --jl-sun and everything follows. The three derived tones are computed with color-mix() from that one value, so the ink tone stays dark enough to read on white and the light tone stays pale enough to read on the blue band as the hue moves. Each derived token is declared twice: a static hex first, then the color-mix version. Browsers without color-mix (pre-2023) keep the hex, which is the current value of the mix — so nothing breaks, it simply stops auto-following if the hue is retuned. If you move --jl-sun a long way — into red, or up into yellow — re-check the four ratios below. Yellow especially: it gets light fast, and --jl-sun-ink would need a larger dark component to stay above 4.5:1. ---- MEASURED CONTRAST ------------------------------------------------- #F4A62A itself is 2.03:1 on white. That is the single most important fact about this colour: it cannot be text on white, and it cannot be a meaningful graphic on white either, since that needs 3:1. On white it is only ever decoration — a tick, a rule, a dot, a fill — or it is swapped for the ink tone. --jl-sun #F4A62A 6.42 on navy · 4.06 on the blue cell · 3.04 on the J&L band (large text + graphics) 2.03 on white — DECORATION OR FILLS ONLY --jl-sun-ink #986317 5.08 on white · 4.68 on soft blue --jl-sun-lt #FADAA6 4.60 on the J&L band · 9.71 on navy · 6.15 on the blue spec cell --jl-sun-on #0D315C 6.42 as text ON a sunset fill --jl-sun-press #DF9422 5.21 with navy on it — the hover fill ============================================================ */ :root { /* ---- The one value to tune ---- */ --jl-sun: #f4a62a; /* ---- Derived. Static fallback first, color-mix second. ---- */ --jl-sun-ink: #986317; --jl-sun-ink: color-mix(in srgb, var(--jl-sun) 54%, #2b1500); --jl-sun-lt: #fadaa6; --jl-sun-lt: color-mix(in srgb, var(--jl-sun) 42%, #ffffff); --jl-sun-press: #df9422; --jl-sun-press: color-mix(in srgb, var(--jl-sun) 80%, #8a4d00); /* Text that sits ON a sunset fill. Deep navy, not white — white on #F4A62A is 2.03:1. */ --jl-sun-on: #0d315c; /* Washes and hairlines */ --jl-sun-soft: color-mix(in srgb, var(--jl-sun) 16%, transparent); --jl-sun-line: color-mix(in srgb, var(--jl-sun) 55%, transparent); --jl-sun-glow: color-mix(in srgb, var(--jl-sun) 34%, transparent); } /* ============================================================ 1. THE THREAD — eyebrow ticks ============================================================ The single highest-leverage placement on the site. Every section on every page opens with an eyebrow, and each one carries a 14x3px mark. Turning just those marks warm runs a thread of sunlight through the whole blue system for almost no surface area. The label text stays blue or white; only the mark changes. */ .eyebrow:not(.hero__eyebrow)::before { background: var(--jl-sun); } .section--dark .eyebrow:not(.hero__eyebrow)::before, .invite .eyebrow:not(.hero__eyebrow)::before, .heroes .eyebrow:not(.hero__eyebrow)::before { background: var(--jl-sun); } .eyebrow--muted::before { background: var(--jl-sun-ink); } .mdl__eyebrow::before { background: var(--jl-sun); } /* The hero's leading rule, over photography — the first warm note on the page, sitting against the sky. */ .hero--film .hero__eyebrow::before, .hero .hero__eyebrow::before { background: var(--jl-sun); } /* ============================================================ 2. NUMBERS AND STATISTICS ============================================================ Figures are what a buyer scans for: square footage, bedrooms, the assistance amounts on Hometown Heroes. They get the accent so the eye lands on them first. On light grounds they take the ink tone; on the blue bands the accent itself is legible and is used directly. */ /* The three headline figures under the models intro. */ .mdl-intro__meta b { color: var(--jl-sun-ink); } /* Living area — the one spec a buyer actually compares — on each model card. The other three specs stay navy, so the accent still marks a hierarchy rather than colouring the whole block. */ .mdl-specs > div:last-child dd { color: var(--jl-sun-ink); } .mdl-specs > div:last-child dt { color: var(--jl-sun-ink); } /* Specification values inside the blue bands. #FADAA6 is 6.15:1 on the spec cell and 4.60:1 on the band itself. */ .section--dark .showcase__cell dd { color: var(--jl-sun-lt); } .mdl-table__sqft { color: var(--jl-sun-ink); font-weight: 600; } /* The section numerals — 01, 02, 03 — keep their blue. Turning those warm as well would tip past the budget and dilute the figures that actually matter. */ /* ============================================================ 3. ARROWS ============================================================ Every button and text link on the site ends in an arrow. Warming them is the cheapest possible way to make the interface feel active. */ .tlink .btn__arrow, .btn--ghost .btn__arrow, .mdl-btn--ghost .btn__arrow { color: var(--jl-sun); } .hdr__cta.btn--navy .btn__arrow { color: var(--jl-sun); } .btn--primary .btn__arrow, .btn--navy .btn__arrow, .mdl-btn--primary .btn__arrow { color: var(--jl-sun); } .invite .btn--primary .btn__arrow { color: var(--jl-sun-on); } .btn--ghost:hover .btn__arrow, .mdl-btn--ghost:hover .btn__arrow { color: #fff; } .artmore a svg, .artmore a .btn__arrow { color: var(--jl-sun); } /* ============================================================ 4. ANIMATED UNDERLINES AND REVEAL DETAILS ============================================================ These are motion, not colour — the accent only shows during or after an interaction, which is why it can be this saturated without adding to the resting budget. */ /* Text links: the underline sweeps in warm. */ .tlink::after { background: var(--jl-sun); } .tlink:hover { color: var(--jl-sun-ink); } /* Nav: the hover rule under a top-level item. */ .nav__link::after { background: var(--jl-sun); } /* The rule under each model name extends on hover — champagne at rest, sunset once the card is live. The two golds handing over is the whole idea in one component. */ .mdl-card__line { background: var(--jl-gold); } .mdl-card:hover .mdl-card__line { background: var(--jl-sun); width: 68px; } /* The models filter row. */ .mdl-filter[aria-pressed="true"], .mdl-filter.is-active { border-bottom-color: var(--jl-sun); } .mdl-filter:hover { color: var(--jl-sun-ink); } /* Showcase progress and timeline rules. */ .showcase__btn[aria-selected="true"] .showcase__progress, .showcase__progress { background: var(--jl-sun); } .tl__rule::after { background: var(--jl-sun); } /* ============================================================ 5. ICONS AND SMALL MARKS ============================================================ */ /* Review stars — the most natural warm element on any property site. */ .fam__stars { color: var(--jl-sun); } /* Bullet dots and tags. */ .heroes__dot { background: var(--jl-sun); } .rooms__tag i { background: var(--jl-sun); } .story__pull::before { color: var(--jl-sun); } /* Social icons warm on hover, on the light half of the site only — in the footer they stay blue against the navy. */ .socrow a:hover .btn__arrow { color: var(--jl-sun); } /* Timeline index chips warm as the step is hovered. */ .tl__step:hover .tl__idx { background: var(--jl-sun); color: var(--jl-sun-on); } /* ============================================================ 6. PRIMARY CTA STATES ============================================================ Deliberately NOT every call to action. Blue stays the resting state of the interface. Sunset marks two things only: · the hover and focus state of a primary button anywhere · the single highest-intent button on the page — "Schedule a Showing" in the closing invitation Navy sits on the fill, never white: white on #F4A62A is 2.03:1. */ .btn--primary:hover, .btn--primary:focus-visible { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .btn--primary:hover .btn__arrow, .btn--primary:focus-visible .btn__arrow { color: var(--jl-sun-on); } .hdr__cta.btn--navy:hover, .hdr__cta.btn--navy:focus-visible { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .hdr__cta.btn--navy:hover .btn__arrow, .hdr__cta.btn--navy:focus-visible .btn__arrow { color: var(--jl-sun-on); } .hdr__cta.btn--navy:hover::before { border-color: rgba(13, 49, 92, 0.32); } .mdl-btn--primary:hover, .mdl-btn--primary:focus-visible { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .mdl-btn--primary:hover .btn__arrow, .mdl-btn--primary:hover .mdl-btn__arrow { color: var(--jl-sun-on); } /* The one resting sunset button on each page. It sits on the vivid blue closing band, which is where warm against cool does the most work. */ .invite .btn--primary { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .invite .btn--primary:hover, .invite .btn--primary:focus-visible { background: var(--jl-sun-press); border-color: var(--jl-sun-press); color: var(--jl-sun-on); } .mdl-cta .mdl-btn--light { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .mdl-cta .mdl-btn--light:hover { background: var(--jl-sun-press); border-color: var(--jl-sun-press); color: var(--jl-sun-on); } /* ============================================================ 7. MODEL-CARD INTERACTION ============================================================ At rest the card is blue-railed and quiet. On hover the rail, the name underline and the shadow all go warm together, so the whole card registers as live rather than one detail changing. */ .mdl-card:hover { border-top-color: var(--jl-sun); box-shadow: 0 30px 56px -34px rgba(7, 92, 203, 0.42), 0 0 0 1px var(--jl-sun-glow); } .mdl-card:hover .mdl-card__num { color: var(--jl-sun-ink); } .mdl-card:hover .mdl-card__status { background: var(--jl-sun); color: var(--jl-sun-on); } .jcard:hover { border-top-color: var(--jl-sun); } .jcard__link:hover .jcard__play { background: var(--jl-sun); color: var(--jl-sun-on); } .homecard:hover { border-top-color: var(--jl-sun); } /* ============================================================ 8. EMPHASIS UTILITY ============================================================ The brief asks for occasional emphasised headline words. There is no word-level hook in the markup today — headlines are plain text, or split into whole lines — and this layer does not change markup. So the hook is provided instead, ready for when copy is written. Wrap a word and it picks the correct tone for whatever surface it lands on:

Homes built with purpose.

Display type is large, so the accent itself clears the 3:1 that large text needs on the blue band. On white the ink tone is used, which holds 4.5:1 even if the word is set small. */ .jl-accent { color: var(--jl-sun-ink); font-style: inherit; } .section--dark .jl-accent, .invite .jl-accent, .heroes .jl-accent, .hero .jl-accent, .mhero .jl-accent, .quality__panel .jl-accent, .ftr .jl-accent { color: var(--jl-sun); } /* A warm underline variant for the same job. */ .jl-accent--rule { background-image: linear-gradient(var(--jl-sun), var(--jl-sun)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 3px; padding-bottom: 2px; } /* ============================================================ 9. WHAT DELIBERATELY DID NOT CHANGE ============================================================ Recorded so the next pass does not undo the restraint on purpose: · No section background is warm. There are no orange bands. · Champagne keeps the section pinstripes, the header CTA hairline and the model-name rule at rest. Sunset never takes those. · Section numerals, status chips, links at rest, focus rings, form borders, card rails at rest and the footer all stay blue. · Photography is untouched — no warm grade, no overlay. · Every heading on the site is still navy or white. ============================================================ */ /* ============================================================ 10. WEIGHT PASS ============================================================ The first pass measured 0.16% of rendered pixels — the marks were all correct and all too small to register. These are the placements that give the accent real presence without a single warm background. Measurement note: the diff test counts share of TOTAL page pixels, and most of a page is whitespace and photography. A literal 5-8% of every pixel would need roughly a 400px full-width orange band per page, which is exactly what the brief rules out. What is being tuned here is warm presence in the furniture — marks, chips, figures, controls — which is what the eye actually reads as "how much orange is on this page". */ /* ---- 10a. The section rail becomes two-tone --------------------------- Every section head on the site opens with a 74px blue rail. It now starts with a 22px sunset cap. One mark, repeated on every section of every page — the single biggest lift in warm presence available, and it costs no new surface. The champagne pinstripe underneath is untouched. */ .sect-head__label::before { background: linear-gradient(90deg, var(--jl-sun) 0 22px, transparent 22px), var(--jl); } .section--dark .sect-head__label::before, .invite .sect-head__label::before, .heroes .sect-head__label::before { background: linear-gradient(90deg, var(--jl-sun) 0 22px, transparent 22px), #fff; } /* ---- 10b. Every specification figure ---------------------------------- Widened from just the living area. Figures are what a buyer scans, and on a six-card grid this is the difference between the accent being decorative and the accent doing a job. Labels stay blue, values go warm, so the pairing still reads as label/value. */ .mdl-specs dd { color: var(--jl-sun-ink); } .mdl-specs dt { color: var(--jl); } .showcase__cell dd { color: var(--jl-sun-ink); } .section--dark .showcase__cell dd { color: var(--jl-sun-lt); } .homecard__specs dd, .homecard__specs b { color: var(--jl-sun-ink); } /* ---- 10c. Status chips ----------------------------------------------- "Available", "For sale", "Waitlist" — the most action-oriented text on any property page, repeated once per card. Navy on the fill: 6.42:1. */ .homecard__status, .mdl-card__status { background: var(--jl-sun); color: var(--jl-sun-on); } /* ---- 10d. Play and media controls ------------------------------------- Every video affordance on the site. Small, circular, scattered across the photography — warm dots on blue-and-green pictures. */ .jcard__play, .rooms__playbtn, .filmcard__play { background: var(--jl-sun); color: var(--jl-sun-on); border-color: var(--jl-sun); } .rooms__playbtn:hover, .jcard__link:hover .jcard__play { background: var(--jl-sun-press); color: var(--jl-sun-on); border-color: var(--jl-sun-press); } .hero-film-control__arrow i { background: var(--jl-sun); } .hero-film-control:hover .hero-film-control__arrow i, .hero-film-control:focus-visible .hero-film-control__arrow i { background: var(--jl-sun); } .hero-film-reduced { border-left-color: var(--jl-sun); } /* ---- 10e. Timeline indices -------------------------------------------- The slab-to-keys sequence is a numbered process; the numbers lead. */ .tl__idx { background: var(--jl-sun); color: var(--jl-sun-on); } .tl__step:hover .tl__idx { background: var(--jl-sun-press); } /* ---- 10f. Footer social marks ----------------------------------------- On navy the accent is 6.42:1, so the icons can carry it directly. It puts a warm note at the foot of every page without touching the band. */ .ftr__soc a { color: var(--jl-sun); border-color: var(--jl-sun-line); } .ftr__soc a:hover { background: var(--jl-sun); color: var(--jl-sun-on); border-color: var(--jl-sun); } .socrow--light a { color: var(--jl-sun); } .socrow--light a:hover { background: var(--jl-sun); color: var(--jl-sun-on); border-color: var(--jl-sun); } /* ---- 10g. Quality panel numerals -------------------------------------- On the navy panel, where the accent reads at 6.42:1. */ .quality__num, .quality__listbtn span:first-child { color: var(--jl-sun); } /* ============================================================ 11. ONE WARM ACTION PER BAND ============================================================ The weight pass lifted the pages that are made of cards — models, explore, available — but left the editorial pages at 0.08% of their interface. Marks and figures alone cannot carry a page that is mostly headline, photograph and one button. So the accent takes a job rather than a quota: **the single primary action in each band is warm, everything secondary stays blue.** That gives roughly three sunset buttons per page, always the thing you are meant to click, and it reads as an action colour rather than decoration. It is still not "every CTA" — every ghost, every secondary, every one of the twelve model-card buttons and the whole header stay blue at rest. Navy sits on the fill, never white: white on #F4A62A is 2.03:1, navy is 6.42:1. The fill against the blue band is 3.04:1, which clears the 3:1 a UI component boundary needs. */ /* The hero's primary — the first action on the site. */ .hero .btn--primary, .hero__ctas .btn--primary { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .hero .btn--primary:hover, .hero .btn--primary:focus-visible { background: var(--jl-sun-press); border-color: var(--jl-sun-press); color: var(--jl-sun-on); } .hero .btn--primary .btn__arrow { color: var(--jl-sun-on); } /* The one action inside each saturated blue band. Warm on cool is the whole point of the accent, and this is where the contrast is greatest. */ .section--dark .btn--ghost-light, .heroes .btn--ghost-light { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .section--dark .btn--ghost-light:hover, .section--dark .btn--ghost-light:focus-visible, .heroes .btn--ghost-light:hover, .heroes .btn--ghost-light:focus-visible { background: #fff; border-color: #fff; color: var(--jl-navy); } .section--dark .btn--ghost-light .btn__arrow, .heroes .btn--ghost-light .btn__arrow { color: var(--jl-sun-on); } /* ---- Warm caps on the vertical rails ---------------------------------- The pull quote and the review panel both hang off a 3px blue rail. Each gets a short sunset cap at the top, the same device as the section rails, so the warm thread runs down the page as well as across it. */ .story__pull, .famband__slot, .feat__item { border-left-color: transparent; background-image: linear-gradient(180deg, var(--jl-sun) 0 34px, var(--jl) 34px); background-repeat: no-repeat; background-size: 3px 100%; background-position: 0 0; } .famband__slot, .feat__item { background-image: linear-gradient(180deg, var(--jl-sun) 0 34px, var(--jl) 34px), linear-gradient(var(--jl-soft), var(--jl-soft)); background-size: 3px 100%, 100% 100%; background-position: 0 0, 0 0; } .disclaimer { border-left-color: var(--jl-sun); } /* Text links show their warm underline at rest, not only on hover — on an editorial page the "Meet Jennifer" links are most of the interaction surface there is. */ .tlink { text-underline-offset: 6px; } .tlink::after { background: var(--jl-sun); } /* The Hometown Heroes teaser's action is a .btn--primary, not a ghost — so it needs naming explicitly to take the warm treatment inside the band. Checked against the rendered DOM rather than assumed. */ .section--dark .btn--primary, .heroes .btn--primary { background: var(--jl-sun); border-color: var(--jl-sun); color: var(--jl-sun-on); } .section--dark .btn--primary:hover, .section--dark .btn--primary:focus-visible, .heroes .btn--primary:hover, .heroes .btn--primary:focus-visible { background: #fff; border-color: #fff; color: var(--jl-navy); } .section--dark .btn--primary .btn__arrow, .heroes .btn--primary .btn__arrow { color: var(--jl-sun-on); } /* ============================================================ 12. STRUCTURAL WEIGHT PASS — v9.2 ============================================================ Everything above is correct but small: threads, marks, states. This pass gives the accent a job in the ART DIRECTION rather than only in the interface — the numerals that organise the page, the rails that head the cards, and one large graphic device in the editorial compositions. Still no orange section backgrounds, no new orange CTAs, no change to the blue system, and no change to layout, type or animation. */ /* ---- 12a. THE EDITORIAL NUMERALS -------------------------------------- 01, 02, 03, 04 down the side of every page. They are the strongest piece of editorial furniture on the site and they were blue, which is why the accent kept reading as decoration — nothing warm was doing structural work. They are 0.68rem — 10.9px — so they are SMALL text and need 4.5:1. #F4A62A is 2.03:1 on white, so the tone has to change with the ground. Measured, per surface: white / soft blue --jl-sun-ink 5.08 / 4.68 J&L blue band --jl-sun-lt 4.60 blue spec cell --jl-sun-lt 6.15 navy panel, footer --jl-sun 6.42 */ .mono-num { color: var(--jl-sun-ink); } .section--dark .mono-num, .invite .mono-num, .heroes .mono-num { color: var(--jl-sun-lt); } .ftr .mono-num, .quality__panel .mono-num, .mhero .mono-num, .hero .mono-num { color: var(--jl-sun); } /* The model-card numerals, 01 through 06, are the same editorial device on a card instead of a section. */ .mdl-card__num { color: var(--jl-sun-ink); } .mdl-ccard__num { color: var(--jl-sun-ink); } .tl__idx { background: var(--jl-sun); color: var(--jl-sun-on); } /* home.css renumbers three homepage sections by painting corrected digits over the originals with ::before. Those inherit `color: inherit`, so they follow the rules above automatically — no extra rule needed, but worth knowing they exist if the numerals ever look wrong on the home page specifically. */ /* ---- 12b. TWO-TONE CARD RAILS ----------------------------------------- Cards head with a 3px blue rail. It now starts sunset for the first 22% and hands over to blue. Technique: the top border becomes transparent and the rail is painted as a background image. Backgrounds paint under the border area by default (background-clip: border-box), so the bar lands exactly in the 3px the border already occupies — the border still reserves its space, so nothing moves. A gradient border-image was the obvious alternative but it would also have repainted the 1px side and bottom borders. The sunset segment is never adjacent to white on its own: it always meets the blue half of the same rail, which is 3.04:1 — above the 3:1 a graphic boundary needs. */ .jcard, .homecard { border-top-color: transparent; background-color: #fff; background-image: linear-gradient(90deg, var(--jl-sun) 0 22%, var(--jl) 22%); background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 0; } .jcard:hover, .homecard:hover { border-top-color: transparent; background-image: linear-gradient(90deg, var(--jl-sun) 0 42%, var(--jl) 42%); } /* ---- 12c. THE OVERSIZED CORNER ---------------------------------------- One large warm graphic device per editorial composition. An architectural corner — two heavy sunset arms — offset outward from the photograph and drawn BEHIND it, so only the part that escapes the image is visible. It reads as line work the photograph is sitting on top of, not as a frame stuck around it. It is deliberately the one large warm shape on the page. The existing electric-blue bracket stays on the opposite corner, tight to the edge, so the two do not compete. Sizes are in absolute px rather than percentages so the arms stay the same visual weight whatever the photograph's aspect ratio. */ /* isolation:isolate is load-bearing. Without it the figure is not a stacking context, so a z-index:-1 pseudo-element escapes upward and paints BEHIND the section's white background — i.e. invisible. With it, the paint order inside the figure becomes: figure background (transparent), then the corner, then the photograph. The corner therefore sits on the white and behind the image, which is the effect wanted. Checked by rendering, not assumed. */ .story__figure, .famband__media { position: relative; isolation: isolate; } /* Only the tall, column-width figures get it. Tried on the models intro photograph too and removed: that figure is 1256px wide, so a corner offset 26px outside it reads as a tick on the edge rather than as a graphic device. The shape needs a figure whose height is comparable to the arms. */ .story__figure::after, .famband__media::after { content: ""; position: absolute; z-index: -1; right: -26px; bottom: -26px; width: clamp(120px, 34%, 210px); height: clamp(120px, 42%, 240px); border-right: 8px solid var(--jl-sun); border-bottom: 8px solid var(--jl-sun); pointer-events: none; } /* The story figure is the hero of the Jennifer section, so its corner is the largest on the site. */ .story__figure::after { right: -32px; bottom: -32px; width: clamp(150px, 42%, 260px); height: clamp(150px, 48%, 300px); border-width: 10px; } /* Between 900px and 1200px the two-column gap narrows from 72px to about 46px, and the arm plus its border intrudes 42px into it. Measured at 901px that left 4px of clearance to the text column — technically fine, visually not. The offset comes in early. */ @media (max-width: 1200px) { .story__figure::after, .famband__media::after { right: -20px; bottom: -20px; border-width: 8px; } } @media (max-width: 900px) { /* The page gutter narrows to 20px on a phone, so the offset comes in again — the arms must never reach the edge of the viewport. */ .story__figure::after, .famband__media::after { right: -12px; bottom: -12px; width: clamp(90px, 30%, 150px); height: clamp(90px, 30%, 150px); border-width: 6px; } .story__figure::after { border-width: 7px; } }