/* Orovia — site stylesheet
   One file for every page. Sections are ordered from the general (tokens,
   type, header, footer) to the specific (service pages, insights, forms,
   homepage). */

/* ---------- tokens ---------- */
:root{
  color-scheme: only light;
  --navy:#0C2340;
  --navy-deep:#081A31;
  --navy-ink:#0A1E38;
  --navy-lift:#0E294A;
  /* One gold, the logo's and the namecard's (v2 artwork, measured from the
     lossless original): #A27A3B. It is used as it is for rules, buttons and
     large lettering. Two shades of the same hue exist only because that gold
     cannot be read at small sizes: a darker one for small text on ivory, a
     lighter one for anything on navy. */
  --gold:#A27A3B;          /* the brand gold: rules, hairlines, buttons - 3.6:1 on ivory */
  --gold-large:#A27A3B;    /* large display lettering on ivory: the same gold */
  --gold-ink:#7F602E;      /* small text on ivory - at least 4.9:1 on every ground */
  --gold-deep:#8A6832;     /* fine marks: ticks, plus signs, arrows */
  --gold-soft:#C9A469;     /* gold on navy - 6.8:1 */
  --gold-mid:#B68C4A;      /* halfway into the button's sheen */
  --gold-bright:#C9A469;   /* the sheen's highlight */
  --gold-rgb:162,122,59;   /* --gold, for translucent washes */
  --gold-soft-rgb:201,164,105;
  --gold-wash:rgba(var(--gold-rgb),.14);
  --ivory:#F8F5EE;
  --ivory-lift:#FDFBF6;
  --ivory-deep:#F2ECDF;
  --charcoal:#31363C;
  --slate:#56616F;         /* body-secondary on ivory - 5.9:1 */
  --rule:rgba(12,35,64,.14);
  --rule-soft:rgba(12,35,64,.08);
  --on-navy:#F1EDE4;
  --on-navy-dim:rgba(241,237,228,.74);
  --rule-navy:rgba(241,237,228,.16);
  --error:#A3322A;

  --serif:"Marcellus", "Baskerville Old Face", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell:min(1240px, calc(100vw - 48px));
  --narrow:min(760px, calc(100vw - 48px));
  --band:clamp(72px, 8.5vw, 136px);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* set by site.js: how much of the header is on screen right now */
  --head-offset:0px;
  --head-h:142px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
/* One step up from the browser default, per the client's second review. Every
   rem-based size on the site grows with it. */
/* A jump to a #section stops just below whatever is stuck to the top of the
   window: the header, and on service pages the section bar (--bar-h). */
html{font-size:106.25%;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-offset) + var(--bar-h,0px))}
body{
  margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,video,svg{max-width:100%}
img{display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;text-wrap:balance;margin:0;color:var(--navy)}
p{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:var(--ivory);padding:10px 16px;font-size:.85rem;transition:top .2s}
.skip:focus{top:12px}
.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}

.shell{width:var(--shell);margin-inline:auto}
.narrow{width:var(--narrow);margin-inline:auto}
.band{padding-block:var(--band)}
.band--tint{background:var(--ivory-lift);border-block:1px solid var(--rule-soft)}
.band--deep{background:var(--ivory-deep)}
.band--tight{padding-block:clamp(48px,6vw,88px)}

/* ---------- type ---------- */
.label{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--gold-ink);margin:0;
}
.label--light{color:var(--gold-soft)}
.h-display{font-family:var(--serif);font-size:clamp(2.2rem,3.9vw,3.35rem);line-height:1.12;letter-spacing:-.004em}
.h-section{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.18}
.h-sub{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.45rem);line-height:1.34}
.lede{font-size:clamp(1.05rem,1.3vw,1.18rem);line-height:1.72;max-width:64ch}
.support{font-family:var(--serif);font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.38;color:var(--gold-large);max-width:40ch;text-wrap:balance}
.muted{color:var(--slate)}
.num{font-family:var(--sans);font-weight:500;font-size:.86em;letter-spacing:0}
.measure{max-width:66ch}
.stack > * + *{margin-top:1em}
.stack-lg > * + *{margin-top:1.4em}

/* running text: paragraphs and inline links inside content */
.prose{color:var(--charcoal)}
.prose > * + *{margin-top:1em}
.prose p{max-width:68ch}
.prose a,.inline-link{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .25s var(--ease)}
.prose a:hover,.inline-link:hover{color:var(--gold-ink)}
/* a text link carries its own gold rule; inside running text it must not be
   underlined a second time */
.prose a.tlink{text-decoration:none}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.45em}
.prose ul li::marker{color:var(--gold)}
.prose strong{font-weight:600;color:var(--navy)}

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--sans);font-size:.8rem;font-weight:500;line-height:1.2;
  letter-spacing:.11em;text-transform:uppercase;text-align:center;
  padding:1.05em 1.7em;border:1px solid transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn--gold{
  /* the label is the darkest navy so it reads at 4.8:1 on the brand gold,
     and better wherever the sheen passes */
  color:#061223;background-color:var(--gold);
  background-image:linear-gradient(100deg,var(--gold) 0%,var(--gold-mid) 28%,var(--gold-bright) 47%,var(--gold-mid) 66%,var(--gold) 100%);
  background-size:260% 100%;background-position:12% 50%;
  animation:goldDrift 11s ease-in-out infinite;
}
.btn--gold:hover{animation-duration:4.5s}
@keyframes goldDrift{0%,100%{background-position:12% 50%}50%{background-position:88% 50%}}
.btn--navy{background:var(--navy);color:var(--ivory)}
.btn--navy:hover{background:var(--navy-lift)}
.btn--ghost{color:var(--navy);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--navy);background:var(--navy);color:var(--ivory)}
.btn--ghost-light{color:var(--on-navy);border-color:var(--rule-navy)}
.btn--ghost-light:hover{border-color:var(--gold-soft);color:#fff}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--navy);padding-bottom:.35em;border-bottom:1px solid var(--gold);
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.tlink:hover{gap:.9em;color:var(--gold-ink)}
.tlink--light{color:var(--on-navy)}
.tlink--light:hover{color:var(--gold-soft)}

/* ---------- header ---------- */
/* The header never changes height. Scrolling only slides it out of view and
   back (transform) and adds a hairline (paint), so nothing it does can move
   the page underneath it. That is what stopped the twitching. */
.site-head{
  position:sticky;top:0;z-index:60;
  transition:transform .42s var(--ease),box-shadow .3s var(--ease);
  will-change:transform;
}
.site-head.is-hidden{transform:translateY(-100%)}
.site-head.is-scrolled .masthead{box-shadow:0 1px 0 var(--rule-soft),0 14px 34px -26px rgba(12,35,64,.5)}
@media (prefers-reduced-motion:reduce){.site-head{transition:none}}

.topbar{background:var(--navy);color:var(--on-navy-dim);font-size:.76rem;letter-spacing:.04em}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px}
/* the line is set no larger than the bar's links, so it does not compete
   with the logo beneath it (review, 15 Oct 2026) */
