/************ rh-site-fonts.css.jsp  ***********/

/*****css/WEB-INF/jspf/rh-site/css/rh-site-fonts.css.jsp*****/

@font-face {
    font-family: "CartoGothic Std";
    src: url("/type-face/CartoGothic-Std-fontfacekit/CartoGothicStd-Book-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "CartoGothic Std";
    src: url("/type-face/CartoGothic-Std-fontfacekit/CartoGothicStd-Italic-webfont.woff") format("woff");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "CartoGothic Std";
    src: url("/type-face/CartoGothic-Std-fontfacekit/CartoGothicStd-Bold-webfont.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "CartoGothic Std";
    src: url("/type-face/CartoGothic-Std-fontfacekit/CartoGothicStd-BoldItalic-webfont.woff") format("woff");
    font-style: italic;
    font-weight: 700;
    font-display: swap;
}
/*****css(end)/WEB-INF/jspf/rh-site/css/rh-site-fonts.css.jsp*****/




/************ rh-site-fonts.css.jsp  ***********/


/************ rh-site.css.jsp  ***********/

/*****css/WEB-INF/jspf/rh-site/css/rh-site.css.jsp*****/

/* styles/rh-ds-tokens.css */
/* rh-ds-tokens.css — the bound RimuHosting design system's token layer, vendored
   into this project so an active page design ships self-contained.

   DESIGN-CONTRACT.md requires every stylesheet to live in styles/*.css (the
   renderer inlines linked sheets in link order). The design system tree at
   _ds/<ds>/ does not satisfy that rule, so its two token files are copied here.
   Claude Design uses assets/fonts/ for its preview. Production strips these
   @font-face blocks and serves the same files from the application's canonical
   /type-face/ directory.

   Source of truth is still the design-system project
   (a982d3d3-41f7-4f27-a7e1-c0d128920716): tokens/colors.css + tokens/typography.css.
   Re-vendor this file when the design system changes; do not edit values here.
   Project-level additions belong in rh-tokens.css. */

/* --- CartoGothic Std — self-hosted brand typeface. Candara is the local fallback. --- */
:root{
/* --- type --- */
--rr-text-font-sans:system-ui,'Segoe UI',sans-serif;
--rr-text-font-mono:ui-monospace,'Courier New',monospace;
--rr-text-font-brand:'CartoGothic Std',var(--rr-text-font-sans);
/* Legacy aliases */
--rh-font-body:var(--rr-text-font-brand);
--rh-font-mono:var(--rr-text-font-mono);

/* --- core brand colours --- */
--rr-clr-brand-canvas:#FFFFFF;
--rr-clr-brand-ink:#251D18;
--rr-clr-brand-bark:#452008;
--rr-clr-brand-clay:#996444;
--rr-clr-brand-leaf:#88AA00;
--rr-clr-brand-link:#255982;
/* --- supporting colours --- */
--rr-clr-brand-surface-warm:#F4EEDB;
--rr-clr-brand-leaf-soft:#BFE369;
--rr-clr-brand-green-text:#587200;
--rr-clr-brand-nav-tan:#BC9B85;
--rr-clr-brand-divider:#C3CDD5;
--rr-clr-brand-boundary:#7A8994;
/* --- logo role aliases --- */
--rr-clr-logo-rimu-on-dark:var(--rr-clr-brand-canvas);
--rr-clr-logo-hosting-on-dark:var(--rr-clr-brand-divider);
--rr-clr-logo-rimu-on-light:var(--rr-clr-brand-bark);
--rr-clr-logo-hosting-on-light:var(--rr-clr-brand-boundary);
--rr-clr-logo-leaf:var(--rr-clr-brand-leaf);
--rr-clr-logo-trunk:var(--rr-clr-brand-clay);
/* --- semantic mapping --- */
--rr-clr-bg:var(--rr-clr-brand-canvas);
--rr-clr-surface-1:var(--rr-clr-brand-surface-warm);
--rr-clr-surface-2:var(--rr-clr-brand-canvas);
--rr-clr-surface-3:var(--rr-clr-brand-surface-warm);
--rr-clr-overlay:rgba(37,29,24,0.62);
--rr-clr-divider:var(--rr-clr-brand-divider);
--rr-clr-text:var(--rr-clr-brand-ink);
--rr-clr-text-muted:rgba(37,29,24,0.72);
--rr-clr-text-subtle:rgba(37,29,24,0.58);
--rr-clr-text-inverse:var(--rr-clr-brand-canvas);
--rr-clr-link:var(--rr-clr-brand-link);
--rr-clr-link-hover:var(--rr-clr-brand-link);
--rr-clr-border:var(--rr-clr-brand-divider);
--rr-clr-border-strong:var(--rr-clr-brand-boundary);
--rr-clr-focus-ring:var(--rr-clr-brand-link);
--rr-clr-primary:var(--rr-clr-brand-link);
--rr-clr-on-primary:var(--rr-clr-brand-canvas);
--rr-clr-primary-soft:var(--rr-clr-brand-surface-warm);
--rr-clr-on-primary-soft:var(--rr-clr-brand-ink);
--rr-clr-surface-accent:var(--rr-clr-brand-leaf-soft);
--rr-clr-on-surface-accent:var(--rr-clr-brand-ink);
--rr-clr-field-bg:var(--rr-clr-brand-canvas);
--rr-clr-field-text:var(--rr-clr-brand-ink);
--rr-clr-field-border:var(--rr-clr-brand-boundary);
--rr-clr-field-placeholder:rgba(37,29,24,0.58);
--rr-clr-field-focus-bg:var(--rr-clr-brand-canvas);
}

/* styles/rh-tokens.css */
/* rh-tokens.css — project token layer for rimuhosting.com page designs.
   Sits on top of the bound RimuHosting design system (_ds/<ds>/tokens/*.css) and
   holds only two kinds of value:

   1. RGB channel triples, so alpha variants of brand colours can be composed
      (rgb(var(--rh-rgb-ink) / .72)) without hard-coding hex anywhere else.
      Values mirror the --rr-clr-brand-* tokens exactly.
   2. Values the design system does not define yet. Entries marked PROMOTE are
      genuinely reusable and should be added to the design-system project
      (a982d3d3-…) so other pages inherit them; the illustration-matched values
      below are deliberately page-level and should NOT be promoted.
*/
:root{
/* 1. channel triples (mirror --rr-clr-brand-*) */
--rh-rgb-canvas:255 255 255;
--rh-rgb-ink:37 29 24;
--rh-rgb-bark:69 32 8;
--rh-rgb-surface-warm:244 238 219;
--rh-rgb-divider:195 205 213;
--rh-rgb-nav-tan:188 155 133;
--rh-rgb-shadow:0 0 0;

/* 2a. PROMOTE — accessible clay for small text and eyebrow labels.
   Brand Clay #996444 measures 4.25:1 on Warm Surface, below the WCAG AA 4.5:1
   floor for body-size text; this is 5.0:1 on Warm Surface and 5.8:1 on Canvas. */
--rh-clr-clay-deep:#8A5A3C;
/* 2b. PROMOTE — hover/pressed state for Link Blue. The design system currently
   maps --rr-clr-link-hover to --rr-clr-link (no state change). */
--rh-clr-link-hover:#1C4364;

/* 2c. Illustration-matched values, sampled from the raster artwork the animated
   overlays sit on so the redrawn parts are invisible against it. These are
   artwork constants, not brand colours — do not promote, do not reuse. */
--rh-clr-banner-sky:#f9e6c4;      /* images/rimu-header-parallax backdrop */
--rh-clr-slider-panel:#FCEACE;    /* images/vm-resource-sliders panel face */
--rh-clr-slider-track:#FAE8CA;
--rh-clr-slider-outline:#3C3421;
--rh-clr-slider-fill:#6180AD;
--rh-clr-slider-handle:#C47F55;

/* 3. derived surfaces, hairlines and shadows */
--rh-clr-text-emphasis:rgb(var(--rh-rgb-ink) / .85);
--rh-clr-glass-warm:rgb(var(--rh-rgb-surface-warm) / .74);
--rh-clr-glass-canvas:rgb(var(--rh-rgb-canvas) / .55);
--rh-clr-glass-canvas-strong:rgb(var(--rh-rgb-canvas) / .85);
--rh-clr-border-glass:rgb(var(--rh-rgb-ink) / .3);
--rh-clr-hairline-on-bark:rgb(var(--rh-rgb-divider) / .25);
--rh-clr-underline-on-bark:rgb(var(--rh-rgb-surface-warm) / .45);
--rh-clr-underline-tan:rgb(var(--rh-rgb-nav-tan) / .5);
--rh-clr-year-stamp:rgb(var(--rh-rgb-bark) / .8);
--rh-shadow-card:0 2px 24px rgb(var(--rh-rgb-bark) / .08);
--rh-shadow-header:0 2px 10px rgb(var(--rh-rgb-shadow) / .22);
--rh-shadow-knob:0 1px 1px rgb(var(--rh-rgb-shadow) / .18);
}

/* styles/rh-site-base.css */
/* rh-site-base.css — primitives shared by every rimuhosting.com page design.
   Every rule is scoped under .rh-site so the component can be dropped into an
   existing application page without touching the host document: no html or body
   rules live here, so the host keeps its own margin, background and scrolling.
   The application owns its full-page shell reset. Smooth in-page anchor scrolling
   used to come from html{scroll-behavior:smooth}; it is now done in the behaviour
   script, scoped to the component's own scroll container.
   Colours come from the design-system --rr-* tokens and the project --rh-* layer;
   no raw values live here. */

.rh-site{font-family:var(--rr-text-font-brand);color:var(--rr-clr-text);background:var(--rr-clr-bg);position:relative}
/* :where() keeps the default link colour at zero specificity so any component
   link class below (nav, footer, quiet, chip, action) overrides it cleanly. */
.rh-site :where(a){color:var(--rr-clr-link)}
.rh-site :where(a:hover){color:var(--rh-clr-link-hover)}
.rh-site a:focus-visible,
.rh-site button:focus-visible,
.rh-site summary:focus-visible{outline:2px solid var(--rr-clr-focus-ring);outline-offset:3px;border-radius:4px}
.rh-site-on-bark a:focus-visible,
.rh-site-on-bark button:focus-visible,
.rh-site-on-bark summary:focus-visible{outline-color:var(--rr-clr-text-inverse)}

/* ---- layout ---- */
.rh-site-container{width:100%;max-width:1080px;margin-inline:auto;padding:0 24px;box-sizing:border-box}

/* ---- type ---- */
.rh-site-eyebrow{font-family:var(--rr-text-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rh-clr-clay-deep)}
.rh-site-eyebrow--on-bark{color:var(--rr-clr-brand-leaf-soft)}
.rh-site-micro-label{font-family:var(--rr-text-font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rr-clr-brand-nav-tan)}
.rh-site-h1{margin:0 0 14px;font-size:40px;line-height:1.12;color:var(--rr-clr-text);text-wrap:pretty}
.rh-site-h1--inverse{color:var(--rr-clr-text-inverse)}
.rh-site-h2{margin:12px 0 18px;font-size:34px;line-height:1.15;color:var(--rr-clr-text);text-wrap:pretty}
.rh-site-h2--inverse{color:var(--rr-clr-text-inverse)}
.rh-site-prose{margin:0 0 16px;font-size:17px;line-height:1.7}
.rh-site-prose--inverse{color:var(--rr-clr-brand-surface-warm)}
.rh-site-note{font-size:14px;color:var(--rr-clr-text-muted)}

/* ---- actions ---- */
.rh-site-primary-action{display:inline-block;text-decoration:none;font-weight:700;font-size:17px;padding:14px 26px;border-radius:6px;background:var(--rr-clr-primary);color:var(--rr-clr-on-primary)}
.rh-site-primary-action:hover{background:var(--rh-clr-link-hover);color:var(--rr-clr-on-primary)}
.rh-site-primary-action:active{transform:translateY(1px)}
.rh-site-primary-action--sm{font-size:16px;padding:12px 22px}
.rh-site-primary-action--xs{font-size:14px;padding:9px 16px;white-space:nowrap}
/* on Bark the action inverts: Canvas plate, Link Blue label */
.rh-site-primary-action--on-bark{background:var(--rr-clr-brand-canvas);color:var(--rr-clr-brand-link)}
.rh-site-primary-action--on-bark:hover{background:var(--rr-clr-brand-surface-warm);color:var(--rr-clr-brand-link)}

.rh-site-text-link{font-size:16px}

/* parchment link on Bark surfaces — never Link Blue on dark */
.rh-site-quiet-link{color:var(--rr-clr-brand-surface-warm);text-decoration:underline;text-decoration-color:var(--rh-clr-underline-on-bark);text-underline-offset:3px}
.rh-site-quiet-link:hover{color:var(--rr-clr-text-inverse);text-decoration-color:var(--rr-clr-text-inverse)}

.rh-site-chip{display:inline-block;border:1px solid var(--rr-clr-border);border-radius:999px;padding:8px 16px;font-size:15px;color:var(--rr-clr-text);text-decoration:none;background:var(--rr-clr-brand-canvas)}
.rh-site-chip:hover{border-color:var(--rr-clr-brand-link);color:var(--rr-clr-brand-link)}
.rh-site-chip__currency{color:var(--rr-clr-brand-clay);font-size:13px}

.rh-site-menu-button{display:none;align-items:center;gap:6px;min-height:44px;border:none;font:inherit;font-weight:700;cursor:pointer}
.rh-site-menu-button:active{transform:translateY(1px)}
.rh-site-menu-button__caret{font-size:.8em}

/* ---- media ---- */
/* height:auto lets the width/height attributes act as an aspect-ratio hint
   (reserving layout space) instead of forcing the image's used height */
.rh-site-media{display:block;width:100%;height:auto}
.rh-site-media--rounded{border-radius:10px}
.rh-site-media--framed{border-radius:10px;border:1px solid var(--rr-clr-border);box-sizing:border-box}

/* ---- compact header (identical on every page) ---- */
.rh-site-header{position:fixed;top:0;left:0;right:0;z-index:100;height:68px;overflow:hidden;background:var(--rr-clr-brand-bark);transform:translateY(-72px);will-change:transform}
.rh-site-header.is-docked{box-shadow:var(--rh-shadow-header)}
.rh-site-header__inner{max-width:1080px;margin:0 auto;height:100%;padding:0 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rh-site-header__home{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.rh-site-header__lockup{height:40px;width:auto;display:block}
.rh-site-nav{display:flex;align-items:center;gap:22px}
.rh-site-nav-link{color:var(--rr-clr-brand-nav-tan);text-decoration:none;font-size:15px;padding:10px 0;margin:-10px 0;white-space:nowrap}
.rh-site-nav-link:hover{color:var(--rr-clr-text-inverse)}
.rh-site-header .rh-site-menu-button{background:var(--rr-clr-brand-canvas);color:var(--rr-clr-brand-link);font-size:15px;padding:9px 16px;border-radius:6px}
.rh-site-header .rh-site-menu-button:hover{background:var(--rr-clr-brand-surface-warm)}

/* ---- tagline lockup (banner and footer) ---- */
.rh-site-tagline{display:flex;align-items:center;gap:11px}
.rh-site-tagline__rule{width:26px;height:2px;background:var(--rr-clr-brand-leaf);border-radius:1px}
.rh-site-tagline__text{font-size:16px;font-style:italic;color:var(--rr-clr-brand-surface-warm);letter-spacing:.005em}

/* ---- footer (identical on every page) ----
   The soil art is a horizontal TILE, as on the original site: repeat-x with
   background-size:auto 100%, so ONE tile always spans the footer's full height
   and repeats sideways. Never use cover here — it crops the ground line. The
   art is 2.083:1 with the grass line at ~32% height, so a 578px-tall footer
   draws each tile ~1204px wide and the tree mark recurs about every 1200px.
   That periodicity is the original look, not a defect.

   Resolution: images/footer-ground-tile/ is a full 480–4096 AVIF+WebP set, but
   a CSS background cannot be picked by drawn width the way a srcset can — only
   by DPR. The pair below suits the ~1200px drawn tile: image-1535 at 1x,
   image-3000 above 1.5dppx, AVIF ahead of WebP. Deliberately NOT stepped down
   at narrow widths: the footer columns wrap there, so the footer gets TALLER
   and the height-fitted tile is drawn WIDER (~1460px at a 700px-tall footer) —
   a smaller file would make mobile softer than desktop, not cheaper per pixel.
   Re-pick the pair if the footer's height changes materially.

   Scrim: footer text sits over the art, and the new tile is bright pebbled
   soil exactly where the brand lockup lands, so the scrim is anchored to the
   CONTENT (top:180px = 40px above the inner block's 220px top padding), not to
   a percentage of the footer. A percentage breaks on tall wrapped mobile
   footers, where the content stays at 220px while a %-scrim starts far below
   it. The ramp reaches .88 by y=222 so the whole lockup band clears WCAG AA
   against both the white ink and the Nav Tan "Hosting" (measured 10:1 and
   4.4:1); above it the sky, grass line and tree stay essentially unveiled.
   The scrim sits behind the content via isolation + z-index:-1, and links run
   Warm Surface rather than Nav Tan for contrast against it. */
.rh-site-footer{position:relative;isolation:isolate;background-color:var(--rr-clr-brand-bark);background-image:image-set(url("/rh-site/images/footer-ground-tile/image-1535.avif") type("image/avif"),url("/rh-site/images/footer-ground-tile/image-1535.webp") type("image/webp"));background-position:top center;background-size:auto 100%;background-repeat:repeat-x;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end}
@media (min-resolution:1.5dppx){.rh-site-footer{background-image:image-set(url("/rh-site/images/footer-ground-tile/image-3000.avif") type("image/avif"),url("/rh-site/images/footer-ground-tile/image-3000.webp") type("image/webp"))}}
.rh-site-footer::after{content:"";position:absolute;left:0;right:0;top:180px;bottom:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgb(var(--rh-rgb-bark) / 0) 0,rgb(var(--rh-rgb-bark) / .5) 26px,rgb(var(--rh-rgb-bark) / .88) 42px,rgb(var(--rh-rgb-bark) / .94) 150px,rgb(var(--rh-rgb-bark) / .97) 100%)}
.rh-site-footer__inner{padding-block:220px 40px}
.rh-site-footer__top{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start}
.rh-site-footer__brand{flex:1 1 320px;min-width:260px}
.rh-site-footer__lockup-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rh-site-footer__lockup{height:40px;width:auto}
.rh-site-footer__nav{display:flex;gap:36px;flex-wrap:wrap;margin-left:auto}
.rh-site-footer__group{display:flex;flex-direction:column;gap:10px}
.rh-site-footer-link{color:var(--rr-clr-brand-surface-warm);text-decoration:none;font-size:15px;padding:5px 0;margin:-5px 0}
.rh-site-footer-link:hover{color:var(--rr-clr-text-inverse);text-decoration:underline}
.rh-site-footer__legal{margin:36px 0 0;font-size:14px;color:var(--rr-clr-brand-nav-tan)}
.rh-site-footer__legal a{color:var(--rr-clr-brand-surface-warm);text-decoration:underline;text-decoration-color:var(--rh-clr-underline-on-bark);text-underline-offset:3px}
.rh-site-footer__legal a:hover{color:var(--rr-clr-text-inverse);text-decoration-color:var(--rr-clr-text-inverse)}
.rh-site-footer__copyright{margin:10px 0 0;font-size:13px;color:var(--rr-clr-brand-nav-tan)}

/* ---- mobile navigation panel (one panel, both menu buttons control it) ---- */
.rh-site-mobile-nav{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:flex-end}
.rh-site-mobile-nav.is-open{display:flex}
.rh-site-mobile-nav__backdrop{position:absolute;inset:0;background:var(--rr-clr-overlay)}
.rh-site-mobile-nav__sheet{position:relative;margin:12px;width:min(340px,calc(100% - 24px));box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:16px 18px 20px;border-radius:10px;background:var(--rr-clr-brand-bark);box-shadow:var(--rh-shadow-header)}
.rh-site-mobile-nav__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rh-site-mobile-nav__close{min-height:44px;padding:9px 15px;border-radius:6px;border:1px solid var(--rh-clr-hairline-on-bark);background:none;color:var(--rr-clr-brand-surface-warm);font:inherit;font-size:15px;cursor:pointer}
.rh-site-mobile-nav__close:hover{color:var(--rr-clr-text-inverse);border-color:var(--rr-clr-text-inverse)}
.rh-site-mobile-nav__links{display:flex;flex-direction:column;gap:4px}
.rh-site-mobile-nav-link{display:flex;align-items:center;min-height:44px;padding:8px 2px;color:var(--rr-clr-brand-nav-tan);text-decoration:none;font-size:17px;border-bottom:1px solid var(--rh-clr-hairline-on-bark)}
.rh-site-mobile-nav-link:hover{color:var(--rr-clr-text-inverse)}
.rh-site-mobile-nav__cta{margin-top:12px;text-align:center;min-height:44px;box-sizing:border-box}

/* ---- narrow viewports: nav collapses to the menu button ---- */
@media (max-width:719px){
  .rh-site-nav{display:none}
  .rh-site-menu-button{display:inline-flex}
}
/* the panel belongs to the collapsed nav only — never reachable at desktop width */
@media (min-width:720px){
  .rh-site-mobile-nav.is-open{display:none}
}

/* ---- regular site header (every page except the homepage) ----
   Sticky Bark bar. The desktop dropdowns and the mobile panel are native
   <details>/<summary> disclosures, so keyboard operation and expanded state
   come from the browser; the shared behaviour script only adds one-open-at-a-time,
   Escape, outside-click and close-after-navigation. */
.rh-site-topbar{position:sticky;top:0;z-index:100;background:var(--rr-clr-brand-bark);box-shadow:var(--rh-shadow-header)}
.rh-site-topbar__inner{max-width:1080px;margin:0 auto;min-height:68px;padding:8px 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px}
.rh-site-topbar__home{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.rh-site-topbar__lockup{height:40px;width:auto;display:block}
.rh-site-topnav{gap:6px}
.rh-site-topnav .rh-site-nav-link{padding:10px 12px;margin:0;border-radius:6px}
.rh-site-topnav .rh-site-nav-link:hover{background:var(--rh-clr-hairline-on-bark)}
.rh-site-topnav .rh-site-primary-action--xs{margin-left:6px;box-sizing:border-box;min-height:44px;display:inline-flex;align-items:center}

/* desktop disclosure menu */
.rh-site-drop{position:relative}
.rh-site-drop__summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:6px;color:var(--rr-clr-brand-nav-tan);font-size:15px;white-space:nowrap;cursor:pointer;list-style:none}
.rh-site-drop__summary::-webkit-details-marker{display:none}
.rh-site-drop__summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .16s ease}
.rh-site-drop__summary:hover{color:var(--rr-clr-text-inverse)}
.rh-site-drop[open]>.rh-site-drop__summary{color:var(--rr-clr-text-inverse);background:var(--rh-clr-hairline-on-bark)}
.rh-site-drop[open]>.rh-site-drop__summary::after{transform:translateY(2px) rotate(-135deg)}
.rh-site-drop__panel{position:absolute;top:calc(100% + 10px);left:0;z-index:120;min-width:262px;display:flex;flex-direction:column;padding:8px;border-radius:8px;background:var(--rr-clr-brand-canvas);border:1px solid var(--rr-clr-border);box-shadow:var(--rh-shadow-card)}
.rh-site-drop--end .rh-site-drop__panel{left:auto;right:0}
.rh-site-drop__link{display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:6px;color:var(--rr-clr-text);text-decoration:none;font-size:15px}
.rh-site-drop__link:hover{background:var(--rr-clr-brand-surface-warm);color:var(--rr-clr-brand-link)}

/* mobile panel: same disclosure pattern, full-width under the bar */
.rh-site-topbar__menu{display:none}
.rh-site-topbar__menu>summary{list-style:none}
.rh-site-topbar__menu>summary::-webkit-details-marker{display:none}
.rh-site-topbar .rh-site-menu-button{background:var(--rr-clr-brand-canvas);color:var(--rr-clr-brand-link);font-size:15px;padding:9px 16px;border-radius:6px}
.rh-site-topbar .rh-site-menu-button:hover{background:var(--rr-clr-brand-surface-warm)}
.rh-site-topbar__menu-panel{position:absolute;left:0;right:0;top:100%;z-index:110;display:flex;flex-direction:column;gap:20px;max-height:calc(100vh - 68px);overflow-y:auto;padding:20px 24px 26px;box-sizing:border-box;background:var(--rr-clr-brand-bark);border-top:1px solid var(--rh-clr-hairline-on-bark);box-shadow:var(--rh-shadow-header)}
.rh-site-topbar__menu-group{display:flex;flex-direction:column;gap:2px}
.rh-site-topbar__menu-cta{margin-top:2px;text-align:center;box-sizing:border-box}

@media (max-width:719px){
  .rh-site-topbar__menu{display:block}
}
@media (prefers-reduced-motion:reduce){
  .rh-site-drop__summary::after{transition:none}
}

/* styles/home.css */
/* home.css — layout, illustration overlays and animation for the RimuHosting
   homepage (.rh-home). Loaded after rh-tokens.css and rh-site-base.css.
   Scoped under .rh-site / .rh-home; no raw colour values (see rh-tokens.css). */

/* ---- section rhythm: Warm Surface / Canvas alternation with hairline seams ---- */
.rh-home-hero,
.rh-home-config,
.rh-home-infra,
.rh-home-managed{background:var(--rr-clr-brand-surface-warm)}
.rh-home-why,
.rh-home-quotes{background:var(--rr-clr-brand-canvas)}
.rh-home-support,
.rh-home-enquire{background:var(--rr-clr-brand-bark)}
.rh-home-hero,
.rh-home-why{border-bottom:1px solid var(--rr-clr-border)}
.rh-home-config,
.rh-home-infra,
.rh-home-managed{border-top:1px solid var(--rr-clr-border);border-bottom:1px solid var(--rr-clr-border)}

.rh-home-why .rh-site-container{padding-block:72px}
.rh-home-config .rh-site-container,
.rh-home-infra .rh-site-container,
.rh-home-managed .rh-site-container,
.rh-home-quotes .rh-site-container{padding-block:80px}
.rh-home-support .rh-site-container{padding-block:84px}

/* ---- scroll sentinel driving the header choreography ---- */
.rh-home-sentinel{position:absolute;top:0;left:0;width:1px;height:420px;pointer-events:none}

/* ---- tall parallax banner ----
   NOTE: the art's real layout width is set by the behaviour script, not by the
   CSS below — layout() sets height = EH * REVEAL and width:auto, so at the 2:1
   master that is 2496px desktop / 1326px mobile. The <picture> sizes attribute
   in the page must carry those two numbers (not 100vw) or the browser picks a
   candidate far smaller than the box it paints into. Change EH_D/EH_M/REVEAL
   and you must change sizes too. */
.rh-home-banner{position:relative;height:480px;overflow:hidden;background:var(--rh-clr-banner-sky);z-index:1}
.rh-home-banner__art{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100vw,2000px);height:auto;display:block;will-change:transform}
.rh-home-banner__overlay{position:absolute;inset:0;z-index:2}
.rh-home-banner__inner{max-width:1080px;margin:0 auto;height:100%;padding:26px 24px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end}
.rh-home-banner__stack{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.rh-home-banner__home{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-decoration:none}
.rh-home-banner__lockup{height:62px;width:auto;display:block}
.rh-home-banner__tagline{white-space:nowrap}
.rh-home-banner__tagline .rh-site-tagline__text{font-size:18px;color:var(--rr-clr-brand-bark)}
.rh-home-banner__account{display:inline-flex;align-items:center;gap:8px;color:var(--rr-clr-text);font-size:16px;text-decoration:none;border:1px solid var(--rh-clr-border-glass);padding:11px 18px;border-radius:7px;background:var(--rh-clr-glass-canvas);white-space:nowrap;transition:opacity .18s}
.rh-home-banner__account:hover{opacity:.6;color:var(--rr-clr-text);border-color:var(--rr-clr-brand-bark);background:var(--rh-clr-glass-canvas-strong)}
.rh-home-banner__account-glyph{font-family:var(--rr-text-font-mono);font-size:13px;color:var(--rr-clr-brand-clay)}
.rh-home-banner__order{border-radius:7px}
.rh-home-banner .rh-site-menu-button{background:var(--rr-clr-brand-link);color:var(--rr-clr-text-inverse);font-size:16px;padding:12px 20px;border-radius:7px}
.rh-home-banner .rh-site-menu-button:hover{background:var(--rh-clr-link-hover)}

@media (max-width:719px){
  .rh-home-banner__tagline{display:none}
  .rh-home-banner__lockup{height:34px}
}

/* ---- 1 hero ---- */
.rh-home-hero{position:relative;overflow:hidden}
.rh-home-hero__media{position:absolute;inset:0;display:block}
.rh-home-hero__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.rh-home-hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,
  rgb(var(--rh-rgb-surface-warm) / .96) 0%,
  rgb(var(--rh-rgb-surface-warm) / .84) 38%,
  rgb(var(--rh-rgb-surface-warm) / .4) 58%,
  rgb(var(--rh-rgb-surface-warm) / 0) 74%)}
