/* Layout: one continuous field fixed behind the whole site; headlines sit on it directly, light panels float over it as cut-outs. Palette shifts per route. */
:root{
  --navy:#201B50; --blue:#4E7FFF; --light:#F4F4F8; --white:#FFFFFF;
  --indigo:#2E2A7A; --violet:#4A3FB0; --peri:#9FB4FF; --ice:#DDE5FF; --mist:#B9C8FF;
  --deep:#3A33A0; --violet2:#5B4FD6; --g1:var(--violet); --g2:var(--deep); --g3:var(--blue); --g4:var(--peri); --g4a:.4; --base:var(--indigo); --glow:var(--blue);
  --kind-dark:#184629; --kind-mid:#29653D; --kind-light:#C0C8AE; --kind-offwhite:#F5EFE8;
  --budi-dark:#231F20; --budi-mid:#4A4650; --budi-lav:#8F86C0; --budi-light:#E6E6E4;
  --bg:var(--indigo); --fg:var(--white);
  --font:'Montserrat',system-ui,Arial,sans-serif;
  --gutter:clamp(16px,4vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-weight:400;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
img,svg{max-width:100%}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Type scale: tracking set per size */
.d1{font-size:clamp(44px,7.2vw,104px);line-height:.98;letter-spacing:-.03em;font-weight:500}
.d2{font-size:clamp(32px,3.6vw,52px);line-height:1.04;letter-spacing:-.025em;font-weight:500}
.d3{font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:-.015em;font-weight:500}
.lead{font-size:clamp(17px,1.4vw,21px);line-height:1.45;font-weight:500}
.body{font-size:17px;line-height:1.55;max-width:60ch}
.small{font-size:14px;line-height:1.5}

/* Skip link */
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--white);color:var(--navy);padding:10px 16px;border-radius:1000px;font-weight:600}
.skip:focus{top:16px}

/* Header: floating pill */
.hdr{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));z-index:20;display:flex;justify-content:center;padding:44px var(--gutter) 0;transition:padding 250ms ease}
.hdr.tight{padding-top:12px}
.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;width:100%;border-radius:32px;padding:10px clamp(16px,3vw,48px) 10px clamp(24px,4vw,64px);background:rgba(244,244,248,0);color:var(--white);transition:background 250ms ease,color 250ms ease,box-shadow 250ms ease}
.nav.solid{background:rgba(244,244,248,.96);color:var(--navy);box-shadow:0 1px 0 rgba(32,27,80,.06)}
.nav .logo{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.nav .logo svg{height:28px;width:101px;overflow:visible;display:block}
.nav:not(.solid) .logo svg{--altus:var(--blue)}
.nav .links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.nav .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15px;font-weight:600;border-radius:1000px;position:relative}
.nav .links a::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 300ms ease}
.nav .links a:hover::after,.nav .links a[aria-current="page"]::after{transform:scaleX(1)}
.nav .cta{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:1000px;font-size:15px;font-weight:600;background:var(--white);color:var(--navy);transition:background 250ms ease,color 250ms ease}
.nav.solid .cta{background:var(--navy);color:var(--white)}
.nav .links a.cta::after{display:none}