.topbar__slogan{font-family:var(--serif);font-size:.76rem;letter-spacing:.03em;color:var(--on-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar__links{display:flex;align-items:center;gap:22px;white-space:nowrap}
.topbar__links a,.topbar__loc{display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.topbar__links a:hover{color:var(--gold-soft)}
.topbar__links svg{width:14px;height:14px;stroke:var(--gold-soft);fill:none;stroke-width:1.4}

.masthead{background:rgba(248,245,238,.96);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule-soft);transition:box-shadow .3s var(--ease)}
.masthead__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.brand{flex:none;display:block}
/* The v2 lockup sets "Orovia Corporate Services & Advisory" wider than the
   wordmark. At this width its capitals stand about 7px tall, which is the
   smallest they can be read at; the earlier lockup put them under 4px. */
.brand img{width:300px;height:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav__item{position:relative;display:flex;align-items:center}
.nav__link{
  font-size:.88rem;letter-spacing:.02em;color:var(--navy);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3em;padding:12px 10px;
  position:relative;transition:color .25s var(--ease);background:none;border:0;cursor:pointer;
}
.nav__link::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover,.nav__item.is-open > .nav__link{color:var(--gold-ink)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after,.nav__item.is-current > .nav__link::after{transform:scaleX(1)}
.nav__toggle{
  background:none;border:0;cursor:pointer;color:var(--navy);
  width:26px;height:36px;margin-left:-8px;display:grid;place-items:center;border-radius:2px;
}
.nav__toggle svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.nav__item.is-open .nav__toggle svg,.nav__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__link svg{width:10px;height:10px;transition:transform .3s var(--ease)}

.dropdown{
  position:absolute;top:calc(100% + 4px);left:-12px;min-width:280px;
  background:var(--ivory-lift);border:1px solid var(--rule-soft);border-top:2px solid var(--gold);
  padding:12px 8px;box-shadow:0 26px 60px -30px rgba(12,35,64,.45);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.dropdown--wide{min-width:360px}
.nav__item.is-open > .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:flex;gap:12px;align-items:baseline;padding:9px 14px;font-size:.92rem;color:var(--navy);transition:background .2s var(--ease)}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--gold-wash)}
.dropdown a[aria-current="page"]{background:var(--gold-wash)}
.dropdown .idx{font-size:.7rem;letter-spacing:.1em;color:var(--gold-ink);font-variant-numeric:tabular-nums;min-width:1.6em}
.dropdown hr{border:0;border-top:1px solid var(--rule-soft);margin:8px 14px}

.masthead__cta{flex:none}
.masthead__cta .btn{padding:.95em 1.5em;font-size:.74rem}
.burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.burger span{display:block;width:24px;height:1.5px;background:var(--navy);margin:5px 0;transition:transform .3s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer: an overlay under the header, so opening it never pushes the
   page down */
.drawer{
  position:fixed;left:0;right:0;bottom:0;top:var(--drawer-top,142px);z-index:59;
  background:var(--ivory-lift);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer__in{padding:12px 0 40px}
.drawer__row{display:flex;align-items:stretch;border-bottom:1px solid var(--rule-soft)}
.drawer__row > a,.drawer__row > button.drawer__solo{flex:1;padding:16px 0;font-size:1.06rem;color:var(--navy);text-align:left;background:none;border:0;cursor:pointer}
.drawer__exp{background:none;border:0;border-left:1px solid var(--rule-soft);width:56px;display:grid;place-items:center;cursor:pointer;color:var(--navy)}
.drawer__exp svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.drawer__exp[aria-expanded="true"] svg{transform:rotate(180deg)}
.drawer__row > .drawer__solo.drawer__exp{width:auto;border-left:0;display:flex;justify-content:space-between;align-items:center;padding-right:22px}
.drawer__sub{display:none;padding:6px 0 14px 14px;border-bottom:1px solid var(--rule-soft)}
.drawer__sub.is-open{display:block}
.drawer__sub a{display:flex;gap:12px;padding:10px 0;font-size:.98rem;color:var(--navy)}
.drawer__sub .idx{font-size:.7rem;letter-spacing:.1em;color:var(--gold-ink);min-width:1.6em;padding-top:.2em}
.drawer .btn{margin-top:26px;width:100%}
.drawer .btn + .btn{margin-top:10px}
.drawer__contact{margin-top:22px;font-size:.92rem;color:var(--slate);display:grid;gap:6px}
body.menu-open{overflow:hidden}

/* the wider v2 logo leaves the full menu no room below this width */
@media (max-width:1240px){
  .nav,.masthead__cta{display:none}
  .burger{display:block}
}
@media (max-width:900px){
  .masthead__in{height:84px}
  .brand img{width:min(244px,62vw)}
}
/* phones: the bar carries its line alone, in full (it used to end in "..."
   beside the booking link, which moves into the menu) */
@media (max-width:640px){
  .topbar__in{height:auto;min-height:34px;padding-block:8px;justify-content:center}
  .topbar__slogan{font-size:.72rem;line-height:1.35;white-space:normal;text-align:center;text-wrap:balance}
  .topbar__links{display:none}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.78rem;color:var(--slate);letter-spacing:.02em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.crumbs li{display:inline-flex;align-items:center;gap:10px}
.crumbs li + li::before{content:"";width:5px;height:5px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);transform:rotate(45deg);opacity:.9}
.crumbs a{color:var(--navy);transition:color .2s}
.crumbs a:hover{color:var(--gold-ink)}
.crumbs [aria-current]{color:var(--slate)}

/* ---------- page hero ---------- */
.phero{position:relative;overflow:hidden;padding-block:clamp(28px,3.6vw,52px) clamp(56px,7vw,104px)}
.phero .crumbs{margin-bottom:clamp(26px,3.4vw,48px)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,84px);align-items:center}
.phero__copy > * + *{margin-top:22px}
.phero__copy .label + h1{margin-top:18px}
.phero h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1}
/* a long title steps down a size so it sits on two or three lines */
.phero h1.h1--long{font-size:clamp(1.95rem,3.1vw,2.7rem);line-height:1.14}
.phero .support{margin-top:20px}
.phero .btn-row{margin-top:34px}
.phero__media{position:relative;margin:0}
.phero__media::before{
  /* a gold hairline frame, offset from the photograph */
  content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);opacity:.55;z-index:0;pointer-events:none;
}
.phero__media img,.phero__media .ph{position:relative;z-index:1;width:100%;aspect-ratio:4/3.3;object-fit:cover;background:var(--ivory-deep)}
.phero__media figcaption{position:relative;z-index:1}
.phero--plain .phero__grid{grid-template-columns:minmax(0,1fr)}
/* a shorter opening where the page's own content should start high */
.phero--compact{padding-bottom:clamp(24px,3vw,40px)}
.phero--compact .phero__media img,.phero--compact .phero__media .ph{aspect-ratio:16/9}
@media (min-width:901px){.phero--compact .phero__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.phero--plain .phero__copy{max-width:62rem}
.phero__arcs{position:absolute;right:-12vw;top:-18%;width:min(820px,70vw);opacity:.5;pointer-events:none;z-index:0}
.phero__arcs circle{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.phero .shell{position:relative;z-index:1}

/* shown where a photograph has not been chosen yet */
.ph{position:relative;z-index:1;width:100%;aspect-ratio:4/3.3;background:linear-gradient(150deg,var(--navy) 0%,var(--navy-lift) 60%,#15365E 100%);overflow:hidden;display:grid;place-items:center}
.ph svg{width:80%;opacity:.55}
.ph circle{fill:none;stroke:var(--gold-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.icard__img .ph,.acard__img .ph{aspect-ratio:auto;height:100%}
.split__media .ph{aspect-ratio:4/5}
.why__visual .ph{aspect-ratio:5/4}
.article-hero .ph{aspect-ratio:21/9}

/* photograph treatment: a light, consistent grade so stock from different
   sources sits together under the navy-and-gold palette */
.photo{filter:saturate(.84) contrast(1.02)}

@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr}
  .phero__media{margin-right:18px}
  .phero__media img{aspect-ratio:16/11}
}

/* ---------- on this page ---------- */
.onpage{
  position:sticky;top:var(--head-offset);z-index:40;
  background:rgba(253,251,246,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-block:1px solid var(--rule-soft);
  transition:top .42s var(--ease);
}
/* The bar holds the page's sections and nothing else, so on a desktop
   screen they all fit and none is ever cut off. Where they cannot fit, the
   list scrolls and an arrow at each end shows there is more that way. */
html:has(.onpage){--bar-h:56px}
.onpage__in{display:flex;align-items:center;height:56px;position:relative}
.onpage__list{flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;gap:2px;overflow-x:auto;scrollbar-width:none;list-style:none;scroll-behavior:smooth}
.onpage__list::-webkit-scrollbar{display:none}
.onpage__list li{flex:none}
.onpage__list a{display:block;white-space:nowrap;font-size:.82rem;color:var(--slate);padding:8px 9px;border-radius:2px;position:relative;transition:color .2s,background .2s}
.onpage__list a:hover{color:var(--navy);background:var(--gold-wash)}
.onpage__list a.is-active{color:var(--navy);background:var(--gold-wash);font-weight:500}
.onpage__list a.is-active::after{content:"";position:absolute;left:9px;right:9px;bottom:-9px;height:2px;background:var(--gold)}
.onpage__nudge{
  position:absolute;top:0;bottom:0;z-index:2;width:44px;padding:0;border:0;cursor:pointer;color:var(--navy);
  display:grid;place-items:center;background:linear-gradient(90deg,rgb(253,251,246) 55%,rgba(253,251,246,0));
}
.onpage__nudge--prev{left:-6px}
.onpage__nudge--next{right:-6px;background:linear-gradient(270deg,rgb(253,251,246) 55%,rgba(253,251,246,0))}
.onpage__nudge svg{width:12px;height:12px}
.onpage__nudge--prev svg{transform:rotate(90deg)}
.onpage__nudge--next svg{transform:rotate(-90deg)}
.onpage__nudge:hover{color:var(--gold-ink)}
@media (max-width:1180px){.onpage__list{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.onpage{transition:none}.onpage__list{scroll-behavior:auto}}

/* ---------- sections ---------- */
.shead{max-width:60rem}
.shead > * + *{margin-top:18px}
.shead .label + h2{margin-top:14px}
.shead--center{margin-inline:auto;text-align:center}
.shead--center .lede,.shead--center .support{margin-inline:auto}
.sec__body{margin-top:clamp(34px,4vw,54px)}
.sec__body > * + *{margin-top:clamp(28px,3.4vw,44px)}
.sec__body.prose > * + *{margin-top:1.1em}
.sec--split .sec__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.sec--split .sec__grid > .shead{position:sticky;top:calc(var(--head-offset) + 96px);transition:top .42s var(--ease)}
.sec--split .sec__body{margin-top:0}
/* "who we support": heading and opening paragraphs on the left; the list on
   the right, with any closing paragraph after it */
.sec--aud .shead .prose{margin-top:22px;color:var(--slate)}
.sec__outro{max-width:68ch;color:var(--charcoal)}
.sec__outro > * + *{margin-top:1em}
.sec__outro--rule{border-left:1px solid var(--gold);padding-left:22px}
@media (max-width:900px){
  .sec--split .sec__grid{grid-template-columns:1fr}
  .sec--split .sec__grid > .shead{position:static}
}

/* card grid - the workhorse for benefits, audiences and service scope */
/* hairlines drawn by the cards themselves, so a short last row leaves clean
   page background rather than a grey block */
/* Twelve columns, and each card says how many it spans (--span, set by the
   build), so every row is filled from edge to edge whatever the count: five
   cards sit 2 + 3, seven sit 3 + 4, nine sit 3 x 3. */
.cards{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.card{grid-column:span var(--span,4);background:var(--ivory-lift);padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px;position:relative;transition:background .35s var(--ease);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card__head{display:flex;flex-direction:column;gap:12px}
.card__body > * + *{margin-top:.8em}
/* along a row every heading takes the height of the tallest, so the
   paragraphs beneath them all start on the same line */
@supports (grid-template-rows:subgrid){
  .card{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:12px;align-content:start}
  .cards--go .card{grid-row:span 3}
}
.band--tint .card{background:#fff}
.card::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 55%,var(--gold));transition:width .5s var(--ease)}
.card:hover::before{width:100%}
.card h3{font-size:1.2rem;line-height:1.3}
.card p{font-size:.95rem;color:var(--slate);line-height:1.66}
.card__idx{font-size:.72rem;letter-spacing:.14em;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.card__icon{width:28px;height:28px;stroke:var(--gold-deep);fill:none;stroke-width:1.2}
a.card:hover{background:#fff}
.card__go{margin-top:auto;padding-top:14px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:inline-flex;gap:.5em;align-items:center}
a.card:hover .card__go{color:var(--gold-ink)}
@media (max-width:1080px){
  .card{grid-column:span 6}
  .cards > .card:last-child:nth-child(odd){grid-column:span 12}
}
@media (max-width:640px){.card,.cards > .card:last-child:nth-child(odd){grid-column:span 12}}

/* audience list: lighter than cards, a gold tick and two lines */
.aud{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.aud li{list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;padding:22px 0;border-bottom:1px solid var(--rule)}
.aud li::before{content:"";width:9px;height:9px;margin-top:.55em;border:1px solid var(--gold);transform:rotate(45deg)}
.aud h3{font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.4;color:var(--navy)}
.aud p{font-size:.95rem;color:var(--slate);margin-top:4px}

/* checklist: considerations, planning points */
.checks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.checks li{grid-column:span var(--span,6);list-style:none;background:var(--ivory-lift);border:1px solid var(--rule-soft);padding:24px 24px 26px 64px;position:relative}
.band--tint .checks li{background:#fff}
.checks li::before{content:"";position:absolute;left:24px;top:27px;width:22px;height:22px;border-radius:50%;border:1px solid var(--gold)}
.checks li::after{content:"";position:absolute;left:31px;top:33px;width:8px;height:5px;border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(-45deg)}
.checks h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;line-height:1.4;color:var(--navy)}
.checks p{font-size:.94rem;color:var(--slate);margin-top:6px}
@media (max-width:1080px){.checks li{grid-column:span 6}.checks li:last-child:nth-child(odd){grid-column:span 12}}
@media (max-width:760px){.checks li,.checks li:last-child:nth-child(odd){grid-column:span 12}}

/* numbered process */
/* Across the page each step is a column under its number, in rows filled
   edge to edge like the cards. Beside a photograph, or with three steps or
   fewer, they run down a single column with the number at the side. */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(30px,3.4vw,46px) clamp(24px,3vw,44px)}
.steps li{grid-column:span var(--span,6);list-style:none;counter-increment:step;position:relative;padding-top:24px;border-top:1px solid var(--rule)}
.steps li::after{content:"";position:absolute;left:0;top:-1px;width:46px;height:2px;background:var(--gold)}
.steps li::before{
  content:counter(step,decimal-leading-zero);display:block;margin-bottom:12px;
  font-family:var(--sans);font-weight:600;font-size:1.3rem;
  color:var(--gold-large);font-variant-numeric:tabular-nums lining-nums;line-height:1.2;
}
.steps h3{font-family:var(--sans);font-size:1.05rem;font-weight:600;line-height:1.4;color:var(--navy)}
.steps p{font-size:.95rem;color:var(--slate);margin-top:6px}
.steps--single{max-width:52rem}
.steps--single,.split .steps{row-gap:0}
.steps--single li,.split .steps li{grid-column:span 12;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:26px 0}
.steps--single li::before,.split .steps li::before{margin-bottom:0}
.steps--single li::after,.split .steps li::after{display:none}
@media (max-width:1080px){.steps li{grid-column:span 6}.steps li:last-child:nth-child(odd){grid-column:span 12}}
@media (max-width:640px){.steps li,.steps li:last-child:nth-child(odd){grid-column:span 12}}

/* inline label + continuation, e.g. "Recurring support for monthly ..." */
.basis{border-top:1px solid var(--rule);max-width:60rem}
.basis li{list-style:none;padding:18px 0;border-bottom:1px solid var(--rule);color:var(--slate)}
.basis strong{color:var(--navy);font-weight:600}

/* tabs, for parallel groups such as the document lists */
.tabs__list{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--rule)}
.tabs__tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 20px;font-size:.92rem;color:var(--slate);cursor:pointer;transition:color .2s,border-color .2s}
.tabs__tab:hover{color:var(--navy)}
.tabs__tab[aria-selected="true"]{color:var(--navy);border-bottom-color:var(--gold);font-weight:500}
.tabs__panel{padding-top:28px}
.tabs__panel[hidden]{display:none}
.ticklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 36px}
.ticklist li{list-style:none;position:relative;padding-left:30px;color:var(--charcoal)}
.ticklist li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:5px;border-left:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(-45deg)}
@media (max-width:760px){.ticklist{grid-template-columns:1fr}}
/* without JS every group shows, one after another */
.no-js .tabs__list{display:none}
.no-js .tabs__panel[hidden]{display:block}
.tabs__heading{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--navy);margin-bottom:14px}
.js .tabs__panel .tabs__heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* a quiet aside inside a section */
.note{border-left:2px solid var(--gold);background:var(--gold-wash);padding:18px 22px;font-size:.95rem;color:var(--charcoal);max-width:62rem}
.note strong{color:var(--navy)}

/* bullet list that sits under an intro sentence */
.dashlist{display:grid;gap:10px;max-width:60rem}
.dashlist li{list-style:none;position:relative;padding-left:26px}
.dashlist li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1px;background:var(--gold)}

/* text beside a photograph */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.split--media-right{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
/* beside a photograph there is room for one column only */
.split .checks li,.split .card{grid-column:span 12}
.split__media{position:sticky;top:calc(var(--head-offset) + 96px);transition:top .42s var(--ease);margin:0}
.split__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* a wider frame, for a photograph whose subject would not survive the tall crop */
.split__media--wide img{aspect-ratio:4/3}
/* stacked on a phone, a photograph beside text opens its section: after the
   text it fell below the section's closing link (Governance & Sustainability,
   review, 27 Oct 2026) */
@media (max-width:900px){
  .split,.split--media-right{grid-template-columns:1fr}
  .split__media{position:static}
  .split__media img{aspect-ratio:16/10}
  .split--media-right > .split__media{order:-1}
}

/* experience list: title + body rows */
.rows{border-top:1px solid var(--rule)}
.rows li{list-style:none;padding:22px 0;border-bottom:1px solid var(--rule)}
.rows h3{font-family:var(--serif);font-size:1.2rem;line-height:1.35}
.rows p{color:var(--slate);font-size:.96rem;margin-top:6px}

/* article teaser inside a service page */
.acard{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);background:#fff;border:1px solid var(--rule-soft);transition:border-color .3s var(--ease),box-shadow .3s var(--ease);max-width:60rem}
.acard:hover{border-color:var(--gold);box-shadow:0 22px 50px -34px rgba(12,35,64,.5)}
.acard__img{position:relative;overflow:hidden;background:var(--ivory-deep)}
.acard__img img{width:100%;height:100%;object-fit:cover;min-height:200px}
.acard__body{padding:26px 30px;display:flex;flex-direction:column;gap:10px}
.acard__body h3{font-size:1.25rem;line-height:1.3}
.acard__body p{color:var(--slate);font-size:.95rem}
.acard .tlink{align-self:flex-start;margin-top:8px}
@media (max-width:700px){.acard{grid-template-columns:1fr}.acard__img img{aspect-ratio:16/9;min-height:0}}

/* ---------- FAQ ---------- */
/* heading above one centred column: nothing is left empty beside the list */
.faqsec .shell{max-width:920px}
.faqsec > .shell > h2{text-align:center;position:relative;padding-bottom:26px;margin-bottom:clamp(30px,3.6vw,46px)}
.faqsec > .shell > h2::after{content:"";position:absolute;left:50%;bottom:0;width:48px;height:1px;background:var(--gold);transform:translateX(-50%)}
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 48px 22px 0;position:relative;
  font-family:var(--serif);font-size:1.18rem;line-height:1.4;color:var(--navy);
  transition:color .2s var(--ease);
}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--gold-deep);transition:transform .35s var(--ease),opacity .35s var(--ease)}
.faq summary::before{transform:rotate(90deg)}
.faq details[open]:not(.is-closing) summary::before{transform:rotate(0);opacity:0}
.faq details[open]:not(.is-closing) summary{color:var(--navy)}
/* .faq__a is the part site.js slides open and shut, so it has no padding of
   its own; the spacing belongs to .faq__in inside it */
.faq__a{color:var(--slate)}
.faq__in{padding:0 56px 26px 0;max-width:76ch}
.faq__in > * + *{margin-top:.8em}
.faq__a a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
@media (max-width:640px){.faq summary{font-size:1.06rem}.faq__in{padding-right:0}}

/* ---------- related services ---------- */
.related{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.related a{grid-column:span var(--span,4);background:#fff;border:1px solid var(--rule-soft);padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.related a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 22px 44px -32px rgba(12,35,64,.55)}
.related h3{font-size:1.14rem;line-height:1.3}
.related p{font-size:.93rem;color:var(--slate);flex:1}
.related .card__go{padding-top:8px}
@media (max-width:1080px){.related a{grid-column:span 6}.related a:last-child:nth-child(odd){grid-column:span 12}}
@media (max-width:640px){.related a,.related a:last-child:nth-child(odd){grid-column:span 12}}

/* ---------- closing band ---------- */
.close{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.close__lines{position:absolute;inset:-8% -4%;z-index:0;pointer-events:none;opacity:.5}
.close__lines path{fill:none;stroke:var(--gold-soft);vector-effect:non-scaling-stroke}
.close .shell{position:relative;z-index:1}
.close h2{color:#FBF8F2;max-width:26ch}
.close .lede{color:var(--on-navy-dim);margin-top:18px}
.close .btn-row{margin-top:34px}
.close--center{text-align:center}
.close--center h2,.close--center .lede{margin-inline:auto}
.close--center .btn-row{justify-content:center}

/* ---------- link pair (Our Story, MVV) ---------- */
.linkpair{display:flex;justify-content:center;gap:clamp(28px,6vw,88px);flex-wrap:wrap}
.linkcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.linkcards a{border:1px solid var(--rule);background:var(--ivory-lift);padding:32px 32px 30px;display:flex;flex-direction:column;gap:12px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.linkcards a:hover{border-color:var(--gold);background:#fff}
.linkcards h3{font-size:1.4rem}
.linkcards p{color:var(--slate)}
.linkcards .tlink{align-self:flex-start;margin-top:8px}
@media (max-width:760px){.linkcards{grid-template-columns:1fr}.linkpair{flex-direction:column;align-items:center}}

/* ---------- footer ---------- */
.foot{background:var(--navy-deep);color:var(--on-navy-dim);font-size:.9rem}
.foot__top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1.15fr);gap:clamp(28px,4vw,60px);padding-block:clamp(60px,7vw,88px) 52px}
.foot__brand img{width:min(320px,100%);height:auto}
.foot__slogan{margin-top:18px;font-family:var(--serif);font-size:.98rem;color:var(--on-navy);max-width:30ch}
.foot h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 18px;font-weight:500}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot a{transition:color .2s}
.foot a:hover{color:var(--gold-soft)}
/* Connect: two actions, then each contact detail under its own small label */
.foot__details{margin:22px 0 0;padding-top:20px;border-top:1px solid var(--rule-navy);display:grid;gap:14px}
.foot__details dt{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);opacity:.85}
.foot__details dd{margin:3px 0 0;color:var(--on-navy);line-height:1.55}
.foot__details address{font-style:normal}

/* Our partnerships and affiliations: a band of its own between the links and
   the legal line. The heading is centred over one row of marks, every mark
   the same height with its registration or membership number beneath, as on
   the Pikohana footer the client pointed to (review, 15 Oct 2026). A mark
   added later simply joins the row, which wraps when it is full, so nothing
   needs resizing. Marks are shown in white on the navy: supply them as
   transparent PNG or SVG files. */
.affil{--mark-h:46px;border-top:1px solid var(--rule-navy);padding-block:clamp(36px,4vw,50px) clamp(34px,4vw,46px);text-align:center}
.foot .affil h2{
  font-family:var(--serif);font-size:clamp(1.12rem,1.5vw,1.3rem);letter-spacing:.01em;text-transform:none;color:var(--on-navy);
  margin:0;display:flex;align-items:center;justify-content:center;gap:18px;
}
.foot .affil h2::before,.foot .affil h2::after{content:"";flex:0 0 44px;height:1px;background:var(--gold-soft);opacity:.55}
.affil__rows{display:grid;gap:30px;margin-top:clamp(26px,3vw,34px)}
.foot .affil__row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:28px clamp(56px,7vw,104px)}
.mark{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:120px}
.mark__logo{height:var(--mark-h);display:flex;align-items:center;justify-content:center}
.mark img{height:calc(var(--mark-h) * var(--s, 1));width:auto;max-width:200px;object-fit:contain;filter:brightness(0) invert(1)}
.mark__name{font-family:var(--serif);font-size:2rem;line-height:1;letter-spacing:.12em;color:var(--on-navy)}
.mark__cap{font-size:.72rem;letter-spacing:.14em;color:var(--on-navy-dim);font-variant-numeric:tabular-nums lining-nums}

.foot__bar{border-top:1px solid var(--rule-navy);padding-block:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;font-size:.8rem}
.foot__legal{display:flex;gap:10px 24px;flex-wrap:wrap}
.foot__legal a{text-decoration:underline;text-decoration-color:rgba(var(--gold-soft-rgb),.5);text-underline-offset:.25em}
/* keep the last links clear of the WhatsApp button, which sits in this corner */
@media (max-width:1420px){.foot__bar{padding-right:68px}}
/* (c) year company | All rights reserved | UEN, on one line */
.foot__id{display:flex;flex-wrap:wrap;gap:4px 0;margin:0}
.foot__id > span + span::before{content:"|";margin-inline:12px;color:rgba(241,237,228,.34)}
@media (max-width:1080px){
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* approved mobile order: brand, connect, about, services */
  .foot__top{grid-template-columns:1fr}
  .foot__brand{order:1}.foot__connectcol{order:2}.foot__about{order:3}.foot__services{order:4}
  .affil{--mark-h:40px}
  .foot .affil__row{gap:24px 44px}
  .foot .affil h2::before,.foot .affil h2::after{flex-basis:24px}
  .foot__id{flex-direction:column;gap:4px}
  .foot__id > span + span::before{content:none}
}

/* ---------- whatsapp ---------- */
.wa{
  position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:80;
  display:inline-flex;align-items:center;gap:0;
  /* navy with a gold mark, as first designed: the client preferred it to the
     gold button tried in round two. The gold hairline and the pale ring keep
     it readable where it passes over the navy bands and the footer. */
  background:var(--navy);color:var(--gold-soft);border:1px solid var(--gold-soft);
  padding:14px;box-shadow:0 0 0 3px rgba(248,245,238,.16),0 18px 40px -16px rgba(8,26,49,.6);border-radius:2px;
  transform:translateY(var(--wa-lift,0px));
  transition:opacity .35s var(--ease),transform .5s var(--ease),visibility .35s,gap .4s var(--ease),padding .4s var(--ease),background .3s var(--ease);
}
.wa svg{width:24px;height:24px;fill:var(--gold-soft);flex:none}
.wa span{max-width:0;overflow:hidden;white-space:nowrap;font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:max-width .45s var(--ease)}
.wa:hover,.wa:focus-visible{gap:12px;padding-right:20px;background:var(--navy-lift)}
.wa:hover span,.wa:focus-visible span{max-width:220px}
.wa:focus-visible{outline-color:var(--gold-soft)}
/* waits while the homepage figures are on screen (small screens only) */
.wa.is-waiting{opacity:0;visibility:hidden;transform:translateY(10px)}
@media (prefers-reduced-motion:reduce){.wa{transition:opacity .2s,visibility .2s}}
@media (max-width:640px){.wa{padding:12px}.wa svg{width:22px;height:22px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in,.no-js .rv{opacity:1;transform:none}

/* ---------- forms ---------- */
.form{display:grid;gap:34px}
.fgroup{border:0;margin:0;padding:0;display:grid;gap:18px}
.fgroup legend,.fgroup > h3{font-family:var(--serif);font-size:1.3rem;color:var(--navy);padding:0;margin-bottom:4px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:7px;align-content:start}
.field label,.field .flabel{font-size:.84rem;font-weight:500;color:var(--navy)}
.req{color:var(--gold-ink);margin-left:2px}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--charcoal);background:#fff;
  border:1px solid rgba(12,35,64,.22);border-radius:2px;padding:12px 14px;min-height:50px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:170px;resize:vertical;line-height:1.6}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' stroke='%230C2340' fill='none' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:11px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--error)}
.ferr{font-size:.84rem;color:var(--error);display:flex;gap:6px;align-items:flex-start}
.ferr::before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:var(--error);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;margin-top:.15em}
.ferr[hidden]{display:none}
.fhint{font-size:.8rem;color:var(--slate);text-align:right;font-variant-numeric:tabular-nums}
.fhint.is-full{color:var(--error)}
.phone{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:0}
.phone select{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.phone input{border-top-left-radius:0;border-bottom-left-radius:0}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:.92rem;color:var(--charcoal)}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--navy)}
.check a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.form__status{padding:18px 20px;border:1px solid var(--error);background:rgba(163,50,42,.06);color:var(--charcoal);font-size:.95rem}
.form__status[hidden]{display:none}
.form__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form__actions .btn[disabled]{opacity:.6;cursor:progress}
.state{border:1px solid var(--rule);background:#fff;padding:clamp(28px,4vw,44px)}
.state h2,.state h3{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.state p{margin-top:12px;color:var(--slate)}
.state .btn{margin-top:22px}
.state--ok{border-color:var(--gold)}
.state--ok .state__mark{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin-bottom:18px}
.state--ok .state__mark::after{content:"";width:14px;height:8px;border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg) translate(1px,-2px)}
.state--fail{border-color:var(--error)}
.preview-note{font-size:.8rem;color:var(--slate);border:1px dashed var(--rule);padding:10px 14px;margin-top:16px}
@media (max-width:640px){.frow{grid-template-columns:1fr}}

/* ---------- contact page ---------- */
/* the side column is wide enough for the address to sit on three lines */
.contact{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:clamp(28px,4vw,60px);align-items:start}
.contact__aside{position:sticky;top:calc(var(--head-offset) + 24px);display:grid;gap:18px;transition:top .42s var(--ease)}
.route{background:#fff;border:1px solid var(--rule-soft);padding:26px 26px 28px}
.route h2{font-size:1.3rem}
.route p{margin-top:8px;color:var(--slate);font-size:.95rem}
.route .btn{margin-top:18px;width:100%}
.route address{font-style:normal;color:var(--charcoal);line-height:1.65;font-size:.97rem}
.addr__line{display:block}
@media (min-width:1101px){.addr__line{white-space:nowrap}}
.route dl{margin:12px 0 0;display:grid;gap:10px}
.route dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.route dd{margin:2px 0 0}
.route dd a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.cacc summary{display:none}
.cacc summary h2{font:inherit;color:inherit;margin:0}
@media (max-width:1000px){
  .contact{grid-template-columns:1fr}
  .contact__aside{position:static}
  /* tablet and mobile: the four routes become one accordion group */
  .cacc{border-top:1px solid var(--rule)}
  .cacc > details{border-bottom:1px solid var(--rule)}
  .cacc summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:20px 0;font-family:var(--serif);font-size:1.25rem;color:var(--navy)}
  .cacc summary::-webkit-details-marker{display:none}
  .cacc summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);transform:rotate(45deg);transition:transform .3s var(--ease);margin-right:6px}
  .cacc details[open] summary::after{transform:rotate(-135deg)}
  .cacc .route{border:0;padding:0 0 26px;background:none}
  .cacc .desk-only{display:none}
  .cacc .contact__formwrap{padding-bottom:30px}
  .cacc #enquiryWrap > p.muted{margin-top:0 !important}
}

