/* ─── Service detail pages — shared scoped styles ─────────────────────────── Used by services/photography.html and (later) the other 7 service detail pages, the same way our-work/shoot.css is shared across the 14 shoot pages. Relies on style.css for: .navbar, .final-cta__*, .site-footer__* shared tokens. Everything here is prefixed .sd- to avoid collisions. ──────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Rothefight'; src: url('../assets/fonts/ROTHEFIGHT.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: block; } /* Accent palette — same four hues as the About page's value cards and the home page's reviews blob, so every page reads as one brand. */ :root { --sd-blue: #4f7dff; --sd-violet: #9b6bff; --sd-pink: #ff4fa3; --sd-cyan: #2fc2e8; } .sd-hero, .sd-section, .sd-intro, .sd-gallery, .final-cta { font-family: 'Inter', sans-serif; } /* Gentle fade-up on scroll entry — transform/opacity only, no layout properties, so it stays smooth on lower-end mobile. */ .sd-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .sd-reveal--visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .sd-reveal { opacity: 1; transform: none; transition: none; } } /* ─── Hero — giant Rothefight word behind a floating house cutout ─────────── Identical pattern to services.css's .svc-hero, kept separate so each service page can swap its own house image without touching the shared services grid page. */ .sd-hero { position: relative; height: clamp(280px, 40vw, 560px); background: #f7f5f2; display: flex; align-items: flex-start; justify-content: center; overflow: visible; padding-top: 60px; } .sd-hero__heading { font-family: 'Rothefight', sans-serif; font-weight: normal; /* Calibrated for longer service names (Photography, Videography, Commercial...) rather than services.css's shorter "SERVICES"/"ABOUT" — a lower vw coefficient so an 11+ letter word never exceeds the viewport. */ font-size: clamp(48px, 15vw, 210px); line-height: 0.88; letter-spacing: 0.01em; color: #1a1816; margin: 0; padding-top: 28px; position: relative; z-index: 1; text-align: center; width: 100%; /* Flex items default to min-width:auto, which for an unbreakable word forces this element (and its ancestors, up to ) wider than the viewport instead of letting the font-size clamp actually take effect. min-width:0 lets it shrink to the width we set above. */ min-width: 0; user-select: none; } .sd-hero__house-wrap { position: absolute; /* 20% larger (62% * 1.2) and sitting higher (less negative bottom) than the original pass — this house's silhouette is narrower/shorter than services.css's, so it needs the bump to read with equal weight and cover more of the heading behind it. */ bottom: -2%; left: 50%; transform: translateX(-50%); height: 74%; display: flex; align-items: flex-end; z-index: 2; pointer-events: none; } .sd-hero__house { height: 100%; width: auto; max-width: calc(100vw - 24px); display: block; transform-origin: bottom center; } /* ─── Shared section shell ───────────────────────────────────────────────── */ .sd-section { position: relative; background: #fff; padding: calc(3vw + 24px) 24px; } .sd-section__eyebrow { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: #2e2c2c; opacity: 0.4; margin-bottom: 1.25rem; text-align: center; } .sd-section__heading { position: relative; font-family: 'Inter', sans-serif; font-weight: 700; font-style: normal; font-size: clamp(1.9rem, 3.2vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.12; color: #2e2c2c; text-align: center; max-width: 720px; margin: 0 auto 3.5rem; } /* ─── Inline liquid glass CTA — same recipe as .final-cta__btn, reused for mid-page buttons that sit on a light background (intro copy block, the How It Works heading). ─────────────────────────────────────────────── */ .sd-inline-cta { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.85rem 2rem; border-radius: 100px; text-decoration: none; color: #2e2c2c; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; isolation: isolate; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .sd-inline-cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90), inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80), inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09), inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.08), 0px 8px 24px 0px rgba(0, 0, 0, 0.09); transition: background-color 0.3s ease; z-index: -1; } .sd-inline-cta:hover { transform: translateY(-2px); } .sd-inline-cta:hover::before { background: rgba(255, 255, 255, 0.72); } .sd-inline-cta svg { opacity: 0.7; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .sd-inline-cta:hover svg { transform: translateX(4px); } .sd-process__cta-wrap { display: flex; justify-content: center; margin-bottom: 3.5rem; } /* ─── Intro — value prop copy beside a real photo ────────────────────────── */ .sd-intro { padding: calc(4vw + 32px) 24px; background: #f7f5f2; } .sd-intro__wrap { /* Wider than the site's usual 1200px container — this pairing is meant to command more of the viewport on desktop than the sections above and below it. */ max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .sd-intro__image-wrap { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; } .sd-intro__image { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-intro__eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: #2e2c2c; opacity: 0.4; margin-bottom: 1.5rem; } .sd-intro__heading { font-family: 'Inter', sans-serif; font-weight: 700; font-style: normal; font-size: clamp(2rem, 2.8vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.16; color: #2e2c2c; margin-bottom: 2rem; } .sd-intro__body { font-size: 0.975rem; line-height: 1.8; color: #2e2c2c; opacity: 0.62; margin-bottom: 1.1rem; } .sd-intro__body strong { opacity: 1; } /* ─── Features: selectable list (left) + preview panel (right) ─────────────── */ .sd-feat { position: relative; /* Wider than the site's usual 1200px, matching the intro pairing above — this section is meant to command more of the desktop viewport. */ max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } .sd-feat-list { display: flex; flex-direction: column; /* Floor sized for "6 collapsed items + 1 expanded subtext" — without this, the brief moment between one item's subtext closing and the next one's opening makes the list (and the whole centered row) shrink and grow, reading as a bounce. This keeps the list's box the same height at every point in that transition. */ min-height: 540px; } .sd-feat-list__item { position: relative; display: flex; align-items: flex-start; gap: 1rem; width: 100%; padding: 1.15rem 0.5rem 1.15rem 1.5rem; background: none; border: none; border-top: 1px solid rgba(46, 44, 44, 0.1); text-align: left; cursor: pointer; font-family: 'Inter', sans-serif; } .sd-feat-list__item:last-child { border-bottom: 1px solid rgba(46, 44, 44, 0.1); } .sd-feat-list__bar { position: absolute; left: 0; top: 0.9rem; bottom: 0.9rem; width: 3px; border-radius: 2px; background: #1a1a1a; opacity: 0; transform: scaleY(0.4); transform-origin: center; transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .sd-feat-list__item.is-active .sd-feat-list__bar { opacity: 1; transform: scaleY(1); } .sd-feat-list__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #1a1a1a; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0.35; transition: opacity 0.25s ease; } .sd-feat-list__item.is-active .sd-feat-list__icon { opacity: 1; } .sd-feat-list__item.is-active .sd-feat-list__icon--blue { box-shadow: 0 0 0 6px rgba(79, 125, 255, 0.18), 0 8px 24px -6px rgba(79, 125, 255, 0.65); } .sd-feat-list__item.is-active .sd-feat-list__icon--violet { box-shadow: 0 0 0 6px rgba(155, 107, 255, 0.18), 0 8px 24px -6px rgba(155, 107, 255, 0.65); } .sd-feat-list__item.is-active .sd-feat-list__icon--pink { box-shadow: 0 0 0 6px rgba(255, 79, 163, 0.18), 0 8px 24px -6px rgba(255, 79, 163, 0.65); } .sd-feat-list__item.is-active .sd-feat-list__icon--cyan { box-shadow: 0 0 0 6px rgba(47, 194, 232, 0.18), 0 8px 24px -6px rgba(47, 194, 232, 0.65); } .sd-feat-list__text { display: flex; flex-direction: column; padding-top: 0.5rem; } .sd-feat-list__title { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; color: #2e2c2c; opacity: 0.5; transition: opacity 0.25s ease; } .sd-feat-list__item.is-active .sd-feat-list__title { opacity: 1; } .sd-feat-list__body { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 0.87rem; line-height: 1.6; color: #2e2c2c; margin-top: 0; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .sd-feat-list__item.is-active .sd-feat-list__body { max-height: 110px; opacity: 0.62; margin-top: 0.5rem; } /* ─── Feature panel — swaps content per selected list item ──────────────────── */ .sd-feat-panel { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; } .sd-feat-panel__slot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .sd-feat-panel__slot.is-active { opacity: 1; pointer-events: auto; } .sd-feat-panel__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Panel 0 — overlapping photo collage */ .sd-feat-photos { position: relative; width: 100%; height: 100%; } .sd-feat-photos__img { position: absolute; object-fit: cover; border-radius: 6px; box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.28); display: block; } .sd-feat-photos__img--1 { width: 56%; height: 78%; top: 0; left: 0; z-index: 1; } .sd-feat-photos__img--2 { width: 46%; height: 44%; bottom: 0; left: 12%; z-index: 2; } .sd-feat-photos__img--3 { width: 40%; height: 42%; top: 4%; right: 0; z-index: 3; } /* 1.4x the original footprint (30%/32%), pinned to the panel's right edge and bottom corner now instead of riding high near image 3. */ .sd-feat-photos__img--4 { width: 42%; height: 45%; bottom: 10%; right: 10%; z-index: 4; } /* Panel 1 — HDR on/off */ .sd-feat-hdr { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1.25rem; } .sd-feat-hdr__image-wrap { position: relative; width: 100%; flex: 1; border-radius: 6px; overflow: hidden; } .sd-feat-hdr__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.25s ease; } .sd-feat-hdr__img--on { opacity: 1; } .sd-feat-hdr__img--off { opacity: 0; } .sd-feat-hdr__image-wrap.is-off .sd-feat-hdr__img--on { opacity: 0; } .sd-feat-hdr__image-wrap.is-off .sd-feat-hdr__img--off { opacity: 1; } /* Claymorphism button — soft dual shadow, presses inward on hold */ .sd-feat-hdr__btn { position: relative; flex-shrink: 0; padding: 0.85rem 1.6rem; border: none; border-radius: 14px; background: #f4f2ee; color: #2e2c2c; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.14), -6px -6px 14px rgba(255, 255, 255, 0.85), inset 1px 1px 1px rgba(255, 255, 255, 0.6); transition: box-shadow 0.15s ease, transform 0.15s ease; } .sd-feat-hdr__btn.is-pressed { transform: translateY(1px) scale(0.98); box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.16), inset -4px -4px 8px rgba(255, 255, 255, 0.7); } /* Panel 2 — before / after clutter slider (compact variant of .ghr-compare) */ .sd-feat-compare { position: relative; width: 100%; height: 100%; } .sd-feat-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .sd-feat-compare__clip { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); will-change: clip-path; } .sd-feat-compare__label { position: absolute; top: 1rem; z-index: 2; padding: 0.35rem 0.75rem; border-radius: 100px; background: rgba(26, 24, 22, 0.55); color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; } .sd-feat-compare__label--before { left: 1rem; } .sd-feat-compare__label--after { right: 1rem; } .sd-feat-compare__handle { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 2; width: 3px; background: rgba(255, 255, 255, 0.9); transform: translateX(-50%); pointer-events: none; will-change: left; } .sd-feat-compare__handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .sd-feat-compare__handle svg { position: absolute; top: 50%; left: 50%; color: #1a1816; } .sd-feat-compare__handle svg:first-child { transform: translate(calc(-100% - 1px), -50%); } .sd-feat-compare__handle svg:last-child { transform: translate(1px, -50%); } .sd-feat-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; } .sd-feat-compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 38px; } .sd-feat-compare__range::-moz-range-thumb { width: 38px; height: 38px; border: none; background: transparent; } /* Panel — full-motion video (aerial's "photo and video, one flight" slot). Same label pill recipe as .sd-feat-compare__label, since both sit on top of a full-bleed panel and should read as one family of overlay chips. */ .sd-feat-video { position: relative; width: 100%; height: 100%; } .sd-feat-video__el { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-feat-video__label { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: 0.35rem 0.75rem; border-radius: 100px; background: rgba(26, 24, 22, 0.55); color: #fff; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; } /* Panel — neighborhood-context "ping," a map-pin pulse dropped over a landmark in an aerial shot. Aerial is the one service that's fundamentally about mapping a property against what's around it, so this is the one panel that gets a bespoke motion accent instead of reusing an existing pattern. Position with inline top/left per image. */ .sd-feat-ping { position: absolute; width: 14px; height: 14px; z-index: 2; pointer-events: none; } .sd-feat-ping__dot { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(26, 24, 22, 0.35); } .sd-feat-ping__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #fff; animation: sd-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes sd-ping { 0% { transform: scale(1); opacity: 0.85; } 100% { transform: scale(4.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .sd-feat-ping__ring { animation: none; opacity: 0.5; } } /* Topographic-line texture behind the features grid — same motif as the About page's values section, reused here so the two pages feel like one system rather than two different sites bolted together. */ .sd-section--features { overflow: hidden; } .sd-section--features::before { content: ''; position: absolute; top: -22%; left: 0; right: 0; width: 100%; height: clamp(420px, 44vw, 620px); z-index: 0; pointer-events: none; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 580' fill='none'%3E%3Cg stroke='%232e2c2c'%3E%3Cpath stroke-width='1.5' stroke-opacity='0.05' d='M-80 90 C 300 10, 560 10, 760 70 S 1180 130, 1400 50 S 1600 20, 1680 80'/%3E%3Cpath stroke-width='1.8' stroke-opacity='0.06' d='M-80 170 C 320 90, 580 90, 780 150 S 1200 210, 1420 130 S 1620 100, 1700 160'/%3E%3Cpath stroke-width='2.1' stroke-opacity='0.08' d='M-80 240 C 340 160, 600 160, 800 220 S 1220 280, 1440 200 S 1640 170, 1700 230'/%3E%3Cpath stroke-width='2.4' stroke-opacity='0.095' d='M-80 310 C 360 230, 620 230, 820 290 S 1240 350, 1460 270 S 1650 240, 1700 300'/%3E%3Cpath stroke-width='2.8' stroke-opacity='0.11' d='M-80 380 C 380 300, 640 300, 840 360 S 1260 420, 1480 340 S 1660 310, 1700 370'/%3E%3Cpath stroke-width='3.2' stroke-opacity='0.125' d='M-80 450 C 400 370, 660 370, 860 430 S 1280 490, 1500 410 S 1670 380, 1700 440'/%3E%3Cpath stroke-width='3.6' stroke-opacity='0.14' d='M-80 520 C 420 440, 680 440, 880 500 S 1300 560, 1520 480 S 1680 450, 1700 510'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .sd-section--features > * { position: relative; z-index: 1; } /* ─── Process — 2x2 step grid in reading order, image on the right ─────────── */ .sd-process__layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: stretch; } .sd-process__diagram { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; /* Plain reading order — step 1 top-left, 2 top-right, 3 bottom-left, 4 bottom-right — no connector lines. */ grid-template-areas: "s1 s2" "s3 s4"; row-gap: 3rem; column-gap: 3rem; } .sd-process-step { position: relative; } .sd-process-step--1 { grid-area: s1; } .sd-process-step--2 { grid-area: s2; } .sd-process-step--3 { grid-area: s3; } .sd-process-step--4 { grid-area: s4; } .sd-process-step__num { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #2e2c2c; opacity: 0.4; margin-bottom: 0.7rem; } .sd-process-step__title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: #2e2c2c; margin-bottom: 0.65rem; } .sd-process-step__body { font-size: 1rem; line-height: 1.6; color: #2e2c2c; opacity: 0.65; } .sd-process__image-wrap { border-radius: 8px; overflow: hidden; height: 100%; min-height: 380px; } .sd-process__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Gallery — real sample photos + link to the full portfolio ─────────────── */ /* White instead of the site's usual cream, bordered top/bottom to read as its own framed band — plus the same thin lines/circles motif used on the individual Our Work shoot pages (our-work/shoot.css's .sh-page--textured), scoped to just this section instead of the whole page. */ .sd-gallery { position: relative; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'%3E%3Cg stroke='%232e2c2c' fill='none'%3E%3Cline x1='0' y1='150' x2='900' y2='150' stroke-width='1' stroke-opacity='0.144'/%3E%3Cline x1='0' y1='700' x2='900' y2='700' stroke-width='1' stroke-opacity='0.128'/%3E%3Cline x1='450' y1='0' x2='450' y2='900' stroke-width='1' stroke-opacity='0.112'/%3E%3Cline x1='0' y1='900' x2='900' y2='0' stroke-width='1' stroke-opacity='0.128'/%3E%3Ccircle cx='680' cy='230' r='170' stroke-width='1.1' stroke-opacity='0.096'/%3E%3Ccircle cx='140' cy='620' r='85' stroke-width='1' stroke-opacity='0.088'/%3E%3Ccircle cx='520' cy='800' r='45' stroke-width='1' stroke-opacity='0.104'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 720px 720px; border-top: 1px solid #1a1a1a; border-bottom: 1px solid #1a1a1a; padding: calc(3vw + 24px) 0 calc(4vw + 40px); /* The grid below intentionally bleeds past the viewport edges (see .sd-gallery__grid) — this clips that overflow instead of creating a horizontal scrollbar. */ overflow: hidden; } .sd-gallery__eyebrow-wrap { padding: 0 24px; } /* Full-bleed band: breaks out of any parent max-width/padding to span past the viewport itself (106vw, centered) so the two edge photos visibly clip at the screen edge instead of just touching it. */ .sd-gallery__grid { position: relative; left: 50%; width: 106vw; transform: translateX(-50%); margin: 0 auto 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .sd-gallery__item { display: block; border-radius: 6px; overflow: hidden; /* Wider than tall on desktop — a landscape crop reads more like a real listing photo than the earlier portrait tiles. */ aspect-ratio: 3 / 2; position: relative; } .sd-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-gallery__cta-wrap { display: flex; justify-content: center; } /* Liquid glass pill button — same recipe as .final-cta__btn, reused here since this section sits on the same light background. */ .sd-gallery__cta { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 1rem 2.5rem; border-radius: 100px; text-decoration: none; color: #2e2c2c; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; isolation: isolate; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .sd-gallery__cta::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90), inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80), inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60), inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09), inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14), inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14), inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07), 0px 1px 5px 0px rgba(0, 0, 0, 0.08), 0px 8px 32px 0px rgba(0, 0, 0, 0.09); transition: background-color 0.3s ease, box-shadow 0.3s ease; z-index: -1; } .sd-gallery__cta:hover { transform: translateY(-2px); } .sd-gallery__cta:hover::before { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90), inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80), inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60), inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09), inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14), inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14), inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07), 0px 2px 10px 0px rgba(0, 0, 0, 0.10), 0px 14px 40px 0px rgba(0, 0, 0, 0.11); } .sd-gallery__cta svg { opacity: 0.7; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .sd-gallery__cta:hover svg { transform: translateX(4px); } /* ─── Complete the Listing (cross-sell) ──────────────────────────────────── */ .sd-addons__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .sd-addon-box { display: flex; flex-direction: column; background: #fff; border: 1px solid #1a1a1a; border-radius: 8px; overflow: hidden; } /* Image sits in a taller box than it needs and clips to a diagonal — short on the right, full height on the left — so the seam between photo and copy reads as one continuous diagonal line rather than a straight horizontal edge. The revealed triangle is the box's own white, which matches .sd-addon-box__body's background, so the cut blends seamlessly into the text area below it. The SVG overlay traces a thin black line along that exact same diagonal. */ .sd-addon-box__image-wrap { position: relative; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); } .sd-addon-box__image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .sd-addon-box__diagonal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .sd-addon-box__diagonal line { stroke: #1a1a1a; /* vector-effect keeps this at a true 1px in screen space regardless of the non-uniform scaling from preserveAspectRatio="none" above — so it matches .sd-addon-box's 1px border exactly instead of rendering thicker than it. */ stroke-width: 1; } .sd-addon-box__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem 1.5rem 1.75rem; } .sd-addon-box__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: #2e2c2c; margin-bottom: 0.5rem; } .sd-addon-box__desc { font-size: 0.87rem; line-height: 1.6; color: #2e2c2c; opacity: 0.6; margin-bottom: 1.4rem; } /* Desktop-only: boxes read too small at the base (mobile-tuned) size once there's real width to work with, so scale the whole card — container, padding, and type together — up a notch. First pass (1.5x) ran too big, second pass (1.05x) ran a little too small — this settles at roughly 1.15x the original size. Left untouched below 961px, where the base sizing already works well. */ @media (min-width: 961px) { .sd-addons__grid { max-width: min(94vw, 1380px); gap: 1.75rem; } .sd-addon-box { border-radius: 10px; } .sd-addon-box__body { padding: 1.75rem 1.75rem 2rem; } .sd-addon-box__title { font-size: 1.2rem; margin-bottom: 0.6rem; } .sd-addon-box__desc { font-size: 1rem; margin-bottom: 1.6rem; } .sd-addon-box__btn { gap: 0.52rem; padding: 0.75rem 1.6rem; font-size: 0.85rem; } } /* Liquid glass pill — same recipe as .sd-gallery__cta, scaled down for a card-level secondary action rather than a section-level primary one. */ .sd-addon-box__btn { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1.4rem; border-radius: 100px; text-decoration: none; color: #2e2c2c; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; isolation: isolate; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .sd-addon-box__btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90), inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80), inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09), inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.08), 0px 6px 20px 0px rgba(0, 0, 0, 0.08); transition: background-color 0.3s ease; z-index: -1; } .sd-addon-box__btn:hover { transform: translateY(-2px); } .sd-addon-box__btn:hover::before { background: rgba(255, 255, 255, 0.72); } .sd-addon-box__btn svg { opacity: 0.7; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .sd-addon-box__btn:hover svg { transform: translateX(3px); } /* Shared .final-cta__heading defaults to white-space: nowrap; our headings run longer than the short strings other pages use, so let them wrap. */ .final-cta__heading { white-space: normal; } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 960px) { .sd-intro__wrap { grid-template-columns: 1fr; } .sd-intro__image-wrap { aspect-ratio: 16 / 9; } .sd-feat { grid-template-columns: 1fr; } .sd-feat-panel { order: -1; aspect-ratio: 4 / 3; } .sd-process__layout { grid-template-columns: 1fr; } .sd-process__image-wrap { min-height: 220px; } /* The full-bleed 106vw band is a desktop flourish — below this width it just risks awkward cropping, so fall back to a contained grid. */ .sd-gallery__grid { position: static; left: auto; width: 100%; transform: none; padding: 0 24px; grid-template-columns: repeat(2, 1fr); } .sd-gallery__item { aspect-ratio: 4 / 5; } .sd-addons__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } } @media (max-width: 560px) { /* The house covers too much of the heading at this width — there's room above the text (28px top padding originally), so pull the heading up instead of pushing the house down. First pass moved it up 16px (28px padding-top → 12px); this adds two more of that same 16px increment (32px more), for 48px total up from the original baseline. Padding alone can't go negative, so the remainder comes from margin-top. */ .sd-hero__heading { padding-top: 0; margin-top: -20px; } .sd-hero__house-wrap { width: calc(100vw - 24px); overflow: hidden; justify-content: center; } .sd-hero__house { max-width: none; } .sd-feat-list__item { padding-left: 1.1rem; } .sd-feat-list__icon { width: 34px; height: 34px; } .sd-process__diagram { grid-template-columns: 1fr; grid-template-areas: "s1" "s2" "s3" "s4"; row-gap: 1.75rem; } .sd-gallery__grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; } .sd-section__heading { margin-bottom: 2.5rem; } } /* ───────────────────────────────────────────────────────────────────────────── RTL OVERRIDES — Arabic (applied when ) ───────────────────────────────────────────────────────────────────────────── */ [dir="rtl"] .sd-hero__heading { font-family: 'Noto Naskh Arabic', serif; font-size: clamp(2.4rem, 8vw, 6rem); letter-spacing: 0; }