/* Pills and links */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;border-radius:1000px;font-size:15px;font-weight:600;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;box-shadow:0 0 0 0 rgba(78,127,255,0);transition:box-shadow 250ms ease}
.pill:hover,.pill:focus-visible{box-shadow:0 0 0 3px var(--ring,var(--navy)),0 0 0 5px var(--blue);outline:none}
.pill.on-navy{background:var(--white);color:var(--navy);--ring:var(--navy)}
.pill.ghost-white{border-color:var(--white);color:var(--white);--ring:var(--navy)}
.pill.on-light{background:var(--navy);color:var(--white);--ring:var(--light)}
.pill.ghost-navy{border-color:var(--navy);color:var(--navy);--ring:var(--light)}
.pill.on-field{background:var(--white);color:var(--navy);--ring:var(--indigo)}
.pill .arrow{width:18px;height:18px;flex:none}
.arrow{fill:var(--blue)} /* head only, in Altus blue: the stem has no stroke. Selectors cannot reach inside <use>, so colour comes by inheritance */
.lnk{position:relative;font-weight:500}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 300ms ease}
.lnk:hover::after,.lnk:focus-visible::after{transform:scaleX(1)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.pill:focus-visible{outline:none}

/* Fields */
.field{position:relative;overflow:hidden;isolation:isolate}
.blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.b1{animation:drift1 48s ease-in-out infinite}
.b2{animation:drift2 56s ease-in-out infinite}
.b3{animation:drift3 42s ease-in-out infinite}
.b4{animation:drift2 62s ease-in-out infinite reverse}
@keyframes drift1{0%{transform:translate(0,0)}33%{transform:translate(4%,6%)}66%{transform:translate(-3%,3%)}100%{transform:translate(0,0)}}
@keyframes drift2{0%{transform:translate(0,0)}40%{transform:translate(-5%,-4%)}75%{transform:translate(3%,-6%)}100%{transform:translate(0,0)}}
@keyframes drift3{0%{transform:translate(0,0)}50%{transform:translate(5%,-5%)}100%{transform:translate(0,0)}}
.field>.inner{position:relative;z-index:1}

/* The ground: one field behind everything */
.ground{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--base,var(--indigo));pointer-events:none;transition:background 900ms ease}
.ground .blob{filter:blur(110px);transition:background 900ms ease,opacity 900ms ease}
.ground .g1{left:-15vw;top:-25vh;width:70vw;height:70vw;min-width:520px;min-height:520px;background:var(--g1)}
.ground .g2{right:-25vw;top:-10vh;width:80vw;height:80vw;min-width:600px;min-height:600px;background:var(--g2)}
.ground .g3{left:-10vw;bottom:-45vh;width:70vw;height:70vw;min-width:520px;min-height:520px;background:var(--g3)}
.ground .g4{right:5vw;bottom:-30vh;width:50vw;height:50vw;min-width:380px;min-height:380px;background:var(--g4);opacity:var(--g4a)}
body[data-route="about"]{--g1:var(--violet2);--g2:var(--deep);--g3:var(--blue);--g4:var(--peri);--g4a:.3}
body[data-route="brands"]{--g1:var(--deep);--g2:var(--violet);--g3:var(--blue);--g4:var(--deep);--g4a:.6}
body[data-route="partners"]{--g1:var(--blue);--g2:var(--violet);--g3:var(--deep);--g4:var(--peri);--g4a:.45}
body[data-route="careers"]{--g1:var(--blue);--g2:var(--violet);--g3:var(--violet2);--g4:var(--mist);--g4a:.4}
body[data-route="contact"]{--g1:var(--deep);--g2:var(--violet);--g3:var(--deep);--g4:var(--blue);--g4a:.5}
body[data-route="404"]{--g1:var(--deep);--g2:var(--deep);--g3:var(--violet);--g4:var(--blue);--g4a:.5}
body[data-route="partners"] .nav:not(.solid) .logo svg,body[data-route="careers"] .nav:not(.solid) .logo svg{--altus:var(--navy)}

/* Focus pull */
.pull{animation:sharpen 900ms cubic-bezier(.2,.7,.2,1) 200ms both}
@keyframes sharpen{0%{filter:blur(10px);opacity:0;transform:translateY(6px)}30%{opacity:1}100%{filter:blur(0);opacity:1;transform:translateY(0)}}

/* Page structure */
main{position:relative;z-index:2;display:flex;flex-direction:column} /* above the footer, whose fade reaches up behind the end of the page */
.hero-wrap{padding:0 var(--gutter);margin-top:-100px}
.hero{position:relative;overflow:visible;min-height:560px;padding:clamp(150px,16vw,220px) clamp(24px,4vw,64px) clamp(56px,6vw,88px);display:flex;flex-direction:column;justify-content:flex-end;gap:32px}
.hero.short{min-height:420px;padding-top:clamp(130px,14vw,180px)}
.hero .para{position:absolute;inset:-80px 0}
.hero .mark{position:absolute;right:clamp(24px,4vw,64px);top:clamp(96px,10vw,140px);width:clamp(44px,5vw,72px);height:auto;z-index:1;color:var(--white)}
.hero h1{max-width:14ch;color:var(--white)}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.hero-row p{max-width:560px;color:var(--white)}
.btns{display:flex;flex-wrap:wrap;gap:10px}