/* ---------- leadership ---------- */
.profile{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"photo text" "quote text";gap:clamp(30px,3vw,40px) clamp(32px,5vw,80px);
  padding-block:clamp(48px,6vw,80px);border-top:1px solid var(--rule);
}
.profile:first-child{border-top:0;padding-top:0}
.profile__photo{grid-area:photo;margin:0;position:relative}
.profile__text{grid-area:text}
/* the founder's own words under his photograph (review, 15 Oct 2026): a
   quiet personal note, secondary to the biography (review, 27 Oct 2026), so
   it is set smaller than the biography, in italic, between quotation marks,
   and unsigned, as his name and title sit right beside it */
.profile__quote{grid-area:quote;margin:0;max-width:34rem}
.profile__quote blockquote{margin:0}
.profile__quote p{font-style:italic;font-size:.98rem;line-height:1.55;color:var(--navy);text-wrap:pretty}
.profile__quote p::before{content:"\201C"}
.profile__quote p::after{content:"\201D"}
.profile__photo img,.profile__photo .portrait-ph{width:100%;aspect-ratio:4/5;object-fit:cover}
.portrait-ph{display:grid;place-items:center;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-lift) 100%);color:var(--gold-soft);position:relative;overflow:hidden}
.portrait-ph span{font-family:var(--serif);font-size:4.2rem;letter-spacing:.04em}
.portrait-ph small{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-dim)}
.profile h2{font-size:clamp(1.9rem,3vw,2.5rem)}
.profile__role{margin-top:10px;font-size:1.02rem;color:var(--navy);font-weight:500}
.profile__creds{margin-top:4px;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.profile__bio{margin-top:26px}
.profile__bio > * + *{margin-top:1em}
.profile__quals{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);font-size:.94rem;color:var(--slate)}
.profile__link{margin-top:22px}
/* on a phone the note stays under the photograph, as on a computer */
@media (max-width:820px){
  .profile{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"photo" "quote" "text"}
  .profile__photo{max-width:340px}
  .profile__quote{max-width:340px}
}