.rh-home-hero .rh-site-container{position:relative;padding-block:72px 84px}
.rh-home-hero__card{max-width:580px;background:var(--rh-clr-glass-warm);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:14px;padding:34px 36px;box-shadow:var(--rh-shadow-card)}
.rh-home-hero__eyebrow{margin-bottom:18px}
.rh-home-hero__title{margin:0 0 18px;font-size:52px;line-height:1.08;color:var(--rr-clr-text);text-wrap:pretty}
.rh-home-hero__lede{margin:0 0 30px;font-size:20px;line-height:1.55;color:var(--rh-clr-text-emphasis);max-width:30em}
.rh-home-hero__actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* ---- 2 why Rimu ---- */
.rh-home-why__cols{display:flex;gap:44px;flex-wrap:wrap;align-items:flex-start;margin:0 0 40px}
.rh-home-why__body{flex:1 1 480px;min-width:300px}
.rh-home-why__body .rh-site-prose + .rh-site-prose{margin-bottom:20px}
.rh-home-why__links{display:flex;gap:24px;flex-wrap:wrap}
.rh-home-proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;border-top:1px solid var(--rr-clr-border);padding:32px 0 0;margin:0;list-style:none}
.rh-home-stat__value{font-size:36px;font-weight:700;color:var(--rr-clr-text);line-height:1}
.rh-home-stat__label{margin-top:8px;font-size:15px;color:var(--rr-clr-text-muted)}