.sec{padding:clamp(40px,5vw,72px) var(--gutter) clamp(56px,6vw,96px);display:flex;flex-direction:column;gap:40px}
.sec.on-navy{color:var(--white);padding-left:clamp(40px,8vw,128px);padding-right:clamp(40px,8vw,128px)}
.sec.light{background:var(--light);color:var(--navy);border-radius:32px;margin:0 var(--gutter) 24px;padding:clamp(48px,6vw,88px) clamp(24px,4vw,64px);gap:clamp(56px,7vw,96px)}
.sec.navy-card{background:rgba(32,27,80,.55);color:var(--white);border-radius:32px;margin:0 var(--gutter) 24px;padding:clamp(48px,6vw,88px) clamp(24px,4vw,64px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.sec-head p{max-width:460px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px 64px;align-items:start}
.two>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:24px}

/* Brand tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.tile{border-radius:24px;min-height:460px;padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;color:var(--white)}
.tile .blob{filter:blur(80px);transition:filter 600ms ease}
.tile:hover .blob{filter:blur(56px)}
.tile .wm{position:relative;z-index:1;height:40px;width:auto;align-self:flex-start;transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.tile:hover .wm{transform:translateY(-2px)}
.tile .budi-wm{position:relative;z-index:1;font-size:40px;line-height:1;letter-spacing:-.03em;font-weight:600;align-self:flex-start;transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.tile:hover .budi-wm{transform:translateY(-2px)}
.tile-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.tile-row>div{display:flex;flex-direction:column;gap:8px;max-width:380px}
.tile.kind{background:var(--kind-dark)}
.tile.budi{background:var(--budi-dark)}

/* Ruled list */
.rules{display:flex;flex-direction:column;border-top:1px solid var(--navy)}
/* Heading and description sit side by side, the description starting right after a fixed heading column, not pushed to the far edge */
.rules>div{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,560px);gap:8px clamp(24px,4vw,64px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--navy)}
@media (max-width:640px){.rules>div{grid-template-columns:1fr}}
.rules .k{font-size:20px;font-weight:500}
.rules .v{font-size:16px}
.sec.on-navy .rules,.sec.navy-card .rules{border-color:rgba(255,255,255,.35)}
.sec.on-navy .rules>div,.sec.navy-card .rules>div{border-color:rgba(255,255,255,.35)}

/* Timeline cards */
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.year{background:var(--white);border-radius:24px;padding:16px 16px 28px;display:flex;flex-direction:column;gap:24px;color:var(--navy)}
.year>.stack,.year .y{padding:0 12px}
/* Image placeholders: a frame in the field's own colour until photography is chosen; caption names the intended picture */
.img{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;max-width:100%;background:var(--ice);display:flex;align-items:flex-end;padding:14px 16px;isolation:isolate}
.img .blob{filter:blur(36px);opacity:.55}
.img .cap{position:relative;z-index:1;font-size:13px;line-height:1.4;font-weight:500;color:var(--navy)}
.year .y{font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.03em;font-weight:500}
.year h3{font-size:20px;line-height:1.2;font-weight:500}
.year p{font-size:16px}

/* Light field panel */
.panel{border-radius:32px;background:var(--ice);padding:clamp(40px,5vw,72px) clamp(24px,4vw,64px);display:flex;flex-direction:column;gap:32px;color:var(--navy)}
.panel .blob{filter:blur(80px)}
/* Quote */
.quote{position:relative;font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.015em;max-width:30ch}
.quote .hang{position:absolute;left:-.45em}

