:root {
  --forest:#111813; --ivory:#F3F2EA; --paper:#F6F5EF; --sage:#D7E7B9; --ink:#142019;
  --muted-dark:#ACB9AD; --muted-light:#526157; --panel-dark:#202D23; --line-dark:#405344; --line-light:#C5CEC1;
  --scene-duration:1200ms; --scene-travel:56px; --scene-ease:cubic-bezier(.76,0,.24,1);
  --chrome-top-ink:var(--ink); --chrome-bottom-ink:var(--ink); --chrome-rail-ink:var(--ink);
  --ease:cubic-bezier(.22,1,.36,1); --frame:40px;
  color:var(--ink); background:var(--ivory); font-family:Montserrat,"Avenir Next",Verdana,sans-serif; font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-size:16px; font-weight:500; line-height:1.65; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; }
img,svg { max-width:100%; }
figure,p,h1,h2,h3 { margin:0; }
button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex="-1"]:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.page-width { width:71.428%; max-width:1400px; margin-inline:auto; }
.band-dark { --scene-bg:var(--forest); --scene-ink:var(--ivory); --line:var(--line-dark); background:var(--forest); color:var(--ivory); }
.band-paper,.band-light { --scene-bg:var(--ivory); --scene-ink:var(--ink); --line:var(--line-light); background:var(--ivory); color:var(--ink); }
.band-sage { --scene-bg:var(--sage); --scene-ink:var(--ink); --line:var(--muted-light); background:var(--sage); color:var(--ink); }
.scene { position:relative; isolation:isolate; overflow:hidden; }
.scene-content { position:relative; min-height:100dvh; padding-block:clamp(120px,14vh,180px) 112px; display:flex; flex-direction:column; justify-content:center; }
.scene-content > * { flex-shrink:0; }
.scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to right,currentColor 1px,transparent 1px) 0 0 / 14.2857% 100%; opacity:.055; pointer-events:none; }
.scene-mode,.scene-mode body { height:100%; overflow:hidden; }
.scene-mode main { position:fixed; inset:0; overflow:hidden; }
.scene-mode .scene { position:absolute; inset:0; visibility:hidden; pointer-events:none; z-index:0; }
.scene-mode .scene.is-scene-active { visibility:visible; pointer-events:auto; z-index:2; }
.scene-mode .scene.is-exiting { visibility:visible; z-index:1; }
.scene-mode .scene-scroll { height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior:none; scrollbar-width:thin; scrollbar-color:var(--line) var(--scene-bg); }
.scene-mode .scene-content { min-height:100%; }
.hero .scene-scroll { position:relative; z-index:1; }
.scene-mode .scene::after { content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background:linear-gradient(to bottom,var(--scene-bg),var(--scene-bg)60%,transparent) top / 100% 100px no-repeat,linear-gradient(to top,var(--scene-bg),var(--scene-bg)60%,transparent) bottom / 100% 96px no-repeat; }
.skip-link { position:fixed; top:16px; left:16px; z-index:200; padding:12px 20px; background:var(--ivory); color:var(--ink); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
/* The chrome remains still while the two real compositions exchange places. */
.site-header { position:fixed; z-index:50; inset:0 0 auto; background:var(--ivory); color:var(--ink); }
.header-inner { height:100px; margin-inline:var(--frame); display:flex; align-items:center; gap:32px; }
.brand-mark { display:inline-flex; width:200px; min-height:44px; align-items:center; flex-shrink:0; }
.brand-mark img { display:block; width:100%; height:auto; }
.desktop-nav { margin-left:auto; display:flex; align-items:center; gap:32px; }
.desktop-nav a,.header-cta { min-height:44px; display:inline-flex; align-items:center; font-size:14px; font-weight:500; }
.desktop-nav a:hover { opacity:.55; }
.header-cta { position:fixed; right:var(--frame); bottom:24px; z-index:52; gap:20px; background:var(--ivory); padding-inline:12px; }
.header-cta span { font-size:24px; font-weight:400; }
.scene-mode .site-header { background:transparent; color:var(--chrome-top-ink); }
.scene-mode .header-cta { background:transparent; padding-inline:0; color:var(--chrome-bottom-ink); }
.scene-mode[data-chrome-top="dark"] { --chrome-top-ink:var(--ivory); }
.scene-mode[data-chrome-bottom="dark"] { --chrome-bottom-ink:var(--ivory); }
.scene-mode[data-chrome-rail="dark"] { --chrome-rail-ink:var(--ivory); }
.scene-mode[data-chrome-top="dark"] .site-header .brand-mark img { filter:brightness(0) invert(1); }
.menu-trigger { display:none; }
.mobile-menu { width:100%; max-width:none; height:100dvh; max-height:none; border:0; margin:0; padding:32px var(--frame); color:var(--ivory); background:var(--forest); }
.mobile-menu::backdrop { background:var(--forest); }
.mobile-menu[open] { display:flex; flex-direction:column; animation:menu-in 300ms var(--ease) both; }
.mobile-menu.is-closing { animation:menu-out 260ms var(--ease) both; }
@keyframes menu-in { from { transform:translateY(-100%); } to { transform:translateY(0); } }
@keyframes menu-out { from { transform:translateY(0); } to { transform:translateY(-100%); } }
.mobile-menu__top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.menu-close { background:none; color:inherit; border:0; padding:0; min-height:44px; font-size:13px; }
.menu-close span { margin-left:12px; font-size:24px; }
.mobile-menu__links { display:flex; flex-direction:column; margin-block:auto; }
.mobile-menu__links a { display:flex; align-items:center; justify-content:space-between; min-height:76px; font-size:clamp(30px,8vw,54px); font-weight:700; letter-spacing:-.05em; }
.mobile-menu__links a span { font-weight:400; }
.menu-open { overflow:hidden; }
/* Six scenes share the same frame and typography, with Ramoalto's own palette. */
.eyebrow { margin-bottom:24px; font-size:10px; font-weight:700; line-height:1.4; letter-spacing:.14em; }
.eyebrow--sage { color:var(--muted-dark); }
.eyebrow__dot { display:none; }
h1,h2 { font-weight:900; letter-spacing:-.065em; line-height:1.03; text-wrap:balance; }
h1 { font-size:clamp(44px,6.6vw,112px); }
h2 { font-size:clamp(42px,5.2vw,84px); }
h1 em,h2 em { color:inherit; font-style:normal; }
h3 { font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-.04em; }
.hero .scene-content { justify-content:stretch; }
.hero__grid { position:relative; min-height:calc(100dvh - clamp(120px,14vh,180px) - 112px); }
.hero__copy { position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; min-height:inherit; }
.hero .eyebrow { color:var(--muted-dark); }
.hero h1 { position:relative; max-width:1100px; margin-bottom:32px; }
.hero h1 > span,.hero h1 > em { display:block; }
.hero__intro { width:min(560px,100%); color:var(--muted-dark); font-size:14px; line-height:1.7; }
.button,.text-link { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; min-height:44px; font-size:12px; font-weight:700; line-height:1.4; border-bottom:1px solid currentColor; }
.button span,.text-link span { font-size:22px; font-weight:400; transition:transform 160ms var(--ease); }
.button:hover span,.text-link:hover span { transform:translate(3px,-3px); }
.button--sage { border:0; background:var(--sage); color:var(--ink); padding:16px 20px; }
.hero .button--sage { background:transparent; color:var(--ivory); padding:0; border-bottom:1px solid var(--line-dark); }
.text-link { border-color:var(--line); }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 64px; margin-top:48px; }
.service-item { border-top:1px solid var(--line-light); padding-top:16px; }
.service-icon { display:block; width:24px; height:24px; margin-bottom:8px; }
.service-item h3 { margin-bottom:8px; }
.service-item p { max-width:410px; font-size:13px; line-height:1.65; min-height:44px; }
.section-end { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:40px; font-size:9px; letter-spacing:.08em; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:32px; row-gap:64px; list-style:none; margin:48px 0 0; padding:0; }
.project-grid > li { min-width:0; }
.project-grid__featured { grid-column:1/-1; }
.project-card { min-width:0; }
.project-card__media { width:100%; min-width:0; overflow:visible; background:transparent; }
.project-card__media img { display:block; width:100%; height:auto; object-fit:contain; }
.project-card__media--screenshot { aspect-ratio:16/9; overflow:hidden; }
.project-card__media--screenshot img { height:100%; object-fit:contain; }
.project-card__content { padding:0; }
.project-card__label { margin-bottom:8px; color:var(--muted-dark); font-size:10px; font-weight:700; line-height:1.4; letter-spacing:.13em; }
.project-card h3 { margin-bottom:8px; font-size:24px; }
.project-card__summary { max-width:44ch; color:var(--muted-dark); font-size:14px; line-height:1.65; }
.project-card--supporting .project-card__content { margin-top:16px; }
.project-card--featured { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:48px; align-items:center; }
.project-card--featured .project-card__label { margin-bottom:8px; }
.project-card--featured h3 { margin-bottom:8px; font-size:clamp(32px,4vw,48px); }
.project-card--featured .project-card__summary { max-width:34ch; font-size:16px; line-height:1.65; }
.about-grid { position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:center; }
.about-copy p { font-size:14px; color:var(--muted-dark); margin-bottom:24px; }
.about-copy p:first-child { color:var(--ivory); font-size:20px; line-height:1.5; }
.about-copy p:last-child { margin-bottom:0; }
.faq-layout { display:grid; grid-template-columns:1fr 1.3fr; gap:64px; align-items:start; }
.faq-intro h2 { max-width:400px; }
.faq-list details { border-top:1px solid var(--line-light); }
.faq-list details:last-child { border-bottom:1px solid var(--line-light); }
.faq-list summary { position:relative; display:flex; align-items:center; list-style:none; min-height:64px; padding:16px 32px 16px 0; cursor:pointer; font-size:13px; font-weight:600; line-height:1.5; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { position:absolute; right:2px; width:14px; height:14px; }
.faq-list summary span::before,.faq-list summary span::after { content:""; position:absolute; top:6px; left:0; width:14px; height:1px; background:currentColor; }
.faq-list summary span::after { transform:rotate(90deg); transition:transform 160ms; }
.faq-list details[open] summary span::after { transform:none; }
.faq-list details > p { padding:0 24px 24px 0; color:var(--muted-light); font-size:13px; line-height:1.7; }
.contact-inner h2 { max-width:1100px; }
.contact-bottom { display:flex; justify-content:space-between; align-items:flex-start; gap:64px; margin-top:48px; }
.contact-bottom > p { max-width:440px; font-size:14px; color:var(--muted-dark); }
.contact-action { max-width:320px; flex-shrink:0; }
.contact-action .button { width:100%; }
.contact-note { color:var(--muted-dark); font-size:10px; line-height:1.7; margin-top:12px; }
[aria-disabled="true"] { opacity:.65; cursor:default; }
.site-footer { padding-block:48px 80px; }
.footer-main { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; }
.footer-brand .brand-mark { width:184px; }
.footer-nav { display:flex; flex-wrap:wrap; gap:24px; font-size:12px; }
.footer-nav a,.footer-bottom a { display:inline-flex; align-items:center; min-height:44px; }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; border-top:1px solid var(--line-light); margin-top:24px; padding-top:12px; font-size:9px; }
.scene-mode .site-footer { background:transparent; color:var(--ivory); padding:0; margin-top:64px; }
.scene-mode .site-footer .brand-mark img { filter:brightness(0) invert(1); }
.scene-mode .footer-bottom { border-color:var(--line-dark); }
/* Natural material belongs to the scene, outside its scroll owner. */
.scene-backdrop { position:absolute; z-index:0; inset:0; pointer-events:none; overflow:hidden; }
.scene-backdrop img { display:block; width:100%; height:100%; object-fit:cover; }
.scene-backdrop::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,24,19,.82),rgba(17,24,19,.38) 58%,rgba(17,24,19,.1)); }
.hero-backdrop img,.hero-backdrop video { object-position:65% center; }
.scene-backdrop video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scene-backdrop video[hidden] { display:none; }
.hero-backdrop::after { z-index:2; }
.hero::before,.about-section::before,.contact-section::before { display:none; }
.scene-scroll { position:relative; z-index:1; }
.projects-backdrop { background:var(--forest); }
.projects-backdrop::after { background:rgba(17,24,19,.82); }
.about-backdrop img { object-position:70% center; opacity:.64; }
.about-backdrop::after { background:linear-gradient(90deg,rgba(17,24,19,.93),rgba(17,24,19,.77) 60%,rgba(17,24,19,.3)); }
.contact-backdrop img { object-position:right 72%; opacity:.34; }
.contact-backdrop::after { background:rgba(17,24,19,.58); }
.services-section::before,.faq-section::before { z-index:0; background:url('/assets/paper-grain.svg') repeat; opacity:.22; }
@media (max-width:860px) {
  .hero-backdrop img,.hero-backdrop video { object-position:63% center; }
  .scene-backdrop::after { background:linear-gradient(180deg,rgba(17,24,19,.61),rgba(17,24,19,.44) 48%,rgba(17,24,19,.86)); }
  .projects-backdrop::after { background:rgba(17,24,19,.82); }
  .about-backdrop::after { background:rgba(17,24,19,.82); }
  .contact-backdrop::after { background:rgba(17,24,19,.74); }
}