/* ---- 3 configure your own server ---- */
.rh-home-config__cols{display:flex;gap:40px;flex-wrap:wrap;align-items:center;margin:0 0 34px}
.rh-home-config__body{flex:1 1 460px;min-width:300px}
.rh-home-config__body .rh-site-prose{line-height:1.65}
.rh-home-config__prose-tail{margin:16px 0 0;font-size:17px;line-height:1.65}
.rh-home-config__figure{flex:0 1 400px;min-width:280px;position:relative;container-type:inline-size}
.rh-home-config__cta{margin-top:22px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.rh-home-config__detail{margin:18px 0 0;font-size:15px;line-height:1.7;color:var(--rr-clr-text-muted)}

/* Slider overlays: the artwork's baked track + handle are masked out and redrawn
   so they can drift between three settings. Geometry is a percentage of the
   figure; thicknesses use cqw so they track the illustration when it scales.
   Rows are named for the sliders in the artwork (CPU, memory, disk, network). */
.rh-home-slider__mask{position:absolute;left:33.2%;width:46.4%;height:5.6cqw;transform:translateY(-50%);background:var(--rh-clr-slider-panel)}
.rh-home-slider__track{position:absolute;left:33.7%;width:45.2%;height:2.15cqw;transform:translateY(-50%);background:var(--rh-clr-slider-track);border:1.5px solid var(--rh-clr-slider-outline);border-radius:999px;box-sizing:border-box;overflow:hidden}
.rh-home-slider__fill{position:absolute;left:0;top:0;bottom:0;background:var(--rh-clr-slider-fill)}
.rh-home-slider__handle{position:absolute;width:5.2cqw;height:5.2cqw;transform:translate(-50%,-50%);background:var(--rh-clr-slider-handle);border:2px solid var(--rh-clr-slider-outline);border-radius:50%;box-sizing:border-box;box-shadow:var(--rh-shadow-knob)}

.rh-home-slider-row--cpu{top:20.65%}
.rh-home-slider-row--memory{top:39.9%}
.rh-home-slider-row--disk{top:59.15%}
.rh-home-slider-row--network{top:78.4%}

.rh-home-slider__fill--cpu{width:50.4%;animation:rh-slider-fill-cpu 16s ease-in-out -2s infinite}
.rh-home-slider__handle--cpu{left:56.5%;animation:rh-slider-handle-cpu 16s ease-in-out -2s infinite}
.rh-home-slider__fill--memory{width:73.9%;animation:rh-slider-fill-memory 19s ease-in-out -7s infinite}
.rh-home-slider__handle--memory{left:67.1%;animation:rh-slider-handle-memory 19s ease-in-out -7s infinite}
.rh-home-slider__fill--disk{width:42.9%;animation:rh-slider-fill-disk 14s ease-in-out -11s infinite}
.rh-home-slider__handle--disk{left:53.1%;animation:rh-slider-handle-disk 14s ease-in-out -11s infinite}
.rh-home-slider__fill--network{width:88.3%;animation:rh-slider-fill-network 22s ease-in-out -15s infinite}
.rh-home-slider__handle--network{left:73.6%;animation:rh-slider-handle-network 22s ease-in-out -15s infinite}

/* ---- 4 support ---- */
.rh-home-support__cols{display:flex;gap:44px;flex-wrap:wrap}
.rh-home-support__body{flex:1 1 480px;min-width:300px}
.rh-home-support .rh-site-h2{margin-bottom:22px;max-width:22em}
.rh-home-support__stats{font-family:var(--rr-text-font-mono);font-size:13px;letter-spacing:.04em;color:var(--rr-clr-brand-leaf-soft);line-height:2;margin:0 0 24px}
.rh-home-support__aside{flex:1 1 420px;min-width:280px;display:flex;flex-direction:column;gap:14px;align-self:center}
.rh-home-support__figure{position:relative;container-type:inline-size}
.rh-home-support__caption{font-size:14px;color:var(--rr-clr-brand-nav-tan);line-height:1.6}

/* typing fingers: one frame per keystroke, staggered so the hand looks busy */
.rh-home-finger{position:absolute;width:3.2%;pointer-events:none;animation:rh-tap 5s linear infinite}
.rh-home-finger--1{left:9.9%;top:69.4%}
.rh-home-finger--2{left:12.3%;top:69.9%;animation-delay:1.8s}
.rh-home-finger--3{left:14.7%;top:69.4%;animation-delay:.9s}
.rh-home-finger--4{left:16.1%;top:73.7%;animation-delay:3.1s}
.rh-home-finger--5{left:18.3%;top:74.3%;animation-delay:4s}

/* the technician's screen: one reply types in, holds, lifts away */
.rh-home-support__reply{position:absolute;left:68%;top:16%;width:26.5%;height:52%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;font-family:var(--rr-text-font-mono);color:var(--rr-clr-text);font-size:2.6cqw;line-height:1.5;word-break:break-word}
.rh-home-support__reply-msg{opacity:1;transform:translateY(0em);transition:opacity 300ms ease,transform 300ms cubic-bezier(.4,0,.7,.2)}
.rh-home-support__caret{display:inline-block;width:.55em;height:1em;vertical-align:-.15em;background:var(--rr-clr-text);margin-left:.08em;animation:rh-caret 1.06s step-end infinite}

/* ---- 5 infrastructure ---- */
.rh-home-infra .rh-site-h2{margin-bottom:26px}
.rh-home-infra__map{position:relative;container-type:inline-size;margin:0 0 36px}
.rh-home-infra__cols{display:flex;gap:44px;flex-wrap:wrap}
.rh-home-infra__body{flex:1 1 480px;min-width:300px}
.rh-home-infra__body .rh-site-prose + .rh-site-prose{margin-bottom:24px}
.rh-home-infra__locations{display:flex;gap:10px;flex-wrap:wrap}
.rh-home-infra__note{margin-top:12px;font-size:14px;color:var(--rr-clr-text-muted)}
.rh-home-map-label{position:absolute;font-family:var(--rr-text-font-mono);font-size:1.4cqw;font-weight:700;letter-spacing:.1em;color:var(--rr-clr-text)}
.rh-home-map-label--london{left:9%;top:26.5%;transform:translate(-50%,-100%)}
.rh-home-map-label--frankfurt{left:14.5%;top:34.4%;transform:translate(0,-50%)}
.rh-home-map-label--dallas{left:75%;top:43.8%;transform:translate(0,-50%)}
.rh-home-map-label--sydney{left:43.5%;top:71%;transform:translate(-50%,-100%)}
.rh-home-map-label--auckland{left:53%;top:81.5%;transform:translate(0,-50%)}

/* ---- 6 proof from customers ---- */
.rh-home-quotes__intro{margin:0 0 22px;font-size:17px;line-height:1.65;max-width:40em}
.rh-home-quotes__timeline{position:relative;container-type:inline-size;margin:0 0 34px;border:1px solid var(--rr-clr-border);border-radius:10px;overflow:hidden}
.rh-home-quote-year{position:absolute;font-family:var(--rr-text-font-mono);font-size:2.2cqw;font-weight:700;color:var(--rh-clr-year-stamp)}
.rh-home-quote-year--2003{left:24.5%;top:54%;transform:translate(-50%,-50%) rotate(-1deg)}
.rh-home-quote-year--2009{left:39.3%;top:56%;transform:translate(-50%,-50%) rotate(1deg)}
.rh-home-quote-year--2015{left:55%;top:58%;transform:translate(-50%,-50%)}
.rh-home-quote-year--2021{left:68.4%;top:56.5%;transform:translate(-50%,-50%) rotate(1deg)}
.rh-home-quote-year--2026{left:86.6%;top:57%;transform:translate(-50%,-50%) rotate(-1deg)}
.rh-home-quotes__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.rh-home-quote{margin:0;background:var(--rr-clr-brand-canvas);border:1px solid var(--rr-clr-border);border-radius:10px;padding:24px 26px}
.rh-home-quote__text{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--rr-clr-text)}
.rh-home-quote__source{font-size:14px;color:var(--rr-clr-brand-clay)}
.rh-home-quotes__archive{display:flex;align-items:center;justify-content:center;border:1px dashed var(--rr-clr-border-strong);border-radius:10px;padding:24px}