/* Form */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 20px;max-width:760px}
.form label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600;min-width:0}
.form input,.form select,.form textarea{font:inherit;font-size:16px;min-height:48px;padding:12px 16px;border-radius:16px;border:1.5px solid rgba(32,27,80,.25);background:var(--white);color:var(--navy);width:100%}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(78,127,255,.25)}
.form .full{grid-column:1/-1}
.form .err{color:#A3253A;font-size:14px;font-weight:500}
.notice{background:var(--white);border-radius:16px;padding:16px 20px;font-size:15px;color:var(--navy);max-width:760px}

/* Footer: on the ground, darkened. The ground is fixed, so the footer always lands over the brightest shapes at the bottom of the viewport.
   A 60% navy layer, reached by the end of the top padding, keeps every footer text colour at 4.5:1 or more over the lightest blend (blue with peri): white 7.7, ice 6.1.
   The footer's box reaches --fade further up, behind the end of the page (main sits above it), so the navy builds slowly, eased, with no visible start */
footer{--fade:clamp(320px,45vh,560px);--ramp:calc(var(--fade) + clamp(48px,6vw,88px) + 40px);position:relative;z-index:1;margin-top:calc(var(--fade) * -1);color:var(--white);background:linear-gradient(to bottom,rgba(32,27,80,0) 0,rgba(32,27,80,.03) calc(var(--ramp) * .2),rgba(32,27,80,.1) calc(var(--ramp) * .4),rgba(32,27,80,.22) calc(var(--ramp) * .6),rgba(32,27,80,.38) calc(var(--ramp) * .8),rgba(32,27,80,.6) var(--ramp),rgba(32,27,80,.6) 100%);padding:var(--ramp) calc(var(--gutter) + clamp(24px,4vw,64px)) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:56px}
footer .cols{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px;align-items:start}
footer .cols>div{display:flex;flex-direction:column;gap:10px;font-size:16px;font-weight:500;min-width:0}
footer .cols .h{font-weight:400;color:var(--ice)}
footer .legal{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.3);font-size:14px;font-weight:400}
footer .legal span{max-width:720px}
footer .legal a{text-decoration:underline;text-underline-offset:3px}
footer .wm{height:36px;width:130px;overflow:visible;color:var(--white);--altus:var(--blue)} /* blue Altus, as in the header over the field: navy vanished once the footer was darkened */

/* Wordmark colouring */
.wm-paths{fill:currentColor}
.altus-fill{fill:var(--altus,var(--blue))}
.kind-wm{color:var(--kind-offwhite)}


/* The Altus as the light source of each hero: a pale core you can read as the mark, inside a wide halo in the route's glow colour.
   It arrives with one focus pull on load and route change, and softens again as the hero scrolls away (--f, 0 to 1). It sits wholly inside the hero. */