/* ---------- mission, vision & values ---------- */
.mv{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(32px,5vw,72px)}
.mv__rule{background:var(--rule)}
.mv h2{font-size:clamp(1.8rem,2.8vw,2.4rem);margin-bottom:18px}
.mv p{color:var(--slate)}
.values{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.value{display:grid;grid-template-columns:120px 1px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(22px,3vw,34px);border-bottom:1px solid var(--rule)}
.value__letter{
  font-family:var(--serif);font-size:clamp(4.2rem,7vw,6rem);line-height:1;text-align:center;
  background:linear-gradient(170deg,var(--gold-mid) 8%,var(--gold) 55%,var(--gold-ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.value__rule{align-self:stretch;background:var(--rule)}
.value h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.value p{margin-top:8px;color:var(--slate);max-width:68ch}
@media (max-width:760px){
  .mv{grid-template-columns:1fr}.mv__rule{height:1px}
  .value{grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start}
  .value__rule{display:none}
  .value__letter{font-size:3.6rem}
}

/* ---------- why orovia ---------- */
.gold{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gold__item{background:var(--ivory-lift);padding:34px 28px 38px;position:relative;overflow:hidden}
.gold__letter{
  display:block;font-family:var(--serif);font-size:clamp(4rem,6vw,5.4rem);line-height:.9;margin-bottom:22px;
  background:linear-gradient(170deg,var(--gold-mid) 8%,var(--gold) 55%,var(--gold-ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.gold__item h3{font-size:1.28rem;line-height:1.3}
.gold__item p{margin-top:12px;font-size:.95rem;color:var(--slate)}
.svclinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,56px);border-top:1px solid var(--rule)}
.svclinks a{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:1.15rem;color:var(--navy);transition:color .2s,padding .3s var(--ease)}
.svclinks a:hover{color:var(--gold-ink);padding-left:8px}
.svclinks .idx{font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;color:var(--gold-ink);margin-right:14px}
.svclinks .arw{color:var(--gold-deep)}
@media (max-width:1080px){.gold{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gold{grid-template-columns:1fr}.svclinks{grid-template-columns:1fr}}

/* ---------- governance & sustainability ---------- */
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:clamp(28px,3.4vw,40px)}
.principle{background:#fff;border:1px solid var(--rule-soft);border-top:2px solid var(--gold);padding:28px 28px 30px}
.principle h3{font-size:1.25rem}
.principle p{margin-top:10px;color:var(--slate);font-size:.96rem}
@media (max-width:760px){.principles{grid-template-columns:1fr}}

/* ---------- our story ---------- */
.name{display:flex;justify-content:center;align-items:stretch;gap:clamp(28px,6vw,80px);text-align:center}
.name__part{display:flex;flex-direction:column;align-items:center}
.name__word{font-family:var(--serif);font-size:clamp(3.6rem,10vw,7.4rem);line-height:1;color:var(--navy);letter-spacing:.04em}
.name__mean{margin-top:14px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.name__rule{width:1px;background:var(--gold)}
.pull{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.34;color:var(--navy);max-width:28ch;margin-inline:auto;text-align:center;position:relative;padding-top:38px}
.pull::before{content:"";position:absolute;top:0;left:50%;width:48px;height:1px;background:var(--gold);transform:translateX(-50%)}

/* ---------- insights ---------- */
.icards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.icard{display:flex;flex-direction:column;gap:12px;position:relative}
/* along a row, the same part of every card sits on the same line: photograph,
   topic and format, title, summary, then the byline or link */
@supports (grid-template-rows:subgrid){
  .icards > .icard{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:12px;align-content:start}
  .icards{row-gap:clamp(36px,4vw,56px)}
}
.icard__img{overflow:hidden;background:var(--ivory-deep);aspect-ratio:3/2}
.icard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.icard:hover .icard__img img{transform:scale(1.03)}
/* topic on one line, format on the next: the same place on every card,
   however long the topic's name is */
.icard__meta{display:flex;flex-direction:column;gap:3px;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink);margin-top:6px}
.icard__meta .fmt{color:var(--slate)}
.icard h3{font-size:1.22rem;line-height:1.34}
.icard h3 a::after{content:"";position:absolute;inset:0}
.icard p{font-size:.94rem;color:var(--slate)}
.icard__by{font-size:.8rem;color:var(--slate);display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:6px}
.icard:hover h3{color:var(--gold-ink)}
.icard .tlink{align-self:flex-start;margin-top:6px}
/* Featured: the lead article across the top, the two that support it side
   by side beneath. Each sets its photograph beside its text. */
.featured{display:grid;gap:clamp(28px,3.4vw,48px)}
.featured__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px);padding-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--rule)}
.icard--lead,.icard--side,.icard--row{display:grid;align-items:center;gap:clamp(20px,3vw,48px)}
.icard__text{display:flex;flex-direction:column;gap:10px;min-width:0}
.icard__text .icard__meta{margin-top:0}
.icard--lead{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.icard--lead .icard__img{aspect-ratio:16/10}
.icard--lead h3{font-size:clamp(1.55rem,2.5vw,2.15rem);line-height:1.2}
.icard--lead p{font-size:1rem}
.icard--lead .icard__text{gap:14px}
.icard--side{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:22px;align-items:start}
.icard--side .icard__img{aspect-ratio:4/3}
.icard--side h3{font-size:1.14rem}
/* a listing with fewer than three articles: full-width rows, not a part-empty grid */
.irows{display:grid;gap:clamp(24px,3vw,40px)}
.icard--row{grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr)}
.icard--row .icard__img{aspect-ratio:16/10}
.icard--row h3{font-size:clamp(1.3rem,2vw,1.6rem)}
.icard--row + .icard--row{padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
@media (max-width:1000px){.icards{grid-template-columns:repeat(2,minmax(0,1fr))}.featured__pair{grid-template-columns:1fr}}
@media (max-width:760px){.icard--lead,.icard--row{grid-template-columns:1fr;gap:16px}}
@media (max-width:640px){.icards{grid-template-columns:1fr}.icard--side{grid-template-columns:1fr;gap:14px}.icard--side .icard__img{aspect-ratio:3/2}}

/* article page */
.article-head{padding-block:clamp(24px,3vw,40px) 0}
.article-hero{margin-top:clamp(24px,3vw,40px);margin-bottom:0}
.article-hero img{width:100%;aspect-ratio:21/9;object-fit:cover}
.article{width:min(760px,calc(100vw - 48px));margin-inline:auto}
.article__meta{display:flex;gap:6px 0;flex-wrap:wrap;align-items:center;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin-top:clamp(32px,4vw,48px)}
/* topic in gold, format in grey, a hairline between them */
.article__meta .fmt{color:var(--slate)}
.article__meta .fmt::before{content:"";display:inline-block;width:1px;height:1em;background:var(--slate);opacity:.55;margin-inline:14px;vertical-align:-.14em}
.article h1{margin-top:16px;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.14}
.byline{display:flex;align-items:center;gap:16px;margin-top:26px;padding-block:18px;border-block:1px solid var(--rule)}
.byline__photo{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--navy);color:var(--gold-soft);font-family:var(--serif);font-size:1.15rem;overflow:hidden}
.byline__photo img{width:100%;height:100%;object-fit:cover}
.byline__who{display:grid;gap:1px;font-size:.92rem}
.byline__who a{color:var(--navy);font-weight:600}
.byline__who a:hover{color:var(--gold-ink)}
.byline__role{color:var(--slate);font-size:.86rem}
.byline__when{margin-left:auto;text-align:right;font-size:.84rem;color:var(--slate);display:grid;gap:1px}
.inbrief{margin-top:32px;background:var(--ivory-lift);border:1px solid var(--rule-soft);border-left:3px solid var(--gold);padding:24px 28px}
.inbrief h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;margin-bottom:10px}
.inbrief p{font-size:1.08rem;line-height:1.7;color:var(--navy)}
.abody{margin-top:34px;font-size:1.06rem}
.abody > * + *{margin-top:1.05em}
/* headings in the article run to the margin before they turn, like the
   text around them; the balanced wrapping used for display headings broke a
   two-line heading in the middle */
.abody h2{font-size:clamp(1.45rem,2.3vw,1.8rem);line-height:1.28;margin-top:1.9em;text-wrap:pretty}
.abody h3{font-size:1.25rem;margin-top:1.6em;text-wrap:pretty}
.abody .faq{margin-top:1.4em}
.abody .faq summary{font-size:1.12rem}
.abody .faq__in{padding-right:40px}
.abody .faq p{font-size:1rem}
.abody ul,.abody ol{padding-left:1.3em}
.abody li + li{margin-top:.55em}
.abody ul li::marker{color:var(--gold-deep)}
.abody strong{color:var(--navy);font-weight:600}
.abody a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:#fff;-webkit-overflow-scrolling:touch}
.tablewrap:focus-visible{outline-offset:2px}
.abody table,.legal table{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem;line-height:1.55}
.abody th,.abody td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--rule-soft)}
.abody th{background:var(--navy);color:var(--on-navy);font-weight:500;font-size:.8rem;letter-spacing:.04em}
.abody tr:last-child td{border-bottom:0}
.abody td:first-child{font-weight:600;color:var(--navy)}
.sources{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule)}
.sources h2{font-size:1.3rem}
/* one line each: publisher, a dash, then the title as the link */
.sources ol{margin-top:14px;padding-left:1.3em;display:grid;gap:8px;font-size:.94rem}
.sources__org{font-weight:600;color:var(--navy)}
.sources a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em;overflow-wrap:anywhere}
.disclaimer{margin-top:40px;padding:22px 24px;background:var(--ivory-deep);font-size:.86rem;line-height:1.65;color:var(--slate)}
.disclaimer h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-weight:600;margin-bottom:8px}
.share{margin-top:32px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share__label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-right:6px}
.share a,.share button{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--rule);background:#fff;color:var(--navy);cursor:pointer;transition:border-color .2s,background .2s;border-radius:2px}
.share a:hover,.share button:hover{border-color:var(--gold);background:var(--gold-wash)}
.share svg{width:18px;height:18px;fill:currentColor}
.share__done{font-size:.84rem;color:var(--gold-ink)}
.related-note{margin-top:28px;font-size:.95rem;color:var(--slate)}
@media (max-width:640px){.byline{flex-wrap:wrap}.byline__when{margin-left:0;text-align:left;width:100%}.article-hero img{aspect-ratio:16/10}}