/* ---- 7 managed services ---- */
.rh-home-managed__intro{display:flex;gap:44px;flex-wrap:wrap;align-items:center;margin:0 0 30px}
.rh-home-managed__lede{flex:1 1 380px;min-width:280px;margin:0;font-size:17px;line-height:1.65;max-width:40em}
.rh-home-managed__figure{flex:0 1 380px;min-width:280px}
.rh-home-managed__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rh-home-service-card{display:flex;gap:16px;align-items:center;border:1px solid var(--rr-clr-border);border-radius:8px;padding:16px 18px;text-decoration:none;color:inherit;background:var(--rr-clr-brand-canvas)}
.rh-home-service-card:hover{border-color:var(--rr-clr-border-strong);color:inherit}
.rh-home-service-card__tile{flex:0 0 52px;height:52px;border-radius:8px;background:var(--rr-clr-brand-bark);display:flex;align-items:center;justify-content:center;padding:9px;box-sizing:border-box}
.rh-home-service-card__logo{max-width:100%;max-height:100%;display:block}
.rh-home-service-card__name{display:block;font-size:16px;color:var(--rr-clr-text)}
.rh-home-service-card__desc{font-size:15px;color:var(--rr-clr-text-muted)}

/* ---- 8 enquire or order ---- */
.rh-home-enquire .rh-site-container{max-width:800px;padding-block:72px 88px;text-align:center}
.rh-home-enquire__art{margin:0 auto 36px}
.rh-home-enquire__title{margin:0 0 18px;font-size:38px;line-height:1.12}
.rh-home-enquire__lede{margin:0 auto 30px;font-size:18px;line-height:1.65;color:var(--rr-clr-brand-surface-warm);max-width:36em}
.rh-home-enquire__actions{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center}
.rh-home-contact{margin:40px auto 0;max-width:640px;border-top:1px solid var(--rh-clr-hairline-on-bark);padding:28px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:22px;text-align:center;list-style:none}
.rh-home-contact__channel{display:flex;flex-direction:column;gap:5px}
.rh-home-contact__link{font-size:15px;padding:4px 0;margin:-4px 0}
.rh-home-contact__link--phone{white-space:nowrap}
.rh-home-contact__note{font-size:12.5px;color:var(--rr-clr-brand-nav-tan)}

