body[data-page="frameworks"] .site-header { position:relative; background:var(--navy); }
.framework-model-page { background:#f5f7f8; color:var(--navy); padding-bottom:64px; }
.framework-model-page h1,.framework-model-page h2,.framework-model-page h3,.framework-model-page h4 { font-family:"Montserrat",sans-serif; letter-spacing:-.025em; }
.fm-intro { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:44px 32px; }
.fm-intro h1 { font-size:clamp(30px,3.4vw,49px); line-height:1.14; margin:10px 0 16px; }
.fm-intro .eyebrow { color:#16756f; margin:0; }
.fm-lead { max-width:810px; font-size:20px; line-height:1.5; margin:0; color:#435963; }
.fm-directory-action { margin-block-start:20px; }
.fm-numbers { display:flex; gap:28px; flex-shrink:0; border-inline-start:1px solid #c4d9dc; padding-inline-start:30px; }
.fm-numbers b { display:block; font-size:43px; line-height:1.2; font-weight:600; }
.fm-numbers span { display:block; font-size:14px; color:#4c6570; }
.fm-section-heading { max-width:815px; margin-bottom:28px; }
.fm-section-heading h2 { font-size:clamp(26px,3vw,36px); margin:8px 0 12px; line-height:1.22; }
.fm-section-heading p { color:#4d626a; font-size:18px; line-height:1.55; margin:0; }
.fm-section-heading .eyebrow { font-size:12px; color:#16756f; }
.fm-explanation { margin-top:65px; }
.fm-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.fm-steps article { border-top:1px solid #c6dadd; padding:22px 0 0; }
.fm-steps h3 { font-size:19px; margin:16px 0 12px; }
.fm-steps p { font-size:17px; line-height:1.55; margin:0; color:#4b6069; }
.fm-architecture { display:block; width:57px; height:32px; background:var(--teal-deep); }
.fm-architecture--roof { clip-path:polygon(50% 0,100% 95%,100% 100%,0 100%,0 95%); }
.fm-architecture--pillars { background:repeating-linear-gradient(90deg,#0b3944 0 8px,transparent 8px 12px); }
.fm-architecture--base { background:linear-gradient(transparent 20px,#159a91 20px 24px,#0b3944 24px); }
.fm-example { margin-top:28px; border-inline-start:3px solid #159a91; background:#e6f2f2; padding:22px 26px; border-radius:0 8px 8px 0; }
.fm-example strong { font-size:18px; }
.fm-example p { margin:8px 0 0; color:#38535f; font-size:17px; line-height:1.55; }
.fm-catalogue { margin-top:64px; scroll-margin-top:120px; }
.fm-area { border:1px solid #cedfe1; border-radius:10px; margin-top:12px; background:white; scroll-margin-top:120px; }
.fm-area>summary { padding:20px 24px; display:flex; gap:18px; align-items:center; cursor:pointer; list-style:none; }
.fm-area>summary::-webkit-details-marker { display:none; }
.fm-area>summary h3 { font-size:21px; margin:0; flex:1; line-height:1.3; }
.fm-summary-number { color:#16857d; font-size:24px; min-width:32px; }
.fm-area-count { font-size:14px; color:#52707b; white-space:nowrap; }
.fm-plus { position:relative; display:block; width:20px; height:20px; flex-shrink:0; }
.fm-plus:before,.fm-plus:after { content:""; position:absolute; background:#126a68; width:14px; height:2px; left:3px; top:9px; }
.fm-plus:after { transform:rotate(90deg); transition:transform .2s; }
.fm-area[open] .fm-plus:after { transform:rotate(0); }
.fm-area[open]>summary { border-bottom:1px solid #e1edef; }
.fm-area>summary:hover { background:#f0f8f8; border-radius:10px; }
.fm-area>summary:focus-visible { outline:3px solid #159a91; outline-offset:3px; }
.fm-area-content { padding:24px; }
.fm-connection { margin:0 0 22px; color:#4e646d; font-size:17px; line-height:1.5; max-width:980px; }
.fm-connection strong { color:var(--navy); display:block; margin-bottom:5px; }
.fm-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.fm-card { display:flex; flex-direction:column; padding:22px; background:#f2f7f8; border:1px solid #dbe7e9; border-radius:9px; scroll-margin-top:120px; }
.fm-card-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.fm-soon { color:#536f79; font-size:12px; }
.fm-card h4 { font-size:21px; line-height:1.28; margin:0 0 14px; }
.fm-card p { font-size:17px; line-height:1.5; color:#526975; margin:0; }
.fm-card--ready { background:var(--navy); color:white; border-top:3px solid var(--teal); }
.fm-card--ready .fm-code { color:#5edbcf; }
.fm-card--ready p { color:#cadce1; }
.fm-card-link { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:24px; color:#69e3d7; font-size:16px; font-weight:600; }
.fm-card:target,.fm-card:focus-visible { outline:3px solid var(--teal-deep); outline-offset:3px; }
.fm-card a:hover { text-decoration:underline; text-underline-offset:5px; }
.fm-contact { margin-top:40px; padding:30px; background:#e0f1f0; border-radius:10px; display:flex; align-items:center; gap:24px; justify-content:space-between; }
.fm-contact h2 { font-size:25px; line-height:1.3; margin:0 0 10px; }
.fm-contact p { font-size:17px; margin:0; max-width:700px; color:#36555f; }
.fm-contact .button { white-space:nowrap; }
.fm-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.fm-context { padding:15px 24px; background:#e7f4f3; color:#164653; font-size:15px; }
.fm-context .container { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.fm-context a { text-decoration:underline; text-underline-offset:3px; }
html[lang="ar"] .framework-model-page :is(h1,h2,h3,h4) { font-family:"Adelle Sans ARA",Tahoma,sans-serif; letter-spacing:0; }
/* A single architectural drawing, scaled as a whole at every viewport.
   Explicit grid rows prevent native button layout from centring shorter columns. */
.fm-explorer.container { width:min(calc(100% - 48px),1720px); display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; }
.fm-visual { min-width:0; position:relative; }
.fm-figure { margin:0; border:1px solid #365660; border-radius:12px; background:linear-gradient(145deg,#112d36,#06131b 75%); color:#fff; box-shadow:0 20px 50px #06131b24; }
.fm-stage-toolbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 22px; border-radius:12px 12px 0 0; background:#0b1d26f5; border-bottom:1px solid #35545f; }
.fm-stage-toolbar>span { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#aebbc2; }
.fm-stage-actions,.fm-expanded-actions { display:flex; align-items:center; gap:8px; }
.fm-stage-toolbar button,.fm-expanded-toolbar button,.fm-reset { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:1px solid #609099; border-radius:6px; padding:9px 12px; background:#ffffff09; color:#fff; font:600 14px/1.3 'Source Sans 3',sans-serif; cursor:pointer; }
.fm-stage-toolbar button:hover,.fm-expanded-toolbar button:hover { background:#17434d; }
.fm-stage-toolbar svg { width:18px; height:18px; }
.fm-building { position:relative; padding:28px 30px 32px; isolation:isolate; direction:ltr; }
.fm-house-canvas { position:relative; display:block; width:var(--model-canvas-width,100%); height:var(--model-canvas-height,960px); margin-inline:auto; }
.fm-house { position:absolute; inset:0 auto auto 0; width:1440px; min-width:1440px; transform:scale(var(--model-scale,.75)); transform-origin:top left; }
.fm-house-columns { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:stretch; gap:20px; padding:0 18px; z-index:3; }
.fm-house-part { appearance:none; position:relative; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; width:100%; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transform-origin:50% 50%; transition:transform .38s cubic-bezier(.2,.75,.2,1),box-shadow .3s; }
.fm-house-part:focus-visible { outline:4px solid #5ee3d8; outline-offset:6px; }
.fm-part-heading { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; }
.fm-part-heading strong { font:600 32px/1.25 'Montserrat',sans-serif; letter-spacing:-.025em; }
.fm-part-number { font-size:19px; font-weight:600; color:#5ee3d8; }
.fm-part-frameworks { display:flex; margin:0; padding:0; }
.fm-part-framework { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; font:400 20px/1.3 'Source Sans 3',sans-serif; }
.fm-part-framework em { font:600 14px/1.2 'Source Sans 3',sans-serif; font-style:normal; letter-spacing:.05em; color:#5ee3d8; }
.fm-house-part--roof { height:320px; padding:136px 100px 20px; margin-bottom:17px; color:#fff; background:linear-gradient(150deg,#163e49,#06131b); clip-path:polygon(50% 0,100% 96%,100% 100%,0 100%,0 96%); border-bottom:5px solid #2ec4b6; transform-origin:center bottom; }
.fm-house-part--roof::before { content:''; position:absolute; inset:0; background:#2ec4b6; clip-path:polygon(50% 0,100% 96%,100% 98%,50% 2%,0 98%,0 96%); pointer-events:none; }
.fm-house-part--roof .fm-part-heading { flex:none; }
.fm-house-part--roof .fm-part-frameworks { flex-direction:column; align-items:center; gap:9px; margin-top:17px; }
.fm-house-part--roof .fm-part-framework { flex-direction:row; justify-content:center; gap:12px; width:100%; font-size:22px; line-height:1.3; }
.fm-house-part--roof em { border-inline-start:1px solid #2ec4b688; padding-inline-start:12px; flex:none; font-size:15px; }
.fm-house-part--pillar { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:144px minmax(580px,1fr) 20px; justify-content:stretch; align-content:stretch; align-items:stretch; height:100%; color:#112d36; background:linear-gradient(90deg,#d4dee3,#f7fafb 9%,#fff 50%,#f3f7f9 91%,#d4dee3); box-shadow:0 12px 20px #0005; }
.fm-house-part--pillar::before { content:''; position:absolute; inset:-8px -4px auto; height:8px; background:linear-gradient(#fff 0 3px,#d4dee3 3px); border-bottom:1px solid #aebbc2; }
.fm-house-part--pillar .fm-part-heading { display:grid; grid-template-rows:22px 1fr; height:144px; padding:16px 13px; gap:8px; background:linear-gradient(140deg,#112d36,#06131b); color:white; border-bottom:4px solid #2ec4b6; }
.fm-house-part--pillar .fm-part-heading strong { font-family:'Source Sans 3',sans-serif; font-size:25px; line-height:1.2; font-weight:700; letter-spacing:0; }
.fm-house-part--pillar .fm-part-frameworks { display:grid; grid-auto-rows:minmax(min-content,1fr); align-content:stretch; padding:0 17px; }
.fm-house-part--pillar .fm-part-framework { padding:10px 0; font-size:20px; line-height:1.25; }
.fm-house-part--pillar .fm-part-framework+.fm-part-framework { border-top:1px solid #c5d7dd; }
.fm-house-part--pillar .fm-part-framework em { color:#147d76; }
.fm-pillar-foot { display:block; height:20px; margin-inline:-5px; background:linear-gradient(#fff 0 3px,#d4dee3 3px 7px,#f6f8f9 7px 12px,#aebbc2 12px 16px,#d4dee3 16px); box-shadow:0 7px 8px #0003; }
.fm-house-part--base { padding:24px 26px; margin-top:10px; border-top:5px solid #2ec4b6; background:linear-gradient(130deg,#163e49,#06131b); box-shadow:0 14px 24px #0004; }
.fm-house-part--base .fm-part-frameworks { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:0 32px; margin-top:19px; }
.fm-house-part--base .fm-part-framework { font-size:21px; }
.fm-house-part--base .fm-part-framework+.fm-part-framework { border-inline-start:1px solid #2ec4b65a; padding-inline-start:24px; }
.fm-house-part--pillar.is-hovered { transform:translateY(-8px) scale(1.06); z-index:5; box-shadow:0 22px 30px #0007,0 0 0 2px #2ec4b6; }
.fm-house-part--pillar.is-selected { transform:translateY(-12px) scale(1.4); z-index:8; box-shadow:0 30px 48px #0009,0 0 0 3px #5ee3d8; }
.fm-house-part--roof.is-selected { transform:translateY(-8px) scale(1.015); }
.fm-house-part--base.is-selected { transform:translateY(6px) scale(1.015); box-shadow:0 22px 28px #0007,0 0 0 2px #2ec4b6; }
.fm-mobile-zoom,.fm-mobile-model-footer { display:none; }
.fm-panel { scroll-margin-top:24px; }
.fm-panel-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.fm-panel-toolbar .fm-selection-state { margin:0; }
.fm-panel-toolbar .fm-reset { color:#112d36; border-color:#95b9bf; flex-shrink:0; }
.fm-overview h2 { font-size:27px; }
.fm-overview p { color:#435e69; font-size:17px; line-height:1.55; }
.fm-area-guide { display:grid; gap:8px; margin-top:22px; }
.fm-area-guide button { display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:48px; background:#fff; border:1px solid #bfd6db; border-radius:6px; text-align:start; color:#112d36; font:600 16px/1.35 'Source Sans 3',sans-serif; cursor:pointer; }
.fm-area-guide b { color:#147d76; }
.fm-area-guide button:hover { border-color:#159a91; background:#e5f2f1; }
.fm-model-dialog { width:calc(100vw - 24px); max-width:1920px; height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); padding:0; border:1px solid #446f75; border-radius:12px; background:#f1f6f7; color:#06131b; overflow:hidden; }
.fm-model-dialog[open] { display:flex; flex-direction:column; }
.fm-expanded-toolbar { flex:none; position:relative; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:#06131b; color:#fff; }
.fm-expanded-toolbar strong { font:600 18px/1.3 'Montserrat',sans-serif; }
[data-expanded-slot] { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.fm-model-dialog .fm-explorer.container { width:100%; padding:22px; }
.fm-model-dialog .fm-stage-toolbar { display:none; }
body.fm-dialog-open { overflow:hidden; }
html[lang='ar'] .fm-part-heading strong,html[lang='ar'] .fm-part-framework,html[lang='ar'] .fm-preview-dialog :is(h2,h3),html[lang='ar'] .fm-expanded-toolbar strong { font-family:'Adelle Sans ARA',Tahoma,sans-serif; letter-spacing:0; }
html[lang='ar'] .fm-part-framework { line-height:1.45; }
html[lang='ar'] .fm-related svg,html[lang='ar'] .fm-card-link svg,html[lang='ar'] .fm-contact svg { transform:scaleX(-1); }
@keyframes fm-card-arrive { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes fm-preview-arrive { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:none; } }
.fm-figure figcaption { display:flex; gap:16px; justify-content:space-between; padding:18px 24px; border-top:1px solid #2f505a; font-size:14px; line-height:1.45; color:#c4dce0; }
.fm-figure figcaption strong { color:#72e1d6; flex-shrink:0; }
.fm-live-dot { display:inline-block; width:7px; height:7px; margin-inline-end:8px; border-radius:50%; background:#5ee3d8; box-shadow:0 0 12px #5ee3d8; }
.fm-panel { position:relative; padding:24px 2px 24px 8px; min-height:0; color:var(--navy); perspective:1100px; overflow:visible; }
.fm-panel section[hidden] { display:none; }
.fm-selection-state { font-size:12px; color:#456671; display:flex; align-items:center; gap:8px; margin:0 0 20px; }
.fm-selection-state::before { content:""; width:6px; height:6px; border-radius:50%; background:#8aa5ac; }
.fm-explorer[data-locked="true"] .fm-selection-state::before { background:#159a91; box-shadow:0 0 0 4px #2ec4b622; }
.fm-panel-role { font-size:12px; line-height:1.45; color:#18746e; margin:0 0 12px; }
.fm-panel h2 { display:flex; gap:12px; font-size:24px; line-height:1.25; margin:0 0 16px; }
.fm-area-number { font-family:'Source Sans 3',sans-serif; font-size:36px; font-weight:400; color:#159a91; line-height:1; }
.fm-panel-description { font-size:16px; color:#435e69; line-height:1.5; margin:0 0 25px; }
.fm-related { display:grid; list-style:none; padding:0 4px; margin:0; gap:12px; perspective:950px; }
.fm-related li { position:relative; margin:0; transform-style:preserve-3d; animation:fm-card-arrive .62s cubic-bezier(.16,.8,.24,1) both; animation-delay:calc(var(--order)*45ms); }
.fm-related a { position:relative; display:grid; grid-template-columns:45px 1fr 15px; gap:12px; align-items:center; padding:17px 14px; min-height:74px; color:#fff; background:linear-gradient(125deg,#153d49,#071d29 88%); border:1px solid #3d6972; border-inline-start:3px solid #2ec4b6; border-radius:9px; font-size:16px; line-height:1.3; box-shadow:0 12px 20px -10px #06131b80,7px 5px 0 #9fb9bf30; transform:none; transform-origin:left center; transition:transform .35s cubic-bezier(.16,.8,.24,1),box-shadow .35s,border-color .35s; }
.fm-related li:hover,.fm-related li:focus-within { z-index:5; }
.fm-related a:hover,.fm-related a:focus-visible { transform:scale(1.035); box-shadow:0 25px 32px -14px #06131b99,0 0 22px #2ec4b635; border-color:#61e7d7; outline:2px solid #2ec4b6; outline-offset:3px; }
.fm-related .fm-code { font-size:11px; color:#7deade; }
.fm-related small { display:block; color:#b7d1d5; font-size:12px; margin-top:5px; }
.fm-related svg,.fm-card svg,.fm-contact svg { width:18px; height:18px; }
.fm-mobile-select,.fm-mobile-hint { display:none; }
.fm-card-preview { background:transparent; border:1px solid #8db8bf; border-radius:5px; color:#155d62; padding:11px 14px; margin-top:22px; font:600 15px 'Source Sans 3',sans-serif; text-align:start; cursor:pointer; }
.fm-card--ready .fm-card-preview { color:#83e7da; border-color:#4a767e; }
.fm-card-preview:hover { background:#159a9114; }.fm-card-preview:focus-visible { outline:3px solid #159a91; outline-offset:3px; }
.fm-preview-dialog { border:1px solid #5c9f9e; border-radius:18px; padding:0; width:min(900px,calc(100vw - 36px)); max-height:calc(100svh - 48px); overflow:auto; background:#071923; color:#fff; box-shadow:0 45px 150px #000a,0 0 60px #2ec4b62a; }
.fm-preview-dialog::backdrop,.fm-model-dialog::backdrop { background:#020c15b8; backdrop-filter:blur(10px); }
.fm-preview-dialog[open] { animation:fm-preview-arrive .48s cubic-bezier(.16,.8,.22,1) both; }
.fm-preview-shell { position:relative; padding:58px; background:radial-gradient(ellipse at 95% 0,#21616b88,transparent 55%),linear-gradient(130deg,#0c2835,#06131b); overflow:hidden; }
.fm-preview-shell::before { content:""; position:absolute; top:0; left:9%; right:9%; height:2px; background:linear-gradient(90deg,transparent,#72f3dd,transparent); box-shadow:0 0 30px #2ec4b6; }
.fm-preview-close { position:absolute; inset-block-start:17px; inset-inline-end:20px; display:flex; align-items:center; gap:14px; min-height:44px; border:1px solid #649192; border-radius:5px; color:#fff; background:#ffffff09; padding:7px 12px; font:600 14px 'Source Sans 3',sans-serif; cursor:pointer; }
.fm-preview-close span { font-size:22px; }
.fm-preview-eyebrow { font-size:12px; letter-spacing:.06em; color:#7de4d7; margin:0 100px 26px 0; }
.fm-preview-code { display:inline-block; font:600 17px 'Source Sans 3',sans-serif; letter-spacing:.13em; color:#7df1dc; border:1px solid #548989; padding:9px 13px; border-radius:6px; margin-bottom:18px; }
.fm-preview-dialog h2 { font-size:clamp(28px,3vw,43px); line-height:1.17; margin:0 0 21px; max-width:720px; }
.fm-preview-summary { font-size:21px; line-height:1.55; color:#e0eef0; margin:0 0 28px; }
.fm-preview-visual { margin:0 0 28px;border:1px solid #5c858a;border-top:3px solid #2ec4b6;background:#06131b; }
.fm-preview-visual img { display:block;width:100%;height:auto; }
.fm-preview-visual figcaption { border-top:1px solid #355c63;padding:12px 16px; }
.fm-preview-visual a { color:#94e9de;font-size:14px;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:32px; }
.fm-preview-connection { border-inline-start:3px solid #2ec4b6; background:#c9fffb09; padding:21px 25px; margin-bottom:28px; }
.fm-preview-connection h3 { font-size:17px; color:#88eadd; margin:0 0 10px; }
.fm-preview-connection p { font-size:17px; line-height:1.55; color:#cbdee2; margin:0; }
.fm-preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.fm-preview-actions a { display:inline-flex; min-height:48px; align-items:center; gap:12px; background:#2ec4b6; color:#06131b; border:1px solid #2ec4b6; border-radius:5px; padding:12px 18px; margin:0; font-size:16px; font-weight:700; }
.fm-preview-actions svg { width:18px;height:18px; }
.fm-preview-actions button { min-height:48px; border:1px solid #609395; border-radius:5px; background:transparent; padding:12px 18px; color:#e7f6f7; font:600 16px 'Source Sans 3',sans-serif; cursor:pointer; }
.fm-preview-actions :is(button,a):focus-visible,.fm-preview-close:focus-visible,.fm-stage-toolbar button:focus-visible,.fm-expanded-toolbar button:focus-visible { outline:3px solid #78ead9; outline-offset:4px; }
.fm-preview-availability { color:#9fc4ca; font-size:14px; margin:0 0 16px; }
@media(max-width:900px) {
 .fm-intro { padding-block:30px 24px;display:block; }.fm-intro h1 { font-size:34px; }.fm-lead { font-size:18px; }.fm-numbers { margin-top:20px;border:0;padding:0;gap:30px; }.fm-numbers>div { display:flex;align-items:center;gap:8px; }.fm-numbers b { font-size:27px; }
 .fm-explorer { display:block; }.fm-panel { padding:28px 8px 8px; }.fm-panel-description { max-width:650px; }.fm-related { grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.fm-related a { height:100%;font-size:16px; }.fm-related a:hover,.fm-related a:focus-visible { transform:translateY(-5px); }.fm-selection-state { margin-bottom:12px; }
 .fm-explanation,.fm-catalogue { margin-top:40px; }.fm-steps { grid-template-columns:1fr;gap:20px; }.fm-steps article { display:grid;grid-template-columns:50px 1fr;column-gap:16px; }.fm-architecture { width:45px;margin-top:2px; }.fm-steps h3 { margin:0 0 10px; }.fm-steps p { grid-column:2; }.fm-example { padding:20px; }.fm-section-heading h2 { font-size:28px; }.fm-card-grid { grid-template-columns:1fr; }.fm-card { padding:20px; }.fm-area>summary { padding:17px 15px;gap:11px; }.fm-area>summary h3 { font-size:17px; }.fm-area-count { display:none; }.fm-summary-number { font-size:21px;min-width:25px; }.fm-area-content { padding:16px; }.fm-contact { padding:24px;flex-direction:column;align-items:start; }.fm-contact h2 { font-size:24px; }.fm-contact .button { white-space:normal; }

}
@media(max-width:600px) {
 .fm-figure figcaption { padding:14px 16px;font-size:13px; }.fm-desktop-hint { display:none; }.fm-mobile-hint { display:block; }.fm-mobile-select { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px; }.fm-mobile-select button { display:flex;align-items:center;gap:8px;min-height:54px;padding:10px;border:1px solid #b7ced3;border-radius:6px;background:#fff;color:#173741;font:400 14px/1.4 'Source Sans 3',sans-serif;text-align:start;cursor:pointer; }.fm-mobile-select b { color:#147d76;font-size:17px; }.fm-mobile-select button[aria-pressed=true] { background:#0b2c38;color:#fff;border-color:#159a91; }.fm-mobile-select button[aria-pressed=true] b { color:#72e2d5; }.fm-mobile-select button:last-child { grid-column:1/-1; }
 .fm-related,.fm-model-dialog .fm-related { grid-template-columns:1fr; }.fm-related a { padding:17px 15px; }.fm-panel h2 { font-size:26px; }.fm-preview-dialog { width:calc(100vw - 20px);max-height:calc(100svh - 24px); }.fm-preview-shell { padding:78px 24px 30px; }.fm-preview-eyebrow { margin:0 0 20px; }.fm-preview-dialog h2 { font-size:29px; }.fm-preview-summary { font-size:18px; }.fm-preview-connection { padding:17px; }.fm-preview-connection p { font-size:16px; }.fm-preview-actions>* { width:100%;justify-content:center; }
}

/* Keep the model large enough to read, placing the selection alongside it only
   when there is room for both. Smaller desktop screens use a full-width house. */
@media(min-width:901px) {
 .fm-panel { padding:0; }
 .fm-related { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
 .fm-related a { height:100%; transform:none; }
 .fm-area-guide { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1600px) {
 .fm-explorer.container { grid-template-columns:minmax(0,1fr) 310px; gap:30px; }
 .fm-panel { position:sticky; top:24px; z-index:4; }
 .fm-related,.fm-area-guide { grid-template-columns:1fr; }
}
@media(max-width:900px) {
 .fm-explorer.container { width:calc(100% - 32px); display:block; }
 .fm-stage-toolbar { padding:12px; gap:8px; }
 .fm-stage-toolbar>span { width:100%; font-size:11px; }
 .fm-stage-actions { width:100%; }
 .fm-stage-actions button { flex:1; }
 .fm-building { padding:14px 10px 18px; overflow:auto; scrollbar-width:thin; scrollbar-color:#74b7b8 #0b2530; }
 .fm-house-canvas { overflow:clip; }
 .fm-house-part,.fm-house-part.is-selected,.fm-house-part.is-hovered { transform:none; }
 .fm-house-part--pillar.is-selected { box-shadow:inset 0 0 0 5px #2ec4b6; }
 .fm-house-part--base.is-selected { box-shadow:inset 0 0 0 4px #2ec4b6; }
 .fm-desktop-hint { display:none; }.fm-mobile-hint { display:block; }
 .fm-panel { padding:24px 0 0; }
 .fm-area-guide { grid-template-columns:1fr; }
 .fm-mobile-select { display:none; }
 .fm-model-dialog { width:100%; max-width:none; height:100dvh; max-height:100dvh; margin:0; border:0; border-radius:0; background:#06131b; }
 .fm-expanded-toolbar { padding:12px; padding-top:max(12px,env(safe-area-inset-top)); flex-wrap:wrap; gap:10px; }
 .fm-expanded-toolbar strong { font-size:16px; width:100%; }
 .fm-expanded-actions { width:100%; }.fm-expanded-actions button { flex:1; }
 .fm-model-dialog [data-expanded-slot] { display:flex; overflow:hidden; }
 .fm-model-dialog .fm-explorer.container { width:100%; height:100%; margin:0; padding:0; }
 .fm-model-dialog .fm-visual,.fm-model-dialog .fm-figure { height:100%; }
 .fm-model-dialog .fm-figure { display:flex; flex-direction:column; border:0; border-radius:0; box-shadow:none; }
 .fm-model-dialog .fm-panel { display:none; }
 .fm-model-dialog .fm-building { flex:1; min-height:0; overscroll-behavior:contain; touch-action:pan-x pan-y; }
 .fm-model-dialog .fm-mobile-zoom { display:flex; justify-content:center; gap:8px; flex:none; padding:8px 12px 12px; }
 .fm-mobile-zoom button { min-width:44px; min-height:44px; border:1px solid #4d7880; border-radius:6px; background:#0b2c38; padding:8px 12px; font:600 14px/1.25 'Source Sans 3',sans-serif; color:#fff; cursor:pointer; }
 .fm-mobile-zoom button:disabled { opacity:.45; }
 .fm-mobile-zoom button[aria-pressed='true'] { background:#2ec4b6; color:#06131b; border-color:#2ec4b6; }
 .fm-model-dialog .fm-figure figcaption { flex:none; padding:12px 16px; }
 .fm-model-dialog .fm-figure figcaption strong { display:none; }
 .fm-model-dialog .fm-mobile-model-footer { display:block; flex:none; padding:10px 14px max(14px,env(safe-area-inset-bottom)); }
 .fm-mobile-model-footer button { width:100%; min-height:48px; padding:12px 16px; background:#2ec4b6; color:#06131b; border:0; border-radius:6px; font:600 16px/1.3 'Source Sans 3',sans-serif; cursor:pointer; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.framework-model-page *, .framework-model-page *::before,.framework-model-page *::after { animation:none!important;transition:none!important; }.fm-house-part,.fm-related a,.fm-related li,.fm-preview-dialog { transform:none!important; }.fm-house-part.is-selected { outline:3px solid #159a91;outline-offset:3px; } }
/* Model previews make the collection easier to scan before opening a framework. */
.fm-card-visual{display:block;width:100%;padding:0;border:1px solid #ccdadd;background:#f6f8f9;cursor:pointer;margin:14px 0 22px;text-align:start;overflow:hidden}
.fm-card-visual img{display:block;width:100%;height:auto;aspect-ratio:1500/650;object-fit:contain;transition:transform .2s ease}
.fm-card-visual span{display:block;padding:9px 12px;border-top:2px solid #2ec4b6;background:#06131b;color:#fff;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.fm-card-visual:hover img{transform:scale(1.035)}
.fm-card-visual:focus-visible{outline:3px solid #08786e;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.fm-card-visual img{transition:none}.fm-card-visual:hover img{transform:none}}
/* Catalogue second pass: find a framework directly, then inspect its model. */
.fm-catalogue-tools{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:24px;background:#e7f2f2;border:1px solid #bad5d8;border-top:3px solid #2ec4b6;margin-bottom:20px}
.fm-catalogue-tools label{font-weight:600;color:#103944;flex:1;min-width:180px}
.fm-catalogue-tools input{display:block;width:100%;min-height:48px;margin-top:9px;border:1px solid #7da8ad;background:white;border-radius:5px;padding:11px 14px;color:#06131b;font:17px 'Source Sans 3',sans-serif}
.fm-catalogue-tools button{min-height:48px;border:1px solid #7da8ad;background:transparent;padding:10px 18px;font:600 15px 'Source Sans 3',sans-serif;color:#103944;cursor:pointer;border-radius:5px}
.fm-catalogue-tools p{margin:0 0 13px;min-width:110px;color:#103944;font-size:15px}
.fm-catalogue-jumps{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px}
.fm-catalogue-jumps a{display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid #cadcde;background:white;border-radius:5px;font-size:14px;font-weight:600;color:#103944;text-decoration:none}
.fm-catalogue-jumps b{color:#08786e;font-size:12px}
.fm-catalogue-jumps a:hover{background:#ddf3ef;border-color:#08786e}
.fm-catalogue-tools :focus-visible,.fm-catalogue-jumps :focus-visible{outline:3px solid #08786e;outline-offset:3px}
.fm-card[hidden],.fm-area[hidden]{display:none}
.fm-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.fm-card{border-radius:6px;padding:26px;box-shadow:0 9px 20px #06131b0b}
.fm-card h4{font-size:23px;line-height:1.3}
.fm-card-visual{border:1px solid #43666e!important;border-radius:3px;overflow:hidden}
.fm-card-visual img{display:block;width:100%;height:auto}
.fm-card--ready{background:linear-gradient(145deg,#102c36,#06131b);border-color:#376069;border-top:3px solid #2ec4b6}
.fm-card-meta{padding-bottom:12px;border-bottom:1px solid #35515e}
@media(min-width:1500px){.fm-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.fm-card-grid{grid-template-columns:1fr}.fm-catalogue-tools{padding:20px;gap:12px}.fm-catalogue-tools label{width:100%;flex:auto}.fm-catalogue-tools p{margin-bottom:0}.fm-catalogue-jumps{gap:8px}.fm-catalogue-jumps a{font-size:13px;padding:9px 11px}.fm-card{padding:22px}}

/* Material framework redesign: every model uses its own artwork, shown uncropped. */
.fm-card-grid{gap:24px}.fm-card{border:1px solid #b9d5d0;box-shadow:0 8px 30px #06303709;border-radius:8px;overflow:hidden;background:#fff;padding:24px}
.fm-card-visual{aspect-ratio:3/2;background:#06131b;display:grid;place-items:center;margin:16px -24px 24px;width:calc(100% + 48px);border-radius:0;position:relative;overflow:hidden}
.fm-card-visual img{width:100%;height:100%;object-fit:contain;aspect-ratio:3/2}
.fm-card-visual>span{position:absolute;right:14px;bottom:12px;padding:5px 9px;background:#06131bdd;color:#e3fcf6;border:1px solid #64cbbd77;border-radius:3px;font-size:10px;letter-spacing:.08em}
.fm-card h4{font-size:24px;line-height:1.2}.fm-card .fm-card-meta{border-bottom:1px solid #e1eeea;padding-bottom:12px}.fm-card-preview{color:#086b61}
.fm-card--ready{color:#06131b}.fm-card--ready h4{color:#06131b}.fm-card--ready p{color:#40565e}.fm-card--ready .fm-code,.fm-card--ready .fm-card-link{color:#086b61}.fm-card--ready .fm-card-preview{color:#086b61;border-color:#94bdb7;background:#edf8f6}.fm-card--ready .fm-card-preview:hover{background:#d8f1ec;border-color:#086b61}
.fm-preview-model{background:#06131b}.fm-preview-model img{max-height:65vh;object-fit:contain;width:100%}
@media(max-width:640px){.fm-card{padding:21px}.fm-card-visual{margin-inline:-21px;width:calc(100% + 42px)}.fm-card h4{font-size:23px}}

/* Preserve the complete original fifteen-theme Engagement Heat Map. */
#framework-organisational-engagement .fm-card-visual,
#framework-organisational-engagement .fm-card-visual img { aspect-ratio:4/3; }
#framework-organisational-engagement .fm-card-visual > span { display:none; }