/* ---------- legal ---------- */
.legal{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.legal__toc{position:sticky;top:calc(var(--head-offset) + 28px);font-size:.86rem;transition:top .42s var(--ease)}
.legal__toc h2{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-weight:500;margin-bottom:12px}
.legal__toc ol{list-style:none;display:grid;gap:2px;border-left:1px solid var(--rule)}
.legal__toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;color:var(--slate);transition:color .2s,border-color .2s}
.legal__toc a:hover,.legal__toc a.is-active{color:var(--navy);border-left-color:var(--gold)}
.legal__body{max-width:74ch}
.legal__body > * + *{margin-top:1em}
.legal__body h2{font-size:1.45rem;margin-top:2em;scroll-margin-top:calc(var(--head-offset) + 24px)}
.legal__body h2:first-child{margin-top:0}
.legal__body h3{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--navy);margin-top:1.4em}
.legal__body ul{padding-left:1.3em;display:grid;gap:.5em}
.legal__body ul li::marker{color:var(--gold-deep)}
.legal__body a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em;overflow-wrap:anywhere}
.legal__body address{font-style:normal;line-height:1.7}
.legal__updated{font-size:.9rem;color:var(--slate)}
@media (max-width:900px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}

/* ---------- preview ribbon (removed at launch) ---------- */
.sample-tag{display:inline-block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;padding:1px 6px;margin-left:6px;vertical-align:middle;opacity:.8}

