:root{--paper:#f1ede4;--ink:#302f2b;--line:#aaa496;--line-soft:#cdc6b8;--panel:#e7e1d5;--muted:#686358;--bronze:#786a52;--limestone-image:url('assets/limestone.webp')}
html,body{background:#eae5da;color:var(--ink)}
.band{background-color:var(--paper)}
.header{background-color:#eee9df;background-image:linear-gradient(100deg,#f5f1e8ef,#e8e3d8f0),var(--limestone-image);background-size:auto,620px}
.header-action{background:#e7e0d52b}.brand-descriptor{color:#5c564b}.primary-nav a:hover,.primary-nav button:hover,.footer-nav a:hover,.footer-nav button:hover{color:#7b6444}
.hero{background-color:#f1ede4;background-image:radial-gradient(ellipse at 37% 36%,#faf7efed,#ebe5d8dd),var(--limestone-image);background-size:auto,650px}.hero-grid-line{border-color:#b9ae9c;opacity:.35}.hero-subtitle{color:#75654c}.hero-rule{border-color:#91846f}.hero-support{color:#5d564a}.scroll-circle{background:#f8f4e7;border-color:#b1a48c}.hero-copy h1{color:#302f2b}
.instrument-field{background:transparent;border-right-color:#999389}.instrument-orbit{left:155px;top:-6px;width:500px;height:500px;border:1px solid #b4aea063;background:transparent;box-shadow:none}.instrument-orbit:after{inset:14px;border:1px solid #b4aea060;box-shadow:none}
.instrument-bezel{left:200px;top:39px;width:410px;height:410px;background:conic-gradient(from 25deg,#d7dcdb,#a5acae 60deg,#f0f1eb 110deg,#a7afb1 175deg,#d9dedd 240deg,#9ba5a6 300deg,#d7dcdb);box-shadow:0 0 0 1px #9ba3a0,0 9px 20px #3639301c,inset 0 0 0 2px #eef0e8,inset 0 0 0 6px #c1c9c7}
.instrument-face{left:220px;top:59px;width:370px;height:370px;border:1px solid #9da79f;background:radial-gradient(ellipse at 45% 20%,#fffdf5,#f2f0e6 65%,#e6e8dd);box-shadow:0 0 0 2px #e8ece4,inset 0 1px 5px #32413915}.instrument-face:after,.needle{display:none}
.instrument-readout{left:245px;top:91px;width:322px}.instrument-value{font-size:44px}.readout-currency{color:#7a694f}.instrument-readout .eyebrow{letter-spacing:.19em}.instrument-controls{left:255px;top:184px;width:300px;grid-template-columns:146px 146px;grid-template-rows:67px 67px;gap:8px}.instrument-control{padding:8px 10px 4px;border-color:#b5b3a6;background:linear-gradient(135deg,#fffdf775,#e9eadf8c);box-shadow:inset 0 1px 0 #fffdf9}.instrument-control label{letter-spacing:.065em}.number-line>span{color:#777469}.instrument-control input[type=range]{accent-color:#656d66}.instrument-cta{left:292px;top:342px;width:233px;height:37px;background:linear-gradient(125deg,#f6f3e8,#e5e6db);border-color:#999e90}.instrument-secondary{left:325px;top:386px;width:170px;color:#656a60;text-decoration-color:#acae9d}.instrument-motto{color:#6e6654}
.lender-band{background-image:linear-gradient(90deg,#e9e3d7eb,#f4efe5e8 50%,#e8e1d4e8),var(--limestone-image);background-size:auto,620px}.lender-intro,.lender-outro{color:#6b6354}.lender-slot{color:#5d564a}.mark-symbol{border-color:#999082}
.card-rail{background:#eae4d9}.route-card{background-image:linear-gradient(135deg,#f9f5eae8,#eae4d7e8),var(--limestone-image);background-size:auto,600px;border-color:#b0a797}.route-card:hover{box-shadow:0 3px 13px #67563d25}.route-card .photo-slot{border-color:#a69c8c}.card-icon{color:#756952;border-color:#ada08a;background:linear-gradient(135deg,#fbf7ea,#e1d8c6);box-shadow:inset 0 0 0 2px #f5efe0,0 1px 3px #6e5d4022}.route-card .card-description{color:#635b4f}.card-arrow{color:#7d705b}
.approach-copy{background-image:linear-gradient(130deg,#f5f0e5e8,#eae3d5eb),var(--limestone-image);background-size:auto,610px}.approach-copy p{color:#665d50}.approach-steps{background-color:#f1ebdf;background-image:linear-gradient(#f1ebdfde,#f1ebdfde),var(--limestone-image);background-size:auto,600px}.approach-step{border-color:#c2b6a2}.step-number{color:#72634b}.step-copy{color:#655d50}.step-title{color:#3b3730}
.cta-band{background-image:linear-gradient(90deg,#e3dbcae8,#eee6d7eb),var(--limestone-image);background-size:auto,620px}.cta-copy{color:#65583f}.cta-action .outline-button{background:linear-gradient(135deg,#f4eddf,#e3dac8);border-color:#9f947f}.outline-button{border-color:#a69e8e}.outline-button:hover{background:#514b3e;color:#fffaf0}.footer{background-image:linear-gradient(#f1ebdfeb,#f1ebdfeb),var(--limestone-image);background-size:auto,620px}.footer-signoff{color:#6d614d}.footer-signoff:before{border-color:#998b72}
.review-tools{background:#e5decf;color:#645a48;flex-wrap:wrap;border-color:#bab09c}.review-tools>div{max-width:650px}.review-tools a,.review-tools button{background:#f4eddf;border-color:#b4a78f}.review-tools a:hover,.review-tools button:hover{background:#ded1ba}.review-tools button[aria-pressed=true]{background:#7d6a4b}.reference-copy-note{flex-basis:100%;font:10px/1.65 Inter,sans-serif;max-width:1050px;margin:0;padding-top:12px;border-top:1px solid #bdb099;color:#6b5e49}
[dir=rtl] .instrument-orbit{left:74px}[dir=rtl] .instrument-bezel{left:119px}[dir=rtl] .instrument-face{left:139px}[dir=rtl] .instrument-controls{left:174px}[dir=rtl] .instrument-readout{left:162px}[dir=rtl] .instrument-cta{left:204px}[dir=rtl] .instrument-secondary{left:234px}[dir=rtl] .reference-copy-note{font-family:Arabic,sans-serif}
@media(max-width:1054px){.instrument-field,[dir=rtl] .instrument-field{width:560px;height:480px;margin-top:35px}.instrument-orbit,[dir=rtl] .instrument-orbit{left:0;top:-25px;width:560px;height:560px}.instrument-bezel,[dir=rtl] .instrument-bezel{left:40px;top:15px;width:480px;height:480px}.instrument-face,[dir=rtl] .instrument-face{left:59px;top:34px;width:442px;height:442px}.instrument-readout,[dir=rtl] .instrument-readout{left:115px;top:65px;width:330px}.instrument-value{font-size:48px}.instrument-controls,[dir=rtl] .instrument-controls{left:100px;top:173px;width:360px;grid-template-columns:1fr 1fr;grid-template-rows:82px 82px;gap:10px}.instrument-control{padding:11px 12px 5px}.instrument-cta,[dir=rtl] .instrument-cta{left:145px;top:359px;width:270px;height:44px}.instrument-secondary,[dir=rtl] .instrument-secondary{left:145px;top:416px;width:270px;min-height:32px}.reference-copy-note{font-size:11px}}
@media(max-width:680px){.instrument-field,[dir=rtl] .instrument-field{width:calc(100% - 28px);height:450px;margin:14px 14px 26px}.instrument-orbit,[dir=rtl] .instrument-orbit{left:-8px;top:-8px;width:calc(100% + 16px);height:466px;border-radius:36px;background:transparent;box-shadow:none}.instrument-orbit:after{display:none}.instrument-bezel,[dir=rtl] .instrument-bezel{left:0;top:0;width:100%;height:450px;border-radius:30px;box-shadow:0 0 0 1px #9ea49d,0 7px 18px #36372c17,inset 0 0 0 2px #f0f1e8}.instrument-face,[dir=rtl] .instrument-face{left:8px;top:8px;width:calc(100% - 16px);height:434px;border-radius:23px;box-shadow:none}.instrument-readout,[dir=rtl] .instrument-readout{left:20px;right:20px;top:35px;width:auto}.instrument-controls,[dir=rtl] .instrument-controls{left:22px;right:22px;top:153px;width:auto;grid-template-columns:1fr 1fr;grid-template-rows:81px 81px;gap:9px}.instrument-control{padding:11px 9px 5px}.instrument-cta,[dir=rtl] .instrument-cta{left:22px;right:22px;top:341px;width:calc(100% - 44px);height:44px}.instrument-secondary,[dir=rtl] .instrument-secondary{left:22px;right:22px;top:397px;width:calc(100% - 44px);min-height:32px}.hero-copy,[dir=rtl] .hero-copy{min-height:340px}.instrument-value{font-size:49px}.route-card .card-title{font-size:14px}.route-card .card-description{font-size:13px}.reference-copy-note{font-size:10px}.review-tools>div{flex-basis:100%}}
@media(max-width:360px){.instrument-controls,[dir=rtl] .instrument-controls{left:17px;right:17px;gap:7px}.instrument-control{padding-inline:7px}.instrument-cta,[dir=rtl] .instrument-cta{left:17px;right:17px;width:calc(100% - 34px)}.instrument-secondary,[dir=rtl] .instrument-secondary{left:17px;right:17px;width:calc(100% - 34px)}}

/* Hero instrument: quiet mechanical detail in the limestone palette. */
.instrument-orbit {border-color:#a79a8038}
.instrument-orbit::after {border-color:#a79a803b}
.instrument-bezel {
  background:conic-gradient(from 25deg,#d5cdbc,#b8ae9c 58deg,#e8e2d5 115deg,#b2a792 176deg,#dbd3c3 238deg,#a99d86 302deg,#d5cdbc);
  box-shadow:0 0 0 1px #a79b85,0 7px 17px #57482e1a,inset 0 0 0 2px #f5f0e4,inset 0 0 0 5px #bdb29c,inset 0 0 0 6px #e8decb;
}
.instrument-bezel::after {
  content:"";position:absolute;inset:8px;border-radius:inherit;pointer-events:none;
  background:repeating-conic-gradient(from -.16deg,#75695066 0deg .32deg,transparent .32deg 6deg);
  mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  opacity:.42;
}
.instrument-face {
  background:radial-gradient(ellipse at 45% 20%,#fcf9f0,#f3eee3 68%,#e9e1d2);
  border-color:#b3a58c;
  box-shadow:0 0 0 2px #f7f0e1,inset 0 1px 5px #79654610;
}
.instrument-readout .eyebrow {color:#6c6252;letter-spacing:.14em;font-weight:500}
.instrument-value {color:#3c362d}
.readout-currency {color:#796e5b}
.instrument-control {
  border-color:#c4b8a2;
  background:linear-gradient(135deg,#fffaf254,#ebe3d638);
  box-shadow:inset 0 1px 0 #fffaf370;
}
.instrument-control label {color:#645b4c;font-weight:500}
.number-line input {color:#3c362d}
.number-line>span {color:#726856}
.instrument-control input[type=range] {appearance:none;-webkit-appearance:none;background:transparent;accent-color:#746a58}
.instrument-control input[type=range]::-webkit-slider-runnable-track {height:3px;border:0;border-radius:2px;background:linear-gradient(to right,#746a58 0 var(--fill),#c5bba8 var(--fill) 100%)}
.instrument-control input[type=range]::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:11px;height:11px;margin-top:-4px;border:1px solid #776b55;border-radius:50%;background:#f8f2e5;box-shadow:0 1px 2px #60503833}
.instrument-control input[type=range]::-moz-range-track {height:3px;border:0;border-radius:2px;background:#c5bba8}
.instrument-control input[type=range]::-moz-range-progress {height:3px;border-radius:2px;background:#746a58}
.instrument-control input[type=range]::-moz-range-thumb {width:11px;height:11px;box-sizing:border-box;border:1px solid #776b55;border-radius:50%;background:#f8f2e5;box-shadow:0 1px 2px #60503833}
[dir=rtl] .instrument-control input[type=range]::-webkit-slider-runnable-track {background:linear-gradient(to left,#746a58 0 var(--fill),#c5bba8 var(--fill) 100%)}
.instrument-cta {
  background:#746a58;color:#fbf8ef;border-color:#695e4c;
  box-shadow:inset 0 1px 0 #ffffff16;
  transition:background-color 160ms ease,border-color 160ms ease;
}
.instrument-cta:hover {background:#5e5546;color:#fbf8ef;border-color:#5e5546}
.instrument-cta:active {background:#514839}
.instrument-cta:focus-visible,.instrument-control input:focus-visible {outline:2px solid #776a50;outline-offset:3px}
.instrument-secondary {color:#736650;text-decoration-color:#aa9c81}
@media(max-width:680px){
 .instrument-bezel,[dir=rtl] .instrument-bezel {box-shadow:0 0 0 1px #a79b85,0 7px 17px #57482e1a,inset 0 0 0 2px #f5f0e4}
 .instrument-bezel::after {display:none}
 .instrument-face,[dir=rtl] .instrument-face {box-shadow:none}
 .instrument-control input[type=range]::-webkit-slider-thumb {width:13px;height:13px;margin-top:-5px}
 .instrument-control input[type=range]::-moz-range-thumb {width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){.instrument-cta {transition:none}}

/* Coherent finishing details: clear type, warm metal, usable phone navigation. */
:root {--action-metal:#746a58;--action-metal-hover:#5e5546;--focus-metal:#776a50;--text-secondary:#625a4e;--border-metal:#b0a18a}
.menu-toggle {display:none}
.route-card {border-color:var(--border-metal);box-shadow:inset 0 1px 0 #fffaf3b3}
.route-card .photo-slot::after {content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #f8f0dd24}
.route-card:hover,.route-card:focus-visible {border-color:#85745a;box-shadow:0 2px 8px #5d4c351a}
.route-card:hover img {transform:none}
.card-icon {color:#75654b;border-color:#b2a184;background:linear-gradient(135deg,#fbf6e9,#e0d4bf);box-shadow:inset 0 0 0 2px #f4ecdd,0 1px 2px #69533817}
.number-line input,.instrument-value {font-variant-numeric:tabular-nums}
.primary-nav a,.primary-nav button,.footer-nav a,.footer-nav button {text-underline-offset:5px;text-decoration-thickness:1px}
.primary-nav a:hover,.primary-nav button:hover,.footer-nav a:hover,.footer-nav button:hover {text-decoration:underline}
.primary-nav a:focus-visible,.primary-nav button:focus-visible,.footer-nav a:focus-visible,.footer-nav button:focus-visible {outline-offset:1px}
.primary-nav a,.primary-nav button {min-height:30px;display:flex;align-items:center}
.route-card:focus-visible {outline:2px solid var(--focus-metal);outline-offset:3px}
.instrument-controls:focus-within {z-index:9}
dialog {border-color:var(--border-metal);background:#f2ece1;box-shadow:0 24px 75px #42372330}
dialog::backdrop {background:#36302666;backdrop-filter:blur(4px)}
.dialog-close:hover {background:#e4dac9}
.contact-options button {border-color:#b7aa93;background:#faf6ed}
.contact-options button:hover,.contact-options button[aria-pressed=true] {background:#e4dac9;border-color:#817158}
.contact-options button:focus-visible {outline-color:var(--focus-metal)}
dialog .button {background:var(--action-metal);color:#fbf8ef;border-color:#695e4c;min-height:44px}
dialog .button:hover {background:var(--action-metal-hover)}
@media(min-width:1055px){
 .primary-nav,[dir=rtl] .primary-nav {font-size:8.5px;padding-inline:24px 72px}
 .route-card .card-title {font-size:10px;letter-spacing:.06em}
 .route-card .card-description {font-size:10px;line-height:1.55;color:var(--text-secondary)}
 [dir=rtl] .route-card .card-description {font-size:11px;line-height:1.6}
 .step-copy {font-size:9px;line-height:1.5;color:var(--text-secondary)}
 [dir=rtl] .step-copy {font-size:10px}
 .approach-copy p {font-size:10.5px;line-height:1.65}
}
@media(min-width:681px) and (max-width:1054px){
 .header {gap:16px;padding-inline:20px}
 .header-brand {min-width:125px}
 .primary-nav,[dir=rtl] .primary-nav {gap:14px;font-size:10px}
 .hero-photo,[dir=rtl] .hero-photo {height:410px;min-height:410px}
 .hero-copy,[dir=rtl] .hero-copy {align-self:start;margin-top:38px}
 .hero-copy h1 {font-size:60px}
 .hero {padding-bottom:40px}
}
@media(max-width:680px){
 .header,[dir=rtl] .header {overflow:visible;z-index:30;padding-inline:16px;gap:10px}
 .header-brand {min-width:105px;flex:1}
 .header-action .outline-button,[dir=rtl] .header-action .outline-button {height:44px;width:135px;padding-inline:10px;font-size:8px}
 .menu-toggle {display:grid;place-items:center;flex:0 0 42px;width:42px;height:44px;padding:0;border:1px solid #b0a28a;background:#f1ecdf;color:#5b503f}
 .menu-lines,.menu-lines::before,.menu-lines::after {display:block;width:16px;height:1px;background:currentColor}
 .menu-lines {position:relative}
 .menu-lines::before,.menu-lines::after {content:"";position:absolute;left:0}
 .menu-lines::before {top:-5px}.menu-lines::after {top:5px}
 .navigation-open .menu-lines {background:transparent}
 .navigation-open .menu-lines::before {top:0;transform:rotate(45deg)}
 .navigation-open .menu-lines::after {top:0;transform:rotate(-45deg)}
 .primary-nav,[dir=rtl] .primary-nav {position:absolute;top:100%;inset-inline:0;margin:0;max-height:calc(100dvh - 72px);overflow:auto;padding:16px;white-space:normal;border-block:1px solid #b0a18a;background:#f1ebdf;box-shadow:0 12px 20px #493c2920;grid-template-columns:1fr 1fr;gap:0 20px;font-size:13px}
 .navigation-open .primary-nav,[dir=rtl] .navigation-open .primary-nav {display:grid}
 .primary-nav a,.primary-nav button {display:flex;justify-content:flex-start;min-height:50px;padding:12px 4px;text-align:start;border-bottom:1px solid #d4c9b6}
 .primary-nav a:nth-last-child(-n+2),.primary-nav button:nth-last-child(-n+2) {border-bottom:0}
 .hero-copy,[dir=rtl] .hero-copy {min-height:318px}
 .route-card .card-title {font-size:14px;letter-spacing:.035em}
 [dir=rtl] .route-card .card-title {font-size:18px;letter-spacing:0}
 [dir=rtl] .route-card .card-description {font-size:14px}
 .instrument-control input[type=range] {height:24px;margin-top:0}
}
@media(max-width:360px){
 .header,[dir=rtl] .header {gap:8px;padding-inline:14px}
 .header-brand {min-width:98px}
 .header .wordmark,[dir=rtl] .header .wordmark {font-size:30px}
 .header-action .outline-button,[dir=rtl] .header-action .outline-button {width:118px;font-size:7px}
 .menu-toggle {flex-basis:40px;width:40px}
}
@media(prefers-reduced-motion:reduce){
 html {scroll-behavior:auto}
 .route-card,.route-card img,.outline-button {transition:none}
}

/* Original instrument form, recoloured for light limestone. */
.instrument-bezel {
  background:conic-gradient(from 8deg,#ede5d5,#a7977e 48deg,#e2d7c1 89deg,#8b7a61 147deg,#dbceb5 195deg,#a09076 242deg,#f1e7d3 292deg,#b2a28a 342deg,#ede5d5);
  box-shadow:0 0 0 1px #88775e,0 0 0 3px #eee5d5,0 0 0 4px #b3a48b,0 7px 16px #6c573a24,inset 0 0 0 2px #faf2e1,inset 0 0 0 4px #96846a,inset 0 0 0 6px #e7dbc4;
}
.instrument-bezel::after {display:none}
.dial-graduations {position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.instrument-face {
  left:227px;top:66px;width:356px;height:356px;
  background:radial-gradient(ellipse at 46% 25%,#fcf9f0,#f2ecdf 75%,#e4d8c3);
  border:1px solid #a39171;
  box-shadow:0 0 0 1px #eee0c5,0 0 0 3px #b4a184,0 0 0 4px #f5ead3,inset 0 2px 10px #8a70421c;
}
[dir=rtl] .instrument-face {left:146px}
.needle {
  display:block;left:398px;top:31px;width:14px;height:55px;
  background:linear-gradient(90deg,#766046,#bba17a 38%,#fff1cc 49%,#c9ac80 58%,#7f6546);
  clip-path:polygon(50% 0,94% 13%,50% 100%,6% 13%);
  filter:drop-shadow(1px 2px 1px #5e483744);pointer-events:none;
}
.needle::before {content:none}
[dir=rtl] .needle {left:317px}
@media(min-width:681px) and (max-width:1054px){
 .instrument-face,[dir=rtl] .instrument-face {left:72px;top:47px;width:416px;height:416px}
 .needle,[dir=rtl] .needle {left:272px;top:7px;width:16px;height:61px}
}
@media(max-width:680px){
 .instrument-bezel,[dir=rtl] .instrument-bezel {box-shadow:0 0 0 1px #a18d6e,0 0 0 3px #f0e7d7,0 6px 14px #6c573a1c,inset 0 0 0 2px #efe4cf}
 .dial-graduations {display:none}
 .instrument-face,[dir=rtl] .instrument-face {left:8px;top:8px;width:calc(100% - 16px);height:434px;border-radius:23px;box-shadow:inset 0 1px 5px #8a704212}
 .needle,[dir=rtl] .needle {left:calc(50% - 5px);top:1px;width:10px;height:24px}
}
/* A circular mobile instrument with a full-sized action immediately below. */
@media(max-width:680px){
 .instrument-field,[dir=rtl] .instrument-field {--dial-size:calc(100vw - 28px);height:calc(var(--dial-size) + 112px);margin-bottom:22px}
 .instrument-orbit,[dir=rtl] .instrument-orbit {left:-8px;top:-8px;width:calc(100% + 16px);height:calc(var(--dial-size) + 16px);border-radius:50%;box-shadow:none}
 .instrument-bezel,[dir=rtl] .instrument-bezel {left:0;top:0;width:100%;height:var(--dial-size);border-radius:50%;box-shadow:0 0 0 1px #9b876b,0 0 0 3px #f0e7d7,0 6px 14px #6c573a1c,inset 0 0 0 2px #efe4cf}
 .dial-graduations {display:block}
 .instrument-face,[dir=rtl] .instrument-face {left:6.6%;top:calc(var(--dial-size) * .066);width:86.8%;height:calc(var(--dial-size) * .868);border-radius:50%;box-shadow:0 0 0 1px #eee0c5,0 0 0 2px #b4a184,inset 0 2px 8px #8a704216}
 .needle,[dir=rtl] .needle {left:calc(50% - 5px);top:1px;width:10px;height:30px}
 .instrument-readout,[dir=rtl] .instrument-readout {left:10%;right:10%;top:calc(var(--dial-size) * .12);width:80%}
 .instrument-readout .eyebrow:first-child {display:none}
 .instrument-readout .eyebrow {font-size:8px;line-height:1.4;margin-bottom:4px;letter-spacing:.08em}
 [dir=rtl] .instrument-readout .eyebrow {font-size:10px;letter-spacing:0}
 .instrument-value {font-size:clamp(36px,11.3vw,44px);line-height:1;margin-top:3px}
 .instrument-controls,[dir=rtl] .instrument-controls {left:16%;right:16%;top:calc(var(--dial-size) * .325);width:68%;grid-template-columns:1fr 1fr;grid-template-rows:64px 64px;gap:6px}
 .instrument-control {padding:4px 6px 0}
 .instrument-control label {font-size:7px;line-height:1.1;letter-spacing:.015em;margin-bottom:0;min-height:10px}
 [dir=rtl] .instrument-control label {font-size:8px}
 .number-line input {font-size:16px;height:20px}
 .number-line>span {font-size:6px}
 .instrument-control input[type=range] {height:24px;margin:0}
 .instrument-cta,[dir=rtl] .instrument-cta {left:16px;right:16px;top:calc(var(--dial-size) + 18px);width:calc(100% - 32px);height:44px;padding-inline:16px;font-size:9px}
 .instrument-secondary,[dir=rtl] .instrument-secondary {left:16px;right:16px;top:calc(var(--dial-size) + 71px);width:calc(100% - 32px);min-height:32px;font-size:9px}
}
@media(max-width:360px){.instrument-controls,[dir=rtl] .instrument-controls {grid-template-rows:60px 60px;gap:4px}.instrument-control {padding-inline:3px}}

/* Approved limestone refinements: deterministic production state. */
.hero-photo::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-start: 0;
  width: 14px;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgb(241 237 228 / 68%) 0%,
    rgb(241 237 228 / 36%) 44%,
    rgb(241 237 228 / 0%) 100%
  );
}
.hero-photo { border-left-color: transparent; }
html:not([dir="rtl"]) .instrument-field { border-right-color: transparent; }
[dir="rtl"] .hero-photo {
  border-left: 0;
  border-right-color: transparent;
}
[dir="rtl"] .hero-photo::before {
  left: auto;
  right: 0;
  background: linear-gradient(
    to left,
    rgb(241 237 228 / 68%) 0%,
    rgb(241 237 228 / 36%) 44%,
    rgb(241 237 228 / 0%) 100%
  );
}

.instrument-bezel {
  background: conic-gradient(
    from 8deg,
    #e6dcc8 0deg,
    #b9a98f 43deg,
    #d6cab3 91deg,
    #a08f73 151deg,
    #d8cbb3 205deg,
    #aa997d 267deg,
    #eadfcb 318deg,
    #e6dcc8 360deg
  );
  box-shadow:
    0 0 0 1px #88775e,
    0 0 0 3px #eee5d5,
    0 7px 16px rgb(108 87 58 / 11%),
    inset 0 0 0 2px #faf2e1,
    inset 0 0 0 4px #96846a;
}
.instrument-face {
  background: radial-gradient(ellipse at 46% 25%, #fcf9f0, #f2ecdf 75%, #e4d8c3);
  box-shadow: 0 0 0 1px #eee0c5, 0 0 0 3px #b4a184, inset 0 2px 10px rgb(138 112 66 / 11%);
}
.dial-graduations { shape-rendering: geometricPrecision; }
.dial-graduations circle,
.dial-graduations line { vector-effect: non-scaling-stroke; }
.dial-graduations line {
  stroke: #74654f;
  stroke-width: .5;
  stroke-opacity: .44;
}
.dial-graduations .dial-tick--major {
  stroke-width: .75;
  stroke-opacity: .7;
}
.dial-graduations .dial-tick--precision-hidden,
.dial-graduations text { display: none; }

@media (min-width: 1055px) {
  .instrument-readout { left: 244px; }
  .instrument-cta { left: 288px; width: 234px; }
  .instrument-secondary { left: 320px; }
  [dir="rtl"] .instrument-readout { left: 163px; }
  [dir="rtl"] .instrument-cta { left: 207px; width: 234px; }
  [dir="rtl"] .instrument-secondary { left: 239px; }
}

@media (min-width: 681px) and (max-width: 1054px) {
  .hero-photo::before { width: 12px; }
}

@media (max-width: 680px) {
  .number-line input { height: 24px; }
}

@media (max-width: 430px) {
  .dial-graduations .dial-tick--compact-hidden { display: none; }
}

@media (max-width: 360px) {
  .number-line {
    display: flex;
    align-items: baseline;
    gap: 1px;
  }
  /* English leaves slack at the end of the flexible field; Arabic aligns the digits to the unit, so they need the gap back. */
  [dir="rtl"] .number-line { gap: 3px; }
  .number-line input {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    padding-inline-end: 0;
    font-size: 16px;
  }
  .number-line > span {
    position: static;
    flex: 0 0 auto;
    font-size: 6px;
  }
}

@media (max-width: 680px), (forced-colors: active) {
  .hero-photo::before { display: none; }
}

@media (forced-colors: active) {
  .instrument-control input[type="range"] {
    forced-color-adjust: auto;
  }
  .instrument-control input[type="range"]::-webkit-slider-runnable-track {
    background: CanvasText;
    border: 1px solid CanvasText;
  }
  .instrument-control input[type="range"]::-webkit-slider-thumb {
    background: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  .instrument-control input[type="range"]::-moz-range-track {
    background: CanvasText;
    border: 1px solid CanvasText;
  }
  .instrument-control input[type="range"]::-moz-range-progress {
    background: Highlight;
  }
  .instrument-control input[type="range"]::-moz-range-thumb {
    background: Canvas;
    border: 2px solid CanvasText;
    box-shadow: none;
  }
}

/* Keep the unmirrored architectural annotation over the bright portal in RTL. */
@media (min-width: 681px) {
  [dir="rtl"] .approach-photo-note {
    left: 557px;
    right: auto;
  }
}
@media (min-width: 681px) and (max-width: 1054px) {
  [dir="rtl"] .approach-photo-note {
    /* 65% photo column × 55.4% portal offset = 36% of the section. */
    left: 36%;
    right: auto;
  }
}

/* Final operational refinements: visible locale access without changing header structure. */
.header-language {
  position: absolute;
  z-index: 4;
  inset-block-start: 16px;
  inset-inline-end: 215px;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 33px;
  padding-inline: 7px;
  border: 1px solid #8f816a;
  background: rgb(244 237 223 / 72%);
  color: #514838;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
[data-language-control] > [lang="ar"] {
  font-family: Arabic, Arial, sans-serif;
  letter-spacing: 0;
}
[data-language-control] > [lang="en"] {
  font-family: Inter, Arial, sans-serif;
  letter-spacing: .04em;
}
.header-language:hover {
  background: #ded1ba;
  color: #302f2b;
}

/* Keep financial values and sliders physically left-to-right in either locale. */
[dir="rtl"] :is(.instrument-value, .number-line, .instrument-control input[type="range"]) {
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] :is(.instrument-value, .number-line input) {
  font-variant-numeric: tabular-nums;
}
[dir="rtl"] .instrument-control input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #746a58 0 var(--fill), #c5bba8 var(--fill) 100%);
}
@media (forced-colors: active) {
  [dir="rtl"] .instrument-control input[type="range"]::-webkit-slider-runnable-track {
    background: CanvasText;
  }
}

@media (min-width: 1055px) {
  .primary-nav > a,
  .primary-nav > button,
  .header-action .outline-button {
    font-size: 10px;
  }
  .instrument-control label,
  [dir="rtl"] .instrument-control label { font-size: 9px; }
  .number-line > span { font-size: 8px; }
}

@media (max-width: 1054px) {
  .header-language {
    position: static;
    flex: 0 0 auto;
    min-width: 42px;
    height: 40px;
  }
}

html[data-text-reflow="true"] .header-language {
  position: static;
  flex: 0 0 auto;
  min-width: 44px;
  height: 44px;
}

/* Protect the 681px side of the existing navigation breakpoint. */
@media (min-width: 681px) and (max-width: 768px) {
  .header,
  [dir="rtl"] .header {
    gap: 6px;
    padding-inline: 12px;
  }
  .header-brand { min-width: 105px; }
  .primary-nav,
  [dir="rtl"] .primary-nav { gap: 5px; }
}

@media (max-width: 680px) {
  .header-language {
    min-width: 42px;
    height: 44px;
    padding-inline: 6px;
  }
}

/* At the narrowest phones, retain brand, locale and menu without overlap. */
@media (min-width: 361px) and (max-width: 389px) {
  .header,
  [dir="rtl"] .header {
    gap: 5px;
    padding-inline: 10px;
  }
  .header-language { min-width: 34px; padding-inline: 3px; }
}
@media (max-width: 360px) {
  .header,
  [dir="rtl"] .header {
    gap: 3px;
    padding-inline: 8px;
  }
  .header-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header .wordmark,
  [dir="rtl"] .header .wordmark { font-size: 28px; }
  .header-action { flex: 0 0 100px; }
  .header-action .outline-button,
  [dir="rtl"] .header-action .outline-button {
    width: 100px;
    padding-inline: 6px;
    gap: 3px;
    font-size: 7px;
    letter-spacing: .02em;
  }
  .header-action .outline-button > span:last-child { font-size: 12px; }
  .header-language {
    flex-basis: 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    padding-inline: 2px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-language { transition: none; }
}


/* Production hardening: initial geometry, fail-safe controls and native fallbacks. */
@media (min-width:1055px){.stage{zoom:calc(100vw / 1055px)}}
[dir=rtl] body{font-family:Arabic,Arial,sans-serif}
[data-language-control],[data-language-control]>[lang]{font-family:Arial,sans-serif;letter-spacing:0}
[dir=rtl] .readout-currency,[dir=rtl] .review-tools{font-family:Arabic,Arial,sans-serif}
.calculator-fallback,.calculator-error{margin:5px auto 0;max-width:255px;color:#6d4935;font:600 8px/1.35 var(--sans);letter-spacing:.01em;text-align:center}
[dir=rtl] .calculator-fallback,[dir=rtl] .calculator-error{font-family:Arabic,Arial,sans-serif;letter-spacing:0}
#calculator[data-calculator-ready=true] .calculator-fallback,.calculator-fallback[hidden],.calculator-error[hidden]{display:none}
#calculator:not([data-calculator-ready=true]) .instrument-controls{opacity:.64}
#calculator:not([data-calculator-ready=true]) .instrument-secondary{pointer-events:none;opacity:.64}
@media(max-width:680px){.primary-nav:target,[dir=rtl] .primary-nav:target{display:grid}.header[data-navigation-enhanced=true]:not(.navigation-open) .primary-nav:target,[dir=rtl] .header[data-navigation-enhanced=true]:not(.navigation-open) .primary-nav:target{display:none}.calculator-fallback,.calculator-error{font-size:10px;max-width:280px}}
/* Mobile readability candidate (proposal until owner approval): raises the smallest operational text at 680px and below.
   At normal size the boxes do not move: label, readout-title and unit line boxes are set as ratios of their font size that give exactly the
   accepted heights (10px, 11.2px, 14px), so the inputs, sliders and the amount stay where they were, and because they are ratios they grow with
   the text when it is enlarged, letting the text-reflow fallback in app.js see a control that no longer fits its cell. Each size is the largest
   that keeps its text unclipped, within its own box, within about 2px of the dial edge for the readout title, clear of header neighbours, and
   does not trigger the text-reflow fallback (measured in Chromium, Firefox and WebKit at 320 to 680px, English and Arabic). 320px is a supported
   width, so at 360px and below the cell gives back some of its own spacing (inline padding 3px, 4px between the cells, 1px between the number and
   its unit, 3px in Arabic because it aligns its digits to the unit): that fits the largest price (12,000,000, eight digits) with at least 1px to
   spare from 320px, where the accepted baseline clips it, and lifts the units from a flat 6px to 6.5px at 320px reaching 10px at 345px. The
   decorative header call-to-action arrow
   (aria-hidden) is hidden so the text has the full box; the English text may wrap to two lines inside the unchanged 44px box.
   Sizes are product proposals, not a claim that WCAG prescribes font sizes. Copy, control meaning, hit areas and the instrument geometry are
   unchanged. English calculator labels and the readout title use sentence case without tracking on mobile only, so they fit the dial. */
@media (max-width: 680px) {
  .header-language { font-size: 12px; }
  .header-action .outline-button > span:last-child { display: none; }
  .header-action .outline-button { font-size: 12px; }
  [dir="rtl"] .header-action .outline-button { font-size: 10px; }
  .instrument-control label { font-size: 11px; line-height: .91; letter-spacing: 0; text-transform: none; }
  [dir="rtl"] .instrument-control label { font-size: 12px; line-height: .8333; }
  .number-line > span { font-size: clamp(6.5px, calc(6.5px + (100vw - 320px) * .14), 10px); line-height: 1; }
  .instrument-readout .eyebrow { font-size: 9px; line-height: 1.2444; letter-spacing: 0; text-transform: none; }
  [dir="rtl"] .instrument-readout .eyebrow { line-height: 1.4; }
  .instrument-secondary,
  [dir="rtl"] .instrument-secondary { font-size: 12px; }
  .instrument-cta,
  [dir="rtl"] .instrument-cta,
  .cta-action .outline-button,
  [dir="rtl"] .cta-action .outline-button,
  .approach-copy .outline-button,
  [dir="rtl"] .approach-copy .outline-button { font-size: 12px; }
}
@media (max-width: 360px) {
  .header-language { font-size: 11px; }
}
@media (min-width: 360px) and (max-width: 680px) {
  .instrument-control label { font-size: 12px; line-height: .8333; }
  .number-line > span { font-size: 10px; }
  .instrument-readout .eyebrow { font-size: 10px; line-height: 1.12; }
  [dir="rtl"] .instrument-readout .eyebrow { font-size: 11px; line-height: 1.2727; }
}
@media (min-width: 375px) and (max-width: 680px) {
  [dir="rtl"] .header-action .outline-button { font-size: 12px; }
}
@media (min-width: 430px) and (max-width: 680px) {
  .instrument-readout .eyebrow { font-size: 11px; line-height: 1.0182; }
}
/* Accessible reflow: the header call to action may shrink and wrap, so larger text never pushes it past the viewport edge. */
@media (max-width: 1054px) {
  html[data-text-reflow="true"] .header-action { flex: 0 1 auto; min-width: 0; max-width: 100%; }
  html[data-text-reflow="true"] .header-action .outline-button { max-width: 100%; }
  html[data-text-reflow="true"] .header-action .outline-button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
}
/* Calculator targets at desktop widths: real 24 by 24 CSS px hit areas without moving anything painted. The number input grows upward
   into the gap under its label (padding and an equal negative margin keep its text where it was) and the slider grows equally above and
   below its centre line (its visible track stays put), so the two touch but never overlap. The slider is lifted just above the cell below it, which the
   Arabic layout's lower slider otherwise overlaps by 1px. In the reflow layout the number input change is reset. */
@media (min-width: 1055px) {
  .number-line input { box-sizing: border-box; height: 24px; padding-top: 5px; margin-top: -5px; }
  .instrument-control input[type="range"] { height: 24px; margin: 0; position: relative; z-index: 1; }
  html[data-text-reflow="true"] .number-line input { padding: 0; margin: 0; }
}

/* The number input sits directly under its label with no gap, and its own box holds the digits and the unit, so a ring drawn on the input
   crosses the label's letters above it (and, once the box was grown to a 24px target, the digits inside it). The ring is therefore drawn on
   the cell, which is the nearest box with nothing painted against its edge, in both languages and at every width. :has() guards both rules,
   so an engine without it keeps the input's own ring rather than none. The slider keeps its own ring, so the two are still told apart. */
.instrument-control:has(.number-line input:focus-visible) { outline: 2px solid #776a50; outline-offset: 2px; }
@media (max-width: 360px) {
  .instrument-control:has(.number-line input:focus-visible) { outline-offset: 1px; }
}
/* The strict suite requires every focusable control to paint its own two-pixel outline under forced colours, where the
   platform convention is a per-control indicator, so the input's own ring is only stood down outside that mode. In forced
   colours it still crosses the label, exactly as the accepted baseline does at every width. */
@media (forced-colors: none) {
  .instrument-control:has(.number-line input:focus-visible) .number-line input:focus-visible { outline: none; }
}
/* The slider's box touches the bottom of the row above it, so its ring is drawn just inside its own box; at any
   outward offset the band would reach back over the digits. */
.instrument-control input[type="range"]:focus-visible { outline-offset: -2px; }


/* Owner-directed bank references: compact text only, never lender logos or a panel claim. */
.lender-logos {grid-template-columns:repeat(9,minmax(0,1fr))}
.lender-slot {min-width:0;padding-inline:2px;font-family:var(--sans);font-size:8px;line-height:1.15;letter-spacing:.01em;text-align:center;text-transform:none}
[dir=rtl] .lender-slot {font-family:Arabic,Arial,sans-serif}
[dir=rtl] .lender-name {font-family:Arial,sans-serif}
.lender-name {display:block;direction:ltr;unicode-bidi:isolate;overflow-wrap:anywhere}
@media(min-width:681px) and (max-width:1054px){
  .lender-band {grid-template-rows:auto auto}
  .lender-outro,[dir=rtl] .lender-outro {display:flex;grid-column:1/-1;justify-content:flex-end;min-height:28px;padding:7px 22px 0;border:0;border-top:1px solid var(--line-soft);font-size:8px;line-height:1.35;letter-spacing:.1em}
  [dir=rtl] .lender-outro {justify-content:flex-start;padding-inline:22px;letter-spacing:0}
}
@media(max-width:680px){
  .lender-logos {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;justify-content:stretch}
  .lender-slot {display:grid;width:auto;min-height:18px;margin:0;place-items:center;gap:0;font-size:8px;justify-content:center;text-align:center}
  .lender-slot:last-child {margin:0}
  .lender-outro,[dir=rtl] .lender-outro {display:block;margin-top:14px;padding:12px 0 0;border:0;border-top:1px solid var(--line-soft);font-size:8px;line-height:1.45;letter-spacing:.1em;text-align:start}
  [dir=rtl] .lender-outro {letter-spacing:0;text-align:right}
}
@media(max-width:360px){.lender-slot {font-size:7px}}

/* Premium v2, Phase 1 (owner-approved plan items).
   BR3/CP5: the hero support line is now a full positioning sentence rather than a short slogan tag,
   so it keeps its original size and spacing at each width but drops the all-caps/wide-tracking
   styling that suited a two-word tag, not a sentence. VD3 (quiet hero) was rejected, so the hero
   keeps its other original lines too (subtitle, scroll link, coordinates, duplicate readout label).
   VD4: headings use sentence case, including the closing band. */
/* AR4: the calculator frame's border is already hidden in English (line 224); hide it in Arabic too,
   where it otherwise ran through the hero text. */
[dir=rtl] .instrument-field{border-right-color:transparent}
.hero-support,[dir=rtl] .hero-support{text-transform:none;letter-spacing:0;font-weight:400}
.approach-copy h2{text-transform:none}
.cta-copy,[dir=rtl] .cta-copy{margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.footer-language{display:inline-flex;align-items:center}

/* The approved symbol and custom DarMor lettering are one horizontal asset. */
.wordmark,
[dir=rtl] .wordmark {
  display: inline-flex;
  align-items: center;
  width: 154px;
  height: 44px;
  padding: 0;
  background: none;
  direction: ltr;
}
.wordmark img { display: block; width: 100%; height: auto; object-fit: contain; }
.lender-outro, [dir=rtl] .lender-outro { font-size: 9px; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.header-brand .wordmark { top: 10px; }
.footer-brand .wordmark { top: 19px; }
.header-brand .brand-descriptor { left: 200px; }
.footer-brand .brand-descriptor { left: 210px; }
[dir=rtl] .header-brand .wordmark { right: 32px; left: auto; }
[dir=rtl] .footer-brand .wordmark { right: 36px; left: auto; }
[dir=rtl] .header-brand .brand-descriptor { right: 200px; left: auto; }
[dir=rtl] .footer-brand .brand-descriptor { right: 210px; left: auto; }
@media (max-width: 1054px) {
  .header .wordmark, [dir=rtl] .header .wordmark { width: 135px; min-height: 44px; }
  .footer .wordmark, [dir=rtl] .footer .wordmark { width: 135px; min-height: 44px; }
}
@media (max-width: 680px) {
  .lender-outro, [dir=rtl] .lender-outro { font-size: 10px; }
  [dir=rtl] .lender-outro { line-height: 1.6; padding-bottom: 4px; }
  .header .wordmark, [dir=rtl] .header .wordmark { width: 108px; min-height: 44px; }
  .footer .wordmark, [dir=rtl] .footer .wordmark { width: 108px; min-height: 44px; }
  .footer-brand .brand-descriptor { left: 143px; }
  [dir=rtl] .footer-brand .brand-descriptor { right: 143px; left: auto; }
}
@media (min-width: 361px) and (max-width: 405px) {
  [dir=rtl] .header .wordmark { width: 100px; }
  [dir=rtl] .header-action .outline-button { width: 110px; padding-inline: 6px; gap: 3px; font-size: 10px; }
}
@media (max-width: 360px) {
  [dir=rtl] .header .wordmark { width: 88px; }
}

/* Match the Arabic hero paragraph's temporary Arial fallback width to the
   approved font, preventing an extra line from moving the calculator on load. */
@font-face{font-family:ArabicHeroFallback;src:local(Arial);size-adjust:120.071%}
[dir=rtl] .hero-support{font-family:Arabic,ArabicHeroFallback,Arial,sans-serif}