/* home60aa.css - 2026-09-17, worker "head".
   The ENTIRE former inline <style> block of index.html, relocated verbatim (byte-for-byte:
   41652 chars, 569 lines, every rule and every comment as written; 0 url() and 0 @import, so
   nothing needed a path rewrite). Kit rule 2 forbids a per-page <head><style>; the kit's Barba
   asset-sync also re-injects an inline <style>'s text on every transition into Home.
   Linked FIRST (immediately before global60aa.css) on all 12 pages so its cascade position is
   exactly what the inline block had - it was at head line 43, ahead of every <link rel=stylesheet>.
   Rules whose selectors also match inner-page markup are prefixed with :where(html:has(.intro-sticky__content))
   - zero added specificity, matches only while the Home hero is in the DOM, so it follows Barba. */

                @media (max-width: 979px) {
                    /* landscape photo sequence: fit the viewport width, do not blow it up like the old tower */
                    /* reverted 2026-09-17: this full-width override made the square frame 1920 tall in a 1080 window, so only 56% of each frame showed and the tower got cropped. ERA caps it at 1600 centred (67% visible). */
                }
                /* photo sequence: square canvas, full viewport width at every size */
                .architecture__canvas {
                    width: 100vw !important; left: 0 !important; max-width: none !important;
                }
                .architecture__canvas canvas {
                    filter: none;
                }
                /* Invisible ancestor whose HEIGHT is the sequence's scroll budget.
                   The architecture-building pattern has no measureSelector, so it measures
                   the canvas itself - square, so all 65 frames burn through in ~1 viewport
                   of scroll. Pointing measureSelector at this stretches the playthrough
                   without changing how the canvas draws or where it sits. */
                .architecture__seq-measure {
                    position: absolute; top: 100vh; left: 0;
                    width: 100%; height: 3000px;  /* was 33040 */
                    pointer-events: none;
                }
                .architecture__seq-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }
                /* 16:9 frames must COVER the viewport: canvas is square (plugin), so size it from the larger of width / height*16/9 */
                .architecture__canvas { position: absolute !important;
                    width: max(100vw, 177.78vh) !important;
                    left: calc((100vw - max(100vw, 177.78vh)) / 2) !important;
                    top: calc(50vh - max(100vw, 177.78vh) / 2) !important; }
                /* The arch reveal (.architecture__frame-sticky, 200lvh) used to begin while the
                   house was still assembling. Push it down so the build FINISHES first, then the
                   arch swallows the section. */
                .architecture__frame { padding-top: 0 !important; }




                /* --- pass 7b --- */
                /* the still hero photo was painting over the hero video - let the video be the hero */
                /* --- decorative pattern weight --- */
                /* ERA's curves are #CF8F7D on cream - almost the same tone, so they whisper.
                   Ours are full-strength gold and compete with the text. Same artwork, less shout. */
                :where(html:has(.intro-sticky__content)) svg.pattern, :where(html:has(.intro-sticky__content)) .pattern svg, :where(html:has(.intro-sticky__content)) svg.svg-fix.pattern,
                .architecture__pattern, :where(html:has(.intro-sticky__content)) [class*="pattern"] svg { opacity: .32 !important; }

                /* --- word spans --- */
                /* ERA's reveal wraps each word in <span class="word"> with its own colour, so
                   styling the paragraph never reaches them. Colour the spans themselves. */
                .architecture__long-text .word,
                .architecture__long-text .whitespace,
                p.architecture__long-text span {
                    color: #051936 !important; -webkit-text-fill-color: #051936 !important; }
                /* --- pass 13 --- */
                /* This paragraph renders cream-on-cream in the gold copy - invisible. It sits in a
                   light section but its colour is not reached by the .ui-light rules, so set it here. */
                /* SPECIFICITY: .architecture__long-text (0,1,0) loses to .ui-dark p (0,1,1),
                   so this paragraph rendered cream-on-cream here too. Ancestor + element wins.
                   Navy is the correct ink for this palette. */
                .ui-dark p.architecture__long-text,
                p.architecture__long-text,
                .architecture__quote p.text-lead,
                div.architecture__quote, div.architecture__quote p {
                    color: #051936 !important; }
                .ui-dark .architecture__long-text { color: #f4f1ec !important; }
                /* --- pass 12 --- */
                @media (max-width: 979px) {
                    /* the description sat ON the hero image at top 275 - lift it clear */
                    .intro-sticky__description {
                        position: relative !important; z-index: 3; margin-top: 14px;
                        text-shadow: 0 1px 12px rgba(0,0,0,.45); }
                    /* the wrapper reserved 693px for a ~219px band - close the dead space */
                /* removed: min-height:0 capped the hero container at 850px against ERA's
                   1410, which is what kept the image a letterbox instead of ERA's square. */
                    .intro-sticky__content { position: relative !important; }
                }
                /* --- pass 11 --- */
                /* hero: still image instead of the video (owner call). The <video> is only hidden,
                   so restoring it is a one-line revert. */
                .intro-sticky__image > video.intro-slot-video { display: none !important; }
                @media (max-width: 979px) { }
                /* --- pass 10 --- */
                /* LIGHT TRAIL: white -> warm amber, and additive so it reads over dark AND bright. */
                :where(html:has(.intro-sticky__content)) .webgl-deco, .architecture__webgl-deco, :where(html:has(.intro-sticky__content)) .touch-image__webgl-deco, :where(html:has(.intro-sticky__content)) .menu__webgl-deco__inner {
                    filter: sepia(1) saturate(5.5) hue-rotate(-12deg) brightness(1.18) contrast(1.15) !important;
                    mix-blend-mode: screen !important; }
                /* the photo cylinder is not the light - stop tinting the photograph */
                :where(html:has(.intro-sticky__content)) .js-visualization-canvas { filter: none !important; }

                /* HERO TYPE: let the scene share the opening view. */
                /* --- pass 9 --- */
                /* header/menu chrome rules moved to inner60aa.css (chrome block, 2026-09-17): logo sizes, header transparent, tablet header guard, btn__text 13px, button text like ERA, no-select, menu pics/drum. */

                /* HERO FRAMING: square slot -> true 16:9, so the whole scene fits with no crop. */
                /* removed: height:46.9vw forced the hero image to a 2.13 letterbox.
                   ERA's is square (0.99). Let it take ERA's own sizing. */
                /* was display:none - that removed ERA's photo from layout, and that photo is
                   what gives the hero its square height. visibility:hidden below keeps the
                   space while staying invisible behind our still. */
                .intro-sticky__image > video.intro-slot-video {
                    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
                /* --- pass 7c --- */
                /* the hero video lives INSIDE ERA's clipped picture slot, so it inherits the
                   scroll clip-path and scale. ERA's own photo stays for sizing but is invisible. */
                .intro-sticky__image { display: block !important; position: relative; }
                .intro-sticky__image > video.intro-slot-video {
                    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
                /* the full-bleed background layer is what was flattening the city - off */
                .intro-video { display: none !important; }
                .intro-video { z-index: 0 !important; }
                .intro-sticky__content { position: relative; z-index: 2; }
                /* --- pass 4 --- */
                :where(html:has(.intro-sticky__content)) .js-visualization-canvas, :where(html:has(.intro-sticky__content)) .webgl-deco, :where(html:has(.intro-sticky__content)) .menu__webgl-deco__inner, :where(html:has(.intro-sticky__content)) .touch-image__webgl-deco {
                    filter: saturate(1.25) brightness(1.12) contrast(1.15); }

                /* the marble deco overlapped the INTERIORS wordmark - drop it below the type */
                .interiors-ceilings__overlay, .interiors__deco, [class*="interiors"] [class*="deco"] { z-index: 0 !important; }
                .interiors-ceilings-wrapper h2, .interiors-ceilings-wrapper .text-h1, [class*="interiors"] h2 { position: relative; z-index: 3; }
                [class*="interiors"] picture[class*="deco"], [class*="interiors"] img[src*="deco"] { transform: translateY(14%); }
                /* map: ERA's own pin + Moscow metro badges are blanked images - collapse their boxes too */
                .joy-map__container img[src*="map-metro"],
                img[src*="map-metro"] { opacity: 0 !important; pointer-events: none; }

                /* era-navy 2026-09-14: the office pin is BACK, as on /era-gold/. The deployed
                   asset is already the orange/navy pin (pin-c2b), not the gold one. */
                .joy-map__era, .joy-map__era img, img[src*="map-era"] { opacity: 1 !important; }
                .joy-map__era { transform: translate(-50%, -44.3%) !important; }
                /* --- depth + rhythm --- */
                /* dark chapters: real chroma instead of neutral grey */
                :where(html:has(.intro-sticky__content)) body, :where(html:has(.intro-sticky__content)) .ui-dark-background, :where(html:has(.intro-sticky__content)) .ui-dark, :where(html:has(.intro-sticky__content)) .ui-dark.ui-background, :where(html:has(.intro-sticky__content)) section.ui-dark {
                    background-color: #051936 !important; }
                /* The cookie dialog also carries .ui-dark. The rule above was therefore painting
                   the whole position:fixed, full-width <dialog> dark - a black band straight across
                   the hero image and over the 3D-MAP button. Only its inner pill should be filled. */
                :where(html:has(.intro-sticky__content)) dialog.cookie-consent, :where(html:has(.intro-sticky__content)) .cookie-consent { background-color: transparent !important;
                    background-image: none !important; border: 0 !important; }

                /* --- hero section --- */
                /* 1. The band sits at y529 in a 1080 viewport and is 1072 tall, so only ~51% of it
                      is above the fold - the opening view is mostly sky with the scene below the
                      cut. Raising it puts more of the composition in the first screen. */
                @media (min-width: 980px) {
                    .intro-sticky__image { margin-top: -180px !important; }
                }
                /* 2. "MOSHE" is gold type sitting on the pale gold sky of the photograph - the same
                      tonal family, so the word dissolves into the image. A soft dark halo separates
                      them without changing the colour or darkening the photo. */
                .intro-sticky__text--art, .intro-sticky__content .text-h1 {
                    text-shadow: 0 1px 2px rgba(0,0,0,.45); }

                /* --- ARCHITECTURE section: the image was fighting the page --- */
                /* Measured against ERA's own image in this slot:
                      ERA   mean luminance 139-152, 16-27% of pixels near-white
                      ours  mean luminance 163-165, 43-45% of pixels near-white
                   Nearly double the blown-out white, dropped onto a near-black page. That is why the
                   white headline vanishes where it crosses the photo, why the section reads as harsh,
                   and why the amber trail dies over it - additive light has nothing to add to white.
                   ERA's version works because its photo is dusk-toned and BELONGS to the navy.
                   Grading ours into the same tonal world fixes all three at once, with no new photo. */
                /* The bright staircase the owner flagged is architecture/image-3, which lives in
                   .architecture__content-image-wrap - NOT the frame/shade layers. Probed the live DOM
                   to confirm: image-2 was picking up the filter, image-3 reported `filter: none`. */
                .architecture__picture-shade img,
                .architecture__picture-shade picture,
                .architecture__content-image-wrap img,
                .architecture__content-image img,
                .architecture__frame-sticky-inner img,
                .architecture__frame img,
                /* elementFromPoint at the bright spot the owner circled returns
                   picture.art-deco__image (700x988) - the ART-DECO block, not architecture.
                   The headline above it belongs to a different section, which is why grading
                   architecture's images changed nothing visible. */
                /* The philosophy quote: its own <p class="text-lead"> carries cream (244,241,236),
                   overriding the ink its parent .architecture__quote correctly has - so the whole
                   quote renders cream-on-cream and that panel looks empty. Probed live:
                     p.text-lead             color rgb(244,241,236)
                     div.architecture__quote color rgb(20,17,12)   <- correct, overridden
                   Confirmed NOT a fault by the same scan: the CTA buttons take their gold from a
                   child element, so dark text on them is right. */
                /* SPECIFICITY: the palette's `.ui-dark .text-lead` rule is (0,2,0) and appears
                   LATER in this stylesheet, so a matching (0,2,0) selector loses to it - the quote
                   sits inside a .ui-dark section even though its own panel is light. Adding the
                   element name (p.text-lead) makes these (0,2,1) and they win. */
                /* The paragraph lost the same way the quote did, one level down:
                     .architecture__long-text  (0,1,0)
                     .ui-dark p                (0,1,1)   <- wins, paints it cream
                   Prefixing with .ui-dark and naming the element makes it (0,2,1). */
                .ui-dark p.architecture__long-text,
                p.architecture__long-text,
                .architecture__quote p.text-lead,
                .ui-dark .architecture__quote p.text-lead,
                .ui-dark .architecture__quote span.word,
                .architecture__content-text p.text-lead,
                div.architecture__quote, div.architecture__quote p {
                    color: #14110c !important; }

                /* the tour video sat in the cream panel as a raw black box with browser controls */
                .tour-video-wrap { border-radius: 14px; overflow: hidden; }
                .tour-video { background: transparent !important; border-radius: 14px; }

                .art-deco__image, .art-deco__image img,
                .art-deco__container-bottom img, .art-deco__content img {
                    filter: brightness(.68) contrast(1.04) saturate(.96) !important; }

                /* --- 768-979px: the tablet/small-laptop gap --- */
                /* Measured on the live page:
                      width  band    desc right edge  viewport
                      1024   1219        956           1024   ok
                       960    530       1019            960   band collapsed, text cut off by 59px
                       900    497        961            900   cut off by 61px
                       768    424        835            768   cut off by 67px
                   ERA switches to phone rules below 980px. At 768-979 that gives a phone-sized band
                   and a description running off the right edge. This range is a small desktop, not a
                   large phone, so it gets desktop-shaped rules with the text kept inside the viewport. */
                @media (min-width: 768px) and (max-width: 979px) {
                    .intro-sticky__image {
                        width: 100% !important; left: 0 !important; margin-top: -90px !important; }
                    .intro-sticky__description {
                        position: absolute !important;
                        left: 6vw !important; right: 6vw !important;
                        width: auto !important; max-width: 88vw !important;
                        /* NOTE: a percentage here resolves against .intro-sticky__text-container
                           (the 240px headline box at y128), NOT the viewport - so 26% landed the
                           subtitle inside the headline. vh is measured from the viewport and clears
                           it: container top is ~14vh, the headline ends ~41vh, so 30vh sits below. */
                        top: 30vh !important; bottom: auto !important; z-index: 4;
                        text-shadow: 0 1px 10px rgba(0,0,0,.6); }
                }
                /* NOTE: a 34px blur here produced a muddy grey cloud behind the letters -
                   worse than the low contrast it was meant to fix. A tight 2px shadow gives
                   edge definition against the pale sky without any visible haze. */
                /* light chapters: bring them back, with READABLE ink text */
                :where(html:has(.intro-sticky__content)) .ui-light, :where(html:has(.intro-sticky__content)) .ui-light-background, :where(html:has(.intro-sticky__content)) .ui-white-background { background-color: #f4f1ec !important; }
                :where(html:has(.intro-sticky__content)) .ui-light, :where(html:has(.intro-sticky__content)) .ui-light-background, :where(html:has(.intro-sticky__content)) .ui-white-background,
                :where(html:has(.intro-sticky__content)) .ui-light h1, :where(html:has(.intro-sticky__content)) .ui-light h2, :where(html:has(.intro-sticky__content)) .ui-light h3, :where(html:has(.intro-sticky__content)) .ui-light p, :where(html:has(.intro-sticky__content)) .ui-light span,
                :where(html:has(.intro-sticky__content)) .ui-light li, :where(html:has(.intro-sticky__content)) .ui-light .text-h1, :where(html:has(.intro-sticky__content)) .ui-light .text-h2, :where(html:has(.intro-sticky__content)) .ui-light .text-lead,
                :where(html:has(.intro-sticky__content)) .ui-light-background > .container-h, :where(html:has(.intro-sticky__content)) .ui-light .text {
                    color: #051936 !important; --t-text: #051936; --t-heading: #051936; }
                /* --- framing + breathing room (owner brief items 3 and 4) --- */
                /* Measured: these containers fight their photographs' own proportions.
                   interiors carousel  source AR 0.80 portrait  vs container AR 1.10 -> 27% of the height cut
                   ceilings            source AR 0.75 portrait  vs container AR 0.52 -> 31% of the width cut
                   Correcting the CONTAINER shape (not the crop inside it) recovers the composition
                   without stretching the image and without letterbox bars. */
                /* Scoped: this was unscoped and hit EVERY carousel, including the walk
   slider (.carousel--joy), forcing its picture box to 4:5 portrait. That made
   the box 1175px tall against ERA's 866, so the photo fell ~459px short of the
   bottom and the arrows floated in empty space. Interiors only now. */
                /* reverted to ERA proportions: this made the interiors section 553px shorter than ERA overall, so the copy ran past the bottom and the pool photo above got covered early. */
                /* the height is set on the PARENT .interiors-ceilings (3083px at 1600 wide),
                   so aspect-ratio on the child had nothing free to resolve against.
                   133.33vw == 3:4 at any width, an exact match to the 1500x2000 source. */
                /* reverted to ERA proportions: this made the interiors section 553px shorter than ERA overall, so the copy ran past the bottom and the pool photo above got covered early. */
                /* the <picture>/<img> keep their own 3083px height and overflow the wrapper,
                   so they have to be tied to it explicitly. */
                /* removed: same circular rule as the pool section - the wrapper takes its
                   height FROM the picture, so picture:100% collapsed it. */
                /* pool: the container is fine (AR 1.68 vs a 1.60 source) but the <img> was
                   stretched to 1600x1425 and overflowed it -> only 70% of the width showed. */
                /* removed: .touch-background picture height:100% was circular - the
                   container takes its height FROM the picture, so 100% collapsed it to
                   696px instead of ERA's full-viewport 950px. */
                /* air around the feature media, so images read as placed objects rather than wallpaper */
                .carousel__list__picture-wrapper { margin-block: 2.5vh; }
                .interiors-ceilings-wrapper { margin-block: 4vh; }
                .new-era__image, .apartments__sticky-wrapper-inner { margin-block: 2vh; }

                /* --- spinning card: our own warm glow --- */
                /* Confirmed live: .joy-title__webgl-deco__inner contains exactly ONE canvas (1016x1016)
                   and that canvas IS the photo cylinder. There is no separate light layer, so the
                   sepia/saturate/screen treatment used on the other three deco layers would recolour
                   the photographs themselves - the pass-4 gold-slab failure. Instead we add our own
                   warm halo as an additive overlay: the canvas pixels are never touched, and additive
                   light cannot darken the photo. */
                .joy-title__webgl-deco__inner { position: relative; }
                /* warm glow removed: contain:strict clipped it into a hard brown square */

                /* dark sections nested inside a light wrapper keep their own light text */
                :where(html:has(.intro-sticky__content)) .ui-dark, :where(html:has(.intro-sticky__content)) .ui-dark h1, :where(html:has(.intro-sticky__content)) .ui-dark h2, :where(html:has(.intro-sticky__content)) .ui-dark h3, :where(html:has(.intro-sticky__content)) .ui-dark p, :where(html:has(.intro-sticky__content)) .ui-dark span,
                :where(html:has(.intro-sticky__content)) .ui-dark .text-h1, :where(html:has(.intro-sticky__content)) .ui-dark .text-h2, :where(html:has(.intro-sticky__content)) .ui-dark .text-lead {
                    color: #f4f1ec !important; --t-text: #f4f1ec; --t-heading: #f4f1ec; }
                /* --- pass 3 --- */
                .joy-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
                .tour-video-wrap { display: block; max-width: 520px; }
                .tour-video { width: 100%; height: auto; display: block; background: #000; }
                .architecture__inner-title, .intro-sticky__description { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--t-text) !important; }
                /* --- pass 2: hero video, menu pictures, journey captions --- */
                .intro-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
                .intro-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
                .intro-video::after { content: ""; position: absolute; inset: 0;
                    background: linear-gradient(180deg, rgba(var(--c-blue-rgb), .42) 0%, rgba(var(--c-blue-rgb), .18) 45%, rgba(var(--c-blue-rgb), .70) 100%); }
                .intro-sticky__flower-bg { position: relative; z-index: 1; }
                .menu__pics { position: absolute; right: 4vw; top: 50%; width: 21vw; aspect-ratio: 4 / 5; transform: translateY(-50%);
                    border-radius: 10.5vw 10.5vw 0 0; overflow: hidden; z-index: 3; pointer-events: none; }
                .menu__pic { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateY(14%) rotate(5deg) scale(1.08);
                    transform-origin: 50% 110%; transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
                .menu__pic.is-active { opacity: 1; transform: none; }
                .menu__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
                @media (max-width: 979px) { .menu__pics { display: none; } }
                .seq-caps { position: absolute; left: clamp(24px, 5vw, 80px); top: 50%; z-index: 4; pointer-events: none; }
                .seq-cap { position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0; white-space: nowrap; }
                .seq-cap small { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--c-brick);
                    margin-bottom: 12px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
                .seq-cap span { display: block; font-size: clamp(22px, 2.8vw, 44px); font-weight: 300; letter-spacing: .08em; text-transform: uppercase;
                    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 30px rgba(0,0,0,.6); }
                @media (max-width: 979px) { .seq-cap span { font-size: 22px; white-space: normal; } .seq-caps { left: 20px; } }
            :where(html:has(.intro-sticky__content)) body { background: #051936; color: #f4f1ec; }
            :where(html:has(.intro-sticky__content)) a { color: #f37021; }
            .js:not(.is-ready), .js:not(.is-ready) * { transition: none !important; }
        
                /* The 3D-MAP button's arrow is <use stroke="currentColor">, and the palette
                   pass set the button's colour to cream - a cream arrow on the cream disc,
                   i.e. invisible. ERA draws it dark on white; ours goes black on white. */
                .joy-map__map-link .joy-map__map-link-button,
                .joy-map__map-link .joy-map__map-link-button .btn__icon,
                .joy-map__map-link-button svg.btn__icon { color: #000000 !important; }

                /* TABLET-TYPE-FLOOR: ERA scales type off viewport width with no minimum, so between
                   768 and ~1400px the small styles collapse - measured 8.6px on the quote
                   author and architects title, 10.3px on button and footer text. Floor them
                   so a tablet stays readable. Desktop (>=1440) is untouched. */
                @media (max-width: 1199px) {
                    .architecture__quote-author,
                    .architecture__architects-title,
                    :where(html:has(.intro-sticky__content)) .text-small-xs                { font-size: 12px !important; }
                    .architecture__inner-title    { font-size: 13px !important; }
                    :where(html:has(.intro-sticky__content)) .text-small                   { font-size: 14px !important; }
                }

                /* APARTMENTS-STAYS-TRANSPARENT: ERA leaves the apartments section's background TRANSPARENT so the
                   cream interiors section shows through while it slides over. My blanket
                   .ui-dark black painted it solid, which covered the cream and hid the arch. */
                section.apartments, .apartments.ui-dark, .apartments.ui-background,
                section[class*="apartments"] { background-color: transparent !important; }

                /* NEW-ERA-SOFT-ENTRY: the apartments section is 2550px tall but its photo only 850px, so the
                   rest is bare backdrop - navy in ERA, black here. The sunset photo below then
                   started with a hard horizontal cut. Fade its top edge so it emerges from the
                   dark instead of butting against it. */
                .new-era__image, .new-era__image picture, .new-era__image img {
                    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 3%, #000 7%);
                    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 3%, #000 7%); }

                /* HERO-3D-ICON-INK: the hero 3D-MAP button's "3D" glyph paints with currentColor. The
                   palette pass set that colour to cream (244,241,236) and the glyph sits on
                   a cream/white disc, so it was invisible. ERA uses navy on white; ours goes
                   black on white. Same fault as the map button's arrow. */
                .intro-sticky__map-link .intro-sticky__map-link-button,
                .intro-sticky__map-link-button .btn__content,
                .intro-sticky__map-link-button .btn__icon,
                .intro-sticky__map-link-button svg.icon-3d { color: #000000 !important; }
                /* HERO-PARTNERS-EQUAL v2: partners equal in cream, company in the accent.
                   "VENDU888" is 8 characters where ERA's "ART" is 3, so at the inherited
                   171px it ran 992px wide and straight through the second line. Sized down
                   to fit the right-hand column. The reveal wraps each word in its own
                   <span class="word"> carrying its own colour, so the colour must be set on
                   those spans too - a parent colour never reaches them. */
                .intro-sticky__text--upper, .intro-sticky__text--upper .word,
                .intro-sticky__text--bottom, .intro-sticky__text--bottom .word {
                    color: #f4f1ec !important; -webkit-text-fill-color: #f4f1ec !important; }
                /* the accent word is painted /* era-navy 2026-09-14, was VENDU888 geometry: by ERA's own clipped gradient
                   (--c-text-gradient, gold here / orange on c2). Overriding colour or
                   text-fill-color would flatten it, so leave it to do its job. *)
                .intro-sticky__content .intro-sticky__text--art {
                    font-size: 112px !important; letter-spacing: .02em; line-height: 1.05; } */
                @media (max-width: 979px) {/* era-navy 2026-09-14, was VENDU888 geometry: 
                    .intro-sticky__content .intro-sticky__text--art { font-size: 44px !important; } */
                }
                .intro-sticky__content .intro-sticky__description { max-width: 366px !important; }


                /* HERO-ACCENT-OWN-LINE: ERA pins the accent word to the bottom-right of the H1
                   (position:absolute; bottom:0; right:0). That only works because their
                   second line is "OF" - two letters. Ours is "& MOSHE", seven letters that
                   run right across, so the pinned company name landed on top of it at every
                   width. Take it out of the corner and give it its own line, right-aligned. */
                .intro-sticky__content h1 { display: block; }/* era-navy 2026-09-14, was VENDU888 geometry: 
                .intro-sticky__content .intro-sticky__text--art {
                    position: static !important;
                    bottom: auto !important; right: auto !important;
                    display: block !important;
                    text-align: right !important;
                    margin-top: .08em !important;
                    font-size: 96px !important;
                    letter-spacing: .05em; line-height: 1.1; } */
                @media (max-width: 979px) {/* era-navy 2026-09-14, was VENDU888 geometry: 
                    .intro-sticky__content .intro-sticky__text--art { font-size: 46px !important; } */
                }

                /* HERO-POSITION-FIX (2026-09-10): at >=980px, revert the accent word
                   (VENDU888/ART) to the template's own position:absolute; bottom:0; right:0
                   (anchored to .intro-sticky__text-container, which is position:relative),
                   instead of HERO-ACCENT-OWN-LINE's position:static + display:block.
                   CAUSE: with position:static, the accent word is an in-flow block child of
                   h1, so it must fill h1's own box width. The template's own rule
                   ".intro-sticky__text-container h1 { min-width: <fluid, grows with
                   viewport> }" (landing60aa.css) floors h1's width, and that floor grows
                   past h1's natural content width somewhere between 1400-1440px, then
                   plateaus near 1026px from ~1600px up. The static block accent word
                   stretches to fill that widening h1, so at 1920 it lands mid-column
                   (right edge ~1106px) instead of pinned to the far right like ERA's
                   reference (right edge ~1840px, flush with .intro-sticky__text-container).
                   Measured live (probe_hero_width.js):
                     ours  @1400 art right=751   @1920 art right=1106
                     era   @1400 art right=1320  @1920 art right=1840
                   FIX: position:absolute removes it from flow entirely, so it never
                   interacts with h1's min-width, and shrink-to-fit sizing (only `right` is
                   set, not `left`) keeps its own content-driven width (96px font, fixed, so
                   constant regardless of viewport) pinned to the right edge of
                   .intro-sticky__text-container at every width >=980px - the same
                   mechanism ERA itself uses. Verified no overlap with "& MOSHÉ" at 1400 or
                   1920 (probe_hero_sweep.js). Below 980px, HERO-ACCENT-OWN-LINE's own-line
                   layout is left untouched. */
                @media (min-width: 980px) {/* era-navy 2026-09-14, was VENDU888 geometry: 
                    .intro-sticky__content .intro-sticky__text--art {
                        position: absolute !important;
                        bottom: 0 !important;
                        right: 0 !important;
                        left: auto !important;
                        top: auto !important;
                        margin-top: 0 !important;
                    } */
                }

                /* HERO-NARROW-MATCHES-ERA: below 980 our hero diverged badly from the reference (measured at
                   960): headline started at x=499 vs their 53, the second line wrapped to two
                   lines, the accent word dropped to its own row, and the image was 530 wide
                   against their 1142. Causes were two of our own overrides - an image width
                   that capped it to the parent instead of the reference's deliberate overflow,
                   and the accent word left position:static below the breakpoint. Our words are
                   far longer than "PLACE / OF / ART", so the type also comes down or it wraps. */
                @media (max-width: 979px) {
                    .intro-sticky__image { width: 100% !important; left: 0 !important; }
                    /* full container width; the template's own 1.19 scale then makes it
                      /* era-navy 2026-09-14, was VENDU888 geometry:  overflow both screen edges exactly like the reference, so there are
                       no black gutters. "auto" gave 720px and left ~52px of dead black
                       either side. *)
                    .intro-sticky__content .intro-sticky__text--art {
                        position: absolute !important;
                        bottom: 0 !important; right: 0 !important;
                        left: auto !important; top: auto !important;
                        margin-top: 0 !important;
                        font-size: 78px !important; } */
                    .intro-sticky__text--upper, .intro-sticky__text--bottom {
                        font-size: 104px !important; white-space: nowrap; }
                }
                @media (max-width: 767px) {
                    .intro-sticky__text--upper, .intro-sticky__text--bottom {
                        font-size: 62px !important; }/* era-navy 2026-09-14, was VENDU888 geometry: 
                    .intro-sticky__content .intro-sticky__text--art { font-size: 46px !important; } */
                }

                /* HERO-CONTENT-FULLWIDTH: measured at 960 - our .intro-sticky__content was 574px wide
                   starting at x=386 and position:relative, where the reference has it 960px
                   wide at x=0 and position:absolute. That single box caused both remaining
                   faults: the headline sat at x=450 instead of 64, and the image was capped
                   to 386px instead of the reference's 960 (rendering 1142 with its scale). */
                @media (max-width: 979px) {
                    .intro-sticky__content {
                        position: absolute !important;
                        width: 100% !important;
                        left: 0 !important; right: auto !important; }
                }

                /* HERO-TEXT-CLEARS-IMAGE: measured at 960 - our image top was 297 while the headline ran
                   to 418, so it cut straight through "& MOSHE" and the slogan, both of which
                   then sat on bright sky and disappeared. The reference only overlaps its
                   short second word by ~69px. Push the image below the headline and lift the
                   slogan back to the top, where the reference keeps it (y=160, not y=398). */
                @media (max-width: 979px) {
                    .intro-sticky__image { margin-top: -54px !important; }
                    .intro-sticky__content .intro-sticky__description {
                        position: absolute !important;
                        /* match the reference exactly: the slogan is a NARROW block butted up
                           against the headline's right edge and level with its top - not a wide
                           right-aligned band. Theirs: 324px wide, x=431 (where PLACE ends), y=128.
                           Ours was 403 wide at x=445, y=160, which opened a gap. */
                        top: 0 !important; bottom: auto !important;
                        left: 46% !important; right: auto !important;
                        width: 324px !important; max-width: 36vw !important;
                        text-align: left !important;
                        z-index: 4 !important; }
                }

                /* LOADING-KEEPS-ITS-PALETTE: the loading screen carries .ui-dark, so the blanket dark rule
                   painted it pure black - measured brightness 6.6 against the reference's 24.
                   That is what made the wait read as a dead screen instead of a designed one.
                   Each palette keeps its own ink here. Also eases the hero in rather than
                   snapping: the reference climbs 25>31>48>66>76 over ~2s, ours jumped 6.6>62
                   in a single frame. */
                :where(html:has(.intro-sticky__content)) .preloader, :where(html:has(.intro-sticky__content)) .preloader__content,
                :where(html:has(.intro-sticky__content)) .preloader__content.ui-dark, :where(html:has(.intro-sticky__content)) .preloader__content.ui-background {
                    background-color: #051936 !important; }
                .intro-sticky__content, .intro-sticky__image {
                    transition: opacity .9s cubic-bezier(.25,.74,.22,.99); }

                /* HERO-USES-TEMPLATE-REVEAL: our photo was a CSS background on the parent, so the
                   template's reveal (which fades the INNER picture 0 -> 1) had nothing to
                   animate and the image simply appeared. The photo now lives in the
                   template's own image slot, so its reveal drives it exactly as the
                   reference does. */

                /* VENDU-STACKED: eight characters in one line /* era-navy 2026-09-14, was VENDU888 geometry: forced the company name small and
                   into the second headline line. Stacked - 888 drops under DU, right-aligned
                   so it ends flush with VENDU - it is half the width, so it can be bigger. *)
                .intro-sticky__text--art .v888 {
                    display: block; text-align: right;
                    margin-top: -.20em; letter-spacing: .02em; } */

/* === era-navy 2026-09-14 — HERO WORDMARK back to the / treatment ===
   Owner: "the hero header frank and moshe with moshe in orange, he likes that,
   we keep that."  MOSHE now sits in .intro-sticky__text--art, which already
   carries the orange gradient on this palette (linear-gradient(#f9a76b, #f37021),
   background-clip:text) — so the word is orange at source, no colour override.
   Geometry measured off / at 1440: font-size 257px = inherit from h1,
   letter-spacing -5.14px, line-height 260px, in normal flow (position relative),
   NOT pinned bottom-right at 96px the way VENDU888 was. */
.intro-sticky__content .intro-sticky__text--art,
.intro-sticky__text--art {
  /* ERA's own placement, measured on /: pinned to the bottom-right of
     .intro-sticky__text-container so MOSHE sits on the same line as the ampersand. */
  position: absolute !important;
  top: auto !important; right: 0 !important; bottom: 0 !important; left: auto !important;
  display: inline !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  margin-top: 0 !important;
}

/* HERO SLOGAN — one line, as fixed on /era-gold/ 2026-09-11.
   It sat at max-width:366px which forced three lines; the calc tracks FRANK's
   K glyph (fixed at ~674-690px) against the H1 box, which grows with the viewport. */
@media (min-width: 1200px) {
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description {
    max-width: 420px !important;
    white-space: normal !important;
    transform: none !important;
  }
}

/* === end era-navy hero block === */


/* === 2026-09-15 — the acute accent on MOSHÉ rendered dark: the nested <span> that carries
   the é (Georgia) has no background of its own, and its box (292px tall) is taller than the
   parent's painted gradient box (206px), so the accent sits outside the gradient and shows the
   transparent fill. Give the span the same gradient, clipped to its own glyphs. === */
.intro-sticky__text--art > span { background: inherit !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
/* === end accent === */

/* === 2026-09-15 — CEILINGS PHOTO: show the picture, not a magnified slice. ERA sizes this box
   calc(100vw/1440*1920 + 100lvh) = 3640px at 1920 and crops a 2100x2800 file into it (1.30x). Ours is a real
   bedroom photo, so the box now takes the photo's own proportion: 100vw x 2800/2100 -> the whole image at
   0.91x. margin-top:-15% (ERA's top crop) dropped for the same reason. Tablet/phone (--n-md: auto) untouched. === */
@media (min-width: 980px) {
  .interiors-ceilings picture { height: calc(100vw / 2100 * 2800) !important; }
  .interiors-ceilings img { margin-top: 0 !important; object-position: 50% 50% !important; }
}
/* === end ceilings photo === */


/* === 2026-09-15 — with the shorter ceilings box, the LISTINGS section begins while the bedroom photo still
   fills the viewport; the photo's transformed wrapper painted over LISTINGS' flat background while its
   parallaxed pieces (towers cut-out) showed through. Lift LISTINGS above the interiors section so it slides
   over the photo like a normal section change. ERA's taller box merely kept the two apart. === */
@media (min-width: 980px) { section.apartments { position: relative; z-index: 3; } }
/* === end listings over ceilings === */


/* ============================================================================
   === STAGE 1 — 2026-09-17 pm, worker "hero".  Owner brief items H1, H2, H3, H4.
   === HOME PAGE ONLY.  Every rule below is either on .intro-sticky__* markup
   === (the Home hero, which exists on no other page) or prefixed with
   ===   :where(html:has(.intro-sticky__content)) main
   === - :where() adds ZERO specificity, html:has(.intro-sticky__content) matches
   === only while the Home hero is in the DOM (so it follows Barba), and `main`
   === keeps the shared header, menu, footer, cookie dialog and browser-message
   === out of the type scale.  Nothing here can reach the other 11 pages.
   ========================================================================== */

/* --- H2a: --c-brick-rgb was a GOLD leftover from the abandoned palette -------
   MEASURED on the live page (getComputedStyle on :root and on MOSHE):
     --c-brick      #f37021            <- the real brand orange, correct
     --c-brick-rgb  201,169,97         <- GOLD, wrong
   It is assigned into 13 theme variables (--t-primary-rgb, --t-link-default-
   normal-rgb, --t-button-link-text-rgb, --t-button-link-reverse-*-rgb, ...).
   Grepped every stylesheet and every JS bundle on the server: not one of those
   13 is ever used inside an rgb()/rgba() colour function, so today the gold
   value paints NOTHING - it is dead, not the cause of the dark MOSHE (the cause
   is the text-shadow below).  Corrected anyway so the next rule that does reach
   for it gets orange instead of gold-brown. */
:where(html:has(.intro-sticky__content)) { --c-brick-rgb: 243,112,33; --c-dark-brick-rgb: 217,95,20; }

/* --- H2b: MOSHE read dark brown because of an OVERLAY, not its colour --------
   MOSHE is painted by linear-gradient(180deg,#f9a76b 1.14%,#f37021 83.92%)
   with background-clip:text - light peach at the cap line, exact brand orange
   #f37021 at the baseline.  The "--- hero section ---" rule higher up this file
   added `text-shadow: 0 1px 2px rgba(0,0,0,.45)` to separate the word from the
   pale GOLD sky of the old palette.  With -webkit-text-fill-color:transparent
   Chrome paints that shadow ON TOP of the clipped gradient, so a 2px blur over
   a ~25px stem darkened the whole glyph interior.  MEASURED off the rendered
   1920 screenshot (max-red pixel per scanline, x1010-1845):
                          before            after
     cap line   y436   rgb(217,139,83)   rgb(248,158,94)   (design: 249,167,107)
     y484              rgb(191,117,70)   rgb(247,143,75)
     y532              rgb(179, 93,39)   rgb(246,132,60)
     y580              rgb(199, 92,26)   rgb(244,121,45)
     baseline   y604   rgb(174, 82,27)   rgb(243,112,33)   (design: 243,112,33)
     median of all orange px  rgb(135,75,35)  ->  rgb(245,131,61)
   Brand-orange reference sampled from the pill buttons in the same frame:
     MENU pill rgb(238,133,69)->rgb(223,107,35), FREE HOME EVALUATION pill
     rgb(244,144,83)->rgb(231,121,53)  ==  the #f7955a -> #d95f14 pill gradient.
   The gradient is KEPT (it stays clearly orange end to end, #f9a76b -> #f37021,
   and it ends on the exact brand orange).  Edge separation from the sky is kept
   too, moved to filter:drop-shadow, which is composited BEHIND the element
   instead of over its fill - same halo, zero darkening (verified: identical
   pixel values with the shadow off and with drop-shadow on). */
.intro-sticky__text--art,
.intro-sticky__content .text-h1,
.intro-sticky__text--art > span { text-shadow: none !important; }
.intro-sticky__content .intro-sticky__text--art {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.42)) !important; }

/* --- H1: hero tagline - starts at the right edge of the K, ONE line, level ---
   WHY it floated: .intro-sticky__text-container is a flex row of [h1][tagline],
   so the tagline's left edge is h1's right edge - but landing60aa.css floors h1
   with a fluid `min-width` that grows past FRANK's own text width, and the
   tagline then added its own fluid padding-left on top.  MEASURED before:
     width  FRANK ink right   h1 right   tagline box left   painted text left
     1920       682.7           790            790                832
     1440       682.7           700            700                740
     1280       472.5           523.3          523.3              563
     1024       437.7           437.7          437.7              472
   -> a 150px float at 1920, and the line wrapped to 2 rows (3 at 390).
   FIX: min-width:0 makes h1 shrink-wrap to FRANK's own text box, so h1's right
   edge IS the K's ink edge; padding-left:0 removes the second offset; nowrap
   holds one line.  MEASURED after (desc box left vs FRANK ink right, Range
   client rect on FRANK's text node):
     1920  682.7 / 682.7   1 line      1280  472.5 / 472.5   1 line
     1440  682.7 / 682.7   1 line      1024  437.7 / 437.7   1 line
   FRANK / & / MOSHE ink positions unchanged - only h1's BOX narrows:
     frank x 62.0 -> 62.0,  amp x 72.3 -> 72.3,  moshe box 1003.4x405.7
     836.6x205.9 -> identical at 1920 (and 523.4 -> 523.4 at 1440).
   Below 980px the hero stacks and the tagline is absolutely positioned inside
   the text container, so `left` is container-relative: the values below are
   (FRANK ink right - container x) measured at 960/768/390.  At <=767 one line
   is impossible (the uppercase string needs ~326px at 15px and only ~198px is
   left of the viewport), so it WRAPS TO TWO LINES there by choice, still
   starting exactly at the K. */
.intro-sticky__content .intro-sticky__description,
.intro-sticky__description { padding-left: 0 !important; }
@media (min-width: 980px) {
  .intro-sticky__text-container h1 { min-width: 0 !important; }
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description {
    margin-left: 0 !important; max-width: none !important;
    white-space: nowrap !important; text-align: left !important; }
}
@media (min-width: 1280px) {
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description { font-size: 22px !important; line-height: 1.35 !important; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description { font-size: 19px !important; line-height: 1.35 !important; }
}
@media (max-width: 979px) {
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description {
    left: 231px !important; right: 0 !important;
    width: auto !important; max-width: none !important; }
}
@media (max-width: 767px) {
  /* 152px == FRANK ink right (171.6) - text-container x (20) at 390.  At phone
     sizes the two words were literally touching ("FRANKHONESTY"), so the
     tagline keeps the K alignment plus one 12px word space - measured painted
     left 184 against the K's 171.6. */
  .intro-sticky__content .intro-sticky__description,
  .intro-sticky__description {
    left: 152px !important; right: 0 !important; max-width: none !important;
    margin-left: 12px !important; }
}

/* --- H3 + H4: ONE type scale for the home page ------------------------------
   AUDITED every text element on the page (walked the DOM, computed font-size /
   line-height / family per element).  The same job was being done at several
   different sizes, which is the inconsistency the owner is seeing:
     body paragraph   16px in FIVE places  (.architecture__inner-title - the
                      paragraph under CLEAR ADVICE; .touch-subtitle; and the
                      three bare <p class="leading-trim">)
     caption/eyebrow  10px (.text-small-xs: quote author, "Step inside.")
                      11px (.seq-cap small)   12px (.text-small-sm: "3D-map",
                      "Meet the team")        15px (.text-small: stat labels)
     quote            20px - exactly the same as the lead paragraph, so it was
                      not reading as a quote at all
   Display type is NOT touched: .text-h1/.text-h2 (FRANK, MOSHE, CLEAR ADVICE,
   AN ADDRESS WORTH A CLOSER LOOK, 171/257/355px), .text-h4 (57px) and
   .text-lead-lg (42px) statements, and .seq-cap span (44px) all keep their
   sizes.  Scale below: body 19px desktop (owner floor 18), captions 14px
   (owner floor 14), quote 28px (larger than body, sized as a quote). */
@media (min-width: 1280px) {
  /* quote */
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead,
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead span { font-size: 28px !important; line-height: 1.45 !important; }
  /* body paragraph */
  :where(html:has(.intro-sticky__content)) main .architecture__inner-title,
  :where(html:has(.intro-sticky__content)) main .touch-subtitle,
  :where(html:has(.intro-sticky__content)) main p[class="leading-trim"] { font-size: 19px !important; line-height: 1.6 !important; }
  /* lead paragraph */
  :where(html:has(.intro-sticky__content)) main .text-lead:not(.intro-sticky__description) { font-size: 22px !important; line-height: 1.4 !important; }
  /* caption / eyebrow / quote attribution */
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author,
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author span,
  :where(html:has(.intro-sticky__content)) main .architecture__architects-title,
  :where(html:has(.intro-sticky__content)) main .text-small-xs,
  :where(html:has(.intro-sticky__content)) main .text-small-sm,
  :where(html:has(.intro-sticky__content)) main .seq-cap small { font-size: 14px !important; line-height: 1.45 !important; }
  /* stat label */
  :where(html:has(.intro-sticky__content)) main .joy-slider__distance-text,
  :where(html:has(.intro-sticky__content)) main .text-small { font-size: 16px !important; line-height: 1.3 !important; }
  /* CTA label (in-page only - the header/menu/footer buttons are outside main) */
  :where(html:has(.intro-sticky__content)) main .btn__text { font-size: 14px !important; line-height: 1.2 !important; }
}
@media (min-width: 980px) and (max-width: 1279px) {
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead,
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead span { font-size: 24px !important; line-height: 1.45 !important; }
  :where(html:has(.intro-sticky__content)) main .architecture__inner-title,
  :where(html:has(.intro-sticky__content)) main .touch-subtitle,
  :where(html:has(.intro-sticky__content)) main p[class="leading-trim"] { font-size: 18px !important; line-height: 1.6 !important; }
  :where(html:has(.intro-sticky__content)) main .text-lead:not(.intro-sticky__description) { font-size: 19px !important; line-height: 1.4 !important; }
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author,
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author span,
  :where(html:has(.intro-sticky__content)) main .architecture__architects-title,
  :where(html:has(.intro-sticky__content)) main .text-small-xs,
  :where(html:has(.intro-sticky__content)) main .text-small-sm,
  :where(html:has(.intro-sticky__content)) main .seq-cap small { font-size: 14px !important; line-height: 1.45 !important; }
  :where(html:has(.intro-sticky__content)) main .joy-slider__distance-text,
  :where(html:has(.intro-sticky__content)) main .text-small { font-size: 15px !important; line-height: 1.3 !important; }
  :where(html:has(.intro-sticky__content)) main .btn__text { font-size: 14px !important; line-height: 1.2 !important; }
}
@media (max-width: 979px) {
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead,
  :where(html:has(.intro-sticky__content)) main .architecture__quote p.text-lead span { font-size: 19px !important; line-height: 1.5 !important; }
  :where(html:has(.intro-sticky__content)) main .architecture__inner-title,
  :where(html:has(.intro-sticky__content)) main .touch-subtitle,
  :where(html:has(.intro-sticky__content)) main p[class="leading-trim"] { font-size: 16px !important; line-height: 1.6 !important; }
  :where(html:has(.intro-sticky__content)) main .text-lead:not(.intro-sticky__description) { font-size: 16px !important; line-height: 1.45 !important; }
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author,
  :where(html:has(.intro-sticky__content)) main .architecture__quote-author span,
  :where(html:has(.intro-sticky__content)) main .architecture__architects-title,
  :where(html:has(.intro-sticky__content)) main .text-small-xs,
  :where(html:has(.intro-sticky__content)) main .text-small-sm,
  :where(html:has(.intro-sticky__content)) main .seq-cap small { font-size: 13px !important; line-height: 1.45 !important; }
  :where(html:has(.intro-sticky__content)) main .joy-slider__distance-text,
  :where(html:has(.intro-sticky__content)) main .text-small { font-size: 14px !important; line-height: 1.3 !important; }
  :where(html:has(.intro-sticky__content)) main .btn__text { font-size: 13px !important; line-height: 1.2 !important; }
}
/* === end STAGE 1 hero + type block === */

/* ==== coordinator 2026-09-17 pm: owner "move the sentence just a bit from the K more toward the middle" ==== */
@media (min-width: 980px){
  .intro-sticky__description{ margin-left: 3.5vw; }
}
/* ==== end coordinator ==== */