/* ---------- 404 ---------- */
.lost{min-height:60vh;display:grid;align-content:center}
.lost h1{font-size:clamp(2.2rem,4vw,3.2rem)}
.lost .btn-row{margin-top:32px}
.lost__links{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 28px}

/* =================================================================
   HOMEPAGE
   ================================================================= */
.hero{
  position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden;isolation:isolate;
  /* --chrome is the header, measured at runtime, so hero + header = one screen */
  min-height:calc(100vh - var(--chrome,142px));
  min-height:calc(100svh - var(--chrome,142px));
  display:flex;flex-direction:column;
}
.hero::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 80% at 78% 18%,rgba(var(--gold-rgb),.16),transparent 62%),linear-gradient(180deg,rgba(8,26,49,0) 55%,rgba(8,26,49,.55) 100%)}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--navy) center/cover no-repeat}
.hero__media video{width:100%;height:100%;object-fit:cover;display:block;opacity:0;filter:saturate(.62) contrast(1.06);transform:scale(1.06);transition:opacity .8s linear}
.hero__media video.is-live{opacity:1}
.hero__media video.is-live.is-seam{opacity:0}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(96deg,rgba(12,35,64,.93) 0%,rgba(12,35,64,.82) 36%,rgba(12,35,64,.4) 66%,rgba(12,35,64,.46) 100%),linear-gradient(180deg,rgba(8,26,49,.46) 0%,rgba(8,26,49,.1) 40%,rgba(8,26,49,.82) 100%)}
.hero__art{position:absolute;top:50%;right:-11vw;z-index:2;transform:translateY(-50%);width:min(760px,64vw);opacity:.52;pointer-events:none}
.hero__in{position:relative;z-index:4;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,6vw,86px) clamp(26px,3vw,46px)}
.hero__factswrap{position:relative;z-index:4;flex:0 0 auto}
.hero__copy{max-width:min(760px,70%)}
.hero h1{color:#FBF8F2;font-size:clamp(2.3rem,4.4vw,3.8rem);line-height:1.08}
.hero__tri{display:flex;flex-wrap:wrap;gap:.9em;align-items:center;margin:26px 0 0;font-family:var(--serif);font-size:clamp(1.02rem,1.6vw,1.3rem);color:var(--gold-soft)}
.hero__tri span{display:inline-flex;align-items:center;gap:.9em}
.hero__tri i{display:block;width:5px;height:5px;background:var(--gold-soft);transform:rotate(45deg);opacity:.85}
.hero__body{margin-top:24px;color:var(--on-navy-dim);max-width:58ch;font-size:1.05rem}
.hero .btn-row{margin-top:36px}
.arc{stroke:var(--gold-soft);fill:none;stroke-width:1.15;opacity:.5}
.arc--dash{stroke-dasharray:1500;stroke-dashoffset:1500;animation:draw 2.6s var(--ease) .25s forwards}
.crescent{fill:rgba(var(--gold-soft-rgb),.17)}
.hero__art .dot{fill:var(--gold-soft);opacity:.7}
@keyframes draw{to{stroke-dashoffset:0}}

.facts{position:relative;z-index:4;border-top:1px solid var(--rule-navy);display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:24px 28px 28px;display:flex;flex-direction:column}
.fact + .fact{border-left:1px solid var(--rule-navy)}
/* numbers in the sans: the display face's zero is a circle, so 0 reads as O */
.fact__k{font-family:var(--sans);font-weight:600;font-size:1.95rem;letter-spacing:-.01em;color:var(--gold-soft);line-height:1;font-variant-numeric:tabular-nums lining-nums;height:1em;display:flex;align-items:center}
.fact__v{margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--on-navy-dim)}
.fact__globe{width:auto;height:1.6em;margin-block:-.3em;overflow:visible}
.globe line,.globe path,.globe circle,.globe ellipse{vector-effect:non-scaling-stroke}

