/* CR. Amanya theme — shared core (rules used on 3+ templates). Property-level merged: later component versions win per-property. */
@layer core, components, utilities;
@layer core {
/* ============ TOKENS — CRAA v2 (Linklaters grammar, CRAA blue) ============ */ :root{--blue:#0F477E;/* CRAA primary — confirmed */
  --blue-bright:#1B65A8;/* hover/derivative */
  --navy:#08243F;/* dark sections derivative */
  --navy-deep:#071B30;/* footer */
  --ink:#101418;/* body text on light */
  --grey:#5A646E;/* secondary text */
  --mist:#f1f1f1;/* alt section ground */
  --line:#E4E7EA;--line-dark:rgba(255,255,255,0.22);--white:#FFFFFF;--gold:#D9A441;/* micro accent:stars only */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;/* body, UI, forms */
  --font-display:'Meta Serif Pro','Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;/* headings, titles, emphasis — see fonts.css */--fs-statement:clamp(1.4rem,calc(1.05rem + 1.55vw),2.25rem);--fs-hero:clamp(2rem,4.6vw,3.7rem);--fs-card:clamp(1.15rem,1.8vw,1.55rem);--fs-body:1rem;--fs-small:0.85rem;--fs-micro:0.72rem;--container:100rem;--pad:clamp(1.2rem,4vw,3.5rem);--sect:clamp(4rem,9vw,7.5rem)}
/* ============ BASE ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
::selection{background:var(--blue);color:#fff}
/* kicker — the "||" mark */ .kicker{display:flex;align-items:center;gap:0.55rem;font-size:var(--fs-small);font-weight:500;letter-spacing:0.01em}
.kicker::before{content:"";width:3px;height:1.05em;background:currentColor;box-shadow:6px 0 0 0 currentColor;margin-right:6px;flex:none}
.kicker--blue{color:var(--blue)}
.kicker--light{color:#fff}
.kicker .kicker-sub{color:var(--grey);font-weight:400}
/* statement */ .statement{font-size:var(--fs-statement);font-weight:300;line-height:1.28;letter-spacing:-0.015em;max-width:22em}
.statement strong{font-weight:500;color:var(--blue)}
.statement--light{color:#fff}
/* section head row: kicker/statement left, "find out more + pager" right */ .section{padding-block:var(--sect)}
.section--mist{background:var(--mist)}
.section-head{display:grid;gap:1.6rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.more-link{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:0.5rem;white-space:nowrap}
.more-link .arr{transition:transform .25s ease}
.more-link:hover .arr{transform:translateX(4px)}
.more-link--light{color:#fff}
.pager{display:inline-flex;align-items:center;gap:0.9rem;font-size:var(--fs-micro);letter-spacing:0.1em;color:var(--grey)}
.pager button{background:none;border:0;cursor:pointer;font-size:1rem;color:inherit;padding:0.2rem}
.pager button:hover{color:var(--ink)}
/* reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
/* ============ CHROME: topbar + header (transparent over hero) ============ */ .chrome{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s ease}
/* No overflow:hidden while the bar is open — it clipped the language dropdown
   to the height of the bar, so the menu rendered but could never be seen. The
   clipping moved to the collapsed state, which is the only state that needs
   it (see .chrome.is-scrolled .topbar below). */
.topbar{font-size:0.84rem;letter-spacing:0.02em;color:rgba(255,255,255,0.85);border-bottom:1px solid var(--line-dark);transition:max-height .3s ease,opacity .3s ease,padding .3s;max-height:60px}
.topbar-inner{display:flex;justify-content:space-between;gap:1rem;padding-block:0.55rem;flex-wrap:wrap}
.topbar a:hover{color:#fff}
/* Language switcher — in the top bar, beside the contact details.
   The bar clips its contents only while collapsed, so this dropdown can open
   out of it; see .topbar above. Opens on hover and on keyboard focus, with no
   JavaScript. */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-current{display:inline-flex;align-items:center;gap:0.4rem;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;line-height:1.2}
.lang-current:hover,.lang-switch.is-open .lang-current,html:not(.lang-js) .lang-switch:focus-within .lang-current{color:#fff}
/* Drawn rather than typed: U+25BE rendered at a different weight and
   baseline on every platform. It flips when the list is open. */
.lang-caret{flex:none;opacity:0.8;transition:transform .2s}
/* The chevron tracks the list, not the pointer. */
.lang-switch.is-open .lang-caret,html:not(.lang-js) .lang-switch:focus-within .lang-caret{opacity:1;transform:rotate(180deg)}
.lang-current:hover .lang-caret{opacity:1}
.lang-flag{display:block;flex:none;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,0.35)}
.lang-name{white-space:nowrap}
.lang-list{position:absolute;top:calc(100% + 0.65rem);right:0;z-index:130;min-width:11rem;margin:0;padding:0.3rem 0;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:0 20px 48px rgba(8,36,63,0.26);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
/* Opened by the script. The hover and focus-within pair below is the
   no-JavaScript path only: a touch screen latches :hover, so leaving it
   active alongside the toggle meant a tap could open the list but never
   close it again. */
.lang-switch.is-open .lang-list{opacity:1;visibility:visible;transform:none}
html:not(.lang-js) .lang-switch:hover .lang-list,
html:not(.lang-js) .lang-switch:focus-within .lang-list{opacity:1;visibility:visible;transform:none}
.lang-list a{display:flex;align-items:center;gap:0.55rem;padding:0.5rem 1rem;font-size:var(--fs-small);color:var(--ink) !important;line-height:1.3}
.lang-list a .lang-flag{box-shadow:0 0 0 1px rgba(0,0,0,0.14)}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--mist);color:var(--blue) !important}
.lang-list a[aria-current]{font-weight:600;color:var(--blue) !important}
.topbar-right{display:flex;gap:1.4rem;flex-wrap:wrap}
.nav-foot{display:none}
.site-header{transition:background .3s ease,box-shadow .3s ease}
.lang-switch+*{flex:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.05rem}
.brand{display:flex;align-items:center;color:#fff}
.brand-img{height:44px;width:auto;display:block}
.brand-img--dark{display:none}
.brand-name{font-size:1.22rem;font-weight:600;letter-spacing:0.06em}
.brand-sub{font-size:0.58rem;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;opacity:0.85}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,0.92);position:relative;padding-block:0.3rem}
.nav a:not(.btn):after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;transition:width .25s ease}
.nav a:not(.btn):hover:after{width:100%}
.btn-appoint{border:1px solid rgba(255,255,255,0.75);padding:0.65rem 1.15rem !important;font-size:0.8rem !important;font-weight:600 !important;letter-spacing:0.12em;text-transform:uppercase;color:#fff;transition:all .25s ease}
.btn-appoint:hover{background:#fff;color:var(--blue)}
.nav-toggle{display:none;background:none;border:0;color:#fff;cursor:pointer;font-size:1.5rem}
/* scrolled / solid state */ .chrome.is-scrolled,.chrome.is-solid{background:#fff;box-shadow:0 1px 0 var(--line),0 8px 28px rgba(8,20,35,0.06)}
.chrome.is-scrolled .topbar,.chrome.is-solid .topbar{max-height:0;opacity:0;padding:0;border:0;overflow:hidden}
.chrome.is-scrolled .brand,.chrome.is-solid .brand{color:var(--blue)}
.chrome.is-scrolled .brand-img--light,.chrome.is-solid .brand-img--light{display:none}
.chrome.is-scrolled .brand-img--dark,.chrome.is-solid .brand-img--dark{display:block}
.chrome.is-scrolled .nav a,.chrome.is-solid .nav a{color:var(--ink)}
.chrome.is-scrolled .btn-appoint,.chrome.is-solid .btn-appoint{border-color:var(--blue);color:var(--blue)}
.chrome.is-scrolled .btn-appoint:hover,.chrome.is-solid .btn-appoint:hover{background:var(--blue);color:#fff}
.chrome.is-scrolled .nav-toggle,.chrome.is-solid .nav-toggle{color:var(--ink)}
/* ---- dropdown nav ---- */ .nav-list{display:flex;align-items:center;gap:1.7rem;list-style:none;margin:0;padding:0}
.nav-list>li{position:relative}
.nav .caret{display:inline-block;width:7px;height:7px;margin-left:0.5rem;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:0.85;vertical-align:middle}
/* A top-level item that only opens a submenu is a button, not a link (see
   CRAA_Nav_Walker). Styled to match .nav a exactly so the row reads as one. */
.nav .nav-disclosure{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;font-family:inherit;line-height:inherit;cursor:pointer;font-size:var(--fs-small);font-weight:500;color:rgba(255,255,255,0.92);position:relative;padding:0.3rem 0}
.nav .nav-disclosure:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:currentColor;transition:width .25s ease}
.nav .nav-disclosure:hover:after{width:100%}
.chrome.is-scrolled .nav .nav-disclosure,.chrome.is-solid .nav .nav-disclosure{color:var(--ink)}
.sub{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:220px;background:#fff;box-shadow:0 14px 40px rgba(8,20,35,0.14);padding:0.5rem 0;list-style:none;opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub li a{display:block;padding:0.6rem 1.2rem;font-size:var(--fs-small);color:var(--ink) !important;white-space:nowrap}
.sub li a:hover{color:var(--blue) !important;background:var(--mist)}
.sub li a:after{display:none !important}
/* ============ HERO — editorial slider ============ */ .hero{position:relative;height:min(92vh,860px);min-height:560px;color:#fff;overflow:hidden;background:var(--navy)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hero-slide.is-active{opacity:1;pointer-events:auto}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center}
/* placeholder art per slide until real photography drops in */ .hero-img--cranes{background:radial-gradient(60% 80% at 70% 30%,rgba(133,148,110,0.5),transparent 60%),
  linear-gradient(160deg,#20301f 0%,#101d18 45%,#08131c 100%)}
.hero-img--kampala{background:radial-gradient(70% 60% at 30% 20%,rgba(27,101,168,0.45),transparent 65%),
  linear-gradient(200deg,#123a5e 0%,#0a2540 50%,#061524 100%)}
.hero-img--abstract{background:repeating-linear-gradient(115deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 90px),
  linear-gradient(140deg,#28425e 0%,#14293f 55%,#0a1826 100%)}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,32,0.55) 0%,rgba(6,18,32,0.15) 40%,rgba(6,18,32,0.72) 100%)}
.ph-chip{position:absolute;right:1.2rem;top:calc(1.2rem + 120px);z-index:2;font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);border:1px solid rgba(255,255,255,0.25);padding:0.3rem 0.55rem}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(3.5rem,8vh,6rem)}
.hero-rule{width:34px;height:2px;background:#fff;margin-bottom:1.4rem}
.hero-kicker{font-size:var(--fs-small);font-weight:500;letter-spacing:0.05em;opacity:0.85;margin-bottom:0.9rem}
.hero-title{font-size:3.15rem;font-weight:300;line-height:1.16;letter-spacing:-0.015em;max-width:15.5em;margin-bottom:1.6rem}
.hero-more{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;display:inline-flex;gap:0.55rem;align-items:center}
.hero-more .arr{transition:transform .25s}
.hero-more:hover .arr{transform:translateX(4px)}
.hero-controls{position:absolute;right:var(--pad);bottom:clamp(3.5rem,8vh,6rem);z-index:3;display:flex;align-items:center;gap:1.1rem}
.hero-controls button{background:none;border:0;color:rgba(255,255,255,0.85);cursor:pointer;font-size:1.05rem;padding:0.3rem;transition:color .2s}
.hero-controls button:hover{color:#fff}
.hero-count{font-size:var(--fs-micro);letter-spacing:0.14em;color:rgba(255,255,255,0.7)}
/* ============ PAGE HERO (inner pages) ============ */ .page-hero{position:relative;background:radial-gradient(70% 90% at 78% 10%,rgba(27,101,168,0.35),transparent 60%),
  linear-gradient(200deg,#123a5e 0%,var(--navy) 55%,#061524 100%);color:#fff;padding-top:clamp(9rem,18vh,12rem);padding-bottom:clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-40px;top:0;bottom:0;width:200px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 3px,transparent 3px 22px)}
.crumb{display:flex;gap:0.6rem;align-items:center;font-size:var(--fs-small);color:rgba(255,255,255,0.75);margin-bottom:1.1rem}
.crumb .sep{opacity:0.5}
.page-hero-title{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:300;letter-spacing:-0.015em;line-height:1.12;max-width:16em}
.page-hero-lede{margin-top:1.2rem;font-size:clamp(1rem,1.4vw,1.2rem);color:rgba(255,255,255,0.82);max-width:44em;font-weight:300}
.page-hero--tall{min-height:min(68vh - 30px,670px);display:flex;align-items:flex-end;padding-top:9rem;padding-bottom:clamp(3rem,5vw,4.5rem)}
.page-hero--tall .ph-img{position:absolute;inset:0;background:radial-gradient(65% 75% at 70% 25%,rgba(27,101,168,0.4),transparent 60%),
  linear-gradient(195deg,#1a4266 0%,#0a2540 55%,#061524 100%)}
.page-hero--tall .ph-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,18,32,0.5) 0%,rgba(6,18,32,0.1) 45%,rgba(6,18,32,0.72) 100%)}
.page-hero--tall-inner{position:relative;z-index:1;width:100%}
.page-hero--tall .ph-chip{top:auto;bottom:1.2rem}
/* ============ WHO WE ARE page components ============ */ .intro-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.fact-rail{border-left:1px solid var(--line);padding-left:clamp(1.4rem,2.4vw,2.4rem);display:flex;flex-direction:column;gap:1.6rem;margin-top:0.5rem}
.fact-label{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey);margin-bottom:0.4rem}
.fact-value{font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:300;letter-spacing:-0.01em;color:var(--ink)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;align-self:flex-start;width:auto;min-width:17rem;margin-top:0.4rem;background:var(--blue);border:1px solid var(--blue);color:#fff;padding:0.9rem 1.3rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;transition:all .25s ease}
.btn-outline:hover{background:var(--blue-bright);border-color:var(--blue-bright)}
.btn-outline .arr{transition:transform .25s}
.btn-outline:hover .arr{transform:translateX(3px)}
.intro-quote{margin:2.5rem 0 0;padding-top:1.4rem;position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.intro-quote::before{content:"";position:absolute;left:0;top:0;width:34px;height:2px;background:var(--blue)}
.intro-quote .gq-mark{font-size:3.45rem;line-height:0.75;color:#0f477e;font-weight:600;margin-top:0.35rem}
.intro-quote blockquote{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:300;line-height:1.55;letter-spacing:-0.01em;color:var(--blue);margin:0;max-width:28em}
.gq-mark{font-size:clamp(4rem,7vw,6.5rem);line-height:0.72;color:var(--blue);font-weight:300;opacity:0.9}
.grand-quote blockquote{font-size:clamp(1.25rem,2.1vw,1.75rem);font-weight:300;line-height:1.48;letter-spacing:-0.012em;color:var(--blue);max-width:32em;margin:0}
.prose-cols{margin-top:clamp(2.4rem,4.5vw,3.8rem);padding-top:clamp(2.4rem,4.5vw,3.8rem);border-top:1px solid var(--line);columns:2;column-gap:clamp(2.6rem,5vw,4.8rem)}
.prose-cols p{break-inside:avoid;margin-bottom:1.25rem;line-height:1.7}
.prose-cols p:last-child{margin-bottom:0}
.prose-cols .lead{color:var(--ink)}
.prose-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(2rem,5vw,4.5rem);margin-top:clamp(2rem,4vw,3rem)}
.pull-quote{border-left:3px solid var(--blue);padding-left:1.4rem;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:300;line-height:1.45;color:var(--blue);align-self:start}
.prose-copy p{margin-bottom:1.2rem;color:var(--ink)}
.prose-copy p:last-child{margin-bottom:0}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;margin-top:clamp(2rem,4vw,3rem)}
.principle{background:#fff;padding:clamp(1.6rem,3vw,2.4rem);display:flex;flex-direction:column;gap:0.9rem}
.principle-num{font-size:0.92rem;font-weight:700;letter-spacing:0.08em;color:var(--blue)}
.principle p{font-size:1.02rem;line-height:1.55}
.section-copy{max-width:62ch;margin-top:1.6rem;color:var(--ink)}
.pillars-copy{max-width:58ch;margin-top:1.3rem;font-size:var(--fs-small);color:rgba(255,255,255,0.85);position:relative;z-index:1}
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0.3rem;margin-top:clamp(2rem,4vw,3rem)}
.stat{background:var(--mist);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2vw,1.8rem)}
.stat-num{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:300;line-height:1;letter-spacing:-0.02em;color:var(--blue)}
.stat-label{display:block;margin-top:0.7rem;font-size:var(--fs-small);color:var(--grey)}
.platform-row{display:flex;flex-wrap:wrap;gap:0.8rem 2.6rem;align-items:center;justify-content:space-between;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.platform-row span{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:#9AA4AE}
.accolade{display:flex;gap:1rem;align-items:center;margin-top:2rem;padding:1.2rem 1.5rem;border:1px solid var(--line)}
.accolade-badge{font-size:var(--fs-micro);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);border:1.5px solid var(--blue);padding:0.5rem 0.8rem;white-space:nowrap}
.accolade p{font-size:var(--fs-small);color:var(--grey)}
.pillars-block{background:var(--blue);color:#fff;padding:var(--sect) 0;position:relative;overflow:hidden}
.pillars-block .container{position:relative;z-index:1}
.pillars-block::after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:140px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0.22) 0 3px,transparent 3px 18px);z-index:0}
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;margin-top:clamp(2rem,4vw,3rem);position:relative;z-index:1}
.pillar{background:#1D5286;border:1px solid rgba(255,255,255,0.14);padding:clamp(1.6rem,3vw,2.2rem)}
.pillar h3{font-size:1.1rem;font-weight:500;margin-bottom:0.6rem}
.pillar p{font-size:var(--fs-small);color:rgba(255,255,255,0.8)}
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;margin-top:clamp(2rem,4vw,3rem)}
.leader{display:grid;grid-template-columns:180px 1fr;background:var(--mist)}
.leader-photo{aspect-ratio:3/4;background:linear-gradient(170deg,#2c4a6b,#0d2740 75%);display:flex;align-items:center;justify-content:center}
.leader-photo span{font-size:2rem;font-weight:300;color:rgba(255,255,255,0.5)}
.leader-body{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:0.5rem}
.leader-name{font-size:1.18rem;font-weight:500}
.leader-role{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}
.leader-cred{font-size:var(--fs-small);color:var(--grey);flex:1}
.leader-more{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink)}
.leader-more:hover{color:var(--blue)}
.dl-band{background:var(--navy);color:#fff;padding:clamp(2.4rem,5vw,3.6rem) 0}
.dl-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.dl-title{font-size:clamp(1.2rem,2vw,1.6rem);font-weight:300}
.btn-ghost{border:1px solid rgba(255,255,255,0.7);color:#fff;padding:0.8rem 1.5rem;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;transition:all .25s}
.btn-ghost:hover{background:#fff;color:var(--navy)}
/* ============ THE TEAM page components ============ */ .partners-stack{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.partner-feature{display:flex;flex-direction:column;background:var(--mist)}
.pf-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(170deg,#2c4a6b,#0d2740 78%);display:flex;align-items:center;justify-content:center}
.pf-photo .initials{font-size:3rem;font-weight:300;color:rgba(255,255,255,0.5)}
.pf-body{padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column;gap:0.85rem}
.pf-name{font-size:1.48rem;font-weight:700;letter-spacing:-0.01em}
.pf-role{font-size:var(--fs-micro);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--blue)}
.pf-bio{font-size:0.95rem;line-height:1.68;color:#3d4145;max-width:64ch}
.pf-cred{font-size:0.88rem;color:var(--grey);max-width:64ch}
.pf-links{display:flex;gap:1.6rem;align-items:center;margin-top:auto;padding-top:0.6rem}
.pf-links a{font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink)}
.pf-links a:hover{color:var(--blue)}
.pf-links .pf-mail{color:var(--blue);text-transform:none;letter-spacing:0.02em;font-weight:500;font-size:0.92rem}
.tm-group{margin-top:clamp(2rem,4vw,3rem)}
.tm-group + .tm-group{margin-top:clamp(2.6rem,5vw,4rem)}
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.75rem;margin-top:1.1rem}
.tm-card{display:block;background:#fff}
.tm-photo{display:block;position:relative;aspect-ratio:3/3.65;overflow:hidden}
.tm-art{position:absolute;inset:0;background:linear-gradient(165deg,#33506e,#102a44 80%);display:flex;align-items:center;justify-content:center;transition:transform .6s ease}
.tm-card:hover .tm-art{transform:scale(1.045)}
.tm-art .initials{font-size:2.1rem;font-weight:300;color:rgba(255,255,255,0.45)}
.tm-body{display:block;padding:1.1rem 1.2rem 1.3rem}
.tm-name{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-0.005em}
.tm-role{display:block;font-size:var(--fs-micro);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-top:0.3rem}
.tm-mail{display:block;font-size:0.88rem;color:var(--grey);margin-top:0.45rem;overflow-wrap:anywhere}
.tm-card:hover .tm-name{color:var(--blue)}
.careers-band{background:var(--blue);color:#fff;padding:var(--sect) 0;position:relative;overflow:hidden}
.careers-band::after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:140px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0.22) 0 3px,transparent 3px 18px);z-index:0}
.careers-band .container{position:relative;z-index:1}
.careers-copy{max-width:56ch;margin-top:1.3rem;font-size:var(--fs-small);color:rgba(255,255,255,0.85)}
.careers-band .btn-ghost{display:inline-flex;margin-top:1.8rem}
/* ============ TEAM — OPTION B (editorial directory) ============ */ .pf2-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;margin-top:clamp(2rem,4vw,3rem)}
.pf2{background:var(--mist);display:flex;flex-direction:column}
.pf2-photo{position:relative;aspect-ratio:16/11;overflow:hidden;background:linear-gradient(170deg,#2c4a6b,#0d2740 78%);display:flex;align-items:center;justify-content:center}
.pf2-photo .initials{font-size:3rem;font-weight:300;color:rgba(255,255,255,0.5)}
.pf2-body{padding:clamp(1.4rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:0.7rem;flex:1}
.pf2 .pf-bio{font-size:0.88rem}
.dir{margin-top:1.1rem;border-top:1px solid var(--line)}
.dir-row{display:grid;grid-template-columns:64px 1.3fr 1fr 1.2fr auto;gap:1.4rem;align-items:center;padding:0.85rem 0.4rem;border-bottom:1px solid var(--line);transition:background .25s ease}
.dir-row:hover{background:#fff}
.dir-thumb{width:64px;height:64px;background:linear-gradient(165deg,#33506e,#102a44 80%);display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:500;color:rgba(255,255,255,0.5)}
.dir-name{font-size:1.02rem;font-weight:500;letter-spacing:-0.005em}
.dir-row:hover .dir-name{color:var(--blue)}
.dir-role{font-size:var(--fs-micro);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue)}
.dir-mail{font-size:0.82rem;color:var(--grey);overflow-wrap:anywhere}
.dir-arrow{color:var(--grey);transition:transform .25s ease,color .25s}
.dir-row:hover .dir-arrow{transform:translateX(4px);color:var(--blue)}
/* compact cards — operations & support */ .tm-grid--compact{grid-template-columns:repeat(4,1fr)}
.tm-card--compact{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.15rem}
.tm-thumb{width:64px;height:64px;flex:none;background:linear-gradient(165deg,#33506e,#102a44 80%);display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:500;color:rgba(255,255,255,0.5)}
.tm-card--compact .tm-body{padding:0;min-width:0}
.tm-card--compact .tm-mail{margin-top:0.3rem}
/* ============ FEATURE BAND — panel + image window on shared backdrop (Linklaters pattern) ============ */ .feature-band{position:relative;padding:clamp(3.5rem,8vw,6.5rem) 0;overflow:hidden;background-image:var(--band-img);background-size:cover;background-position:center}
.feature-band::after{content:"";position:absolute;inset:0;background:rgba(6,18,32,0.66)}
.fb-inner{position:relative;z-index:1}
.fb-grid{display:grid;grid-template-columns:1.05fr 1fr;min-height:480px}
.fb-panel{background:var(--blue);color:#fff;padding:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.fb-copy{font-size:0.98rem;color:rgba(255,255,255,0.85);max-width:48ch;margin-top:1.2rem}
.fb-panel .btn-ghost{display:inline-flex;align-self:flex-start}
.fb-window{position:relative;background-image:var(--band-img);background-size:cover;background-position:center}
.fb-stripes{position:absolute;top:0;bottom:0;left:0;height:100%;width:auto;pointer-events:none}
.fb-stripes rect{fill:var(--blue)}
/* placeholder photograph until real asset drops in */ /* placeholder photo (hotlinked) with gradient fallback if offline */ .feature-band,.fb-window{--band-img:url("https://picsum.photos/id/1018/1920/1200"),linear-gradient(160deg,#2f4d6d 0%,#16324e 45%,#0a1f36 100%)}
/* ============ PRACTICE AREAS listing ============ */ .pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:clamp(2rem,4vw,3rem)}
.pa-card{display:block;background:#fff}
.pa-thumb{display:block;position:relative;aspect-ratio:4/2.95;overflow:hidden;background:var(--navy)}
.pa-thumb>span{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease}
.pa-card:hover .pa-thumb>span{transform:scale(1.045)}
.pa-body{display:block;padding:1.4rem 0.5rem 1.6rem}
.pa-num{display:block;font-size:0.85rem;font-weight:700;letter-spacing:0.08em;color:var(--blue)}
.pa-title{display:block;font-size:1.45rem;font-weight:600;letter-spacing:-0.01em;margin-top:0.4rem;line-height:1.38}
.pa-card:hover .pa-title{color:var(--blue)}
.pa-desc{display:block;font-size:0.95rem;line-height:1.6;color:#3d4145;margin-top:0.55rem;max-width:56ch}
.pa-more{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.9rem;font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink)}
.pa-card:hover .pa-more{color:var(--blue)}
.pa-more .arr{transition:transform .25s ease}
.pa-card:hover .pa-more .arr{transform:translateX(4px)}
/* ============ IMAGE CARDS (3-up, text on image) ============ */ .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.3rem}
.img-card{position:relative;min-height:380px;display:flex;align-items:flex-end;padding:1.6rem;color:#fff;overflow:hidden}
.img-card .bg{position:absolute;inset:0;transition:transform .6s ease}
.img-card:hover .bg{transform:scale(1.045)}
.bg--a{background:linear-gradient(170deg,#3d5670,#122c47 70%)}
.bg--b{background:linear-gradient(150deg,#2c4a6b,#0d2740 75%)}
.bg--c{background:linear-gradient(195deg,#38536e,#0e2033 70%)}
.img-card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7, 20, 35, 0.31) 30%,rgba(7, 20, 35, 0.93) 100%)}
.img-card-txt{position:relative;z-index:1}
.img-card-title{font-size:var(--fs-card);font-weight:400;line-height:1.3;letter-spacing:-0.01em;margin-bottom:0.4rem}
.img-card-sub{font-size:var(--fs-small);opacity:0.8;max-width:34ch}
/* ============ EXPERTISE — rotating showcase (Linklaters mechanic) ============ */ .kicker-strong{font-weight:600;color:var(--ink)}
.xp-toprow{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:clamp(2.2rem,4vw,3.4rem);margin-bottom:clamp(2rem,4vw,3rem)}
.xp-stmts{flex:1 1 34rem}
.xp-actions{display:flex;align-items:center;gap:2.2rem;padding-bottom:0.35rem;white-space:nowrap}
.xp-controls{display:inline-flex;align-items:center;gap:1.3rem;white-space:nowrap;padding-bottom:0.2rem}
.xp-counter{font-size:var(--fs-micro);letter-spacing:0.12em;color:var(--grey)}
.xp-controls button{background:none;border:0;cursor:pointer;font-size:1.15rem;color:var(--grey);padding:0.15rem;transition:color .2s}
.xp-controls button:hover{color:var(--ink)}
.xp-stmt{display:none}
.xp-stmt.is-active{display:block;animation:xpFade .55s ease}
#xp-grids .xp-grid{display:none}
#xp-grids .xp-grid.is-active{display:grid;animation:xpFade .55s ease}
@keyframes xpFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;margin-bottom:2.6rem}
.media-card{display:block}
.media-card .thumb{display:block;aspect-ratio:4/2.95;position:relative;overflow:hidden;background:var(--navy)}
.media-card .thumb>div{position:absolute;inset:0;transition:transform .6s ease}
.media-card:hover .thumb>div{transform:scale(1.045)}
.media-card-title{display:block;font-size:var(--fs-card);font-weight:400;letter-spacing:-0.01em;line-height:1.25;margin-top:1.7rem;padding-right:1.5rem}
.media-card-meta{display:flex;gap:0.6rem;align-items:center;font-size:0.78rem;color:var(--grey);margin-top:0.7rem}
.media-card-meta .m-ic{width:15px;height:15px;flex:none;color:var(--blue)}
.media-card-meta .m-sep{color:var(--line);font-size:0.9rem}
/* thumb art (placeholders) */ .th-a{background:linear-gradient(135deg,#1b3a5c,#0f2038 60%),repeating-linear-gradient(45deg,rgba(255,255,255,0.05) 0 2px,transparent 2px 26px)}
.th-b{background:radial-gradient(70% 90% at 75% 25%,rgba(27,101,168,0.55),transparent 60%),linear-gradient(160deg,#24435f,#0b1c30 70%)}
.th-c{background:repeating-linear-gradient(100deg,rgba(255,255,255,0.06) 0 1px,transparent 1px 40px),linear-gradient(180deg,#14304e,#081625)}
.th-d{background:radial-gradient(60% 80% at 25% 70%,rgba(94,140,180,0.4),transparent 60%),linear-gradient(210deg,#1d3b58,#0a1a2b 70%)}
.chips-label{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--grey);margin-bottom:1rem}
.chips{display:flex;flex-wrap:wrap;gap:0.65rem;margin-top:45px}
.chip{font-size:var(--fs-small);background:#fff;border:0;padding:0.6rem 1.05rem;color:var(--ink);transition:all .2s ease;box-shadow:0 0 0 1px rgba(16,20,24,0.04)}
.chip:hover{color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
/* ============ COLOR BLOCK — Prae Legal ============ */ .block{display:grid;grid-template-columns:1.05fr 1fr;min-height:580px}
.block-panel{background:var(--blue);color:#fff;padding:clamp(2.2rem,5vw,4.2rem);display:flex;flex-direction:column;justify-content:center;gap:1.4rem;position:relative;overflow:hidden}
.block-panel::after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:120px;background:repeating-linear-gradient(90deg,rgba(255,255,255,0.28) 0 3px,transparent 3px 18px)}
.block-statement{font-size:var(--fs-statement);font-weight:300;line-height:1.25;letter-spacing:-0.015em;position:relative;z-index:1}
.block-copy{font-size:var(--fs-small);opacity:0.85;max-width:46ch;position:relative;z-index:1}
.block-img{background:radial-gradient(80% 70% at 30% 30%,rgba(27,101,168,0.5),transparent 60%),linear-gradient(200deg,#16334f,#081a2c 70%);position:relative}
/* The placeholder chip that used to live here was a CSS `content` string, so it
   rendered to the public and could not be gated. It is now an editor-only chip
   emitted from front-page.php via craa_ph_chip(). */
.block-img{background-size:cover;background-position:center}
.ph-chip--block{position:absolute;inset:auto 1.2rem 1.2rem auto;font-size:0.6rem;letter-spacing:0.18em;color:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.2);padding:0.3rem 0.55rem;text-transform:uppercase}
/* ============ RECOGNITION ============ */
/* .recog / .rate-num / .rate-src went with the home-page band on 2026-09-18;
   .stars and .quote stay - contact, consultation and the initiatives pages
   still use them. */
.stars{color:var(--gold);letter-spacing:0.18em;font-size:0.95rem;margin-top:0.5rem}
.quote{border-left:2px solid var(--blue);padding-left:1.2rem;font-size:0.95rem;color:var(--ink)}
.quote footer{margin-top:0.7rem;font-size:var(--fs-micro);letter-spacing:0.1em;text-transform:uppercase;color:var(--grey)}
.logo-strip{display:flex;flex-wrap:wrap;gap:0.6rem 2.4rem;justify-content:space-between;align-items:center;margin-top:clamp(2.5rem,5vw,4rem);padding-top:2rem;border-top:1px solid var(--line)}
.logo-strip span{font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#9AA4AE}
/* ============ BLINDS — Linklaters-style hover reveal ============ */ .blinds{position:absolute;top:0;left:0;height:100%;width:auto;z-index:2;pointer-events:none;--blinds-fill:#f1f1f1}
.blinds rect{fill:var(--blinds-fill);transform:scaleY(0);transform-origin:top;transform-box:fill-box;transition:transform .3s cubic-bezier(.4,0,.2,1)}
/* hide: right-most first (base state delays) */ .blinds rect:nth-child(1){transition-delay:.315s}
.blinds rect:nth-child(2){transition-delay:.27s}
.blinds rect:nth-child(3){transition-delay:.225s}
.blinds rect:nth-child(4){transition-delay:.18s}
.blinds rect:nth-child(5){transition-delay:.135s}
.blinds rect:nth-child(6){transition-delay:.09s}
.blinds rect:nth-child(7){transition-delay:.045s}
.blinds rect:nth-child(8){transition-delay:0s}
/* reveal: left-most first (hover delays) */ .media-card:hover .blinds rect, .block:hover .block-img .blinds rect, .tm-card:hover .blinds rect{transform:scaleY(1)}
.media-card:hover .blinds rect:nth-child(1),.block:hover .block-img .blinds rect:nth-child(1),.tm-card:hover .blinds rect:nth-child(1){transition-delay:0s}
.media-card:hover .blinds rect:nth-child(2),.block:hover .block-img .blinds rect:nth-child(2),.tm-card:hover .blinds rect:nth-child(2){transition-delay:.045s}
.media-card:hover .blinds rect:nth-child(3),.block:hover .block-img .blinds rect:nth-child(3),.tm-card:hover .blinds rect:nth-child(3){transition-delay:.09s}
.media-card:hover .blinds rect:nth-child(4),.block:hover .block-img .blinds rect:nth-child(4),.tm-card:hover .blinds rect:nth-child(4){transition-delay:.135s}
.media-card:hover .blinds rect:nth-child(5),.block:hover .block-img .blinds rect:nth-child(5),.tm-card:hover .blinds rect:nth-child(5){transition-delay:.18s}
.media-card:hover .blinds rect:nth-child(6),.block:hover .block-img .blinds rect:nth-child(6),.tm-card:hover .blinds rect:nth-child(6){transition-delay:.225s}
.media-card:hover .blinds rect:nth-child(7),.block:hover .block-img .blinds rect:nth-child(7),.tm-card:hover .blinds rect:nth-child(7){transition-delay:.27s}
.media-card:hover .blinds rect:nth-child(8),.block:hover .block-img .blinds rect:nth-child(8),.tm-card:hover .blinds rect:nth-child(8){transition-delay:.315s}
/* on white-ground sections the "background" slicing in is white */ .section:not(.section--mist) .blinds{--blinds-fill:#ffffff}
/* ============ FOOTER — statement + columns ============ */ .footer{background:var(--navy-deep);color:#fff;padding-top:var(--sect);padding-top:85px}
.footer-brand{display:flex;align-items:center;gap:0.9rem;flex:0 0 auto;margin-right:clamp(0.8rem,1.5vw,1.6rem)}
.footer-logo-tile{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--gold);color:var(--gold);font-weight:600;font-size:1.05rem;letter-spacing:0.04em}
.footer-brand-text{display:flex;flex-direction:column;line-height:1.1}
.footer-brand-name{font-size:1.15rem;font-weight:600;letter-spacing:0.06em;color:#fff}
.footer-brand-sub{font-size:0.56rem;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:rgba(255,255,255,0.65)}
.footer-logo{height:50px;width:auto;display:block}
/* Two columns: the firm's line on the left, what clients say on the right. */
.footer-topline{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.footer-say{display:flex;flex-direction:column;gap:clamp(1.2rem,2.6vw,2rem)}
.footer-say .footer-brand{margin-right:0}
.footer-statement{font-size:var(--fs-statement);font-weight:300;line-height:1.25;letter-spacing:-0.015em;max-width:15em}
/* Back to top sits in the colophon now, so it no longer pushes itself right. */
.to-top{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.7)}
/* ---- footer reviews: one at a time, rotating vertically ----
   The slides are stacked in a single grid cell, so the stage is as tall as
   the longest quote and never resizes mid-rotation. Motion is a transform
   on each slide rather than a scrolled track, which means no measurement
   and nothing to recompute on resize. */
.footer-recog{border-left:2px solid var(--gold);padding-left:clamp(1.1rem,2vw,1.8rem)}
.fr-head{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;margin-bottom:1.15rem}
.fr-score{font-size:1.85rem;font-weight:600;line-height:1;color:#fff;letter-spacing:-0.01em}
.fr-meta{display:flex;flex-direction:column;gap:0.25rem}
.fr-stars{color:var(--gold);letter-spacing:0.16em;font-size:0.78rem;line-height:1}
.fr-src{font-size:var(--fs-micro);letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.55);line-height:1}
.fr-link{margin-left:auto;font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.75);white-space:nowrap}
.fr-link:hover{color:#fff}
.fr-link .arr{margin-left:0.4rem}
.fr-stage{display:grid;align-items:start;overflow:hidden}
.fr-slide{grid-area:1/1;margin:0;opacity:0;transform:translateY(45%);transition:opacity .45s ease,transform .6s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.fr-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.fr-slide.is-leaving{opacity:0;transform:translateY(-45%)}
.fr-slide p{margin:0;font-size:clamp(0.95rem,1.05vw,1.08rem);line-height:1.55;color:rgba(255,255,255,0.9)}
.fr-slide footer{margin-top:0.85rem;font-size:var(--fs-micro);letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.fr-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.15rem}
.fr-dots{display:flex;gap:0.5rem}
.fr-arrows{display:flex;align-items:center;gap:0.45rem}
.fr-arrow{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:1px solid rgba(255,255,255,0.3);border-radius:50%;color:rgba(255,255,255,0.65);font-size:0.9rem;line-height:1;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.fr-arrow:hover{color:#fff;border-color:rgba(255,255,255,0.75);background:rgba(255,255,255,0.08)}
.fr-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fr-dot{width:24px;height:2px;padding:0;border:0;background:rgba(255,255,255,0.25);cursor:pointer;transition:background .3s ease}
.fr-dot:hover{background:rgba(255,255,255,0.6)}
.fr-dot.is-active{background:var(--gold)}
.fr-dot:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.fr-slide{transition:opacity .2s ease;transform:none}.fr-slide.is-leaving{transform:none}}
.to-top:hover{color:#fff}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;padding-block:2.6rem;border-top:1px solid rgba(255,255,255,0.14)}
.fcol h4{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:1.1rem}
.fcol a,.fcol p{display:block;font-size:var(--fs-small);color:rgba(255,255,255,0.82);margin-bottom:0.55rem}
.fcol a:hover{color:#fff}
.news-row{display:flex;margin-top:0.9rem}
.news-row input{flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.25);border-right:0;color:#fff;padding:0.65rem 0.85rem;font:inherit;font-size:var(--fs-small)}
.news-row input::placeholder{color:rgba(255,255,255,0.45)}
.news-row button{background:#fff;color:var(--blue);border:0;font-size:var(--fs-micro);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:0 1.1rem;cursor:pointer}
.lang-authority{padding-block:1.1rem 0;font-size:var(--fs-micro);line-height:1.6;color:rgba(255,255,255,0.5);margin:0}
.lang-authority a{color:rgba(255,255,255,0.78);text-decoration:underline;text-underline-offset:2px}
.lang-authority a:hover{color:#fff}
.colophon{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:1.4rem;border-top:1px solid rgba(255,255,255,0.14);font-size:var(--fs-micro);letter-spacing:0.05em;color:rgba(255,255,255,0.5)}
/* ============ RESPONSIVE ============ */ @media (max-width:1200px){.tm-grid{grid-template-columns:repeat(3,1fr)}}
/* reveal: left-most first (hover delays) */ .media-card:hover .blinds rect, .block:hover .block-img .blinds rect, .tm-card:hover .blinds rect, .pa-card:hover .blinds rect{transform:scaleY(1)}
.media-card:hover .blinds rect:nth-child(1),.block:hover .block-img .blinds rect:nth-child(1),.tm-card:hover .blinds rect:nth-child(1),.pa-card:hover .blinds rect:nth-child(1){transition-delay:0s}
.media-card:hover .blinds rect:nth-child(2),.block:hover .block-img .blinds rect:nth-child(2),.tm-card:hover .blinds rect:nth-child(2),.pa-card:hover .blinds rect:nth-child(2){transition-delay:.045s}
.media-card:hover .blinds rect:nth-child(3),.block:hover .block-img .blinds rect:nth-child(3),.tm-card:hover .blinds rect:nth-child(3),.pa-card:hover .blinds rect:nth-child(3){transition-delay:.09s}
.media-card:hover .blinds rect:nth-child(4),.block:hover .block-img .blinds rect:nth-child(4),.tm-card:hover .blinds rect:nth-child(4),.pa-card:hover .blinds rect:nth-child(4){transition-delay:.135s}
.media-card:hover .blinds rect:nth-child(5),.block:hover .block-img .blinds rect:nth-child(5),.tm-card:hover .blinds rect:nth-child(5),.pa-card:hover .blinds rect:nth-child(5){transition-delay:.18s}
.media-card:hover .blinds rect:nth-child(6),.block:hover .block-img .blinds rect:nth-child(6),.tm-card:hover .blinds rect:nth-child(6),.pa-card:hover .blinds rect:nth-child(6){transition-delay:.225s}
.media-card:hover .blinds rect:nth-child(7),.block:hover .block-img .blinds rect:nth-child(7),.tm-card:hover .blinds rect:nth-child(7),.pa-card:hover .blinds rect:nth-child(7){transition-delay:.27s}
.media-card:hover .blinds rect:nth-child(8),.block:hover .block-img .blinds rect:nth-child(8),.tm-card:hover .blinds rect:nth-child(8),.pa-card:hover .blinds rect:nth-child(8){transition-delay:.315s}
/* ============ PRACTICE DETAIL template ============ */ .pd-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(2.4rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.pd-prose p{margin-bottom:1.25rem;line-height:1.7;color:#3d4145}
.pd-prose p:first-child{color:var(--ink)}
.pd-prose h3{font-size:1.15rem;font-weight:600;margin:1.8rem 0 0.8rem;color:var(--ink)}
.pd-prose ul{list-style:none;margin:0.6rem 0 1.25rem}
.pd-prose li{position:relative;padding-left:1.4rem;margin-bottom:0.55rem;line-height:1.6;color:#3d4145}
.pd-prose li::before{content:"";position:absolute;left:0;top:0.62em;width:14px;height:2px;background:var(--blue)}
.pd-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:1rem}
.pd-contact{background:var(--mist);padding:clamp(1.4rem,2.6vw,2rem)}
.pd-contact-row{display:flex;gap:1rem;align-items:center;margin-top:1.1rem}
.pd-contact-thumb{width:64px;height:64px;flex:none;background:linear-gradient(165deg,#33506e,#102a44 80%);display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:500;color:rgba(255,255,255,0.5)}
.pd-contact .tm-name{font-size:1.02rem}
.pd-contact .btn-outline{margin-top:1.4rem;min-width:0;width:100%}
.pd-nav{background:#fff;border:1px solid var(--line);padding:1.2rem 0}
.pd-nav h3{font-size:0.85rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey);padding:0 1.4rem 0.8rem;border-bottom:1px solid var(--line)}
.pd-nav a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0.68rem 1.4rem;font-size:0.92rem;color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s,background .2s}
.pd-nav a:last-child{border-bottom:0;padding-bottom:0.2rem}
.pd-nav a:hover{color:var(--blue);background:var(--mist)}
.pd-nav a.is-current{color:var(--blue);font-weight:600}
.pd-nav .arr{color:var(--grey);font-size:0.9rem}
.wh-list{margin-top:clamp(1.8rem,3.5vw,2.6rem);border-top:1px solid var(--line)}
.wh-row{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:clamp(1.4rem,3vw,3rem);padding:clamp(1.4rem,2.6vw,2rem) 0;border-bottom:1px solid var(--line)}
.wh-client{font-size:1.08rem;font-weight:700;letter-spacing:-0.005em;color:var(--blue)}
.wh-copy{font-size:0.98rem;line-height:1.68;color:#3d4145;max-width:75ch}
.wh-copy strong{color:var(--ink);font-weight:600}
/* smaller related-insight cards: third-width tracks */ .media-grid.media-grid--compact{grid-template-columns:repeat(3,1fr);gap:1.6rem}
.media-grid--compact .media-card-title{font-size:1.2rem}
/* ============ CSR GALLERY — media panel (low-res-safe) ============ */ .gal{display:grid;grid-template-columns:1fr 1.15fr;gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem);align-items:stretch}
.gal-panel{background:var(--mist);padding:clamp(1.8rem,3vw,2.6rem);display:flex;flex-direction:column}
.gal-event{font-size:0.85rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue)}
.gal-title{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:-0.01em;margin-top:0.7rem;line-height:1.3}
.gal-copy{font-size:0.95rem;line-height:1.65;color:#3d4145;margin-top:0.9rem;max-width:46ch}
.gal-meta{font-size:0.85rem;color:var(--grey);margin-top:0.9rem}
.gal-controls{display:flex;align-items:center;gap:0.9rem;margin-top:auto;padding-top:1.6rem}
.gal-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);font-size:1.25rem;line-height:1;border:1px solid var(--line);cursor:pointer;transition:all .25s}
.gal-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.gal-count{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.12em;color:var(--grey)}
.gal-thumbs{display:flex;gap:0.5rem;margin-top:1.2rem}
.gal-thumb{width:56px;height:56px;flex:none;background-size:cover;background-position:center;cursor:pointer;opacity:0.5;border:0;border-bottom:3px solid transparent;transition:opacity .25s,border-color .25s;padding:0}
.gal-thumb:hover{opacity:0.85}
.gal-thumb.is-active{opacity:1;border-bottom-color:var(--blue)}
.gal-stage{position:relative;overflow:hidden;background:var(--navy);min-height:380px;max-height:480px}
.gal-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .55s ease}
.gal-img.is-active{opacity:1}
/* gallery lightbox */ .gal-stage{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:300;background:rgba(4,12,22,0.93);display:flex;align-items:center;justify-content:center}
.lb[hidden]{display:none}
.lb-img{max-width:88vw;max-height:82vh;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,0.5)}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,0.5);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:all .25s}
.lb-btn:hover{background:#fff;color:var(--navy)}
.lb-prev{left:clamp(0.8rem,3vw,2.5rem)}
.lb-next{right:clamp(0.8rem,3vw,2.5rem)}
.lb-close{position:absolute;top:1.2rem;right:clamp(0.8rem,3vw,2.5rem);width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,0.5);color:#fff;font-size:1.4rem;cursor:pointer;transition:all .25s}
.lb-close:hover{background:#fff;color:var(--navy)}
.lb-count{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);font-size:var(--fs-micro);font-weight:600;letter-spacing:0.14em;color:rgba(255,255,255,0.8)}
/* multi-activity gallery switcher */ .act-head{display:none}
.act-head.is-active{display:block;animation:xpFade .55s ease}
.csr-act{display:none}
.csr-act.is-active{display:block;animation:xpFade .55s ease}
.act-row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.act-controls{display:flex;align-items:center;gap:0.9rem;padding-bottom:0.4rem;white-space:nowrap}
.act-controls button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--ink);font-size:1.25rem;line-height:1;border:1px solid var(--line);cursor:pointer;transition:all .25s}
.act-controls button:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.act-count{font-size:var(--fs-micro);font-weight:600;letter-spacing:0.12em;color:var(--grey)}
/* feature-band stripes: visible by default; sweep as emphasis on hover */ .fb-stripes rect{transform:scaleY(1);transform-origin:top;transform-box:fill-box}
@keyframes fbSweep{0%{transform:scaleY(1)}38%{transform:scaleY(0)}100%{transform:scaleY(1)}}
.fb-grid:hover .fb-stripes rect{animation:fbSweep .75s cubic-bezier(.4,0,.2,1) both}
.fb-grid:hover .fb-stripes rect:nth-child(1){animation-delay:0s}
.fb-grid:hover .fb-stripes rect:nth-child(2){animation-delay:.05s}
.fb-grid:hover .fb-stripes rect:nth-child(3){animation-delay:.1s}
.fb-grid:hover .fb-stripes rect:nth-child(4){animation-delay:.15s}
.fb-grid:hover .fb-stripes rect:nth-child(5){animation-delay:.2s}
.fb-grid:hover .fb-stripes rect:nth-child(6){animation-delay:.25s}
.fb-grid:hover .fb-stripes rect:nth-child(7){animation-delay:.3s}
/* poster gallery variant — full flyer always visible, never cropped */ .gal--posters .gal-stage{background:#E9EDF1;min-height:420px;max-height:520px}
.gal--posters .gal-img{background-size:contain;background-repeat:no-repeat;background-position:center}
.gal--posters .gal-thumb{background-size:cover}
/* ============ ARTICLE page components ============ */ .art-hero{display:grid;grid-template-columns:1.15fr 1fr;min-height:440px;margin-top:104px}
.art-hero-panel{background:var(--navy);color:#fff;padding:clamp(2rem,4.5vw,4rem);display:flex;flex-direction:column;justify-content:flex-end;gap:1.1rem}
.art-chip{display:inline-flex;align-self:flex-start;padding:0.4rem 0.85rem;background:var(--blue);color:#fff;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase}
.art-title{font-size:clamp(1.7rem,2.9vw,2.6rem);font-weight:300;letter-spacing:-0.015em;line-height:1.22;max-width:20em}
.art-meta{font-size:0.9rem;color:rgba(255,255,255,0.75)}
.art-meta a{color:#fff;font-weight:600}
.art-hero-art{position:relative;background:var(--mist);background-size:cover;background-position:center}
.art-share{display:flex;align-items:center;gap:0.5rem;margin-top:0.4rem}
.art-share span{font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--grey);margin-right:0.4rem}
.art-share a,.art-share button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--ink);transition:all .25s;background:none;padding:0;cursor:pointer;font:inherit}
.art-share a:hover,.art-share button:hover{background:var(--blue);border-color:var(--blue);color:#fff}
/* Controls that act on the page (print, reload) are buttons, not links to "#".
   These make a button read as the text link it replaced. */
.link-action{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-action:hover{text-decoration:none}
/* .btn-outline is also used on <button> now (print receipt); buttons do not
   inherit the page font or lose their native chrome on their own. */
button.btn-outline{appearance:none;-webkit-appearance:none;font-family:inherit;line-height:inherit;cursor:pointer}
.art-share svg{width:16px;height:16px}
.byline{display:flex;align-items:center;gap:0.9rem;padding:1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1.4rem 0 0}
.avatar-ini{width:46px;height:46px;flex:none;border-radius:0;background:linear-gradient(165deg,#33506e,#102a44 80%);display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:600;color:rgba(255,255,255,0.6)}
.byline b{display:block;font-size:0.95rem}
.byline small{display:block;font-size:0.8rem;color:var(--grey)}
.topic-chips{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:clamp(1.8rem,3vw,2.4rem)}
.topic-chips a{padding:0.45rem 0.9rem;border:1px solid var(--line);font-size:0.82rem;color:var(--ink);transition:all .25s}
.topic-chips a:hover{border-color:var(--blue);color:var(--blue)}
.rail-search{display:flex;border:1px solid var(--line)}
.rail-search input{flex:1;border:0;padding:0.75rem 0.9rem;font:inherit;font-size:0.9rem;outline:none;min-width:0}
.rail-search button{border:0;background:var(--blue);color:#fff;padding:0 1.1rem;font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer}
/* ============ APPLICATION FORM ============ */ .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-field{display:flex;flex-direction:column;gap:0.45rem;margin-top:1.3rem}
.f-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey)}
.f-label b{color:var(--blue)}
.f-input,.f-select,.f-area{border:1px solid var(--line);background:#fff;padding:0.85rem 1rem;font:inherit;font-size:0.95rem;color:var(--ink);outline:none;transition:border-color .25s;border-radius:0;width:100%}
.f-input:focus,.f-select:focus,.f-area:focus{border-color:var(--blue)}
.f-area{min-height:120px;resize:vertical}
.f-select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235A646E' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 1rem center}
.f-drops{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:0.45rem}
.f-drop{border:1.5px dashed #c9d0d8;background:#fff;padding:1.5rem 1.2rem;text-align:center;cursor:pointer;transition:border-color .25s,color .25s,background .25s;color:var(--grey)}
.f-drop:hover{border-color:var(--blue);color:var(--blue)}
.f-drop.has-file{border-color:var(--blue);border-style:solid;color:var(--blue);background:#f4f8fc}
.f-drop-title{display:block;font-size:0.9rem;font-weight:600;color:var(--ink)}
.f-drop:hover .f-drop-title{color:var(--blue)}
.f-drop-hint{display:block;font-size:0.78rem;margin-top:0.3rem}
.f-note{font-size:0.85rem;color:var(--grey);line-height:1.6}
/* ============ CONTACT ============ */ .ct-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.ct-card{background:#fff;padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:0.6rem}
.ct-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue)}
.ct-value{font-size:1.02rem;line-height:1.55;color:var(--ink)}
.ct-value a{color:var(--ink)}
.ct-value a:hover{color:var(--blue)}
.ct-sub{font-size:0.85rem;color:var(--grey);line-height:1.6}
.ct-link{font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-top:auto;padding-top:0.6rem}
.ct-map{position:relative;background:var(--mist);aspect-ratio:4/3.1;overflow:hidden}
.ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rv{margin-top:1rem;background:#fff;border:1px solid var(--line);padding:1.3rem 1.4rem}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.rv-item{padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line)}
.rv-stars{color:var(--gold);letter-spacing:0.1em;font-size:0.9rem}
.rv-name{font-size:0.9rem;font-weight:700;margin-top:0.35rem}
.rv-text{font-size:0.9rem;line-height:1.6;color:#3d4145;margin-top:0.35rem}
/* option A — single ruled composition (stats-band treatment) */ .ct-band{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.ct-cell{padding:clamp(1.8rem,2.8vw,2.4rem) clamp(1.4rem,2.2vw,2rem);display:flex;flex-direction:column;gap:0.5rem;border-left:1px solid var(--line)}
.ct-cell:first-child{border-left:0}
.ct-cell .ct-label{color:var(--grey);font-size:0.72rem;letter-spacing:0.14em}
.ct-cell .ct-value{font-size:clamp(1rem,1.2vw,1.12rem);font-weight:300;line-height:1.45;letter-spacing:-0.005em;margin-top:0.2rem}
.ct-cell .ct-link{margin-top:auto;padding-top:1.1rem}
/* ============ BOOKING ============ */ .bk-step{display:flex;align-items:baseline;gap:0.9rem;margin-top:clamp(2rem,3.5vw,2.6rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.bk-step:first-of-type{border-top:0;padding-top:0;margin-top:1.6rem}
.bk-num{font-size:0.78rem;font-weight:700;letter-spacing:0.12em;color:var(--blue)}
.bk-title{font-size:1.15rem;font-weight:600}
.bk-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.bk-mode{display:flex;flex-direction:column;gap:0.35rem;padding:1.3rem 1.2rem;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .25s,background .25s}
.bk-mode:hover{border-color:var(--blue)}
.bk-mode:has(input:checked){border-color:var(--blue);background:#f4f8fc;box-shadow:inset 0 0 0 1px var(--blue)}
.bk-mode input{position:absolute;opacity:0;pointer-events:none}
.bk-mode b{font-size:0.98rem}
.bk-mode span{font-size:0.82rem;color:var(--grey);line-height:1.5}
.bk-fee{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.6rem;padding:1.2rem 1.4rem;background:var(--mist);border:1px solid var(--line)}
.bk-fee b{font-size:1.2rem;font-weight:700;letter-spacing:-0.005em;color:var(--ink)}
.bk-fee small{display:block;font-size:0.82rem;color:var(--grey);margin-top:0.2rem}
.bk-box{border:1px solid var(--line);padding:clamp(1.4rem,2.6vw,2.2rem);margin-top:clamp(2rem,3.5vw,2.6rem)}
.bk-box .bk-step{border-top:0;padding-top:0;margin-top:0}
.bk-box .bk-step + .bk-step,.bk-box .f-field + .bk-step,.bk-box .f-note + .bk-step{margin-top:clamp(1.8rem,3vw,2.4rem);padding-top:1.4rem;border-top:1px solid var(--line)}
/* ============ PAYMENT ============ */ .py-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.py-sum{margin-top:1.6rem;border:1px solid var(--line);background:#fff}
.py-sum-row{display:flex;justify-content:space-between;gap:1rem;padding:0.9rem 1.4rem;border-top:1px solid var(--line);font-size:0.92rem;color:#3d4145}
.py-sum-row:first-child{border-top:0}
.py-sum-row.total{background:var(--mist);font-size:1.05rem;color:var(--ink)}
.py-sum-row.total b{font-size:1.2rem;font-weight:700}
.py-secure{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem}
.py-badges{display:flex;gap:0.5rem;flex-wrap:wrap}
.py-badge{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey);border:1px solid var(--line);padding:0.4rem 0.7rem}
/* ============ PAYMENT v2 — choose, then pay ============ */ .po-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.po-card{position:relative;background:#fff;padding:clamp(1.3rem,2vw,1.7rem);display:flex;flex-direction:column;gap:0.45rem;cursor:pointer;border:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.po-card:hover{border-color:var(--blue)}
.po-card:has(input:checked){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.po-card input{position:absolute;opacity:0;pointer-events:none}
.po-label{font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue)}
.po-title{font-size:1.08rem;font-weight:600;letter-spacing:-0.01em}
.po-amt{font-size:clamp(1.15rem,1.5vw,1.35rem);font-weight:300;letter-spacing:-0.01em;color:var(--ink);margin-top:0.2rem}
.po-amt small{font-size:0.85rem;color:var(--grey);font-weight:400;letter-spacing:0;margin-left:0.4rem}
.po-copy{font-size:0.85rem;line-height:1.55;color:#3d4145}
.po-pick{margin-top:auto;padding-top:0.8rem;font-size:0.8rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--grey)}
.po-card:has(input:checked) .po-pick{color:var(--blue)}
.pay{max-width:48rem;margin:clamp(1.8rem,3.5vw,2.6rem) auto 0;border:1px solid var(--line);background:#fff}
.pay-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;padding:1.6rem clamp(1.4rem,2.6vw,2.2rem);background:var(--navy);color:#fff}
.pay-head .k{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.7)}
.pay-head .item{font-size:1.1rem;font-weight:600;margin-top:0.3rem}
.pay-head .total{font-size:clamp(1.5rem,2.2vw,1.9rem);font-weight:300;letter-spacing:-0.015em}
.pay-tabs{display:flex;border-bottom:1px solid var(--line)}
.pay-tabs button{flex:1;padding:1rem;border:0;background:#fff;font:inherit;font-size:0.85rem;font-weight:600;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .25s}
.pay-tabs button:hover{color:var(--blue)}
.pay-tabs button.is-active{color:var(--blue);border-bottom-color:var(--blue)}
.pay-panel{display:none;padding:clamp(1.4rem,2.6vw,2.2rem)}
.pay-panel.is-active{display:block}
.pay-panel > .f-row:first-child .f-field,.pay-panel > .f-field:first-child{margin-top:0}
.pay-panel .f-row .f-field{margin-top:1.3rem}
.pay-panel > .f-row:first-child .f-field{margin-top:0}
.pay-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem clamp(1.4rem,2.6vw,2.2rem);border-top:1px solid var(--line);background:var(--mist)}
.pay-foot .py-badges{margin:0}
/* payment trust row — icons */ .py-icons{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.py-icon{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;color:var(--grey)}
.py-icon svg{width:22px;height:22px;color:var(--blue);flex:none}
.py-logos{display:flex;gap:0.5rem;align-items:center}
.py-logo{height:30px;min-width:52px;padding:0 0.5rem;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center}
.py-logo img{height:18px;width:auto;display:block}
.py-logo-txt{font-size:0.62rem;font-weight:700;letter-spacing:0.06em;color:var(--grey);white-space:nowrap}
/* option cards — simplified */ .po-card{padding:clamp(1.2rem,1.8vw,1.5rem);gap:0.3rem;min-height:0}
.po-card::after{content:"";position:absolute;top:1rem;right:1rem;width:10px;height:10px;border-radius:50%;border:1px solid var(--line);transition:all .25s}
.po-card:has(input:checked)::after{background:var(--blue);border-color:var(--blue)}
.po-sub{font-size:1.05rem;font-weight:300;color:var(--ink);line-height:1.4;margin-top:0.1rem}
.po-card .po-copy{font-size:0.82rem;line-height:1.5;color:var(--grey);margin-top:0.35rem}
#pay-note-txt::placeholder{color:#b4bcc4;opacity:1}
/* ============ CHECKOUT (PesaPal iframe) ============ */ .ck-steps{display:flex;align-items:center;gap:0.9rem;flex-wrap:wrap;margin-top:1.6rem}
.ck-step{display:flex;align-items:center;gap:0.55rem;font-size:0.8rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey)}
.ck-step i{width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:0.72rem}
.ck-step.is-done i{background:var(--blue);border-color:var(--blue);color:#fff}
.ck-step.is-current{color:var(--blue)}
.ck-step.is-current i{border-color:var(--blue);color:var(--blue)}
.ck-sep{width:28px;height:1px;background:var(--line)}
.ck-frame{position:relative;margin-top:1.6rem;border:1px solid var(--line);background:#fff;min-height:640px}
.ck-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ck-frame-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.6rem;text-align:center;padding:2rem;color:var(--grey);background:repeating-linear-gradient(45deg,#fff 0 14px,#f6f7f9 14px 28px)}
.ck-frame-ph b{color:var(--ink);font-size:1.05rem}
.ck-frame-ph small{font-size:0.82rem;max-width:44ch;line-height:1.6}
.ck-sum{border:1px solid var(--line);background:#fff}
.ck-sum-row{display:flex;justify-content:space-between;gap:1rem;padding:0.9rem 1.3rem;border-top:1px solid var(--line);font-size:0.92rem;color:#3d4145}
.ck-sum-row:first-child{border-top:0}
.ck-sum-row.total{background:var(--mist);color:var(--ink)}
.ck-sum-row.total b{font-size:1.2rem;font-weight:700}
.ck-sum-row span:last-child{text-align:right;color:var(--ink);font-weight:500}
.ck-secure{margin-top:1rem;font-size:0.82rem;line-height:1.6;color:var(--grey)}
/* ============ 404 — dark monument ============ */ .nf{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;overflow:hidden}
.nf-ghost{position:absolute;right:-2vw;bottom:-6vh;font-size:clamp(18rem,42vw,44rem);font-weight:200;letter-spacing:-0.04em;line-height:0.8;color:rgba(255,255,255,0.045);user-select:none;pointer-events:none}
.nf-inner{position:relative;z-index:1;width:100%;padding:clamp(8rem,16vh,11rem) 0 clamp(3.5rem,8vh,5.5rem)}
.nf-kicker{font-size:0.8rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--blue-bright)}
.nf-title{font-size:clamp(2rem,4vw,3.2rem);font-weight:300;letter-spacing:-0.02em;line-height:1.05;max-width:14em;margin-top:1.2rem}
.nf-title strong{font-weight:600;color:#fff}
.nf-copy{margin-top:1.4rem;font-size:1rem;line-height:1.7;color:rgba(255,255,255,0.65);max-width:56ch}
.nf-search{display:flex;max-width:36rem;margin-top:2.2rem}
.nf-search input{flex:1;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.25);border-right:0;padding:1.05rem 1.2rem;font:inherit;font-size:0.95rem;color:#fff;outline:none;transition:border-color .25s,background .25s}
.nf-search input::placeholder{color:rgba(255,255,255,0.45)}
.nf-search input:focus{border-color:var(--blue-bright);background:rgba(255,255,255,0.1)}
.nf-search button{border:0;background:var(--blue-bright);color:#fff;font:inherit;font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;padding:0 1.8rem;cursor:pointer;transition:background .25s}
.nf-search button:hover{background:#2b79c0}
.nf-links{display:flex;gap:0;flex-wrap:wrap;margin-top:2.6rem;border-top:1px solid rgba(255,255,255,0.18)}
.nf-links a{font-size:0.8rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.8);padding:1.1rem 1.8rem 0 0;transition:color .2s}
.nf-links a:hover{color:#fff}
.nf-links a .arr{color:var(--blue-bright);margin-left:0.35rem}
/* 404 middle ground: monument contained in a navy panel on white */ .nf{min-height:0;display:block;background:none;color:inherit;overflow:visible}
.nf-panel{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:clamp(3rem,6vw,4.5rem) clamp(1.8rem,4vw,3.5rem);min-height:min(62vh,560px);display:flex;flex-direction:column;justify-content:flex-end}
.nf-panel .nf-ghost{font-size:clamp(11rem,24vw,20rem);right:clamp(130px,13vw,200px);top:-0.05em;bottom:auto}
/* 404 stripes = the feature-band stripes component, white, on the panel's right edge */ .nf-panel .nf-bars{position:absolute;top:0;right:0;height:100%;width:clamp(110px,12vw,180px);transform:scaleX(-1);pointer-events:none;opacity:0;animation:nfBarsIn 0.9s cubic-bezier(0.22,0.61,0.36,1) 0.15s forwards}
.nf-panel .nf-bars rect{fill:#fff;transform-origin:center}
@keyframes nfBarsIn{from{opacity:0;transform:scaleX(-1) translateX(-48px)}to{opacity:1;transform:scaleX(-1) translateX(0)}}
.nf-panel:hover .nf-bars rect{animation:fbSweep .75s cubic-bezier(.4,0,.2,1) both}
.nf-panel:hover .nf-bars rect:nth-child(1){animation-delay:0s}
.nf-panel:hover .nf-bars rect:nth-child(2){animation-delay:.06s}
.nf-panel:hover .nf-bars rect:nth-child(3){animation-delay:.12s}
.nf-panel:hover .nf-bars rect:nth-child(4){animation-delay:.18s}
.nf-panel:hover .nf-bars rect:nth-child(5){animation-delay:.24s}
.nf-panel:hover .nf-bars rect:nth-child(6){animation-delay:.3s}
.nf-panel:hover .nf-bars rect:nth-child(7){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
.blinds rect{transition:none}
.hero-slide,.xp-stmt.is-active,.xp-grid.is-active,.img-card .bg,.media-card .thumb>div{transition:none;animation:none}
.fb-grid:hover .fb-stripes rect{animation:none}
}
@media (max-width:820px){
.pf2-grid{grid-template-columns:1fr}
.dir-row{grid-template-columns:52px 1fr auto;gap:0.9rem}
.dir-role{display:none}
.dir-mail{display:none}
.dir-thumb{width:52px;height:52px}
.csr-stand{grid-template-columns:1fr !important}
}
@media (max-width:1200px){
.tm-grid--compact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.tm-grid--compact{grid-template-columns:1fr}
.card-grid{grid-template-columns:1fr}
.card-grid .img-card:last-child:nth-child(odd){grid-column:auto}
.img-card{min-height:290px}
.footer-cols{grid-template-columns:1fr}
.hero{min-height:600px}
.hero-content{padding-bottom:6.5rem}
.hero-controls{right:auto;left:var(--pad);bottom:1.6rem}
.block-panel::after{display:none}
.logo-strip{justify-content:flex-start;gap:1rem 2rem}
.xp-head-row{flex-direction:row;align-items:center}
.statement{letter-spacing:-0.01em}
.principles,.pillars{grid-template-columns:1fr}
.stat-band{grid-template-columns:1fr 1fr}
.leader{grid-template-columns:120px 1fr}
.pillars-block::after{display:none}
}
@media (max-width:920px){
.footer-topline{grid-template-columns:1fr;gap:2.4rem}
.fb-grid{grid-template-columns:1fr;min-height:0}
.fb-window{min-height:240px}
.pa-grid{grid-template-columns:1fr}
/* The top bar goes on phones: the address has moved to the foot of the menu
   sheet and the switcher up beside the toggle. It is hidden only once the
   script has actually moved the switcher, so with no JavaScript the bar stays
   and nothing becomes unreachable. */
.lang-moved .topbar{display:none}
/* The no-JavaScript fallback: a bar carrying the switcher alone. */
.topbar-right{display:flex;justify-content:flex-end;gap:0}
.topbar-right>a{display:none}
.topbar-right .lang-switch{display:inline-flex}

/* Moved into the header row, sitting against the toggle. */
.header-inner{gap:1rem}
.header-inner .lang-switch{margin-left:auto}
.header-inner .lang-current{color:#fff;font-size:0.92rem}
.chrome.is-solid .header-inner .lang-current,
.chrome.is-scrolled .header-inner .lang-current{color:var(--ink)}
/* While the menu sheet is open the header is held dark, so this follows it. */
.nav-open .chrome .header-inner .lang-current{color:#fff}
.header-inner .lang-list{right:0}
/* ---- mobile menu: a sheet of rows ---- */
/* --chrome-h is the solid header's height, which the script switches on while
   the sheet is open; the sheet starts below it so the brand and the close
   control stay reachable. */
.nav{--chrome-h:4.9rem;position:fixed;inset:0;background:var(--navy-deep);flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;padding:calc(var(--chrome-h) + 1.4rem) 0 2.5rem;overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .35s ease}
.nav.is-open{transform:none}
.nav a,.nav .nav-disclosure{color:#fff !important;font-size:1.05rem}
.nav-toggle{display:block;z-index:80;position:relative;line-height:1}
/* Sized in em so it stays tied to the button's own font-size. U+2715 at
   1.5rem renders about 0.6em across; this is a tenth under that. */
.nav-x{display:block;width:0.54em;height:0.54em;margin:0.23em auto}
/* The sheet is fixed inside the header and comes after the brand in the
   markup, so it painted over it — only the toggle had been lifted clear.
   The brand and the switcher are raised with it, so the open menu still
   shows who you are on and still lets you change language. */
.nav-open .brand,.nav-open .header-inner .lang-switch{position:relative;z-index:80}
/* A white header above a dark sheet reads as two different surfaces, so the
   chrome keeps its dark state for as long as the sheet is open — including
   the scrolled state, which would otherwise whiten mid-scroll. */
.nav-open .chrome.is-solid,.nav-open .chrome.is-scrolled{background:transparent;box-shadow:none}
.nav-open .chrome .brand-img--light{display:block}
.nav-open .chrome .brand-img--dark{display:none}
.nav-open .chrome .nav-toggle{color:#fff}
/* The page behind the sheet must not scroll with it. */
.nav-open,.nav-open body{overflow:hidden}
.media-grid{grid-template-columns:1fr}
.nav-list{flex-direction:column;gap:0;align-items:stretch;width:100%;padding:0 1.35rem}
.nav-list>li{position:relative;border-bottom:1px solid rgba(255,255,255,0.16)}
.nav-list>li>a,.nav-list>li>.nav-disclosure{display:block;width:100%;padding:0.85rem 2.6rem 0.85rem 0;text-align:left;line-height:1.35}
.nav-list>li>a:after{display:none}

/* The toggle sits over the right of the row, clear of the link's own tap
   target, so opening a submenu never costs you the parent page. */
.nav-acc,.nav-acc-self{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:2.9rem;height:3.1rem;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.nav-acc-self{position:static;display:block;width:100%;height:auto}
.nav-acc-self .nav-acc-i{position:absolute;top:1.3rem;right:1rem}
.nav-acc-i{display:block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s,width .2s,height .2s}
/* Open: the chevron flattens into a minus, as the reference does. */
.nav-list>li.is-open .nav-acc-i{width:14px;height:0;border-right:0;transform:none}

/* Submenus drop out of their hover panel and sit in the flow, indented. */
.sub{position:static;transform:none;opacity:1;visibility:visible;background:transparent;box-shadow:none;min-width:0;padding:0 0 0.6rem 0.9rem;text-align:left;overflow:hidden;min-height:0}
/* 0fr to 1fr interpolates against the submenu's own height, so nothing has
   to guess at a max-height that is wrong for every menu but one. */
.sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.4,0,.2,1)}
.nav-list>li.is-open>.sub-wrap{grid-template-rows:1fr}
/* The rows fade a beat behind the slide, so they arrive rather than appear. */
.sub-wrap .sub{opacity:0;transition:opacity .2s ease}
.nav-list>li.is-open>.sub-wrap .sub{opacity:1;transition:opacity .28s ease .1s}
/* The desktop dropdown centres itself with transform:translate(-50%,0) on
   hover and focus-within. A tap on a touch screen latches :hover, so that
   rule fired here and threw the open submenu half its own width to the
   left, off the edge of the sheet. It out-specifies the plain .sub above,
   so it has to be answered on its own terms. */
.has-sub:hover .sub,.has-sub:focus-within .sub{transform:none}
.sub li a{position:relative;display:block;color:rgba(255,255,255,0.78) !important;padding:0.85rem 2rem 0.85rem 0;font-size:0.95rem;border-top:1px solid rgba(255,255,255,0.14)}
.sub li a:after{content:"";position:absolute;top:50%;right:0.65rem;width:7px;height:7px;margin-top:-5px;border-right:2px solid rgba(255,255,255,0.5);border-bottom:2px solid rgba(255,255,255,0.5);transform:rotate(-45deg);display:block !important}
.sub li a:hover{background:transparent;color:#fff !important}
.nav .caret{display:none}

/* The appointment row is an action, not a destination. */
.nav-list>li>a.btn-appoint{display:flex;justify-content:center;margin-top:1.6rem;padding:0.95rem 1.15rem !important;background:transparent;border-color:rgba(255,255,255,0.6);color:#fff !important}
.nav-list>li>a.btn-appoint:hover{background:#fff;color:var(--blue) !important;border-color:#fff}
.nav-list>li:has(>a.btn-appoint){border-bottom:0}
/* The address and the contact details leave the top bar on phones and
   land here. margin-top:auto holds the block at the foot of the sheet
   however short the menu is, rather than leaving it floating under the
   last row. */
.topbar-addr{display:none}
.nav-foot{display:block;margin:auto 0 0;padding:1.7rem 1.35rem 0}
.nav-addr{margin:0;font-size:0.82rem;line-height:1.5;color:rgba(255,255,255,0.6)}
/* The email keeps a row to itself — it is the longest of the three — and
   the two numbers sit side by side on the next one. */
.nav-contact{display:flex;flex-wrap:wrap;gap:0.6rem 1.5rem;margin:0.9rem 0 0}
.nav-contact a[href^="mailto:"]{flex:0 0 100%}
.nav-contact a{font-size:0.88rem;line-height:1.3;color:rgba(255,255,255,0.82) !important}
.nav-contact a:hover{color:#fff !important}
.gal{grid-template-columns:1fr}
.gal-stage{min-height:0;height:min(60vw,420px);order:-1}
.art-hero{grid-template-columns:1fr;min-height:0}
.art-hero-art{min-height:300px;order:-1}
}
@media (max-width:1000px){
.tm-grid{grid-template-columns:1fr 1fr}
.partners-stack{grid-template-columns:1fr}
.block{grid-template-columns:1fr}
.block-img{min-height:260px}
.card-grid{grid-template-columns:1fr 1fr}
/* don't orphan the third card in a 2-col grid */ .card-grid .img-card:last-child:nth-child(odd){grid-column:1/-1;min-height:300px}
.prose-grid{grid-template-columns:1fr}
.intro-grid{grid-template-columns:1fr}
.fact-rail{flex-direction:row;flex-wrap:wrap;gap:2rem;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:1.4rem}
.prose-cols{columns:1}
.stat-band{grid-template-columns:1fr 1fr}
.leaders{grid-template-columns:1fr}
.pd-grid{grid-template-columns:1fr}
.pd-aside{position:static}
.wh-row{grid-template-columns:1fr;gap:0.5rem}
.ct-cards{grid-template-columns:1fr 1fr}
.ct-band{grid-template-columns:1fr 1fr}
.ct-cell:nth-child(3){border-left:0}
.ct-cell:nth-child(n+3){border-top:1px solid var(--line)}
.po-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
.pa-grid{grid-template-columns:1fr 1fr}
.media-grid.media-grid--compact{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
.pa-grid{grid-template-columns:1fr}
.media-grid.media-grid--compact{grid-template-columns:1fr}
.f-row,.f-drops{grid-template-columns:1fr}
.nf-ghost{font-size:16rem;right:-8vw}
}
@media (max-width:600px){
.ct-cards{grid-template-columns:1fr}
.ct-band{grid-template-columns:1fr}
.ct-cell{border-left:0;border-top:1px solid var(--line)}
.ct-cell:first-child{border-top:0}
.po-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
.bk-modes{grid-template-columns:1fr}
.py-methods{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
.sub-wrap,.sub-wrap .sub{transition:none}
.nf-panel .nf-bars{animation:none;opacity:1}
.nf-panel:hover .nf-bars rect{animation:none}
}
}