:root{--core:#E4EAFF}
.hero-wrap{overflow-x:clip}
.altus-light{position:absolute;z-index:0;pointer-events:none;right:clamp(24px,4vw,64px);top:clamp(120px,11vw,168px);width:clamp(0px,calc(100vw - 880px),540px);aspect-ratio:16.6/18.1;--f:0}
.altus-light svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.altus-light .halo{color:var(--peri);transform:scale(1.35);filter:blur(110px);opacity:.55}
.altus-light .core{position:absolute;inset:0;filter:blur(calc(11.25px + var(--f) * 64px));opacity:calc(.94 - var(--f) * .55)}
.altus-light .lit{position:absolute;inset:0;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.6 18.1'%3E%3Cpath d='M16,15.5l0.7-12.2c0.2-1.1-0.3-2.3-1.2-3c-1-0.5-2.3-0.4-3.2,0.3l-10.6,6C1.1,6.9,0.6,7.3,0.2,7.8l0,0C-0.3,8.8,0.1,9.9,1,10.4c0.1,0.1,0.3,0.1,0.4,0.2c2.2,0.5,4.3,1.3,6.1,2.5c1.9,1.1,3.6,2.6,5,4.4c0.7,0.8,1.9,0.8,2.7,0.2c0.1-0.1,0.2-0.2,0.3-0.3l0,0C15.8,16.8,16,16.1,16,15.5z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.6 18.1'%3E%3Cpath d='M16,15.5l0.7-12.2c0.2-1.1-0.3-2.3-1.2-3c-1-0.5-2.3-0.4-3.2,0.3l-10.6,6C1.1,6.9,0.6,7.3,0.2,7.8l0,0C-0.3,8.8,0.1,9.9,1,10.4c0.1,0.1,0.3,0.1,0.4,0.2c2.2,0.5,4.3,1.3,6.1,2.5c1.9,1.1,3.6,2.6,5,4.4c0.7,0.8,1.9,0.8,2.7,0.2c0.1-0.1,0.2-0.2,0.3-0.3l0,0C15.8,16.8,16,16.1,16,15.5z'/%3E%3C/svg%3E") center/100% 100% no-repeat;background:radial-gradient(120% 95% at 92% 4%,#FFFFFF 0%,var(--core) 30%,var(--peri) 62%,rgba(159,180,255,.25) 100%);}
.hero.short .altus-light{top:clamp(150px,13vw,190px);width:clamp(0px,calc(100vw - 1120px),280px)}
.altus-light.in{animation:focusin 1700ms cubic-bezier(.2,.7,.2,1) both}
@keyframes focusin{0%{filter:blur(48px);opacity:0}35%{opacity:1}100%{filter:blur(0);opacity:1}}
.lost .altus-light{right:auto;left:50%;top:-12vh;width:min(70vw,700px);margin-left:calc(min(70vw,700px) / -2)}
.lost .altus-light .core{display:none}
@media (max-width:1100px){
  .altus-light,.hero.short .altus-light{width:min(80vw,620px);right:-14vw;top:-90px}
  .altus-light .core{display:none}
}
@media (prefers-reduced-motion:reduce){.altus-light.in{animation:none}.altus-light .core{filter:blur(11.25px);opacity:.94}}
.hero-row.stacked{flex-direction:column;align-items:flex-start;gap:28px}

/* Mobile menu: the header pill becomes a compact bar with a Menu button; opening it turns the same pill into a light panel */
.menu-btn{display:none;align-items:center;min-height:44px;padding:0 18px;border-radius:1000px;border:1.5px solid currentColor;background:transparent;color:inherit;font-size:15px;font-weight:600;cursor:pointer}
@media (max-width:760px){
  .hdr{padding-top:20px}
  .nav{padding:6px 6px 6px 20px;border-radius:28px}
  .menu-btn{display:inline-flex}
  .nav .links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:4px 14px 14px 0}
  .nav.open{background:rgba(244,244,248,.98);color:var(--navy);box-shadow:0 1px 0 rgba(32,27,80,.06)}
  .nav.open .menu-btn{background:var(--navy);border-color:var(--navy);color:var(--white)}
  .nav.open .links{display:flex;animation:menuin 280ms cubic-bezier(.2,.7,.2,1) both}
  .nav .links a{min-height:52px;padding:0;font-size:22px;font-weight:500;letter-spacing:-.01em;border-radius:0}
  .nav .links a::after{left:0;right:auto;width:32px;bottom:10px}
  .nav .links a.cta{justify-content:center;margin-top:14px;background:var(--navy);color:var(--white);font-size:16px;font-weight:600;border-radius:1000px}
}
@keyframes menuin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nav.open .links{animation:none}}