/* ---- animation ---- */
@keyframes rh-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes rh-tap{0%,100%{transform:translateY(0)}2%{transform:translateY(1.8px)}4%{transform:translateY(0)}}
@keyframes rh-slider-handle-cpu{0%,27%{left:56.5%}33%,60%{left:41.0%}66%,93%{left:68.0%}100%{left:56.5%}}
@keyframes rh-slider-fill-cpu{0%,27%{width:50.4%}33%,60%{width:16.2%}66%,93%{width:75.9%}100%{width:50.4%}}
@keyframes rh-slider-handle-memory{0%,27%{left:67.1%}33%,60%{left:47.5%}66%,93%{left:74.5%}100%{left:67.1%}}
@keyframes rh-slider-fill-memory{0%,27%{width:73.9%}33%,60%{width:30.5%}66%,93%{width:90.3%}100%{width:73.9%}}
@keyframes rh-slider-handle-disk{0%,27%{left:53.1%}33%,60%{left:71.0%}66%,93%{left:38.5%}100%{left:53.1%}}
@keyframes rh-slider-fill-disk{0%,27%{width:42.9%}33%,60%{width:82.5%}66%,93%{width:10.6%}100%{width:42.9%}}
@keyframes rh-slider-handle-network{0%,27%{left:73.6%}33%,60%{left:44.0%}66%,93%{left:62.0%}100%{left:73.6%}}
@keyframes rh-slider-fill-network{0%,27%{width:88.3%}33%,60%{width:22.8%}66%,93%{width:62.6%}100%{width:88.3%}}