/* origin: Oro + via converge into the mark */
.stage{position:relative;height:230vh}
.stage__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--ivory)}
.stage__bg{position:absolute;inset:-6%;z-index:0;opacity:0;background-image:var(--deck-bg);background-size:cover;background-position:center;will-change:transform,opacity}
.stage__bg::after{content:"";position:absolute;inset:0;background:var(--ivory);mix-blend-mode:multiply;opacity:.35}
.stage__waves{position:absolute;inset:-10%;z-index:1;pointer-events:none;opacity:0;will-change:transform,opacity}
.stage__waves path{fill:none;stroke:var(--gold);vector-effect:non-scaling-stroke}
.stage__inner{position:relative;z-index:2;display:grid;place-items:center;transform-origin:50% 50%;will-change:transform}
.merge{display:flex;align-items:baseline;justify-content:center;white-space:nowrap}
.mword{font-family:var(--serif);font-size:clamp(3.4rem,17vw,9rem);line-height:1;color:var(--gold-large);position:relative;display:inline-block;will-change:transform,opacity}
.mword em{position:absolute;left:50%;top:calc(100% + 22px);transform:translateX(-50%);font-style:normal;font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.meaning{position:absolute;left:50%;top:calc(100% + 66px);transform:translateX(-50%);margin:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);white-space:nowrap;opacity:0;will-change:opacity}
.mark-stage{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;will-change:transform}
/* "Oro" and "via" resolve into the wordmark, which is 73% of the v2 lockup's
   width and sits above the image's middle, so the image is that much wider
   and is set down by a tenth of its height to bring the wordmark to centre. */