/* Direct destinations remain available throughout a transition. */
.scene-controls[hidden] { display:none; }
.scene-controls { position:fixed; inset:0; z-index:45; pointer-events:none; color:var(--ink); }
.scene-mode .scene-controls { color:var(--chrome-bottom-ink); }
.scene-controls a { pointer-events:auto; }
.has-scene-controls:not(.scene-mode) .scene-rail,.has-scene-controls:not(.scene-mode) .scene-counter { display:none; }
.scene-rail { position:fixed; z-index:45; top:50%; right:24px; transform:translateY(-50%); display:flex; flex-direction:column; color:var(--chrome-rail-ink); }
.scene-rail a { display:flex; justify-content:flex-end; align-items:center; width:200px; min-height:44px; gap:12px; }
.scene-rail__tick { width:32px; height:1px; background:currentColor; opacity:.35; transform:scaleX(.5); transform-origin:right; transition:transform 300ms,opacity 300ms; }
.scene-rail [aria-current] .scene-rail__tick { transform:scaleX(1); opacity:1; }
.scene-rail__label { font-size:11px; opacity:0; transition:opacity 160ms; }
.scene-rail a:hover .scene-rail__label,.scene-rail a:focus-visible .scene-rail__label { opacity:1; }
.scene-bottom { position:fixed; z-index:45; bottom:24px; left:var(--frame); display:flex; align-items:center; gap:24px; min-height:44px; }
.scene-counter { font-size:10px; }
@media (min-width:1101px) {
  .services-section .scene-content { padding-block:112px 88px; }
  .services-section h2 { font-size:clamp(42px,4.8vw,76px); }
  .service-grid { margin-top:32px; gap:24px 64px; }
  .service-item h3 { font-size:26px; }
  .section-end { margin-top:24px; }
}
@media (max-width:1100px) {
  .page-width { width:76%; }
  .service-grid,.about-grid,.faq-layout { gap:32px; }
  .contact-bottom { gap:32px; }
  .scene-rail { right:16px; }
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:48px; margin-top:32px; }
  .project-card--featured { grid-template-columns:minmax(0,1fr); gap:24px; }
  .project-card--featured h3 { font-size:32px; }
  .project-card--featured .project-card__summary { font-size:14px; }
}
@media (max-width:860px) {
  :root { --frame:24px; }
  .page-width { width:calc(100% - 96px); }
  .header-inner { height:88px; gap:16px; }
  .brand-mark { width:180px; }
  .desktop-nav { display:none; }
  .menu-trigger { display:inline-flex; margin-left:auto; min-height:44px; align-items:center; gap:12px; background:none; color:inherit; border:0; padding:0; font-size:12px; font-weight:600; }
  .menu-trigger__lines { width:20px; display:grid; gap:5px; }
  .menu-trigger__lines i { height:1px; background:currentColor; }
  .scene-content { padding-block:112px 104px; }
  .hero__grid { min-height:calc(100dvh - 216px); }
  .hero h1 { font-size:clamp(44px,8vw,72px); }
  .hero__intro { max-width:360px; }
  .scene-rail { display:none; }
  .about-grid,.faq-layout { grid-template-columns:1fr; gap:48px; }
  .about-heading h2 { max-width:660px; }
  .about-copy { max-width:560px; }
  .contact-bottom { flex-direction:column; gap:32px; }
  .scene-bottom { gap:16px; }
  .scene-counter { font-size:9px; }
  .header-cta { font-size:12px; gap:12px; }
}
@media (max-width:600px) {
  .page-width { width:calc(100% - 48px); }
  .header-inner { height:88px; gap:16px; }
  .brand-mark { width:176px; }
  .scene-content { padding-block:112px 104px; }
  .eyebrow { font-size:9px; margin-bottom:24px; }
  h1,h2 { letter-spacing:-.06em; }
  h2 { font-size:42px; }
  .hero h1 { font-size:clamp(40px,10.6vw,60px); margin-bottom:0; line-height:1.04; text-wrap:initial; }
  .hero__copy { min-height:calc(100dvh - 216px); }
  .hero__intro { max-width:300px; font-size:12px; line-height:1.65; padding-top:24px; }
  .service-grid { grid-template-columns:minmax(0,1fr); margin-top:40px; gap:32px; }
  .project-grid { grid-template-columns:minmax(0,1fr); row-gap:48px; margin-top:32px; }
  .project-card--featured { gap:24px; }
  .project-card--featured h3 { margin-bottom:8px; font-size:32px; }
  .project-card--featured .project-card__summary { font-size:14px; }
  .project-card--supporting h3 { font-size:22px; }
  .projects-backdrop::after { background:rgba(17,24,19,.86); }
  .service-item h3 { font-size:28px; }
  .service-item p { min-height:0; }
  .section-end { flex-direction:column; align-items:flex-start; margin-top:32px; gap:16px; }
  .about-grid,.faq-layout { gap:40px; }
  .about-copy p:first-child { font-size:18px; }
  .contact-bottom { margin-top:32px; }
  .contact-action { width:100%; max-width:none; }
  .footer-main { flex-direction:column; align-items:flex-start; gap:24px; }
  .footer-nav { gap:24px; }
  .footer-bottom { font-size:8px; }
  .scene-bottom { left:24px; bottom:16px; gap:0; }
  .scene-counter { max-width:160px; }
  .header-cta { bottom:16px; right:24px; min-height:44px; }
}
@media (max-width:360px) {
  .hero h1 { font-size:34px; }
  .scene-counter { max-width:120px; font-size:8px; }
  .header-cta { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .scene-backdrop video { display:none; }
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}