/* every animated overlay carries data-anim / data-finger so one rule stops them all */
@media (prefers-reduced-motion:reduce){
  .rh-site [data-anim],
  .rh-site [data-finger]{animation:none !important}
}

/* styles/subpage.css */
/* subpage.css — shared shell for the regular rimuhosting.com subpages
   (compare, control-panel, dedicated, faq and the subpage-frame reference).
   Loaded after rh-ds-tokens.css, rh-tokens.css and rh-site-base.css; the header,
   footer, typography, action, link and chip primitives live in rh-site-base.css
   and are NOT repeated here. Every rule is scoped under .rh-site; no raw colour
   values (see rh-tokens.css). Page-specific rules would go in a per-page sheet —
   at present none of the four pages needs one. */

/* ---- page masthead: identical on every subpage, Warm Surface over the body ---- */
.rh-site .rh-sub-masthead{background:var(--rr-clr-brand-surface-warm)}
.rh-site .rh-sub-masthead .rh-site-container{padding-block:56px 44px}
.rh-site .rh-sub-masthead .rh-site-eyebrow{display:block;margin-bottom:14px}
.rh-site .rh-sub-lede{margin:0;max-width:40em;font-size:18px;line-height:1.65}
.rh-site .rh-sub-lede--inverse{color:var(--rr-clr-brand-surface-warm)}