.mark__img{position:absolute;width:clamp(14.1rem,71vw,37.5rem);max-width:none;height:auto;opacity:0;will-change:opacity;transform:translateY(10.1%)}
.stage__reveal{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding-inline:6vw;pointer-events:none;opacity:0;will-change:transform,opacity}
.stage__reveal > div{max-width:62ch;text-align:center}
.stage__reveal h2{margin-top:16px}
.stage__reveal .lede{margin:20px auto 0}
.stage__reveal .tlink{margin-top:28px;pointer-events:auto}
.stage__cue{position:absolute;z-index:3;left:50%;bottom:42px;transform:translateX(-50%);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:10px;will-change:opacity}
.stage__cue::after{content:"";width:1px;height:26px;background:linear-gradient(var(--gold),transparent)}
.origin.is-static .stage{height:auto}
.origin.is-static .stage__pin{position:static;height:auto;padding-block:clamp(70px,10vw,120px)}
.origin.is-static .stage__bg,.origin.is-static .stage__waves,.origin.is-static .merge,.origin.is-static .stage__cue{display:none}
.origin.is-static .stage__inner{transform:none}
.origin.is-static .mark-stage{position:static;transform:none}
.origin.is-static .mark__img{position:static;opacity:1;margin-inline:auto;transform:none}
.origin.is-static .meaning{position:static;transform:none;opacity:1;margin-top:24px;text-align:center}
.origin.is-static .stage__reveal{position:static;opacity:1;transform:none;margin-top:44px;pointer-events:auto}
@media (max-width:900px){
  .stage{height:190vh}
  .meaning{font-size:.62rem;letter-spacing:.16em;top:calc(100% + 42px)}
  .mword em{font-size:.62rem;letter-spacing:.16em;top:calc(100% + 14px)}
  .stage__bg{background-position:74% center}
}

/* home: services */
.svc-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,60px)}
.svc-head .lede{font-size:1.02rem}
@media (max-width:900px){.svc-head{grid-template-columns:1fr}}

/* home: why orovia */
.why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.why__visual{position:relative;margin:0}
.why__visual img{width:100%;aspect-ratio:5/4;object-fit:cover}
.why__visual::after{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1px solid var(--gold);opacity:.55;z-index:-1}
.why__copy > * + *{margin-top:20px}
.why__copy .tlink{margin-top:30px}
@media (max-width:900px){.why{grid-template-columns:1fr}.why__visual{margin-left:18px}}

/* home: governance & sustainability */
/* The two cards stand as tall as the copy beside them: heading at the top,
   text at the foot, a pair of gold rings in the corner between. They used to
   stop halfway down and leave the space beneath them empty. The pair share
   their rows, so both paragraphs start on the same line however long each
   one is (review, 15 Oct 2026). */
.gs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:stretch}
.gs__cards{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:18px}
.gs__card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--rule-soft);border-top:2px solid var(--gold);
  padding:34px 30px 34px;min-height:clamp(260px,24vw,340px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;
}
.gs__card::before,.gs__card::after{content:"";position:absolute;border:1px solid var(--gold);border-radius:50%;pointer-events:none}
.gs__card::before{width:190px;height:190px;right:-84px;top:36%;opacity:.42}
.gs__card::after{width:270px;height:270px;right:-124px;top:calc(36% - 40px);opacity:.22}
.gs__card h3{font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.24;position:relative;z-index:1;max-width:12ch}
.gs__card p{color:var(--slate);font-size:1rem;line-height:1.62;position:relative;z-index:1}
@supports (grid-template-rows:subgrid){
  .gs__card{display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .gs__card p{grid-row:3}
}
@media (max-width:900px){.gs{grid-template-columns:1fr}.gs__card{min-height:230px}}
@media (max-width:640px){
  .gs__cards{grid-template-columns:1fr;grid-template-rows:none}
  .gs__card{grid-row:auto;display:flex;min-height:0;gap:22px}
}

/* home: contact routes */
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule-navy);margin-top:clamp(40px,5vw,56px);border:1px solid var(--rule-navy)}
.routes a{background:var(--navy);padding:32px 28px 34px;display:flex;flex-direction:column;gap:12px;transition:background .4s var(--ease)}
.routes a:hover{background:var(--navy-lift)}
.routes h3{font-size:1.25rem;color:#FBF8F2}
.routes p{font-size:.92rem;color:var(--on-navy-dim);line-height:1.62;flex:1}
.routes svg{width:24px;height:24px;stroke:var(--gold-soft);fill:none;stroke-width:1.2}
@media (max-width:900px){.routes{grid-template-columns:1fr}}

/* deck washes: the proposal backdrop, reused as corner treatments */
.has-deck{position:relative;overflow:hidden}
.has-deck > .shell{position:relative;z-index:1}
.deckwash{display:none}
@supports (mask-image:radial-gradient(#000,transparent)) or (-webkit-mask-image:radial-gradient(#000,transparent)){
  .deckwash{display:block;position:absolute;z-index:0;pointer-events:none;background-image:var(--deck-bg);background-size:cover;background-repeat:no-repeat;
    -webkit-mask-image:radial-gradient(105% 105% at var(--mx) var(--my),#000 14%,rgba(0,0,0,.5) 44%,transparent 70%);
    mask-image:radial-gradient(105% 105% at var(--mx) var(--my),#000 14%,rgba(0,0,0,.5) 44%,transparent 70%)}
}
.deckwash--bl{--mx:0%;--my:100%;left:-6%;bottom:-18%;width:54%;height:106%;background-position:0% 100%;opacity:.55}
.deckwash--tr{--mx:100%;--my:0%;top:-14%;right:-8%;width:44%;height:104%;background-position:100% 30%;opacity:.4}
@media (max-width:900px){.deckwash{opacity:.28 !important}.deckwash--tr{display:none}}

/* tall desktop screens get the generous hero; most get this tighter one */
@media (min-width:900px) and (max-height:1000px){
  .hero__in{padding-block:clamp(20px,3vh,44px) clamp(14px,2vh,26px)}
  .hero h1{font-size:clamp(2rem,3.4vw,3rem)}
  .hero__tri{margin-top:16px;font-size:1.02rem}
  .hero__body{margin-top:14px;font-size:.98rem}
  .hero .btn-row{margin-top:24px}
  .fact{padding:16px 22px 20px}
  .fact__k{font-size:1.4rem}
  .fact__v{font-size:.8rem;margin-top:6px}
}
@media (min-width:900px) and (max-height:760px){
  .hero h1{font-size:clamp(1.8rem,2.8vw,2.4rem)}
  .hero__body{font-size:.9rem;line-height:1.6}
  .hero__tri{font-size:.94rem;margin-top:12px}
}
@media (max-width:1080px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(3),.fact:nth-child(4){border-top:1px solid var(--rule-navy)}
  .fact:nth-child(3){border-left:0}
}
@media (max-width:900px){
  .hero__veil{background:linear-gradient(180deg,rgba(8,26,49,.22) 0%,rgba(12,35,64,.5) 24%,rgba(12,35,64,.88) 46%,rgba(8,26,49,.95) 62%,rgba(8,26,49,.96) 100%)}
  .hero__media video{object-position:58% center}
  .hero__art{right:-32vw;opacity:.55;width:min(620px,90vw)}
  .hero__copy{max-width:100%}
  /* phones: the hero is one fold, figures included */
  .hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
  .hero__tri{margin-top:14px;font-size:.98rem;gap:.55em}
  .hero__body{margin-top:12px;font-size:.94rem;line-height:1.62}
  .hero .btn-row{margin-top:20px;gap:9px}
  .hero .btn-row .btn{padding:.85em 1.1em;font-size:.7rem;letter-spacing:.08em}
  .hero__in{padding-block:clamp(22px,4vh,40px) clamp(16px,2vh,26px)}
  .fact{padding:14px 16px 16px}
  .fact__k{font-size:1.5rem}
  .fact__v{font-size:.74rem;margin-top:4px;line-height:1.42}
}
@media (max-width:900px) and (max-height:830px){
  .hero h1{font-size:clamp(1.65rem,7vw,2.2rem)}
  .hero__tri{font-size:.9rem;margin-top:10px;gap:.45em}
  .hero__body{font-size:.88rem;line-height:1.58;margin-top:10px}
  .hero .btn-row{margin-top:16px}
  .hero__in{padding-block:14px 10px}
  .fact{padding:11px 14px 13px}
  .fact__k{font-size:1.32rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .arc--dash{stroke-dashoffset:0}
  .hero__media video{display:none}
  .btn--gold{animation:none;background-position:34% 50%}
  .deckwash{transform:none !important}
}
@media (max-width:640px){
  body{font-size:1.0625rem}
  html{font-size:100%}
}
@media print{
  .site-head,.wa,.onpage,.drawer,.close,.share{display:none !important}
  body{background:#fff}
}