/* Ruled rows that act: whole row is the link, arrow moves on hover */
.rules>a{display:grid;grid-template-columns:minmax(200px,280px) minmax(0,560px) minmax(24px,1fr);gap:8px clamp(24px,4vw,64px);align-items:baseline;padding:22px 0;border-bottom:1px solid var(--navy);border-radius:0}
.rules>a .arrow{width:20px;height:20px;align-self:center;justify-self:end;transition:transform 300ms cubic-bezier(.2,.7,.2,1)}
.rules>a .k{position:relative;justify-self:start}
.rules>a .k::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform 300ms ease}
.rules>a:hover .k::after,.rules>a:focus-visible .k::after{transform:scaleX(1)}
.rules>a:hover .arrow,.rules>a:focus-visible .arrow{transform:translateX(4px)}
@media (max-width:640px){.rules>a{grid-template-columns:1fr 24px}.rules>a .v{grid-column:1/2;grid-row:2}.rules>a .arrow{grid-column:2;grid-row:1}}
@media (prefers-reduced-motion:reduce){.rules>a .arrow,.rules>a .k::after{transition:none}}

/* What Altum does: four functions, two by two, each with its own icon */
.ico{display:block;flex:none;overflow:visible}
.ico .o{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico .d{stroke-dasharray:2.5 3;stroke-width:1.25}
.ico .f{fill:var(--icon-accent,var(--blue));stroke:none}
.ico .k{fill:none;stroke:var(--icon-on-accent,var(--white));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.fgrid>div{display:flex;flex-direction:column;gap:14px;padding:28px 0 32px;border-top:1px solid rgba(32,27,80,.18);min-width:0}
.fgrid>div:nth-child(-n+2){border-top-color:var(--navy)}
.fgrid h3{font-size:20px;line-height:1.2;font-weight:500;letter-spacing:-.01em}
.fgrid p{font-size:15.5px;line-height:1.5;color:rgba(32,27,80,.72)}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.fgrid>div:nth-child(2){border-top-color:rgba(32,27,80,.18)}}

/* Chapter sliders: each card's picture is a short sequence. Once the row has been in view a few seconds they advance on their own,
   one after another from left to right, then keep that staggered rhythm. Hover, focus or a swipe takes over that card. */
.slider{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:4/3;max-width:100%;background:var(--ice);isolation:isolate;touch-action:pan-y}
.slider.wide{aspect-ratio:3/2}
.slider .track{display:flex;height:100%;transition:transform 1400ms cubic-bezier(.65,0,.25,1);will-change:transform}
.slider .slide{position:relative;flex:0 0 100%;height:100%;margin:0;overflow:hidden}
.slider img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 3200ms cubic-bezier(.2,.7,.2,1)}
.slider .slide.on img{transform:scale(1)}
.slider .slide.loop.on img,.slider .slide.loop img{transform:scale(1)}
.slider .ph{display:flex;align-items:flex-end;padding:14px 16px;background:var(--ice);isolation:isolate}
.slider .ph .blob{filter:blur(36px);opacity:.55}
.slider .ph .cap{position:relative;z-index:1;font-size:13px;line-height:1.4;font-weight:500;color:var(--navy);max-width:70%}
.slider figcaption{position:absolute;z-index:2;left:10px;bottom:10px;max-width:calc(100% - 122px);padding:4px 9px;border-radius:11px;background:rgba(32,27,80,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font-size:12px;line-height:15px;font-weight:500}
.slider .dots{position:absolute;z-index:2;right:10px;bottom:10px;display:flex;gap:2px;padding:0 4px;border-radius:1000px;background:rgba(32,27,80,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.slider .dots button{appearance:none;border:0;background:none;padding:0;width:24px;height:24px;display:grid;place-items:center;cursor:pointer;border-radius:1000px}
.slider .dots button::before{content:"";width:12px;height:3px;border-radius:3px;background:rgba(255,255,255,.5);transition:background 400ms ease,width 400ms ease}
.slider .dots button[aria-current="true"]::before{background:var(--white);width:16px}
.slider .dots button:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.slider .track{transition-duration:1ms}.slider img{transition:none;transform:none}}

/* Purpose line set on the field */
.sec-head .purpose{position:relative;max-width:30ch}
.purpose .hang{position:absolute;left:-.42em}

/* Kind tile: Kind Dark Green ground, petal pattern tone-on-tone on one side, whole motifs only (even petal cells, square corners, never faded) */
.tile.kind{background:var(--kind-dark);padding-right:calc(56px + clamp(140px,38%,260px))}
.tile.kind .kpat{position:absolute;top:24px;bottom:24px;right:24px;width:clamp(140px,38%,260px);box-sizing:border-box;background:var(--kind-dark);overflow:hidden}
.kind-pf{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),var(--pc));gap:0;width:100%;background:#184629;line-height:0}
.kind-pf__cell{height:var(--pc);min-width:0}
.kind-pf__cell svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 50%;animation:kind-bloom 840ms cubic-bezier(.16,1,.3,1) both}
.kind-pf__cell path{fill:#29653D;transition:fill 1100ms cubic-bezier(.16,1,.3,1)}
.kind-pf__cell:hover path{fill:#94B29E;transition-duration:80ms;transition-delay:0ms}
@keyframes kind-bloom{from{transform:scale(.15);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.kind-pf__cell path{transition-duration:1ms}.kind-pf__cell svg{animation:none}}
.tile.kind .kcontent,.tile.budi .kcontent{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:396px}
.tile.kind.band{padding-right:32px;padding-bottom:calc(48px + 192px)}
.tile.kind.band .kpat{top:auto;left:24px;right:24px;bottom:24px;width:auto;height:192px}
.tile.kind .kpat .kind-pf{height:100%}
.tile.kind.band .kcontent,.tile.budi.band .kcontent{min-height:0}


/* Budi tile: the Budi 'b' repeated, graphite on graphite; hover reveals the pack colourway of that cell (Sativa, Hybrid, Indica, THC20, Balanced), 80ms snap, 1100ms release */
.tile.budi{background:var(--budi-dark);padding-right:calc(56px + clamp(140px,38%,260px))}
.tile.budi .bpat{position:absolute;top:24px;bottom:24px;right:24px;width:clamp(140px,38%,260px);box-sizing:border-box;background:var(--budi-dark);overflow:hidden}
.tile.budi.band{padding-right:32px;padding-bottom:calc(48px + 200px)}
.tile.budi.band .bpat{top:auto;left:24px;right:24px;bottom:24px;width:auto;height:200px}
.budi-wm-svg{color:var(--budi-light);height:40px;width:auto}
.budi-pf{display:grid;grid-template-columns:repeat(var(--cols),var(--cw));grid-template-rows:repeat(var(--rows),var(--ch));gap:0;line-height:0}
.budi-pf__cell{width:var(--cw);height:var(--ch);min-width:0}
.budi-pf__cell svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 50%;animation:budi-bloom 840ms cubic-bezier(.16,1,.3,1) both}
.budi-pf__cell .mono{fill:#3A3537}
.budi-pf__cell .col{opacity:0;transition:opacity 1100ms cubic-bezier(.16,1,.3,1)}
.budi-pf__cell:hover .col{opacity:1;transition-duration:80ms}
@keyframes budi-bloom{from{transform:scale(.15);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.budi-pf__cell .col{transition-duration:1ms}.budi-pf__cell svg{animation:none}}

/* 404 */
.lost{min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:clamp(160px,18vw,240px) clamp(24px,4vw,64px) 80px}
.lost p{max-width:22ch;color:var(--white)}

@media (prefers-reduced-motion:reduce){
  .b1,.b2,.b3,.b4,.pull{animation:none}
  .tile .blob,.tile .wm,.tile .budi-wm,.pill,.lnk::after,.nav,.nav .cta,.nav .links a::after,.ground .blob{transition:none}
}

/* Privacy policy */
.policy{max-width:72ch;gap:16px;overflow-wrap:anywhere}
.policy h2{margin-top:24px}
.policy ul{margin:0;padding-left:1.25em}
.policy li+li{margin-top:8px}

/* "An Altum brand" lockup: used as supplied. Clear space on every side is at least the height of the A (97% of the lockup), and it stays smaller than the 40px Kind and Budi wordmarks */
.endorse-panel{max-width:600px}
.endorse{display:block;align-self:flex-start;height:clamp(22px,2.4vw,28px);width:auto;margin-bottom:clamp(22px,2.4vw,28px)}