/* Viora. Standalone composition; all brand colors live in tokens.css. */ *,*::before,*::after{box-sizing:border-box} html{scroll-padding-top:7rem} body{margin:0;background:var(--ground);color:var(--text);font-family:"Amiri",Georgia,serif;font-size:var(--fs-body);line-height:1.85;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} button,input,select,textarea{font:inherit} button,a,input,select,textarea{-webkit-tap-highlight-color:transparent} button{cursor:pointer} a{color:inherit;text-decoration:none} button{color:inherit} button,select{touch-action:manipulation} img,svg{display:block;max-width:100%} figure,p,h1,h2,h3,h4{margin:0} button{border-radius:0} [hidden]{display:none!important} ::selection{background:var(--stone);color:var(--text-strong)} :focus-visible{outline:2px solid var(--bronze-deep);outline-offset:5px} h1,h2,h3,h4{color:var(--text-strong)} h2{font-weight:400;font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.45;text-wrap:balance} em{font-weight:400;color:var(--bronze-deep)} .shell{width:min(100%,1376px);padding-inline:var(--gutter);margin-inline:auto} .latin-label,.figure-topline,.brand-type>span{font-family:"Cinzel",Georgia,serif;font-size:.63rem;font-weight:400;letter-spacing:.17em;line-height:1.7} .latin-label{color:var(--text-muted)} .skip-link{position:fixed;top:8px;right:16px;z-index:100;padding:8px 20px;background:var(--paper);transform:translateY(-150%)} .skip-link:focus{transform:translateY(0)} .small-rule{width:28px;height:1px;background:var(--bronze);flex-shrink:0} .eyebrow{display:flex;gap:12px;align-items:center;color:var(--bronze-deep);font-size:1rem} .button{display:inline-flex;align-items:center;justify-content:space-between;gap:2.6rem;padding:.6rem 1.45rem;min-height:51px;border:1px solid var(--text-strong);font-size:1.06rem;line-height:1.5;transition:background .2s,color .2s,transform .2s} .button-solid{background:var(--text-strong);color:var(--ground)} .button-solid:hover{background:var(--bronze-deep);border-color:var(--bronze-deep);color:var(--paper)} .button span,.text-link>span,.header-contact>span{font-family:Georgia,serif;font-size:1.15rem;font-weight:400} .text-link{display:inline-flex;align-items:center;gap:2.2rem;background:none;border:0;border-bottom:1px solid var(--bronze);padding:.4rem 0;color:var(--text-strong);line-height:1.55;transition:color .2s,gap .2s} .text-link:hover{color:var(--bronze-deep);gap:2.6rem} .icon-button{width:40px;height:40px;background:none;border:0;display:grid;place-content:center;color:var(--text-strong);flex-shrink:0} .icon-button:hover{background:var(--stone)} .icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.2} .site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--ground) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule)} .header-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .brand{display:inline-flex;align-items:center;gap:13px;flex-shrink:0} .brand img{object-fit:contain;width:43px;height:43px} .brand-type{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1} .brand-type strong{font-size:1.8rem;color:var(--text-strong);font-weight:700} .brand-type>span{font-size:.58rem;letter-spacing:.24em;color:var(--bronze-deep)} .main-nav{display:flex;align-items:center;gap:clamp(1.3rem,2.4vw,2.4rem)} .main-nav a{color:var(--text-muted);font-size:1rem;line-height:1.8;border-bottom:1px solid transparent;white-space:nowrap} .main-nav a:hover,.main-nav a[aria-current]{color:var(--text-strong);border-bottom-color:var(--bronze)} .header-actions{display:flex;align-items:center;gap:1rem} .header-contact{border:1px solid var(--rule);min-width:112px;min-height:40px;padding:.15rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:1.4rem;font-size:1rem} .header-contact:hover{border-color:var(--bronze)} .menu-toggle{display:none;gap:6px} .menu-toggle span{display:block;width:20px;height:1px;background:currentColor} .hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(3rem,5vw,5rem);padding-top:clamp(3rem,5.5vw,5.3rem)} .hero-copy{padding-bottom:3rem;align-self:center} .hero h1{font-size:clamp(2.7rem,4.55vw,4.1rem);font-weight:400;line-height:1.38;margin:1.35rem 0 1.25rem;letter-spacing:-.035em} .hero h1 em{white-space:nowrap} .hero-description{color:var(--text-muted);font-size:1.07rem;line-height:1.95;max-width:49ch} .hero-actions{display:flex;align-items:center;gap:2rem;margin-top:1.8rem;flex-wrap:wrap} .discovery-figure{position:relative;align-self:stretch;display:flex;flex-direction:column;min-width:0;margin-bottom:2.4rem;direction:ltr} .figure-topline{display:flex;justify-content:space-between;gap:1rem;color:var(--bronze-deep);padding:.5rem .3rem .9rem;border-top:1px solid var(--rule)} .figure-index{color:var(--text-muted)} .discovery-stage{position:relative;flex:1;min-width:0;max-width:100%;min-height:365px;display:grid;place-items:center;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--paper) 85%,transparent),transparent 71%);overflow:hidden;contain:layout paint} .discovery-stage::before,.discovery-stage::after{content:"";position:absolute;inset:18px;border:1px solid var(--rule-soft);pointer-events:none} .discovery-stage::before{clip-path:polygon(0 0,22px 0,22px 1px,1px 1px,1px 22px,0 22px,0 0,100% 0,100% 22px,calc(100% - 1px) 22px,calc(100% - 1px) 1px,calc(100% - 22px) 1px,calc(100% - 22px) 0)} .discovery-stage::after{rotate:180deg;clip-path:polygon(0 0,22px 0,22px 1px,1px 1px,1px 22px,0 22px,0 0,100% 0,100% 22px,calc(100% - 1px) 22px,calc(100% - 1px) 1px,calc(100% - 22px) 1px,calc(100% - 22px) 0)} .stage-axis{position:absolute;opacity:.52;pointer-events:none} .stage-axis-x{width:95%;height:1px;top:50%;background:linear-gradient(to right,var(--rule) 30%,transparent 0);background-size:7px 1px} .stage-axis-y{height:85%;width:1px;left:50%;background:linear-gradient(to bottom,var(--rule) 30%,transparent 0);background-size:1px 7px} .stage-ring{position:absolute;width:71%;aspect-ratio:1;border:1px solid var(--rule-soft);border-radius:50%;opacity:.5} .stage-ring::after{content:"";position:absolute;inset:12px;border:1px dotted var(--rule);border-radius:50%} .discovery-canvas{width:100%;max-width:100%;min-width:0;aspect-ratio:25/18;position:absolute;inset:0;margin:auto;z-index:1} .discovery-fallback{position:absolute;width:52%;height:auto} .discovery-stage.is-mounted .discovery-fallback{display:none} .stage-mark{font-family:"EB Garamond",Georgia,serif;font-size:.7rem;position:absolute;color:var(--text-muted);opacity:.7} .stage-mark-n{top:3px;left:calc(50% - 4px)} .stage-mark-e{right:4px;top:calc(50% - 12px)} .discovery-figure figcaption{border-top:1px solid var(--rule);padding:.8rem .3rem 0;display:flex;direction:rtl;align-items:center;justify-content:space-between;gap:1rem;color:var(--text-muted);font-size:.87rem} .hero-bottom{grid-column:1/-1;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.3rem 0;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:.1rem} .about-section{padding-top:var(--band)} .section-rail{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--rule);padding-bottom:.8rem;margin-bottom:3.2rem;font-size:1rem;line-height:1.4} .rail-number{font-family:"EB Garamond",Georgia,serif;font-size:.98rem;letter-spacing:.08em;color:var(--bronze-deep)} .section-rail p{color:var(--text-strong)} .section-rail>.latin-label{margin-inline-start:auto;font-size:.6rem} .about-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(3rem,9vw,8rem);align-items:center} .about-copy>p{color:var(--text-muted);margin-top:1.2rem;font-size:1.08rem;line-height:1.95} .about-copy>p+p{margin-top:.8rem} .expertise-line{display:flex;align-items:center;gap:1.1rem;border-top:1px solid var(--rule);padding-top:1.2rem;margin-top:1.8rem;color:var(--text-strong);font-size:.97rem} .expertise-line i{height:4px;width:4px;background:var(--bronze);rotate:45deg;flex-shrink:0} .etymology-panel{position:relative;padding:2rem 1.6rem;text-align:center} .etymology-panel::before{content:"";position:absolute;inset:0;border:1px solid var(--rule);outline:1px solid var(--rule-soft);outline-offset:6px;pointer-events:none} .formula .label{font-family:"Amiri",Georgia,serif;letter-spacing:0;font-size:.95rem} .formula-row{margin-top:2rem;direction:ltr} .formula-join{margin-block:.8rem} .formula-out .en{margin-top:1rem;font-size:2.2rem} .formula-out .ar{font-size:3rem;margin-top:.7rem} .etymology-caption{padding-top:1.6rem;margin-top:1.6rem;border-top:1px solid var(--rule-soft);font-size:1rem;line-height:1.9;color:var(--text-muted)} .privacy-note{display:flex;align-items:center;gap:1.4rem} .privacy-note>svg{width:39px;height:39px;fill:none;stroke:var(--bronze-deep);stroke-width:1.1;flex-shrink:0} .privacy-note p{font-size:.96rem;color:var(--text-muted);line-height:1.8} .privacy-note .privacy-foundation{display:block;font-size:1.25rem;color:var(--text-strong)} .privacy-note>.latin-label{margin-inline-start:auto;white-space:nowrap} /* The band and vision retain their original reference layout and content. */ .band{margin-top:3.5rem} .band .wrap{max-width:1376px} .band .band-in{padding-block:2.8rem;grid-template-columns:240px 1px 1fr;gap:3rem} .band-stat .n{font-size:4.2rem} .band p{max-width:64ch} .band .lead-in{max-width:none;font-size:1.55rem;margin-bottom:.6rem} .product-section{padding-top:var(--band);padding-bottom:var(--band)} .product-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:clamp(3rem,6.5vw,6.5rem);align-items:center} .product-category{font-size:.91rem;color:var(--bronze-deep)} .product-name{display:flex;align-items:baseline;gap:1.25rem;margin:.1rem 0 .8rem} .product-name h2{font-size:clamp(4rem,6.6vw,6rem);line-height:1.4;font-weight:400} .product-name>span{font-family:"Cinzel",Georgia,serif;letter-spacing:.22em;font-size:.75rem;color:var(--text-muted)} .product-copy>h3,.mispar-details>h3{font-size:clamp(1.7rem,2.5vw,2.3rem);line-height:1.6;font-weight:400} .product-copy>p:not(.product-category),.mispar-details>p{margin-top:1.1rem;color:var(--text-muted);font-size:1.06rem;line-height:1.95} .product-steps{list-style:none;padding:0;margin:1.6rem 0 1.4rem;border-top:1px solid var(--rule)} .product-steps li{display:flex;align-items:center;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule-soft);font-size:1rem} .product-steps li>span{font-family:"EB Garamond",Georgia,serif;color:var(--bronze-deep);font-size:.87rem} .wasim-visual{min-width:0;position:relative;padding:20px 0 0 20px} .wasim-visual::before{content:"";position:absolute;inset:0 20px 50px 0;background:var(--stone);z-index:-1} .workbench{background:var(--deep);color:var(--deep-text);border:1px solid var(--deep-rule);padding:0 16px;box-shadow:0 22px 35px -28px color-mix(in srgb,var(--deep) 55%,transparent)} .workbench-header{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--deep-rule)} .workbench-brand{font-size:1.08rem} .workbench-brand>span{color:var(--deep-bronze);margin-inline:8px} .workbench-dots{font:14px Georgia,serif;letter-spacing:3px;color:var(--deep-muted)} .demo-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--deep-rule);margin-bottom:14px;gap:8px} .demo-tabs button{background:transparent;border:0;border-bottom:1px solid transparent;padding:.7rem .15rem;color:var(--deep-muted);font-size:.89rem;line-height:1.5} .demo-tabs button[aria-selected="true"]{color:var(--deep-bronze);border-color:var(--deep-bronze)} .demo-tabs button:hover{color:var(--deep-text)} .demo-tabs button:focus-visible,.workbench :focus-visible{outline-color:var(--deep-bronze);outline-offset:2px} .demo-panel{min-height:382px;height:auto;overflow:visible} .specimen-scene{position:relative;height:299px;overflow:hidden;direction:ltr;background:var(--stone)} .specimen-scene>img{width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:sepia(.1)} .scene-label{position:absolute;top:13px;left:15px;font:500 .62rem "Cinzel",Georgia,serif;letter-spacing:.15em;color:var(--deep-text);background:var(--deep);padding:5px 7px} .specimen-frame{position:absolute;inset:21% 25% 4% 15%;border:1px solid var(--deep);outline:1px solid color-mix(in srgb,var(--deep-text) 30%,transparent)} /* Owner control refinement: extend only Oryx's physical right frame edge so its head fits. The scene key comes from initial SSR and renderAnimal; a global inset change would alter the other animals. Traced effects: Oryx frame/right-anchored label, not exhaustive. Produces right:10% instead of 25%; top/bottom/left, art crop and all surrounding boxes stay as before. */ .specimen-scene[data-animal="arabian_oryx"] .specimen-frame{right:10%} .specimen-frame::before,.specimen-frame::after{content:"";position:absolute;width:8px;height:8px;border:2px solid var(--deep)} .specimen-frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0} .specimen-frame::after{bottom:-2px;right:-2px;border-top:0;border-left:0} .specimen-frame>span{position:absolute;top:-28px;right:-1px;color:var(--deep-text);background:var(--deep);padding:0 9px;font-size:.8rem;line-height:27px} /* Owner wording refinement, 2026-10-08: removed the sole scene-footnote overlay and its now-unused rule. Connected only to the removed template span; retaining an orphan selector would imply a feature still exists. Traced effects: that image overlay only, not exhaustive. Produces no overlay style or node; absolute positioning meant no surrounding layout space to remove. */ /* Animal survey 2 reuses the existing Next glow above for two absolute image arrows. Connected to #animal-previous/next and the old bottom-left footnote anchor; an in-flow row would move the record. Traced effects: image controls, focus and reduced motion, not exhaustive. Produces 30×26px controls at bottom:8px, opposite 10px edges, without changing the scene footprint. */ .scene-arrow{position:absolute;bottom:8px;width:30px;height:26px;display:grid;place-items:center;border:1px solid var(--deep-bronze);background:var(--deep);color:var(--deep-bronze);font-size:.85rem;line-height:1;overflow:hidden;isolation:isolate} .scene-previous{left:10px} .scene-next{right:10px} .specimen-record{display:flex;align-items:center;justify-content:space-between;gap:15px;height:83px;padding:10px 3px} .specimen-record>div{display:flex;flex-direction:column;gap:1px} .record-label{font-size:.73rem;color:var(--deep-muted);line-height:1.6} .specimen-record strong{font-size:.88rem;font-weight:400} .record-status{font-size:.68rem;line-height:1.6;border:1px solid var(--deep-rule);padding:3px 8px;color:var(--deep-bronze)} .workbench-footer{border-top:1px solid var(--deep-rule);padding:10px 2px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.75rem;color:var(--deep-muted);line-height:1.8;min-height:44px} /* Survey 1–3: keep the original dot's 5×5 flex footprint and position Next over that end, rather than narrowing the caption or enlarging the footer. Connected to #demo-next and selectTab in main.js. The decorative band sweeps across the bronze button; the existing global reduced-motion rule disables it. Traced effects: footer, focus outline and narrow-screen overlap, not exhaustive. Produces a 26px-high button, a compact 14px-wide arrow at <=700px, and the same original card/caption rectangles. Disabled means invisible and unfocusable. */ .demo-next-slot{position:relative;width:5px;height:5px;flex-shrink:0} .demo-next{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border:1px solid var(--deep-bronze);background:var(--deep);color:var(--deep-bronze);font-size:.72rem;line-height:1;white-space:nowrap;overflow:hidden;isolation:isolate} .demo-next::before,.scene-arrow::before{content:"";position:absolute;inset-block:-50%;left:0;width:45%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--deep-bronze) 55%,transparent),transparent);transform:translateX(-250%) skewX(-20deg);animation:demo-next-glow 2.8s ease-in-out infinite;pointer-events:none;z-index:-1} .demo-next:hover,.scene-arrow:hover{color:var(--deep-text);border-color:var(--deep-text)} .demo-next:disabled{visibility:hidden} html[dir="ltr"] .demo-next-arrow{transform:scaleX(-1)} @keyframes demo-next-glow{0%,15%{transform:translateX(-250%) skewX(-20deg)}70%,100%{transform:translateX(450%) skewX(-20deg)}} /* Owner control refinement: mirror the shared band only for Arabic. Root direction selects this even though the image scene itself is LTR. Opposite anchor, translation and skew mirror the full effect without reversing its pause timing. Connected to Next/scene pseudo-elements and reduced-motion; traced effects: Arabic glow, not exhaustive. Produces right-to-left travel with +20deg slant; English retains the original keyframes and timing. */ html[dir="rtl"] .demo-next::before,html[dir="rtl"] .scene-arrow::before{left:auto;right:0;transform:translateX(250%) skewX(20deg);animation-name:demo-next-glow-rtl} @keyframes demo-next-glow-rtl{0%,15%{transform:translateX(250%) skewX(20deg)}70%,100%{transform:translateX(-450%) skewX(20deg)}} @media(max-width:700px){.demo-next{width:14px;padding:0;gap:0;justify-content:center}.demo-next-label{display:none}} .visual-caption{display:flex;justify-content:space-between;gap:1rem;padding-top:1rem;font-size:.82rem;color:var(--text-muted);align-items:center} .visual-caption .latin-label{font-size:.56rem} .review-panel{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;padding-bottom:14px} .review-image{position:relative;overflow:hidden;min-height:368px} .review-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .review-image-label{position:absolute;bottom:0;inset-inline:0;padding:8px;color:var(--deep-text);background:var(--deep);font:10px "Cinzel",serif;text-align:center;letter-spacing:.08em} .review-fields{padding-top:1.3rem} .review-fields h4{color:var(--deep-text);font-size:1.4rem;font-weight:400;margin-top:.5rem} .review-fields>em{font-family:"EB Garamond",Georgia,serif;color:var(--deep-bronze);font-size:.97rem;display:block} .review-fields dl{margin:1.2rem 0;font-size:.8rem} .review-fields dl>div{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;border-bottom:1px solid var(--deep-rule);padding:.4rem 0} .review-fields dt{color:var(--deep-muted)} .review-fields dd{margin:0} .review-button{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;background:transparent;border:1px solid var(--deep-bronze);color:var(--deep-bronze);padding:.4rem .75rem;font-size:.88rem} /* Owner hover/confirmation refinement: one gradient fills the existing button from inline start and uses the confirmed palette for hover/focus/pressed. Background sizing avoids overlays or content movement. Connected to native hover/focus and main.js aria-pressed/aria-disabled; traced effects: review appearance only, not exhaustive. Produces 0→100% bronze fill in250ms; root RTL anchors right, reduced-motion's existing global rule removes the transition. */ .review-button{background-image:linear-gradient(var(--deep-bronze),var(--deep-bronze));background-repeat:no-repeat;background-position:left center;background-size:0% 100%;transition:background-size .25s ease,color .25s ease} html[dir="rtl"] .review-button{background-position:right center} .review-button:is(:hover,:focus-visible):not([aria-disabled="true"]),.review-button[aria-pressed="true"]{background-size:100% 100%;color:var(--deep)} .report-panel{padding-bottom:14px} .report-paper{background:var(--ground);color:var(--text);min-height:368px;padding:1.4rem 1.9rem} .report-paper>.latin-label{font-size:.58rem;color:var(--bronze-deep)} .report-paper h4{font-size:1.7rem;font-weight:400;margin-top:.4rem} .report-paper>p{font-size:.85rem;color:var(--text-muted)} .report-summary{display:grid;grid-template-columns:repeat(3,1fr);margin:1rem 0;border-block:1px solid var(--rule);padding:.6rem 0} .report-summary>span{display:flex;flex-direction:column;font-size:.78rem;color:var(--text-muted);text-align:center} .report-summary>span+span{border-inline-start:1px solid var(--rule)} .report-summary strong{color:var(--text-strong);font-size:1.6rem;line-height:1.4;font-weight:400} /* Owner Export refinement: restore the former three-part flex rows and Latin italics instead of the source table. Keep compact paper spacing for three animals. Connected to static report-row markup/locale direction and existing paper min-height; traced effects: Export row spacing/wrapping, not exhaustive. Produces common name, italic scientific name and count per bordered row; source stays in CSV, with no header or source cell in the visible preview. */ .report-paper>.latin-label{display:block} .report-paper h4{line-height:1.4} .report-paper .report-summary{margin:.4rem 0;padding:.35rem 0;line-height:1.4} .report-paper .report-summary strong{line-height:1.2} .report-paper>.report-note{line-height:1.4} .report-paper>.text-link>span{line-height:1} .report-row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;border-bottom:1px solid var(--rule);padding-bottom:.5rem} .report-row [dir]{font-family:"EB Garamond",Georgia,serif;font-style:italic} .report-paper>.report-note{font-size:.72rem;margin-top:.7rem} .report-paper>.text-link{font-size:.86rem;margin-top:.55rem} .mispar-section{background:var(--stone);border-block:1px solid var(--rule);padding-block:var(--band)} .mispar-grid{display:grid;grid-template-columns:1fr 1.14fr;gap:clamp(2rem,7vw,6rem);align-items:center;direction:ltr} .mispar-copy{direction:rtl;grid-column:2;grid-row:1} .mispar-details>.text-link{margin-top:1.6rem} /* Temporary teaser: preserve the original layout while hiding unreleased details. */ .mispar-placeholder{position:relative} .mispar-placeholder>*{visibility:hidden} .mispar-placeholder::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-family:"EB Garamond",Georgia,serif;font-size:clamp(5rem,10vw,8rem);line-height:1;color:var(--bronze-deep);pointer-events:none} .terrain-figure{grid-column:1;grid-row:1;position:relative;min-width:0;direction:rtl} .terrain-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-top:1px solid var(--rule);padding-top:14px} .terrain-topline svg{height:25px;width:25px;fill:none;stroke:var(--bronze-deep);stroke-width:.8} .mispar-features{list-style:none;padding:0;margin:1.5rem 0 0;border-top:1px solid var(--rule)} .mispar-features li{padding:.7rem 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.05rem} .mispar-features strong{font-weight:400;color:var(--text-strong);font-size:1.02rem} .mispar-features li>span{font-size:.89rem;color:var(--text-muted)} .mispar-section .mispar-details>p,.mispar-section .mispar-features li>span,.mispar-section .terrain-figure figcaption,.mispar-section .latin-label,.mispar-section .product-name>span{color:var(--text)} .field-map{position:relative;height:560px;background:var(--ground);border:1px solid var(--rule);overflow:hidden;box-shadow:0 22px 30px -25px color-mix(in srgb,var(--deep) 35%,transparent)} .field-map>img{width:150%;max-width:none;height:100%;object-fit:cover;position:absolute;left:-25%;top:-70px;opacity:.95} .map-heading{position:absolute;inset:0 0 auto;background:color-mix(in srgb,var(--paper) 95%,transparent);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--rule);font-size:.94rem;color:var(--text-strong)} .map-local{font-size:.67rem;color:var(--text-muted);display:flex;align-items:center;gap:5px} .map-local::before{content:"";height:4px;width:4px;background:var(--bronze);border-radius:50%} .map-scale{position:absolute;left:18px;top:76px;display:flex;flex-direction:column;gap:4px;font-size:.65rem;color:var(--text-muted)} .map-scale i{height:5px;width:60px;border:1px solid var(--bronze);border-top:0} .map-station{position:absolute;display:grid;place-items:center;height:44px;width:44px;border:0;background:transparent;color:var(--bronze-deep);padding:6px} .map-station>span{display:grid;place-items:center;border:1px solid var(--bronze);width:30px;height:30px;border-radius:50%;background:var(--paper);font-size:.85rem;box-shadow:0 0 0 5px color-mix(in srgb,var(--paper) 70%,transparent);transition:box-shadow .2s,background .2s} .map-station[aria-pressed="true"]>span{background:var(--text-strong);color:var(--ground);border-color:var(--text-strong);box-shadow:0 0 0 6px color-mix(in srgb,var(--bronze) 22%,transparent),0 0 0 14px color-mix(in srgb,var(--bronze) 10%,transparent)} .station-bird{top:24%;left:29%}.station-camera{top:33%;left:57%}.station-plot{top:41%;left:39%} .map-record{position:absolute;bottom:62px;left:16px;right:16px;background:var(--paper);border:1px solid var(--rule);padding:1.1rem 1.2rem} .map-record-top{display:flex;justify-content:space-between;gap:1rem;font-size:.72rem;color:var(--bronze-deep);line-height:1.7} .map-record-state{color:var(--text-muted)} .map-record h4{font-size:1.45rem;font-weight:400;margin-top:.5rem} .map-record>p{font-size:.86rem;color:var(--text-muted);line-height:1.8;min-height:3.6em;margin-top:.25rem} .map-record-bottom{display:flex;justify-content:space-between;gap:.5rem;border-top:1px solid var(--rule-soft);padding-top:.6rem;margin-top:.7rem;font-size:.66rem;color:var(--text-muted)} .field-nav{position:absolute;inset:auto 0 0;display:flex;justify-content:space-around;padding:13px 4px;background:var(--paper);border-top:1px solid var(--rule);font-size:.79rem;color:var(--text-muted)} .field-nav .is-current{color:var(--bronze-deep);position:relative} .field-nav .is-current::after{position:absolute;bottom:-6px;content:"";width:4px;height:4px;border-radius:50%;background:var(--bronze);right:calc(50% - 2px)} .terrain-figure figcaption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding-top:15px;font-size:.84rem;color:var(--text-muted);gap:1rem} .terrain-figure figcaption .latin-label{font-size:.57rem;white-space:nowrap} .services-section{padding-top:var(--band);padding-bottom:1rem} .services-intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;margin-bottom:3rem} .services-intro>p{font-size:1.11rem;max-width:47ch;color:var(--text-muted);line-height:1.95} .service-row{display:grid;grid-template-columns:.2fr 1fr .84fr;gap:clamp(2rem,4vw,3.7rem);border-top:1px solid var(--rule);padding-block:3.2rem} .service-number{font-family:"EB Garamond",Georgia,serif;font-size:3.1rem;color:var(--bronze);line-height:1;display:flex;flex-direction:column;gap:1.2rem;align-items:flex-start} .service-number>span{font-family:"Cinzel",Georgia,serif;font-size:.53rem;letter-spacing:.12em;line-height:1.8;max-width:8ch;color:var(--text-muted)} .service-body h3{font-size:2.05rem;font-weight:400;line-height:1.55;margin-top:.65rem} .service-body>p{margin-top:1rem;font-size:1.02rem;line-height:1.95;color:var(--text-muted)} .service-body .text-link{margin-top:1.3rem;font-size:1rem} .small-heading{font-size:.92rem;color:var(--text-strong)} .service-deliverables,.bespoke-scope{border-inline-start:1px solid var(--rule);padding-inline-start:2rem;padding-top:.4rem} .service-deliverables ol{list-style:none;padding:0;margin:1.1rem 0 0;display:flex;flex-direction:column;gap:1rem} .service-deliverables li{display:flex;gap:.9rem} .service-deliverables li>span{display:flex;align-items:center;justify-content:center;height:26px;width:26px;flex-shrink:0;border:1px solid var(--rule);color:var(--bronze-deep);font-size:.8rem;margin-top:4px} .service-deliverables li strong{font-weight:400;font-size:1.02rem;color:var(--text-strong)} .service-deliverables li p{font-size:.88rem;color:var(--text-muted);line-height:1.8;margin-top:.2rem} .service-row:last-child{padding-bottom:2rem} .bespoke-scope ul{list-style:none;padding:0;margin:1.2rem 0} .bespoke-scope li{padding:.65rem 0 .65rem .2rem;border-bottom:1px solid var(--rule);font-size:.95rem;display:flex;align-items:baseline;gap:.7rem} .bespoke-scope li::before{content:"";width:4px;height:4px;background:var(--bronze);rotate:45deg;flex-shrink:0} .scope-note{font-size:.85rem;color:var(--text-muted);line-height:1.8} .chapter--deep{position:relative;overflow:hidden} .chapter--deep::before{content:"";position:absolute;width:490px;height:425px;left:-210px;top:40px;background:var(--deep-bronze);mask:url('../Logo.svg') center/contain no-repeat;opacity:.025;pointer-events:none} .chapter--deep .shell{position:relative} .chapter--deep .section-rail{border-color:var(--deep-rule)} .chapter--deep .section-rail p{color:var(--deep-text)} .chapter--deep .rail-number{color:var(--deep-bronze)} .chapter--deep .chapter-title{max-width:26ch} .chapter--deep .chapter-lede{max-width:80ch;font-size:1.12rem} .chapter--deep .chapter-head{margin-top:3rem} .chapter--deep .plates{grid-template-columns:repeat(4,1fr);gap:2.4rem;margin-top:3.2rem} .chapter--deep .plate h3{display:block;font-weight:400;font-size:1.28rem} .chapter--deep .plate h3::before{display:block;margin-bottom:.9rem;translate:none;width:4px;height:4px} .chapter--deep .plate p{font-size:.94rem;line-height:1.95} .chapter--deep .closing p{max-width:60ch;font-size:1.5rem} .contact-section{padding-block:var(--band);display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center} .contact-section h2{margin-top:1rem} .contact-copy>p{max-width:43ch;color:var(--text-muted);font-size:1.1rem;line-height:1.9;margin-bottom:1.7rem} .contact-email{display:table;margin-top:1.4rem;font-family:"EB Garamond",Georgia,serif;font-size:1.02rem;letter-spacing:.025em;color:var(--text-muted);border-bottom:1px solid var(--rule)} .contact-email:hover{color:var(--bronze-deep)} .site-footer{border-top:1px solid var(--rule);background:var(--paper);padding-top:3.2rem} .footer-main{display:grid;grid-template-columns:1fr 1fr 1.1fr auto auto;gap:2rem;align-items:center;padding-bottom:3rem} .saudi-tech-badge{display:grid;place-items:center;justify-self:start;padding:14px 18px;border:1px solid var(--rule);border-radius:3px;background:#fcfaf6} .saudi-tech-badge img{display:block;height:144px;width:auto;max-width:none} .footer-brand{gap:17px} .footer-brand img{height:62px;width:64px} .footer-brand .brand-type strong{font-size:2.5rem} .footer-brand .brand-type>span{font-size:.7rem;letter-spacing:.27em} .footer-main>p{color:var(--text-muted);font-size:1.28rem;line-height:1.8} .footer-main nav{display:grid;grid-template-columns:1fr 1fr;gap:.3rem 2rem;font-size:.94rem;color:var(--text-muted)} .footer-main nav a:hover{color:var(--bronze-deep)} .back-top{font:1.4rem Georgia,serif;width:43px;height:43px;border:1px solid var(--rule);display:grid;place-items:center} .back-top:hover{border-color:var(--bronze)} .footer-bottom{border-top:1px solid var(--rule);padding-block:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.79rem;color:var(--text-muted)} .footer-bottom .latin-label{font-size:.55rem} /* ↳ 2026-10-22, the four legal links in every footer (SPEC C4). WHAT: `.footer-legal` is a