@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Rubik-Light.ttf") format("truetype"); } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Rubik-Regular.ttf") format("truetype"); } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Rubik-Medium.ttf") format("truetype"); } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Rubik-SemiBold.ttf") format("truetype"); } @font-face { font-family: "Frank Ruhl Libre"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/FrankRuhlLibre-Light.ttf") format("truetype"); } :root { /* 1 unit ≈ 1px at 1920 viewport: calc(var(--c) * N) maps Figma px at scale */ --c: 0.052vw; --bg: #fbf6ed; --ink: #2c3e50; --ink-soft: #3a3a4a; --muted: #555; --border: #a2b8c1; --contact-light: #d8e6ec; --gutter: calc(var(--c) * 40); --gutter-section: calc(var(--c) * 80); --gap-section: calc(var(--c) * 140); --gap-page-top: calc(var(--c) * 169); --column-gap: calc(var(--c) * 56); --h1: calc(var(--c) * 78); --h1-lh: calc(var(--c) * 101); --h2: calc(var(--c) * 42); --lead: calc(var(--c) * 24); --lead-lh: calc(var(--c) * 42); --body-intro-lh: calc(var(--c) * 38); --nav-z: 50; /* Match .topbar.shell padding-block + max(logo, tap targets); max(...,44px) breaks pure 128*c */ --header-inner-height: max( calc(var(--c) * 64), max(calc(var(--c) * 44), 44px) ); --header-offset: calc( var(--c) * 40 + var(--header-inner-height) + var(--c) * 24 ); --scroll-anchor-gutter: calc(var(--c) * 16); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-offset) + var(--scroll-anchor-gutter)); } body { margin: 0; padding-top: var(--header-offset); background: var(--bg); color: var(--ink); font-family: "Rubik", Arial, sans-serif; } body.nav-open { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* Page rail: Figma 1920 frame; content inset via --gutter */ .shell { width: min(calc(var(--c) * 1920), 100%); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; } .topbar.shell { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--nav-z) + 1); width: 100%; max-width: none; margin-inline: 0; padding-inline: var(--gutter); padding-block: calc(var(--c) * 40) calc(var(--c) * 24); box-sizing: border-box; background: var(--bg); --header-stack-height: var(--header-offset); } .nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--nav-z) - 1); margin: 0; padding: 0; border: none; appearance: none; cursor: pointer; background: rgb(44 62 80 / 38%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .nav-backdrop--open { opacity: 1; visibility: visible; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .nav-backdrop, .primary-nav { transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* Reveal-on-scroll animations. Only active when JS is available (`has-js` set on before paint), so no-JS users and search engines see content immediately. */ .has-js [data-animate] { opacity: 0; transform: translateY(calc(var(--c) * 16)); transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .has-js [data-animate="fade"] { transform: none; } .has-js [data-animate].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .has-js [data-animate], .has-js [data-animate].is-visible { opacity: 1; transform: none; transition: none; } } .nav { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--c) * 24); padding-block: 0; padding-inline: calc(var(--c) * 28); direction: ltr; } .nav-actions { display: flex; align-items: center; gap: calc(var(--c) * 40); flex-wrap: wrap; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: calc(var(--c) * 5); width: max(calc(var(--c) * 44), 44px); height: max(calc(var(--c) * 44), 44px); padding: calc(var(--c) * 10); border: none; border-radius: calc(var(--c) * 8); background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; flex-shrink: 0; } .nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .nav-toggle-line { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 1px; } .primary-nav { display: block; } .nav-link-row { display: flex; align-items: center; gap: calc(var(--c) * 38); font-size: calc(var(--c) * 16); font-weight: 500; } .nav-link-row a { direction: rtl; white-space: nowrap; } .nav-link-row a:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--c) * 4); border-radius: 2px; } .nav-actions .cta { min-width: 0; min-height: max(calc(var(--c) * 44), 44px); height: auto; padding-block: calc(var(--c) * 9); padding-inline: calc(var(--c) * 14); border-radius: calc(var(--c) * 6); background: var(--ink); color: #fff; display: grid; place-items: center; font-size: calc(var(--c) * 14); font-weight: 500; touch-action: manipulation; flex-shrink: 0; white-space: nowrap; } .nav-actions .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--c) * 3); } .site-logo { display: flex; align-items: center; flex-shrink: 0; line-height: 0; } .site-logo:focus-visible { outline: 2px solid var(--ink); outline-offset: calc(var(--c) * 4); border-radius: calc(var(--c) * 4); } .site-logo img { display: block; width: auto; height: auto; max-height: calc(var(--c) * 64); max-width: min(calc(var(--c) * 160), 36vw); } .page { display: grid; gap: var(--gap-section); margin-top: var(--gap-page-top); padding-bottom: calc(var(--c) * 120); } .section { display: flex; justify-content: space-between; align-items: center; column-gap: var(--column-gap); row-gap: var(--column-gap); direction: ltr; width: 100%; max-width: var(--band-max); margin-inline: auto; } .hero { --band-max: calc(var(--c) * 1388); align-items: center; } .hero-ornament-wrap { flex: 0 1 auto; width: min(calc(var(--c) * 325), 100%); aspect-ratio: 325 / 410; height: auto; max-height: calc(var(--c) * 410); position: relative; overflow: hidden; } .hero-ornament { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .hero-content { flex: 0 1 calc(var(--c) * 671); max-width: min(calc(var(--c) * 671), 100%); min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--c) * 33); direction: ltr; } .eyebrow { margin: 0; display: inline-flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: calc(var(--c) * 8); font-size: calc(var(--c) * 18); color: var(--ink); direction: rtl; text-align: right; } .eyebrow-name { font-weight: 600; } .eyebrow-role { font-weight: 400; } .eyebrow-dot { width: calc(var(--c) * 3); height: calc(var(--c) * 3); border-radius: 50%; background: var(--ink); flex-shrink: 0; } .hero-headline-block { width: 100%; display: flex; flex-direction: column; gap: calc(var(--c) * 11); align-items: stretch; } h1, h2, h3, p { margin: 0; } h1, .contact-copy h2 { font-family: "Frank Ruhl Libre", serif; font-weight: 300; } h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -0.2px; color: var(--ink); text-align: right; unicode-bidi: plaintext; } .quote-credit { font-style: italic; font-size: calc(var(--c) * 18); } .hero-quote-credit { margin: 0; text-align: center; } .intro { --band-max: calc(var(--c) * 1172); align-items: center; } .intro-photo-frame { flex: 0 1 auto; width: min(calc(var(--c) * 484), 100%); aspect-ratio: 484 / 646; height: auto; max-height: calc(var(--c) * 646); position: relative; overflow: hidden; } .intro-photo { position: absolute; width: 130.17%; height: 116.97%; left: -15.08%; top: -6.55%; max-width: none; object-fit: cover; } .body-copy, .panel-copy { font-weight: 300; color: var(--muted); font-size: var(--lead); text-align: right; direction: rtl; } .body-copy { flex: 0 1 calc(var(--c) * 581); max-width: min(calc(var(--c) * 581), 100%); min-width: 0; display: grid; gap: 0; line-height: var(--body-intro-lh); } .body-copy p + p { margin-top: var(--body-intro-lh); } .body-copy strong, .panel-copy strong { font-weight: 500; } .split { align-items: center; } .split-photo { flex: 0 1 auto; max-width: 100%; } .split-photo.square { width: min(calc(var(--c) * 394), 100%); border-radius: calc(var(--c) * 32); } .split-photo.icon { width: min(calc(var(--c) * 232), 55vw); opacity: 0.85; } .split-photo.rounded { width: min(calc(var(--c) * 457), 100%); border-radius: calc(var(--c) * 16); } .story-photo-frame { flex: 0 1 auto; width: min(calc(var(--c) * 410), 100%); aspect-ratio: 410 / 530; height: auto; max-height: calc(var(--c) * 530); position: relative; overflow: hidden; background: var(--bg); } .story-photo-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; } .panel-copy { flex: 0 1 calc(var(--c) * 622); max-width: min(calc(var(--c) * 622), 100%); min-width: 0; display: flex; flex-direction: column; gap: calc(var(--c) * 24); color: var(--ink-soft); line-height: var(--lead-lh); } .panel-copy h2, .services h2 { color: var(--ink); font-size: var(--h2); font-weight: 300; letter-spacing: -0.2px; line-height: normal; } .panel-copy.wide { flex-basis: calc(var(--c) * 716); max-width: min(calc(var(--c) * 716), 100%); min-width: 0; } .panel-copy.wider { flex-basis: calc(var(--c) * 834); max-width: min(calc(var(--c) * 834), 100%); min-width: 0; } .panel-copy-stack { display: flex; flex-direction: column; gap: 0; } .panel-copy-stack p + p { margin-top: calc(var(--c) * 38); } .panel-copy-stack.story-copy p { line-height: calc(var(--c) * 41.95); } .panel-copy-stack.story-copy p + p { margin-top: calc(var(--c) * 24); } .panel-copy > p { line-height: var(--lead-lh); } #start { --band-max: calc(var(--c) * 1431); } .split-about { --band-max: calc(var(--c) * 1385); } .split-tree { --band-max: calc(var(--c) * 1363); } .story { --band-max: calc(var(--c) * 1323); align-items: flex-end; } .services { --band-max: calc(var(--c) * 1356); flex-direction: column; align-items: center; gap: calc(var(--c) * 48); direction: rtl; } @media (min-width: 1024px) { .services { min-height: calc(var(--c) * 632); justify-content: space-between; gap: 0; } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cards { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--c) * 280)), 1fr)); gap: calc(var(--c) * 48); } .card { border: 1px solid var(--border); border-radius: calc(var(--c) * 12); padding: calc(var(--c) * 48) calc(var(--c) * 60); display: grid; justify-items: center; gap: calc(var(--c) * 24); text-align: center; } .card-image-wrap { width: min(calc(var(--c) * 300), 100%); aspect-ratio: 1; height: auto; position: relative; overflow: hidden; background: var(--bg); } .card-image-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .card h3 { font-size: calc(var(--c) * 24); font-weight: 600; color: var(--ink); line-height: normal; } .card p { font-size: calc(var(--c) * 18); font-weight: 400; line-height: calc(var(--c) * 28); color: var(--ink); } .card-body-lines { display: flex; flex-direction: column; gap: 0; min-height: calc(var(--c) * 80); justify-content: flex-start; } .card-body-lines p { margin: 0; } .contact { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(var(--c) * 738); width: 100%; direction: ltr; } .contact-form-wrap { background: var(--contact-light); padding: calc(var(--c) * 120) calc(var(--c) * 80); display: flex; justify-content: center; align-items: center; direction: rtl; } .contact-form { position: relative; width: min(calc(var(--c) * 543), 100%); display: flex; flex-direction: column; gap: calc(var(--c) * 36); } .contact-form-fields { display: grid; gap: calc(var(--c) * 24); } .contact-form label { display: grid; gap: calc(var(--c) * 8); font-size: calc(var(--c) * 15.2); font-weight: 500; color: var(--ink); } .contact-form input, .contact-form textarea { border: none; border-radius: calc(var(--c) * 8); background: #fefdf5; width: 100%; font: inherit; padding: calc(var(--c) * 12) calc(var(--c) * 16); } .contact-form input { height: calc(var(--c) * 47); } .contact-form textarea { min-height: calc(var(--c) * 218); resize: vertical; } .contact-form button { width: calc(var(--c) * 123.42); height: calc(var(--c) * 46.78); border: none; border-radius: calc(var(--c) * 4); background: var(--ink); color: #fff; font-size: calc(var(--c) * 16); font-weight: 700; font-family: Arial, sans-serif; cursor: pointer; } .contact-form button:focus-visible { outline: 2px solid #fff; outline-offset: calc(var(--c) * 3); } .contact-copy-wrap { --contact-rail-max: calc(var(--c) * 560); background: var(--ink); color: var(--bg); padding: calc(var(--c) * 120) calc(var(--c) * 120); display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--c) * 56); direction: ltr; align-items: stretch; } .contact-copy { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--c) * 60); width: 100%; } .contact-quote-block { display: flex; flex-direction: column; gap: calc(var(--c) * 12); align-items: stretch; width: min(var(--contact-rail-max), 100%); margin-inline-start: auto; } .contact-attribution { margin: 0; color: var(--bg); width: 100%; text-align: right; unicode-bidi: plaintext; } .contact-copy h2 { margin: 0; font-size: calc(var(--c) * 58); line-height: normal; letter-spacing: 0.2px; color: var(--bg); text-align: right; unicode-bidi: plaintext; width: 100%; } .contact-lead { font-size: calc(var(--c) * 24); font-weight: 300; line-height: calc(var(--c) * 40); width: min(var(--contact-rail-max), 100%); margin-inline-start: auto; color: var(--bg); text-align: right; unicode-bidi: plaintext; } .contact-links { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--c) * 16); width: min(var(--contact-rail-max), 100%); margin-inline-start: auto; } .contact-links a { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: calc(var(--c) * 16); width: 100%; direction: ltr; } .contact-phone .contact-link-text { font-weight: 300; font-size: calc(var(--c) * 18); } .contact-email .contact-link-text { font-weight: 300; font-size: calc(var(--c) * 20); } .contact-links img { width: calc(var(--c) * 24); height: calc(var(--c) * 24); max-width: none; flex-shrink: 0; aspect-ratio: 1; object-fit: contain; align-self: center; } .site-footer { padding: calc(var(--c) * 40) var(--gutter); } .footer-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(var(--c) * 16); font-size: calc(var(--c) * 16); color: var(--ink); text-align: center; } .footer-copy { font-weight: 500; letter-spacing: 0.262px; } .footer-meta { display: inline-flex; align-items: center; gap: calc(var(--c) * 5); } .footer-role { font-weight: 400; } .footer-name { font-weight: 600; } .footer-dot { width: calc(var(--c) * 3); height: calc(var(--c) * 3); border-radius: 50%; background: var(--ink); flex-shrink: 0; } /* --- Tablet portrait / mobile: stack + drawer --- */ @media (max-width: 1023px) { :root { --c: 1px; --gap-section: calc(var(--c) * 96); --gap-page-top: calc(var(--c) * 96); --column-gap: calc(var(--c) * 44); --header-offset: calc(env(safe-area-inset-top, 0px) + calc(var(--c) * 90)); } .page { padding-bottom: calc(var(--c) * 96); } .topbar.shell { padding-block: calc(12px + env(safe-area-inset-top, 0px)) calc(var(--c) * 14); } .nav { gap: calc(var(--c) * 20); align-items: center; } .nav-actions { flex: 1; min-width: 0; justify-content: flex-start; align-items: center; gap: calc(var(--c) * 14); flex-wrap: nowrap; } .site-logo { flex-shrink: 0; } .nav-toggle { display: flex; } .primary-nav { position: fixed; inset-inline: 0; top: var(--header-stack-height, 104px); bottom: 0; z-index: var(--nav-z); padding: calc(var(--c) * 24) var(--gutter) calc(var(--c) * 36 + env(safe-area-inset-bottom, 0px)); background: var(--bg); box-shadow: 0 12px 40px rgb(44 62 80 / 12%); overflow-y: auto; transform: translateY(-100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } body.nav-open .primary-nav { transform: translateY(0); visibility: visible; } .nav-link-row { flex-direction: column; align-items: stretch; gap: calc(var(--c) * 4); font-size: calc(var(--c) * 18); } .nav-link-row a { white-space: normal; display: flex; align-items: center; min-height: 48px; padding-block: calc(var(--c) * 12); padding-inline: calc(var(--c) * 4); border-bottom: 1px solid rgb(162 184 193 / 35%); -webkit-tap-highlight-color: transparent; } .section, .split { flex-direction: column; align-items: stretch; text-align: right; max-width: none; --band-max: none; } .intro .intro-photo-frame { order: -1; } .split-about .split-photo.icon { order: -1; } .story .story-photo-frame { order: -1; } .story { align-items: stretch; } .services { min-height: 0; justify-content: flex-start; gap: calc(var(--c) * 48); } .hero-ornament-wrap { max-width: min(calc(var(--c) * 280), 60vw); margin-inline: auto; } .intro-photo-frame { margin-inline: auto; } .intro-photo { inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; } .story-photo-frame { margin-inline: auto; } .story-photo-frame img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .hero { align-items: stretch; gap: calc(var(--c) * 36); } .hero-content, .body-copy, .panel-copy, .panel-copy.wide, .panel-copy.wider { flex: 0 1 auto; flex-basis: auto; } .hero-content { align-items: stretch; max-width: none; gap: calc(var(--c) * 18); } .contact { grid-template-columns: 1fr; min-height: 0; } .contact-copy-wrap { order: 1; align-items: stretch; padding: calc(var(--c) * 64) calc(var(--c) * 40); gap: calc(var(--c) * 40); } .contact-form-wrap { order: 2; padding: calc(var(--c) * 56) calc(var(--c) * 40); } .contact-copy { gap: calc(var(--c) * 36); } .contact-copy, .contact-quote-block { align-items: stretch; } .contact-copy h2, .contact-lead { text-align: right; } .contact-links { width: 100%; align-items: stretch; } .contact-links a { justify-content: flex-end; min-height: 48px; padding-block: calc(var(--c) * 8); box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .contact-form { gap: calc(var(--c) * 24); } .panel-copy { gap: calc(var(--c) * 28); } .panel-copy-stack p + p, .panel-copy-stack.story-copy p + p { margin-top: calc(var(--c) * 22); } .body-copy p + p { margin-top: calc(var(--c) * 20); } .hero-headline-block { gap: calc(var(--c) * 8); } .contact-form-fields { gap: calc(var(--c) * 20); } .contact-form textarea { min-height: calc(var(--c) * 160); } .site-footer { padding-block: calc(var(--c) * 28); } } @media (max-width: 767px) { :root { --gap-section: calc(var(--c) * 72); --gap-page-top: calc(var(--c) * 72); --column-gap: calc(var(--c) * 32); --header-offset: calc(env(safe-area-inset-top, 0px) + calc(var(--c) * 72)); } .page { padding-bottom: calc(var(--c) * 72); } .cards { grid-template-columns: 1fr; gap: calc(var(--c) * 32); } .card { padding: calc(var(--c) * 32) calc(var(--c) * 32); gap: calc(var(--c) * 16); } .card-image-wrap { width: min(220px, 70%); } .site-footer { padding-block: calc(var(--c) * 24); } .nav-actions { gap: calc(var(--c) * 12); } .site-logo img { max-height: 42px; max-width: min(132px, 42vw); } .nav-actions .cta { flex: 0 1 auto; padding-inline: 12px; padding-block: 10px; font-size: 13px; min-height: 44px; } .contact-form button[type="submit"] { width: 100%; min-height: 48px; padding-inline: 24px; } .contact-form textarea { min-height: calc(var(--c) * 140); } } /* --- Contact form (Pages Function) --- */ .honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .contact-noscript { margin-block-end: 1rem; padding: 0.75rem 1rem; border-radius: 8px; background: rgba(0, 0, 0, 0.06); font-size: 0.95rem; line-height: 1.5; } .contact-noscript a { text-decoration: underline; } .form-status { margin-block: 0.5rem 0; min-height: 1.25em; font-size: 0.95rem; line-height: 1.4; } .form-status--success { color: #1b5e20; } .form-status--error { color: #b71c1c; } .contact-form button[type="submit"]:disabled { opacity: 0.65; cursor: not-allowed; }