/* ---- body sections: Canvas / Warm Surface / Bark, hairline seam on change ---- */
.rh-site .rh-sub-body .rh-site-container{padding-block:72px 80px}
.rh-site .rh-sub-body--canvas{background:var(--rr-clr-brand-canvas);border-top:1px solid var(--rr-clr-border)}
.rh-site .rh-sub-body--warm{background:var(--rr-clr-brand-surface-warm)}
.rh-site .rh-sub-body--bark{background:var(--rr-clr-brand-bark)}
.rh-site .rh-sub-body--narrow .rh-site-container{max-width:820px}

/* ---- two-column body + figure ---- */
.rh-site .rh-sub-cols{display:flex;gap:44px;flex-wrap:wrap;align-items:center}
.rh-site .rh-sub-cols--top{align-items:flex-start}
.rh-site .rh-sub-cols__body{flex:1 1 480px;min-width:min(100%,280px)}
.rh-site .rh-sub-cols__figure{flex:0 1 400px;min-width:min(100%,260px)}
.rh-site .rh-sub-cols__body>.rh-site-prose:last-child{margin-bottom:0}

/* ---- card grid (control panel highlights) ---- */
.rh-site .rh-sub-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:0;padding:0;list-style:none}
.rh-site .rh-sub-card{background:var(--rr-clr-brand-canvas);border:1px solid var(--rr-clr-border);border-top:3px solid var(--rr-clr-brand-leaf);border-radius:0 0 8px 8px;padding:20px 22px}
.rh-site .rh-sub-card__title{margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--rr-clr-text)}
.rh-site .rh-sub-card__body{margin:0;font-size:15px;line-height:1.6;text-wrap:pretty}

/* ---- decision rows (honest comparison, on Bark) ---- */
.rh-site .rh-sub-rows{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.rh-site .rh-sub-row{padding:16px 0;border-bottom:1px solid var(--rh-clr-hairline-on-bark);font-size:16px;line-height:1.65;color:var(--rr-clr-brand-surface-warm);text-wrap:pretty}
.rh-site .rh-sub-row:last-child{border-bottom:none}
.rh-site .rh-sub-row__case{color:var(--rr-clr-text-inverse);font-size:17px}
.rh-site .rh-sub-row--pick{margin:6px 0;padding:18px 0 18px 22px;border-bottom:none;border-left:4px solid var(--rr-clr-brand-leaf)}
.rh-site .rh-sub-aside{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--rr-clr-brand-nav-tan)}

/* ---- FAQ: native details/summary kept, given a clear open + focus state ---- */
.rh-site .rh-sub-faq{border-top:1px solid var(--rr-clr-border)}
.rh-site .rh-sub-faq__item{border-bottom:1px solid var(--rr-clr-border)}
.rh-site .rh-sub-faq__summary{display:flex;gap:18px;align-items:baseline;justify-content:space-between;padding:18px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:700;line-height:1.35;color:var(--rr-clr-text);text-wrap:pretty}
.rh-site .rh-sub-faq__summary::-webkit-details-marker{display:none}
.rh-site .rh-sub-faq__summary:hover{color:var(--rr-clr-brand-link)}
.rh-site .rh-sub-faq__marker{flex:0 0 auto;width:9px;height:9px;margin-top:.35em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .16s ease}
.rh-site .rh-sub-faq__item[open] .rh-sub-faq__summary{color:var(--rr-clr-brand-link)}
.rh-site .rh-sub-faq__item[open] .rh-sub-faq__marker{transform:translateY(3px) rotate(-135deg)}
.rh-site .rh-sub-faq__answer{margin:0 0 20px;max-width:66ch;font-size:16px;line-height:1.65;text-wrap:pretty}

/* ---- reference-frame placeholder (subpage-frame.dc.html only, not production) ---- */
.rh-site .rh-sub-placeholder{border:2px dashed var(--rr-clr-border-strong);border-radius:8px;padding:56px 24px;text-align:center;font-size:16px;line-height:1.7;color:var(--rr-clr-text-subtle);text-wrap:pretty}
.rh-site .rh-sub-placeholder code{font-family:var(--rr-text-font-mono);font-size:.92em}

/* ---- narrow viewports ---- */
@media (max-width:719px){
  .rh-site .rh-site-h1{font-size:30px}
  .rh-site .rh-sub-masthead .rh-site-container{padding-block:40px 32px}
  .rh-site .rh-sub-body .rh-site-container{padding-block:48px 56px}
  .rh-site .rh-sub-lede{font-size:17px}
  .rh-site .rh-sub-cols{gap:32px}
}

@media (prefers-reduced-motion:reduce){
  .rh-site .rh-sub-faq__marker{transition:none}
}

/* styles/history.css */
/* history.css — page-specific styling for the History page (rh-history).
   Loaded last, after rh-ds-tokens.css, rh-tokens.css, rh-site-base.css and
   subpage.css. Only the timeline mechanism lives here; the masthead, body
   section, container, eyebrow and heading primitives come from the shared
   sheets. Every rule is scoped under .rh-site; no raw colour values.

   No scroll mechanism: each era is a two-column grid row with its tree
   resting at the bottom of the era, beside the era's events. The tree is
   drawn smaller for each older era, so growth reads as scale down the page.
   (Earlier versions parked the tree with position:sticky, and before that
   drove a filmstrip from a JS scroll handler; both are retired — without a
   viewport-per-era the scroll choreography earned nothing.) */

.rh-site.rh-history{--rh-history-tree-h:min(58vh,470px)}

/* ---- scroll hint above the list ---- */
.rh-site .rh-history-hint{margin:0 0 40px;font-family:var(--rr-text-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rr-clr-text-muted)}

/* ---- era rows ---- */
.rh-site .rh-history-eras{display:flex;flex-direction:column;gap:88px;margin:0;padding:0;list-style:none}
.rh-site .rh-history-era{display:grid;grid-template-columns:minmax(200px,34%) 1fr;gap:52px;align-items:end}

/* tree column: sits at the bottom of its era, art on a common ground line */
.rh-site .rh-history-era__tree{display:flex;align-items:flex-end;justify-content:center}
.rh-site .rh-history-era__tree-frame{display:flex;align-items:flex-end;justify-content:center}
.rh-site .rh-history-era__tree-art{display:block;width:auto;max-width:100%;height:auto;object-fit:contain}
/* stage scale: the tree gets younger — and smaller — as the page goes back in time */
.rh-site .rh-history-era--mature .rh-history-era__tree-art{max-height:var(--rh-history-tree-h)}
.rh-site .rh-history-era--maturing .rh-history-era__tree-art{max-height:calc(var(--rh-history-tree-h) * .86)}
.rh-site .rh-history-era--young .rh-history-era__tree-art{max-height:calc(var(--rh-history-tree-h) * .68)}
.rh-site .rh-history-era--seedling .rh-history-era__tree-art{max-height:calc(var(--rh-history-tree-h) * .52)}

/* events column: hairline spine with clay era dots */
.rh-site .rh-history-era__events{min-width:0;border-left:1px solid var(--rr-clr-border);padding:6px 0 6px 32px}
.rh-site .rh-history-era__label{margin:0 0 30px;font-family:var(--rr-text-font-mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rr-clr-brand-green-text)}
.rh-site .rh-history-list{display:flex;flex-direction:column;gap:44px;margin:0;padding:0;list-style:none}
.rh-site .rh-history-event{position:relative}
.rh-site .rh-history-event::before{content:"";position:absolute;left:-37px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--rr-clr-brand-clay)}
.rh-site .rh-history-event__year{margin:0 0 6px;font-size:28px;line-height:1.1;color:var(--rr-clr-brand-bark)}
.rh-site .rh-history-event__text{margin:0;max-width:50ch;font-size:17px;line-height:1.55;text-wrap:pretty}

/* ---- closing note under the timeline ---- */
.rh-site .rh-history-coda{margin:72px 0 0;padding-top:28px;border-top:1px solid var(--rr-clr-border);font-size:15px;color:var(--rr-clr-text-muted)}

/* ---- mid widths: narrower tree column, tighter gutter ---- */
@media (max-width:959px){
  .rh-site.rh-history{--rh-history-tree-h:min(46vh,360px)}
  .rh-site .rh-history-era{grid-template-columns:minmax(150px,30%) 1fr;gap:32px}
  .rh-site .rh-history-eras{gap:72px}
}

/* ---- narrow viewports: stack, tree above its era ---- */
@media (max-width:719px){
  .rh-site.rh-history{--rh-history-tree-h:260px}
  .rh-site .rh-history-era{grid-template-columns:1fr;gap:20px}
  .rh-site .rh-history-era__tree{justify-content:flex-start}
  .rh-site .rh-history-eras{gap:56px}
  .rh-site .rh-history-era__events{padding-left:26px}
  .rh-site .rh-history-event::before{left:-31px;top:11px}
  .rh-site .rh-history-event__year{font-size:24px}
  .rh-site .rh-history-event__text{font-size:16px}
  .rh-site .rh-history-list{gap:34px}
  .rh-site .rh-history-hint{margin-bottom:28px}
  .rh-site .rh-history-coda{margin-top:48px}
}

/* ---- short landscape viewports: keep the tree from eating the fold ---- */
@media (orientation:landscape) and (max-height:560px){
  .rh-site.rh-history{--rh-history-tree-h:240px}
}
/*****css(end)/WEB-INF/jspf/rh-site/css/rh-site.css.jsp*****/




/************ rh-site.css.jsp  ***********/