@font-face{font-family:'Optiker';src:url('/assets/fonts/Optiker-K.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Rethink Sans';src:url('/assets/fonts/RethinkSans-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Rethink Sans';src:url('/assets/fonts/RethinkSans-Italic-VariableFont_wght.ttf') format('truetype');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Pinyon Script';src:url('/assets/fonts/PinyonScript-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ouma Devanagari';src:url('/assets/fonts/Ouma-Devanagari-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ouma Devanagari';src:url('/assets/fonts/Ouma-Devanagari-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
:root{--haldi:#F5C571;--neel:#243A6B;--mehendi:#431515;--sage:#BFBEA6;--peepal:#908A29;--font-display:'Optiker','Rethink Sans',system-ui,sans-serif;--font-body:'Rethink Sans',system-ui,sans-serif;--font-accent:'Pinyon Script',Georgia,serif;--font-deva:'Ouma Devanagari',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body,p,a,small{font-family:var(--font-body)}body{margin:0;background:var(--neel);color:var(--sage);font-size:19px;line-height:1.35}.section-limit{max-width:1631px;margin:auto}h1,h2,h3,.eyebrow,.desktop-nav a,.overlay-links a,.underlined-link,.work-card,.view-all,.menu-button,.close-button{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500;line-height:1.08}h1{font-size:66px;letter-spacing:.13em}h2{font-size:34px}a{color:inherit;text-decoration:none}.underlined-link{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:3px;font-size:17px;font-weight:500;letter-spacing:.1em}.eyebrow{font-size:14px;letter-spacing:.19em}.site-header{position:absolute;top:0;left:50%;z-index:3;width:min(1631px,100%);height:181px;transform:translateX(-50%);display:flex;align-items:center;padding:0 6.875%;color:var(--sage)}.brand img,.brand{display:block}.brand>img{width:100%}
.brand-header{position:absolute;left:18%;top:92px;transform:translate(-50%,-50%);width:168px}
.brand-header img{width:100%}.desktop-nav{display:flex;align-items:center;gap:60px;margin-left:auto;font-size:17px;font-weight:500}.menu-button,.close-button{border:0;background:transparent;color:inherit;cursor:pointer}.menu-button{order:3;width:43px;height:36px;margin-left:50px;padding:3px 0;display:grid;align-content:center;gap:8px}.menu-button span{height:1px;width:29px;background:currentColor;display:block}.nav-overlay{position:fixed;inset:0;z-index:10;background:var(--neel);padding:92px 9%;color:var(--sage);visibility:hidden;opacity:1}.nav-overlay.is-open{visibility:visible;opacity:1}.overlay-brand{position:absolute;left:50%;top:92px;transform:translate(-50%,-50%);width:168px}.overlay-brand img{width:100%}.close-button{position:absolute;right:8%;top:60px;font:300 54px/1 var(--font-display)}.overlay-inner{min-height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12vw}.overlay-links{border-top:1px solid color-mix(in srgb,var(--sage) 65%,transparent)}.overlay-links a{display:block;padding:24px 0 19px;border-bottom:1px solid color-mix(in srgb,var(--sage) 65%,transparent);font-size:32px}.work-card{background:var(--sage);color:var(--neel);aspect-ratio:1.16;display:grid;place-content:center;font-size:34px;line-height:1.25;text-align:center}.work-card span{display:block;margin-top:23px;font-size:27px}
.hero{min-height:100svh;background-color:#260001;background-image:url("/assets/optimized/hero-desktop-1440.webp");background-repeat:no-repeat;background-size:107.3% auto;background-position:0 0;position:relative;overflow:hidden}
.hero-copy{position:absolute;left:10.1%;top:43.5%;transform:translateY(-50%)}.hero-copy .eyebrow{margin:19px 0 110px}.hero-note{position:absolute;left:7.7%;bottom:39px;font-size:18px;line-height:1.4;text-align:center}.direction{min-height:790px;background:var(--neel);display:flex;align-items:center;justify-content:center;gap:132px;padding:102px}.para-frame{view-timeline-name:--para;view-timeline-axis:block;width:320px;height:416px;overflow:hidden;position:relative;flex:0 0 auto}.para-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.section-copy{max-width:439px}.section-copy p{margin-bottom:54px}.family{min-height:790px;display:grid;grid-template-columns:1fr 1fr}.family-photo img,.hassle-photo img{width:100%;height:100%;object-fit:cover;display:block}.family-copy{max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:left;padding:64px 19%;background:var(--mehendi) repeat;background-size:306px}.family-copy p{max-width:363px}.family-copy h2,.family-copy .underlined-link{align-self:center}.edits{background:var(--neel);padding:94px 0 98px}.title-block{text-align:center}.title-block h2{margin-bottom:18px}.title-block .eyebrow{margin-bottom:97px}.edits-track{display:flex;gap:36px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 48px 23px;scrollbar-width:none}.edits-track::-webkit-scrollbar{display:none}.edit-card,.view-all{flex:0 0 320px;scroll-snap-align:center}.edit-card{min-width:0;text-align:center}.deck{position:relative;width:100%;aspect-ratio:.72;margin-bottom:45px;isolation:isolate}.edit-placeholder{width:100%;height:100%;background:var(--mehendi);transform:rotate(1.5deg)}.edit-card h3{font-size:15px;line-height:1.35;margin:0 0 19px}.view-all{aspect-ratio:.72;background:var(--sage);color:var(--neel);display:grid;place-content:center;font-size:14px;align-self:start;margin-top:4px}.hassle{min-height:790px;display:grid;grid-template-columns:1fr 1fr}.hassle-copy{background:var(--mehendi) url("/assets/svg-src/svg-05.webp") repeat;background-size:306px;padding:99px 11%}.hassle-inset{width:201px;height:150px;margin-bottom:54px}.hassle-inset img{width:100%;height:100%;object-fit:cover;display:block}.hassle-copy>p{max-width:357px;font-size:20px;line-height:1.6;margin-bottom:38px}.hassle-copy em{font-family:var(--font-accent);font-size:47px;line-height:.9}.experience{min-height:790px;background-color:var(--neel);display:grid;place-items:center;padding:57px}.motif-frame{width:min(739px,77%);min-height:433px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:51px}.motif-frame h2{font-size:38px;margin-bottom:55px}.markets-scroll{position:relative;height:500vh}.markets{position:sticky;top:0;height:100vh;background:var(--mehendi) repeat;background-size:306px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:83px 13%}.markets-intro{text-align:center}.markets-intro h2{font-size:36px;margin-bottom:34px}.markets-intro .eyebrow{margin-bottom:25px}.markets-intro .brand{width:178px;margin:auto}.markets-media{position:relative;width:min(100%,400px);justify-self:center}.market-images{position:relative;aspect-ratio:1}.market-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0}.market-photo-1{opacity:1}.market-names{position:relative;height:53px;margin-top:27px}.market-name{position:absolute;inset:0;margin:0;text-align:center;font-size:24px;opacity:0}.market-name-1{opacity:1}.enquiry{min-height:790px;background:var(--neel);text-align:center;padding:135px 25px}.enquiry h2{font-size:38px;margin-bottom:66px}.footer{min-height:790px;background-color:var(--neel);display:grid;place-items:center;text-align:center;padding:76px 25px}.footer h2{font-size:34px;max-width:790px;margin-bottom:57px}.footer .brand{width:189px;margin:0 auto 46px}.footer p{font-size:15px;margin-bottom:31px}.footer p a{text-decoration:underline;text-underline-offset:5px}.footer p span{margin:0 15px}.footer small{font-size:14px}.footer-social{display:none}
@media (max-width:1279px){body{font-size:18px}.section-limit{max-width:917px}.site-header{height:117px;padding:0 38px}.brand-header{left:50%;top:82px;width:121px}.desktop-nav{display:none}.menu-button{order:0;margin:0}.hero{min-height:852px;background:linear-gradient(90deg,#431515bf 0%,#43151512 70%),url("/assets/optimized/hero-mobile-800.webp") center/cover}.hero-copy{top:61%;left:0;width:100%;text-align:center;padding:0 20px}.hero-copy h1{font-size:37px;letter-spacing:.13em}.hero-copy .eyebrow{font-size:9px;margin:14px 0 59px}.hero-copy .underlined-link{font-size:10px}.hero-note{left:10%;right:10%;bottom:18px;font-size:10px;text-align:center}.desktop-only{display:none}.nav-overlay{padding:122px 38px}.overlay-brand{top:82px;width:121px}.close-button{right:34px;top:43px;font-size:46px}.overlay-inner{display:block;padding-top:104px}.overlay-links a{padding:19px 0;font-size:24px}.work-card{margin-top:43px;width:100%;aspect-ratio:2.5;font-size:25px}.work-card br,.work-card span{display:none}.direction{min-height:852px;padding:92px 14%;display:flex;flex-direction:column;align-items:center;gap:46px;text-align:center}.para-frame{width:300px;height:390px}.section-copy{max-width:382px}.section-copy h2{font-size:23px}.section-copy p{font-size:13px;margin-bottom:38px}.section-copy .underlined-link{font-size:11px}.family{min-height:852px;display:flex;flex-direction:column-reverse;background:var(--mehendi) repeat;background-size:204px;padding:96px 0 51px}.family-photo{width:194px;height:254px;margin:auto}.family-copy{background:none;padding:0 54px;text-align:center}.family-copy p{margin:55px 0 36px}.edits{padding:90px 0 96px;overflow:hidden}.title-block h2{font-size:28px}.title-block .eyebrow{font-size:10px;margin-bottom:73px}.edits-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 24px 23px;scrollbar-width:none}.edits-track::-webkit-scrollbar{display:none}.edit-card,.view-all{flex:0 0 264px;scroll-snap-align:center}.deck{margin-bottom:36px}.edit-card h3{font-size:13px}.edit-card p{font-size:8px}.hassle{min-height:852px;display:flex;flex-direction:column-reverse}.hassle-photo{height:385px}.hassle-copy{padding:69px 24%;text-align:center;min-height:466px}.hassle-inset{display:none}.hassle-copy>p{font-size:15px;line-height:1.5;margin:0 auto 37px}.hassle-copy em{font-size:38px}.hassle-copy .underlined-link{font-size:10px}.experience{min-height:100lvh;padding:24px 20px;display:flex;align-items:center;justify-content:center}.motif-frame{width:100%;min-height:calc(100lvh - 48px);justify-content:flex-start;padding:80px 16px 60px}.motif-frame h2{font-size:21px;margin:0;letter-spacing:.1em;white-space:nowrap}.motif-frame .underlined-link{font-size:11px;margin-top:auto;margin-bottom:10px}.markets{display:block;min-height:0;padding:80px 0 0;background-size:204px}.markets-intro h2{font-size:25px;margin-bottom:25px}.markets-intro .eyebrow{font-size:10px;margin-bottom:22px}.markets-intro .brand{width:157px}.enquiry{min-height:852px;padding:117px 38px}.enquiry h2{font-size:27px;margin-bottom:55px}.footer{min-height:852px;padding:64px 32px}.footer h2{font-size:27px;margin-bottom:54px}.footer .brand{width:163px}.footer p{font-size:13px}.footer small{font-size:11px}}
@media (min-width:1280px){.direction,.family,.hassle,.experience,.markets,.enquiry,.footer{min-height:832px}}
.direction .section-copy p{margin-top:22px}
@media (max-width:1279px){.direction .section-copy p{margin-top:16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.nav-overlay{transition:none}}
.deck>.ec-photo{transform:rotate(1.5deg);overflow:hidden;margin:0}.ec-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.brand-header{left:27%}
.family-copy,.markets{background-image:url("/assets/svg-src/svg-05.webp")}
.experience{background-image:linear-gradient(#0000003B,#0000003B),url("/assets/svg-src/svg-27.webp");background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
.experience{position:relative}
.frame-motif{--frame-side:103px;--frame-top:28px;--frame-bottom:28px;--frame-radius:63px;--frame-gap:8px;--frame-corner:72px;--frame-dash:8px;--frame-dash-cycle:14px;position:absolute;inset:0;pointer-events:none;z-index:1}.frame-corner{position:absolute;width:var(--frame-corner);height:var(--frame-corner)}.frame-corner path{stroke:#BFBEA6;stroke-width:1.5;stroke-dasharray:8 6;stroke-linecap:butt}.frame-corner--top-left{top:var(--frame-top);left:var(--frame-side)}.frame-corner--top-right{top:var(--frame-top);right:var(--frame-side)}.frame-corner--bottom-left{bottom:var(--frame-bottom);left:var(--frame-side)}.frame-corner--bottom-right{right:var(--frame-side);bottom:var(--frame-bottom)}.frame-run{position:absolute;background-repeat:repeat}.frame-run--top,.frame-run--bottom{height:1.5px;left:calc(var(--frame-side) + var(--frame-radius));right:calc(var(--frame-side) + var(--frame-radius));background-image:repeating-linear-gradient(90deg,#BFBEA6 0 var(--frame-dash),transparent var(--frame-dash) var(--frame-dash-cycle));background-size:var(--frame-dash-cycle) 100%}.frame-run--left,.frame-run--right{width:1.5px;top:calc(var(--frame-top) + var(--frame-radius));bottom:calc(var(--frame-bottom) + var(--frame-radius));background-image:repeating-linear-gradient(#BFBEA6 0 var(--frame-dash),transparent var(--frame-dash) var(--frame-dash-cycle));background-size:100% var(--frame-dash-cycle)}.frame-run--outer.frame-run--top{top:var(--frame-top)}.frame-run--outer.frame-run--right{right:var(--frame-side)}.frame-run--outer.frame-run--bottom{bottom:var(--frame-bottom)}.frame-run--outer.frame-run--left{left:var(--frame-side)}.frame-run--inner.frame-run--top{top:calc(var(--frame-top) + 6px);left:calc(var(--frame-side) + 71px);right:calc(var(--frame-side) + 71px)}.frame-run--inner.frame-run--right{right:calc(var(--frame-side) + 8px);top:calc(var(--frame-top) + 69px);bottom:calc(var(--frame-bottom) + 69px)}.frame-run--inner.frame-run--bottom{bottom:calc(var(--frame-bottom) + 6px);left:calc(var(--frame-side) + 71px);right:calc(var(--frame-side) + 71px)}.frame-run--inner.frame-run--left{left:calc(var(--frame-side) + 8px);top:calc(var(--frame-top) + 69px);bottom:calc(var(--frame-bottom) + 69px)}
.experience .motif-frame{position:relative;z-index:2}
.footer{background-image:linear-gradient(#243a6baa,#243a6baa),url("/assets/svg-src/svg-28.webp");background-position:center 48%}

@media (min-width:1280px){
  .hassle-photo img{object-position:center 20%}
  .hassle{height:832px;min-height:0;grid-template-rows:832px}
  .hassle-copy,.hassle-photo{height:832px;min-height:0}
  .experience{padding:29px 8%}
  .motif-frame{position:relative;width:100%;min-height:774px;justify-content:flex-start;padding:203px 48px 56px}
  .motif-frame h2{margin:0}
  .motif-frame .underlined-link{margin-top:auto}
  .edits-track{row-gap:7px}
  .footer{height:832px;min-height:0;display:flex;flex-direction:column;justify-content:space-between;padding:108px 25px 20px;background-image:linear-gradient(#243a6b80,#243a6b80),url("/assets/svg-src/svg-28.webp");background-size:auto,cover;background-position:center 48%,center 48%}
  .footer-headline,.footer-meta{width:100%;display:flex;flex-direction:column;align-items:center}
  .footer h2{margin:0}
  .footer .brand{margin:0}
  .footer-meta p{margin:28px 0 0}
  .footer-meta small{margin-top:40px}
}









@media (min-width:1280px){
.enquiry h2{margin-bottom:48px}.enquiry-embed{width:100%;max-width:432px;margin:0 auto}.enquiry-embed iframe{display:block;width:100%;border:0}








}
@media (max-width:1279px){
.enquiry{padding:92px 18px 60px}
.enquiry h2{margin-bottom:32px}








}
@media (max-width:1279px){.family{flex-direction:column;align-items:center;text-align:center;padding:151px 0 0;background-image:url("/assets/svg-src/svg-05-h.webp");background-size:auto 327px}.family-copy{display:contents}.family-copy h2{position:relative;left:1px;width:241px;margin:0 0 77px;font-size:20px;line-height:25px;letter-spacing:.2em}.family-copy h2 br{display:none}.family-photo{order:1;align-self:center;width:197px;height:257px;margin:0 auto 77px}.family-copy p,.family-copy .underlined-link{order:2}.family-copy p{position:relative;left:1px;width:231px;font-size:11px;line-height:14px;margin:0 0 34px}.family-copy .underlined-link{position:relative;left:1px;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14px;letter-spacing:.1em}.hassle{position:relative;display:block;height:852px;min-height:0}.hassle-photo{position:absolute;inset:0;height:auto;overflow:hidden}.hassle-photo img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}.hassle::after{content:"";position:absolute;left:0;right:0;top:65.02%;bottom:-2%;background:linear-gradient(180deg,#fff 32%,#000 100%);mix-blend-mode:multiply;pointer-events:none}.hassle-copy{position:absolute;left:67px;top:689px;width:224px;min-height:0;padding:0;background:none;text-align:left;z-index:1}.hassle-copy>p{max-width:none;font-size:11px;line-height:14px;margin:0 0 19px}.hassle-copy br{display:none}.hassle-copy em{font-family:var(--font-body);font-style:italic;font-weight:700;font-size:11px;line-height:14px}.hassle-copy .underlined-link{display:block;width:max-content;padding-bottom:1px;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14px;letter-spacing:.1em}.markets{display:block;height:100lvh;min-height:0;padding:0;overflow:hidden;background-image:url("/assets/svg-src/svg-05-h.webp");background-size:auto 327px}.markets-intro,.markets-media{position:static;width:auto}.markets-intro h2{position:absolute;top:86px;left:calc(50% - 110.5px);width:221px;margin:0;font-size:28px;line-height:30px;letter-spacing:.05em}.markets-intro .eyebrow{position:absolute;top:155px;left:calc(50% - 23.5px);width:47px;margin:0;font-size:16px;line-height:30px;letter-spacing:.1em}.markets-intro .brand{position:absolute;top:203px;left:calc(50% - 74.5px);width:149px;margin:0}.markets .market-names{position:absolute;top:319px;left:0;width:100%;height:30px;margin:0}.markets .market-name{font-size:28px;line-height:30px;letter-spacing:.05em;white-space:nowrap}.market-images{position:absolute;left:-1.781%;top:360px;bottom:0;width:103.053%;aspect-ratio:auto;overflow:hidden}.market-photo{inset:auto;left:0;top:1px;width:100%;height:calc(100% + 47px)}.markets .market-photo,.markets .market-name{opacity:0;transition:opacity .4s}.markets .market-photo.is-active,.markets .market-name.is-active{opacity:1}.footer{position:relative;display:block;height:852px;min-height:0;padding:0;overflow:hidden;background:var(--neel)}.footer::before{content:"";position:absolute;left:-10.687%;top:0;width:122.137%;height:100%;background:url("/assets/svg-src/svg-23.webp") center/cover no-repeat}.footer-headline,.footer-meta{position:absolute;inset:0;display:block;pointer-events:none}.footer-headline>*,.footer-meta>*{pointer-events:auto}.footer h2{position:absolute;top:147px;left:calc(50% - 129.5px);width:258px;margin:0;font-family:var(--font-body);font-weight:700;font-size:24px;line-height:31px;letter-spacing:normal}.footer .brand{position:absolute;top:700px;left:calc(50% - 76.5px);width:156.81px;margin:0}.footer p{position:absolute;top:781px;left:calc(50% - 56.5px);width:116px;margin:0;font-size:10px;line-height:13px}.footer p span{margin:0 8px}.footer p a{text-underline-offset:2px}.footer-social{display:flex;gap:7px;position:absolute;top:800px;left:calc(50% - 37.5px);margin:0;padding:0;list-style:none}.footer-social a{display:block;width:14px;height:14px;color:var(--sage)}.footer-social svg{display:block}.footer small{position:absolute;top:828px;left:calc(50% - 61.5px);width:125px;margin:0;font-size:7px;line-height:9px;color:#4766A9}}
@media (max-width:1279px){.frame-motif{--frame-side:25px;--frame-top:28px;--frame-bottom:28px;--frame-radius:63px;--frame-gap:8px;--frame-corner:72px;--frame-dash:5.76px;--frame-dash-cycle:10.08px}}

/* Navigation overlay choreography. The brand and close control stay visible for immediate focus. */
@media (prefers-reduced-motion:no-preference){
  .close-button{transition:color .18s ease-out,opacity .18s ease-out}
  
  

  

  

  
  
  
  
  
  

  
  
  
  
  
}

.deck{position:relative}
/* The three direction slides scroll as ordinary full-height slides: one
   continuous vertical travel, up on scroll down and back on scroll up. The
   depth comes from the layered parallax inside each slide, not from pinning. */
main>.deck{width:auto;aspect-ratio:auto;margin-bottom:0;isolation:auto}
main>.deck::before,main>.deck::after{content:none}
@media (max-width:1279px){.deck .direction{height:852px;min-height:0}}
@media (min-width:1280px){.deck .direction{height:832px;min-height:0}}

/* Interaction feedback remains available when motion is reduced. */
.menu-button:focus-visible,
.close-button:focus-visible,
.brand:focus-visible,
.site-header a:focus-visible,
.overlay-links a:focus-visible,
.footer a:focus-visible,
.underlined-link:focus-visible,
.work-card:focus-visible,
.view-all:focus-visible,
.edits-track:focus-visible{
  outline:2px solid var(--sage);
  outline-offset:4px;
}

.work-card:focus-visible{outline-color:#908D58}

.underlined-link{
  position:relative;
  border-bottom:0;
}

.underlined-link::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:currentColor;
  transform:scaleX(1);
  transform-origin:left;
  transition:height .18s ease-out;
}

.underlined-link:is(:hover,:focus-visible)::after{height:2px}

.site-header a,
.overlay-links a,
.footer a,
.brand,
.work-card,
.view-all{
  transition:color .18s ease-out,background-color .18s ease-out,opacity .18s ease-out;
}

.site-header a:is(:hover,:focus-visible),
.overlay-links a:is(:hover,:focus-visible),
.footer a:is(:hover,:focus-visible){
  color:#908D58;
}

.brand:is(:hover,:focus-visible){opacity:.82}

.work-card:is(:hover,:focus-visible){
  background-color:#908D58;
}

/* The View all card keeps its sage face on hover; keyboard users still get a ring. */
.view-all:focus-visible{outline:2px solid var(--neel);outline-offset:3px}

@media (max-width:1279px){
  .edits-track:focus-visible{outline-offset:-2px}
}

@media (prefers-reduced-motion:no-preference){
  .hero h1,
  .hero .eyebrow,
  .hero .underlined-link,
  .hero-note,
  .site-header .brand-header,
  .site-header .desktop-nav,
  .site-header .menu-button{animation:hero-copy-enter .65s ease-out both}

  .hero h1{animation-delay:0s}
  .hero .eyebrow{animation-delay:.1s}
  .hero .underlined-link{animation-delay:.2s}
  .hero-note{animation-delay:.3s}
  .site-header .brand-header{animation-delay:.05s}
  .site-header .desktop-nav,.site-header .menu-button{animation-delay:.15s}

  @keyframes hero-copy-enter{
    from{opacity:0;translate:0 24px}
    to{opacity:1;translate:0 0}
  }

  @supports (animation-timeline:view()){
    .edits{view-timeline-name:--edits-reveal;view-timeline-axis:block}

    .family-copy>h2,.family-copy>p,.family-copy>.underlined-link,
    .title-block>h2,.title-block>.eyebrow,
    .hassle-copy>p,.hassle-copy>.underlined-link,
    .motif-frame>h2,
    .markets-intro>h2,.markets-intro>.eyebrow,.markets-intro>.brand,
    .enquiry>h2,
    .family-photo img,.hassle-inset,.hassle-photo{
      animation:section-reveal .6s linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%;
    }

    .family-copy>p{animation-delay:.12s}
    .family-copy>.underlined-link{animation-delay:.24s}
    .family-photo img{animation-delay:.1s}

    .title-block>h2,.title-block>.eyebrow,.edits-track{animation-timeline:--edits-reveal;animation-range:entry 0% cover 30%}
    .title-block>.eyebrow{animation-delay:.12s}
    .edits-track{animation:section-reveal .6s linear both;animation-delay:.24s}

    .hassle-copy>.underlined-link{animation-delay:.12s}
    .hassle-inset,.hassle-photo{animation-delay:.1s}

    .markets-intro>.eyebrow{animation-delay:.12s}
    .markets-intro>.brand{animation-delay:.24s}

    


    .edits .title-block{animation:section-reveal .6s linear both;animation-timeline:--edits-reveal;animation-range:entry 0% cover 20%}
    .edits-track>.edit-card{
      animation:section-reveal .6s linear both;
      animation-timeline:--edits-reveal;
      animation-range:entry 0% cover 30%;
    }

    .edits-track>.edit-card:nth-child(1){animation-delay:0s}
    .edits-track>.edit-card:nth-child(2){animation-delay:.12s}
    .edits-track>.edit-card:nth-child(3){animation-delay:.24s}
    .edits-track>.edit-card:nth-child(4){animation-delay:.36s}
    .edits-track>.edit-card:nth-child(5){animation-delay:.48s}
    .edits-track>.view-all{animation:section-reveal .6s linear both;animation-timeline:--edits-reveal;animation-range:entry 0% cover 30%;animation-delay:.6s}

    @keyframes section-reveal{
      from{opacity:0;translate:0 24px}
      to{opacity:1;translate:0 0}
    }
  }
}


/* Markets sticky sequence — declared OUTSIDE any prefers-reduced-motion guard.
   These slot changes carry CONTENT (five different markets), not decoration, so a
   reduced-motion user must still get all five. Only the cross-fade softness is motion,
   and an opacity fade is not a vestibular trigger. */
/* Without scroll-driven animation the crossfade cannot run, so the 500vh pin would be four screens of a
   frozen frame; the arrows carry the section instead. */
@supports not (animation-timeline:view()){.markets-scroll{height:auto}.markets{position:relative}}
@supports (animation-timeline:view()){
  /* Each market owns one fifth of the pin, fully visible, with a short cross-dissolve at
     each boundary. Keyframed against the plain view timeline: Chrome mis-resolves
     'contain A% B%' end-points for this subject (a sticky child), which left two
     markets at full opacity for ~40% of the scroll. Edges measured 2026-08-29. */
  @keyframes market-slot-1{0%,28.5%{opacity:1}31.5%,100%{opacity:0}}
  @keyframes market-slot-2{0%,28.5%{opacity:0}31.5%,41.8%{opacity:1}44.8%,100%{opacity:0}}
  @keyframes market-slot-3{0%,41.8%{opacity:0}44.8%,55.2%{opacity:1}58.2%,100%{opacity:0}}
  @keyframes market-slot-4{0%,55.2%{opacity:0}58.2%,68.5%{opacity:1}71.5%,100%{opacity:0}}
  @keyframes market-slot-5{0%,68.5%{opacity:0}71.5%,100%{opacity:1}}
  .markets-scroll{view-timeline-name:--markets-seq;view-timeline-axis:block}
  .market-photo,.market-name{animation:market-slot-1 linear both;animation-timeline:--markets-seq}
  .market-photo-2,.market-name-2{animation-name:market-slot-2}
  .market-photo-3,.market-name-3{animation-name:market-slot-3}
  .market-photo-4,.market-name-4{animation-name:market-slot-4}
  .market-photo-5,.market-name-5{animation-name:market-slot-5}
}
@media (min-width:1280px){
.site-header{width:100%;max-width:none;left:0;transform:none;height:181px;padding:0}
.brand-header{position:absolute;left:20.781%;top:57px;width:13.155%;transform:none}
.brand-header img{width:100%;height:auto;display:block}
.desktop-nav{position:absolute;left:51.016%;top:77px;margin:0;gap:27.5px}
.desktop-nav a{width:137px;text-align:center;font-family:var(--font-body);font-weight:700;font-size:18px;line-height:23px;letter-spacing:.1em}
.menu-button{position:absolute;left:91.875%;top:78px;width:26.39px;height:25.6px;margin:0;padding:0;gap:9.8px;align-content:start}
.menu-button span{height:2px;width:26.39px}
.hero-copy{left:27.734%;top:40.024%;transform:translateX(-50%);width:560px;text-align:center}
.hero-copy h1{font-size:70px;line-height:50px;letter-spacing:.05em;margin:0}
.hero-copy .eyebrow{font-size:18px;line-height:18px;letter-spacing:.1em;margin:17px 0 0}
.hero-copy .underlined-link{margin-top:117px;font-family:var(--font-body);font-weight:700;font-size:18px;line-height:23px;letter-spacing:.1em;padding-bottom:3px}
.hero-copy .underlined-link::after{transform:scaleX(1);bottom:6px}
.hero-note{left:27.344%;right:auto;top:86.538%;bottom:auto;transform:translateX(-50%);width:448px;text-align:center;font-family:var(--font-body);font-weight:400;font-size:18px;line-height:23px;letter-spacing:normal}
.enquiry{padding:114px 25px 24px}
.enquiry h2{font-size:40px;line-height:35px;letter-spacing:.05em}
}
.section-limit{max-width:none}
@media (min-width:1280px){
.title-block h2{font-size:44px;line-height:40px;margin-bottom:8px}
.title-block .eyebrow{font-size:16px}
.title-block .eyebrow{margin-bottom:105px}
.edits-track{display:flex;gap:36px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 48px 23px;scrollbar-width:none}.edits-track::-webkit-scrollbar{display:none}.edit-card,.view-all{flex:0 0 320px;scroll-snap-align:center}
.edit-card .deck{margin-bottom:56px}
.edit-card h3{font-size:17px;line-height:20px;letter-spacing:.16em;margin-bottom:19px}
.edit-card p{font-size:8.5px;line-height:1.35;letter-spacing:.27em;text-transform:uppercase}
.view-all{margin-top:61px}
}
@media (min-width:1280px){
.footer{padding:115px 25px 17px;background-image:url("/assets/svg-src/svg-28.webp");background-size:123.828% auto;background-position:-11.875vw -4.6875vw;background-repeat:no-repeat}
.footer h2{font-family:var(--font-body);font-weight:700;font-size:30px;line-height:39px;letter-spacing:normal;max-width:325px}
.footer .brand{width:190.48px}
.footer-meta p{margin-top:28px;font-size:18px;line-height:23px}
.footer p span{margin:0 8px}
.footer p a{text-underline-offset:2px}
.footer-meta small{margin-top:45px;font-size:10px;line-height:13px;color:#4766A9}
}

.ab{position:relative;height:832px;min-height:0;overflow:hidden;background:var(--neel)}
.ph{border:1px dashed color-mix(in srgb,var(--sage) 55%,transparent);display:grid;place-items:center;text-align:center;font-family:var(--font-body);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--sage) 70%,transparent)}

@media (min-width:1280px){
  .about-header{position:absolute;color:#fff}
  .about-header .brand-header{left:50%;width:13.155%;transform:translateX(-50%)}
  .logo-white{filter:brightness(0) invert(1)}
  .ab-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
  .ab-vignette{position:absolute;left:-3.594%;width:110.625%;height:587px;background:linear-gradient(180deg,#FFF 32%,#000 100%);mix-blend-mode:multiply;pointer-events:none}
  .ab-vignette-bottom{top:360px}
  .ab-vignette-top{top:-66px;width:107.188%;height:369px;transform:rotate(180deg)}
  .ab-hero h1{position:absolute;top:476px;left:50%;width:569px;transform:translateX(-50%);margin:0;color:#fff;font-family:var(--font-display);font-weight:400;font-size:64px;line-height:50px;letter-spacing:.05em;text-align:center}

  .ab-intro-figure{position:absolute;left:-1.797%;top:-42px;width:51.797%;height:901px;overflow:hidden}
  .ab-intro-figure img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block}
  .ab-intro-copy{position:absolute;top:177px;left:59.297%;width:31.172%;color:var(--sage)}
  .ab-intro-copy h2{position:absolute;left:0;margin:0;font-family:var(--font-display);font-weight:400;font-size:23.26px;line-height:42px;letter-spacing:.05em}
  .ab-intro-copy h2:nth-of-type(1){top:0}
  .ab-intro-copy h2:nth-of-type(2){top:197px}
  .ab-intro-copy p{position:absolute;left:0;width:100%;margin:0;font-family:var(--font-body);font-size:18.276px;line-height:24px;text-align:justify}
  .ab-intro-copy p:nth-of-type(1){top:50px}
  .ab-intro-copy p:nth-of-type(2){top:247.3px}
  .ab-intro-copy .ab-cta{position:absolute;top:380px;left:.234vw;width:392.1px;height:66.46px;border:1.33px solid var(--sage);display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:18.276px;line-height:24px;letter-spacing:.1em;text-align:center}
  .ab-intro-copy .ab-work{position:absolute;top:456.43px;left:.234vw;width:392.1px;font-family:var(--font-body);font-size:18.276px;line-height:24px;letter-spacing:.1em;text-align:center;text-decoration:underline;text-underline-offset:3px}

  .ab-belief{height:auto;min-height:100vh;overflow:visible;display:flex;align-items:flex-start;justify-content:center;background:var(--neel)}
  .ab-belief-copy{position:relative;width:min(1200px,calc(100% - 64px));padding:160px 0 clamp(6rem,22svh,14rem);color:var(--sage);text-align:left}
  .ab-belief-copy h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.2;letter-spacing:.28em;text-align:center}
  .ab-belief-paragraph{width:min(18ch,calc(100vw - 72px));max-width:18ch;margin:64px auto 0;font-family:var(--font-body);font-weight:700;font-size:clamp(32px,6.4vw,52px);line-height:1.63}
  .ab-belief-paragraph .word{display:inline;color:rgba(191,190,166,.32);transition:color .25s ease}
  .ab-belief-paragraph .word.is-lit{color:var(--sage)}
  @media (prefers-reduced-motion:reduce){.ab-belief-paragraph .word{color:var(--sage)}}

  .ab-founders>h2{position:absolute;top:99px;left:50%;width:730px;transform:translateX(-50%);margin:0;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:62.8px;line-height:78px;letter-spacing:.05em;text-align:center}
  .ab-logo-strip{position:absolute;top:648px;left:15.097%;width:36.6%;height:42.03px}
  .fl{position:absolute;top:0;display:block;object-fit:cover;border-radius:3.7px}
  .fl-1{left:0;width:8.707%;height:40.79px}
  .fl-2{left:10.288%;width:21.275%;height:42.03px;object-position:50% 47.6%}
  .fl-3{left:33.244%;width:9.249%;height:42.03px;border-radius:0}
  .fl-4{left:44.325%;width:17.081%;height:42.03px}
  .fl-5{left:63.061%;width:8.707%;height:40.79px}
  .fl-6{left:73.351%;width:8.903%;height:41.10px}
  .fl-7{left:83.894%;width:16.106%;height:42.00px}
  .ab-founders-copy{position:absolute;top:245px;left:56.541%;width:421px;color:var(--sage)}
  .ab-founders-copy h3{width:421px;margin:0;font-family:var(--font-display);font-weight:400;font-size:32.625px;line-height:34px;letter-spacing:.05em}
  .ab-founders-copy p{position:absolute;top:127px;width:412px;margin:0;font-family:var(--font-body);font-size:13.52px;line-height:18px;text-align:justify}
  .ab-founders-copy .ab-cta{position:absolute;top:366px;left:6.25%;width:316px;height:53.56px;border:1.07px solid var(--sage);display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:14.73px;line-height:19px;letter-spacing:.1em;text-align:center}
  .ab-founders-copy .ab-work{position:absolute;top:427.59px;left:6.25%;width:316px;font-family:var(--font-body);font-size:14.73px;line-height:19px;letter-spacing:.1em;text-align:center;text-decoration:underline;text-underline-offset:3px}
}

.cr{position:relative;min-height:832px;overflow:hidden;background:var(--neel)}
.cr-hero{height:832px}

.cr-hero-figure{position:absolute;left:17.5%;top:215px;width:26.5625%;height:469px;overflow:hidden}
.cr-hero-figure img{position:absolute;left:0;top:-20.987%;width:100%;height:121.066%;display:block}

.cr-hero h1{position:absolute;left:52.109%;top:235px;width:424px;margin:0;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:51.862px;line-height:45.38px;letter-spacing:2.593px;text-align:left}
.cr-hero-copy{position:absolute;left:52.109%;width:400px;margin:0;color:var(--sage);font-family:var(--font-body);font-weight:400;font-size:18px;line-height:23.44px;text-align:left}
.cr-hero-copy{top:455px}
.cr-hero-copy-2{top:525px}
.cr-hero-link{position:absolute;left:52.109%;top:638px;width:369px;color:var(--sage);font-family:var(--font-body);font-weight:700;font-size:18px;line-height:23.44px;letter-spacing:1.8px;text-decoration:underline;text-underline-offset:5px}

.cr-roles{height:auto;padding:93px 0 339px}
.cr-roles>h2{position:static;width:437px;margin:0 auto 20px;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:50px;line-height:40px;letter-spacing:2.5px;text-align:center}
.cr-lede,.cr-outro{position:static;width:529px;margin:0 auto;color:var(--sage);font-family:var(--font-body);font-weight:400;font-size:25.103px;line-height:32.68px;text-align:center}
.cr-lede{margin-bottom:118.64px}
.cr-outro{margin-bottom:20.28px}

.cr-list{position:static;width:100%;margin:0 0 100px;padding:0;list-style:none}
.cr-card{position:static;display:flex;flex-wrap:wrap;align-content:flex-end;gap:6.77px 3px;width:40.781%;max-width:522px;min-height:105px;margin:0 auto 11px;padding:0 17px 16px;background:var(--sage)}
.cr-card:last-child{margin-bottom:0}
.cr-card{position:relative}
.cr-card-link{color:inherit;text-decoration:none}
.cr-card-link::after{content:"";position:absolute;inset:0}
.cr-card:has(.cr-card-link):hover{filter:brightness(1.04)}
.cr-card h3{position:static;flex:0 0 100%;max-width:244px;min-width:0;margin:0 calc(100% - 244px) 0 0;color:var(--neel);font-family:var(--font-body);font-weight:700;font-size:14px;line-height:18.23px;text-transform:none;letter-spacing:normal}

.cr-pill{position:static;text-transform:uppercase;height:16px;padding:0 12px;border-radius:80px;background:#908D58;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:10px;line-height:16px;letter-spacing:.5px;text-align:center;white-space:nowrap}

.cr-apply{position:static;width:43.047%;max-width:551px;height:auto;margin:0 auto;background:#4766A9;display:block;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:14px;letter-spacing:.15em;text-align:center;padding:0}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .edit-card .deck::before,.edit-card .deck::after,.edit-card .deck>.ec-photo{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  .edit-card:hover .deck::before,.edit-card:focus-within .deck::before{transform:rotate(-7deg) translate(-6px,-2px)}
  .edit-card:hover .deck::after,.edit-card:focus-within .deck::after{transform:rotate(7deg) translate(6px,-2px)}
  /* Only the top card lifts on hover/focus; the scattered cards behind stay put. */
  .edit-card:hover .deck>.ec-photo[data-pos="0"],.edit-card:focus-within .deck>.ec-photo[data-pos="0"]{transform:rotate(0deg) translateY(-6px)}
}

@media (max-width:1279px){
  /* ---------- /about ---------- */
  .ab{height:852px}

  .ab-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
  .ab-vignette{position:absolute;left:-4.326%;width:108.397%;height:526px;background:linear-gradient(180deg,#FFF 32%,#000 100%);mix-blend-mode:multiply;pointer-events:none}
  .ab-vignette-bottom{top:439px}
  .ab-vignette-top{left:-4.071%;top:-158px;height:538px;transform:rotate(180deg)}
  .ab-hero h1{position:absolute;left:15.013%;top:159px;width:69.975%;margin:0;color:#fff;font-family:var(--font-display);font-weight:400;font-size:42px;line-height:30px;letter-spacing:.05em;text-align:center}

  .ab-intro-figure{position:absolute;left:-26.463%;top:0;width:139.949%;height:460px;overflow:hidden}
  .ab-intro-figure img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
  .ab-intro-copy{position:absolute;left:15.776%;top:497px;width:68.448%;color:var(--sage)}
  .ab-intro-copy h2{position:absolute;left:0;margin:0;font-family:var(--font-display);font-weight:400;font-size:14px;line-height:25px;letter-spacing:.05em}
  .ab-intro-copy h2:nth-of-type(1){top:0}
  .ab-intro-copy h2:nth-of-type(2){top:122px}
  .ab-intro-copy p{position:absolute;left:0;width:100%;margin:0;font-family:var(--font-body);font-size:11px;line-height:14.3px;text-align:justify}
  .ab-intro-copy p:nth-of-type(1){top:30px}
  .ab-intro-copy p:nth-of-type(2){top:152px}
  .ab-intro-copy .ab-cta{position:absolute;left:6.32%;top:223px;width:236px;height:40px;border:1px solid var(--sage);display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14.3px;letter-spacing:.1em;text-align:center}
  .ab-intro-copy .ab-work{position:absolute;left:6.32%;top:269px;width:236px;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14.3px;letter-spacing:.1em;text-align:center;text-decoration:underline;text-underline-offset:3px}

  .ab-belief{height:auto;min-height:100vh;overflow:visible;display:flex;align-items:flex-start;justify-content:center;background:var(--neel)}
  .ab-belief-copy{position:relative;width:calc(100% - 72px);padding:112px 0 clamp(6rem,22svh,14rem);color:var(--sage);text-align:left}
  .ab-belief-copy h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(20px,6vw,28px);line-height:1.2;letter-spacing:.28em;text-align:center}
  .ab-belief-paragraph{width:100%;max-width:18ch;margin:32px auto 0;font-family:var(--font-body);font-weight:700;font-size:28.6px;line-height:1.68}
  .ab-belief-paragraph .word{display:inline;color:rgba(191,190,166,.32);transition:color .25s ease}
  .ab-belief-paragraph .word.is-lit{color:var(--sage)}
  @media (prefers-reduced-motion:reduce){.ab-belief-paragraph .word{color:var(--sage)}}

  .ab-founders>h2{position:absolute;left:50%;top:55px;width:70.992%;transform:translateX(-50%);margin:0;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:24px;line-height:30px;letter-spacing:.05em;text-align:center}
  .ab-founders-copy{position:absolute;left:12.468%;top:381px;width:75.064%;color:var(--sage)}
  .ab-founders-copy h3{width:100%;margin:0;font-family:var(--font-display);font-weight:400;font-size:24px;line-height:25px;letter-spacing:.05em;text-align:center}
  .ab-founders-copy p{position:absolute;left:0;top:94px;width:100%;margin:0;font-family:var(--font-body);font-size:10px;line-height:13px;text-align:justify}
  .ab-founders-copy .ab-cta{position:absolute;left:10.169%;top:275px;width:236px;height:40px;border:1px solid var(--sage);display:grid;place-items:center;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14.3px;letter-spacing:.1em;text-align:center}
  .ab-founders-copy .ab-work{position:absolute;left:10.169%;top:321px;width:236px;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14.3px;letter-spacing:.1em;text-align:center;text-decoration:underline;text-underline-offset:3px}

  .ab-logo-strip{position:absolute;left:1.781%;top:762px;width:96.437%;height:34px}
  .fl{position:absolute;top:0;display:block;object-fit:cover;border-radius:3px}
  .fl-1{left:0;width:8.707%;height:33px}
  .fl-2{left:10.29%;width:21.372%;height:34px}
  .fl-3{left:33.245%;width:9.499%;height:34px;border-radius:0}
  .fl-4{left:44.327%;width:17.150%;height:34px}
  .fl-5{left:63.061%;width:8.707%;height:33px}
  .fl-6{left:73.351%;width:8.971%;height:33px}
  .fl-7{left:83.905%;width:16.095%;height:34px}

  /* ---------- /careers ---------- */
  .cr{min-height:852px}
  .cr-hero{height:852px}
  .cr-hero-figure{left:-13.232%;top:0;width:130.025%;height:852px}
  .cr-hero-figure img{left:0;top:0;width:100%;height:100%;object-fit:cover}
  .cr-hero h1{left:15.013%;top:153px;width:70.229%;font-size:34px;line-height:30px;letter-spacing:1.7px;text-align:center}
  .cr-hero-link{left:19.339%;top:298px;width:61.069%;font-size:11px;line-height:14.3px;letter-spacing:1.1px;text-align:center}
  .cr-hero-copy{left:21.883%;top:710px;width:56.234%;font-size:10px;line-height:13px;text-align:center}
  .cr-hero-copy-2{display:none}

  .cr-roles{height:auto;padding:62px 0 180px}
  .cr-roles>h2{width:71.756%;margin:0 0 3px 14.249%;font-size:28px;line-height:25px;letter-spacing:1.4px;text-align:left}
  .cr-lede{width:71.756%;margin:0 0 21.4px 14.249%;font-size:11px;line-height:14.3px;text-align:left}
  .cr-outro{width:71.756%;margin:0 0 26.1px 14.249%;font-size:11px;line-height:14.3px;text-align:left}
  .cr-list{margin-bottom:109px}
  .cr-card{width:71.756%;max-width:none;margin-right:0;margin-left:14.249%}
  .cr-apply{width:70.992%;margin-right:0;margin-left:15.013%}
}

/* CTA affordance — make the /about calls to action real, underlined links. */
.ab-cta,.ab-work{cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){
  .ab-cta:hover,.ab-work:hover{text-decoration-thickness:2px}
  .ab-cta:hover{background:color-mix(in srgb,var(--sage) 12%,transparent)}
}
.ab-cta:focus-visible,.ab-work:focus-visible{outline:2px solid #908D58;outline-offset:3px}

@media (max-width:1279px){
  /* Mobile header to the Figma mobile hero frames: burger left x=28, logo centred
     at x=137 (118x46), y=33. Overrides the unconditional .brand-header{left:27%}. */
  .site-header{padding:0 28px}
  .brand-header{left:50%;top:33px;width:118px;transform:translateX(-50%)}
  .menu-button{width:19px;height:20px;margin:47px 0 0;padding:0;gap:7px;align-self:flex-start}
  .menu-button span{width:19px;height:2px;min-height:2px}
}

@media (min-width:1280px){
  /* .direction stranded its content above 1280 — fixed 273px photo + 439px copy in a
     full-bleed section, so fill fell 66% -> 42% at 2000px. Same clamp pattern as
     --edit-col. Cap 407px keeps 352*k + 2*102*k within the section's fixed 832px. */
  .direction{--dir-col:clamp(315px,24.609375vw,410px);gap:calc(var(--dir-col)*132/315);padding:calc(var(--dir-col)*102/315)}
  .direction .para-frame{width:var(--dir-col);height:calc(var(--dir-col)*390/300)}
  
  .direction .section-copy{max-width:calc(var(--dir-col)*439/275)}
  .direction .section-copy h2{font-size:calc(var(--dir-col)*34/275)}
  .direction .section-copy p{font-size:calc(var(--dir-col)*19/275)}
  .direction .section-copy .underlined-link{font-size:calc(var(--dir-col)*17/275)}
}

.deck-card{position:absolute;inset:0;z-index:1}
/* Scattered stack: each card sits slightly offset and rotated so the deck
   reads as a small pile of photographs rather than a single image. */
.deck-card[data-pos="0"]{z-index:4;transform:rotate(0deg) translate(0,0)}
.deck-card[data-pos="1"]{z-index:3;transform:rotate(-2.5deg) translate(-3%,2%) scale(.97)}
.deck-card[data-pos="2"]{z-index:2;transform:rotate(2deg) translate(2%,3%) scale(.95)}
.deck-card[data-pos="3"]{z-index:1;transform:rotate(-1deg) translate(-1%,4%) scale(.93)}
.edit-card .deck{cursor:pointer}
.deck-card.no-anim{transition:none!important}

@media (prefers-reduced-motion:no-preference){
  .deck-card{transition:transform .34s cubic-bezier(.33,.78,.4,1)}
  /* phase 1 — the leaving card lifts clear of the stack, staying opaque and on top */
  .deck.is-out .deck-card[data-tuck="1"]{transform:rotate(10deg) translate(54%,5%) scale(.93);z-index:5}
}

/* the hover fan must only lift the visible top card, not the whole stack */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .edit-card:hover .deck-card[data-pos="0"],.edit-card:focus-within .deck-card[data-pos="0"]{transform:rotate(0deg) translateY(-6px)}
  .deck.is-out .deck-card[data-tuck="1"]{transform:rotate(10deg) translate(54%,5%) scale(.93)}
}

/* Family section, desktop: copy centred to the Figma frame (frame 12).
   Positions are the design's own: h2 441w at 272, copy 397w at 414, CTA at 532,
   the block centred on 949.5 within the right half (10.5px left of its centre). */
@media (min-width:1280px){
  .family{height:832px;min-height:0;grid-template-rows:832px}
  .family-copy{justify-content:flex-start;text-align:center;padding:272px 21px 0 0}
  .family-copy h2{width:441px;margin:0;font-size:40px;line-height:40px;letter-spacing:.2em}
  .family-copy p{width:397px;max-width:none;margin:62px 0 0;font-size:18px;line-height:23px}
  .family-copy .underlined-link{margin-top:49px;font-family:var(--font-body);font-weight:700;font-size:18px;line-height:23px;letter-spacing:.1em}
}

/* Hassle section, desktop: to the Figma frame (frame 15) and the d-05 render.
   Inset 281x281 at (168,188), copy 373w centred at 531, CTA at 648, all centred
   on 308.5 within the left column; "For others." is inline bold italic, as in
   the render and on mobile - not the display script. */
@media (min-width:1280px){
  .hassle-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:188px 23px 0 0}
  .hassle-inset{display:block;width:281px;height:281px;margin:0}
  .hassle-copy>p{width:373px;max-width:none;margin:63px 0 0;font-size:18px;line-height:23px}
  .hassle-copy>p br:last-of-type{display:none}
  .hassle-copy em{font-family:var(--font-body);font-style:italic;font-weight:700;font-size:18px;line-height:23px}
  .hassle-copy .underlined-link{margin-top:49px;padding-bottom:0;font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.15;letter-spacing:.1em}
}

/* Experience section, desktop: the design's two multiply vignettes and text
   shadow, which is what makes the copy - the CTA especially - read against the
   courtyard. Positions per frame 15; the frame's own dashed motif is unchanged. */
@media (min-width:1280px){
  .experience{clip-path:inset(0);isolation:isolate;background-image:url("/assets/svg-src/svg-27.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
  .experience::before,.experience::after{content:"";position:absolute;background:linear-gradient(180deg,#FFFFFF 32%,#000000 100%);mix-blend-mode:multiply;pointer-events:none;z-index:1}
  .experience::before{left:0;right:0;top:-15.14%;bottom:40.62%;transform:rotate(180deg)}
  .experience::after{left:0;right:0;top:54.93%;bottom:-26.32%}
  .motif-frame{padding:199px 48px 52px}
  .motif-frame h2{position:relative;left:-18px;font-size:40px;line-height:40px;letter-spacing:normal;text-shadow:0 4px 4px rgba(0,0,0,.25)}
  .motif-frame .underlined-link{position:relative;left:12px;font-family:var(--font-body);font-weight:700;font-size:20px;line-height:26px;letter-spacing:.1em;text-shadow:0 4px 4px rgba(0,0,0,.25)}
  .motif-frame .underlined-link::after{display:none}
  .motif-frame .underlined-link>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
  .motif-frame .underlined-link:is(:hover,:focus-visible)>span{text-decoration-thickness:2px}
}

/* Markets photo, desktop: the design's 405x492 portrait frame (group 266) with the
   image 405x539 inside it at top 1 - the same 47px overflow the mobile frame uses.
   The build had a square frame. */
@media (min-width:1280px){
  .markets-media{position:relative;left:55px;width:405px}
  .market-images{aspect-ratio:auto;height:492px;overflow:hidden}
  .market-photo{inset:auto;left:0;top:1px;width:100%;height:calc(100% + 47px);object-fit:cover}
}

/* Footer, desktop: to the Figma frame (frame 19). Logo 635, links 736,
   social icons 22px at 768 on a 33px pitch, copyright 806. */
@media (min-width:1280px){
  .footer{padding:115px 25px 13px}
  .footer-meta p{margin-top:27.5px}
  .footer-social{display:flex;gap:11px;margin:9px 0 0;padding:0;list-style:none}
  .footer-social a{display:block;width:22px;height:22px;color:var(--sage)}
  .footer-social svg{display:block;width:100%;height:100%}
  .footer-meta small{margin-top:16px}
}

/* The Tally form's own text colour is light, built for the navy section, which is
   now what the enquiry section is at every width. The embed therefore needs no panel
   of its own; the radius and padding only inset it from the section edges. */
@media (max-width:1279px){
  .enquiry-embed{border-radius:8px;padding:18px 14px}
}

/* Deck end panel (Figma frame 14): after the last photo the card turns over to a
   sage panel with "View all" and a circle arrow, centred. Sized from the design's
   289px-wide card, so it scales with the deck at both breakpoints. */
.deck-end{background:var(--sage);color:var(--neel);display:grid;place-items:center;transform:rotate(1.5deg)}
.deck-end-link{display:inline-flex;align-items:center;gap:7.3px;font-family:var(--font-display);font-size:14.6px;line-height:20px;letter-spacing:normal;text-transform:none;color:inherit;text-decoration:none}
.deck-end-arrow{width:14.6px;height:14.6px;flex:0 0 auto}
@media (min-width:1280px){
  .deck-end-link{gap:9px;font-size:18px;line-height:22px}
  .deck-end-arrow{width:18px;height:18px}
}

.cr-apply iframe{display:block;width:100%;border:0}

/* Experience section, mobile: the owner's portrait courtyard photo (612x1326,
   the 393x852 frame's ratio) replaces the landscape desktop crop. Desktop keeps
   svg-27 and its vignettes via its own min-width:1280px rule. */
@media (max-width:1279px){
  .experience{background-image:linear-gradient(#0000003B,#0000003B),url("/assets/img/experience-mobile.jpg")}
}

/* Menu overlay, desktop: Frame 51. x as % of the 1280 frame so wider viewports
   scale; y and type in px. Four links with three separators between them, two
   sage squares. Careers and the Curated-edits link leave the desktop menu (the
   latter becomes the second square); both stay in the mobile menu. */
@media (min-width:1280px){
  .nav-overlay{padding:0}
  .overlay-brand{left:50%;top:58px;transform:translateX(-50%);width:13.155%}
  .close-button{left:91.094%;right:auto;top:67px;width:33px;height:33px;padding:0;font-size:0;line-height:0}
  .close-button::before,.close-button::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:var(--sage);transform:rotate(45deg)}
  .close-button::after{transform:rotate(-45deg)}
  .overlay-inner{display:block;min-height:0;padding:0}
  .overlay-links{position:absolute;left:10.078%;top:245px;width:25.313%;border:0}
  .overlay-links a{position:relative;display:block;height:28px;margin:0 0 74px;padding:0;border:0;font-size:28px;line-height:25px;letter-spacing:.15em;text-align:center}
  .overlay-links a:last-child{margin-bottom:0}
  .overlay-links a[href$="#edits"],.overlay-links a[href$="careers.html"]{display:none}
  .overlay-links a+a::before{content:"";position:absolute;left:4.321%;width:90.185%;top:-37px;border-top:.8px solid #4766A9}
  .work-card,.work-card--edits{position:absolute;top:245px;left:44.219%;width:22.266%;aspect-ratio:1;margin:0;display:block;padding:14.844% 2.109% 0 2.1875%;font-size:37.89px;line-height:27px;letter-spacing:.05em;text-align:left}
  .work-card--edits{left:69.219%}
  .work-card span{display:none}
}
@media (max-width:1279px){.work-card--edits{display:none}}


/* Header plus, mobile: an 18px sage cross at the right of the bar that jumps to
   the enquiry form. Desktop already carries "Get started" in the nav, so it is
   mobile-only. Geometry per the 393 frame: 18x18 at x346 / y47, strokes 1.5px. */
.header-plus{display:none}
@media (max-width:1279px){
  .header-plus{display:block;position:absolute;right:29px;top:47px;width:18px;height:18px;color:var(--sage)}
  .header-plus::before,.header-plus::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:currentColor}
  .header-plus::after{transform:rotate(90deg)}
}

/* Hero copy, mobile: pinned to the 393 frame (iPhone 16 - 109). The block used
   flow layout under a percentage top, so every gap drifted with font metrics;
   each line now sits at its own frame coordinate. The CTA takes the design's
   body-bold + text underline, so the rule is on the span, not a 240px border. */
@media (max-width:1279px){
  .hero-copy{position:absolute;inset:0;width:100%;padding:0;transform:none;text-align:center}
  .hero-copy h1{position:absolute;top:472px;left:calc(50% - 114.5px);width:236px;margin:0;font-size:42px;line-height:30px;letter-spacing:.05em;white-space:nowrap}
  .hero-copy .eyebrow{position:absolute;top:544px;left:calc(50% - 116.5px);width:240px;margin:0;font-size:11px;line-height:11px;letter-spacing:.1em}
  .hero-copy .underlined-link{position:absolute;top:659px;left:calc(50% - 120.5px);width:240px;margin:0;padding:0;border-bottom:0;display:block;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14px;letter-spacing:.1em}
  .hero-copy .underlined-link::after{display:none}
  .hero-copy .underlined-link>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
  .hero-note{top:774px;bottom:auto;left:calc(50% - 142.5px);right:auto;width:285px;margin:0;font-size:11px;line-height:14px}
}

/* Deck end card: the designer's maroon consultation panel (Frame 4) in place of
   the sage View-all panel. Positions are fractions of the 289x406 card so they
   hold at both deck sizes; type scales off --edit-col on desktop as elsewhere.
   The grid's own View-all cell is untouched. */
.deck-end{background:var(--mehendi);color:var(--sage);display:block}
.deck-end .deck-end-copy{position:absolute;top:36.453%;left:50%;width:77.855%;transform:translateX(-50%);margin:0;font-family:var(--font-display);font-weight:400;font-size:14.6px;line-height:18.3px;letter-spacing:normal;text-transform:none;text-align:center}
.deck-end-cta{position:absolute;top:60.345%;left:50%;width:78.547%;transform:translateX(-50%);color:inherit;font-family:var(--font-body);font-weight:700;font-size:10px;line-height:12.8px;letter-spacing:.1em;text-transform:uppercase;text-align:center;text-decoration:none}
.deck-end-cta>span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:1280px){
  .deck-end .deck-end-copy{font-size:18px;line-height:22px;letter-spacing:normal;text-transform:none}
  .deck-end-cta{font-size:12px;line-height:16px}
}

/* Menu overlay, mobile: iPhone 16 - 110. Close becomes an X at the LEFT where the
    hamburger sits, the header's plus stays at the right, and the six links are
    centred vertically in the space below the logo. Hairlines sit between links
    (not under the last). The Work-with-Parampara card is not in this frame. */
@media (max-width:1279px){
  .nav-overlay{padding:80px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .overlay-brand{left:50%;top:33px;transform:translateX(-50%);width:118px}
  .close-button{left:26px;right:auto;top:43px;width:18px;height:18px;padding:0;font-size:0;line-height:0}
  .close-button::before,.close-button::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;background:var(--sage);transform:rotate(45deg)}
  .close-button::after{transform:rotate(-45deg)}
  .overlay-inner{display:block;min-height:0;padding:0;width:100%;margin:0;text-align:center}
  .overlay-links{position:static;width:324px;margin:0 auto;border:0}
  .overlay-links a{position:relative;display:block;height:28px;margin:0 0 44px;padding:0;border:0;font-size:28px;line-height:25px;letter-spacing:.15em;text-align:center}
  .overlay-links a:last-child{margin-bottom:0}
  .overlay-links a+a::before{content:"";position:absolute;left:4.444%;width:90.185%;top:-22px;border-top:.8px solid #4766A9}
  .nav-overlay .work-card{display:none}
}

/* About intro, mobile: iPhone 16 - 130. The copy sat below the photo; the frame
   puts the copy at the top (y73) and the photo across the bottom (y426), which is
   what left the empty band under the buttons. Work-with-us takes the frame's own
   width and regular weight; the boxed CTA loses its underline (the border is it). */
@media (max-width:1279px){
  .ab-intro-copy{top:73px}
  .ab-intro-figure{left:-24.173%;top:426px}
  .ab-intro-copy .ab-cta{text-decoration:none}
  .ab-intro-copy .ab-work{left:10.78%;width:78.439%;font-weight:400}
}

/* Founders card: flips on hover to the designer's sage panel (Group 294). The
   wrapper takes the photo's old box so the static desktop layout is unchanged;
   only mobile flips, since only the mobile frame was specified. Focus flips it
   too, which is what gives touch devices a tap. */
.ab-flip{position:absolute;perspective:900px;cursor:pointer}
.ab-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.1,.2,1)}
.ab-flip-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden}
.ab-flip-front{background:var(--sage);color:var(--neel);transform:rotateY(0deg)}
.ab-founders-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.ab-flip-inner{transition:none}}
@media (min-width:1280px){
  .ab-flip{top:245px;left:15%;width:36.697%;height:388.03px}
  
}
@media (max-width:1279px){
  .ab-flip{left:11.959%;top:113px;width:76.081%;height:247px}
  
  .ab-flip-rule{position:absolute;left:50%;top:7.287%;height:85.142%;border-left:.7px solid #908D58}
  .ab-portrait{position:absolute;top:12.146%;width:38.462%;height:46.559%;border-radius:50%;object-fit:cover;display:block}
  .ab-portrait-1{left:6.02%}
  .ab-portrait-2{left:55.853%}
  .ab-name,.ab-role{position:absolute;margin:0;text-align:center;color:var(--neel)}
  .ab-name{top:62.348%;width:34.114%;font-family:var(--font-display);font-weight:400;font-size:12px;line-height:15px;letter-spacing:.05em}
  .ab-name-1{left:8.027%}
  .ab-name-2{left:57.86%}
  .ab-role{top:69.636%;font-family:var(--font-body);font-weight:400;font-size:8px;line-height:10px}
  .ab-role-1{left:10.702%;width:29.097%}
  .ab-role-2{left:56.522%;width:37.458%}
  .ab-social{position:absolute;display:flex;gap:8px;align-items:center;justify-content:center;color:var(--neel)}
  .ab-social-1{left:8.027%;top:82%;width:34.114%}
  .ab-social-2{left:57.86%;top:82%;width:34.114%}
  .ab-social a{color:var(--neel);line-height:0;transition:opacity .2s ease}
  .ab-social a:hover{opacity:.7}
  .ab-social svg{width:16px;height:16px;display:block}
}

/* Direction sections: fixed frame, sliding content - the markets pattern.
   The deck is a 300lvh runway with a sticky stage; the three slides are stacked
   inside it, so their photo frames coincide and the frame reads as FIXED while
   the photo inside crossfades. The copy slides up through the stage on its own
   slot, and the slots do NOT overlap - only one copy block is ever visible, so
   two texts can never sit on top of each other. Driven by the runway's own view
   timeline (a non-sticky subject, so `contain` resolves correctly). */
main>.deck{position:relative;height:300lvh;view-timeline-name:--dir-seq;view-timeline-axis:block}
.dir-stage{position:sticky;top:0;height:100lvh;clip-path:inset(0);background-color:var(--neel)}
/* the slides stack, so their own opaque background would hide the ones beneath:
   the sage lives on the stage and each slide is transparent. */
.dir-stage .direction{position:absolute;inset:0;height:100%;min-height:0;background:none}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ec-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 26%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.92) 100%)}
.ec-cap{position:absolute;left:11.418%;width:77.163%;bottom:6.443%;z-index:2;color:var(--sage);text-align:left}
.ec-cap .ec-name{margin:0;font-family:var(--font-body);font-weight:700;font-size:11px;line-height:14px;letter-spacing:normal;text-transform:none;text-align:right}
.ec-info-icon{display:block;width:1em;height:1em}
.ec-info{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;line-height:1;vertical-align:middle}
.ec-cap .ec-blurb{max-height:0;overflow:hidden;visibility:hidden;opacity:0;transition:max-height .24s ease,opacity .18s ease}
.ec-photo.is-expanded .ec-blurb{max-height:22em;visibility:visible;opacity:1}
/* Collapsed, the name and its info toggle sit at the right as a quiet affordance.
   Once opened the caption reads as one left-aligned block with the blurb. */
.ec-photo.is-expanded .ec-name{text-align:left}
/* Open state: the info icon is removed, the name stays. The caption itself
   becomes the close target so the panel is never stranded open. */
.ec-photo.is-expanded .ec-info{display:none}
.ec-photo.is-expanded .ec-cap{cursor:pointer}
.ec-cap .ec-blurb,.ec-cap .ec-blurb p{margin:0;font-family:var(--font-body);font-weight:400;font-size:10px;line-height:13px;letter-spacing:normal;text-transform:none}
.ec-cap .ec-blurb p+p{margin-top:6px}

@media (min-width:1280px){
  .ec-cap .ec-name{font-size:12px;line-height:16px}
  .ec-cap .ec-blurb,.ec-cap .ec-blurb p{font-size:11px;line-height:14px}
}

@media (prefers-reduced-motion:reduce){
  .ec-cap .ec-blurb{transition:none}
}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dir-stage .para-frame,
    .dir-stage .section-copy{animation:linear both;animation-timeline:--dir-seq;animation-range:contain 0% contain 100%;will-change:opacity,transform}
    .dir-stage .direction:nth-of-type(1) .para-frame{animation-name:dir-photo-1}
    .dir-stage .direction:nth-of-type(2) .para-frame{animation-name:dir-photo-2}
    .dir-stage .direction:nth-of-type(3) .para-frame{animation-name:dir-photo-3}
    .dir-stage .direction:nth-of-type(1) .section-copy{animation-name:dir-copy-1}
    .dir-stage .direction:nth-of-type(2) .section-copy{animation-name:dir-copy-2}
    .dir-stage .direction:nth-of-type(3) .section-copy{animation-name:dir-copy-3}

    /* photos dissolve inside the stationary frame */
    @keyframes dir-photo-1{0%,29%{opacity:1}36%,100%{opacity:0}}
    @keyframes dir-photo-2{0%,29%{opacity:0}36%,62%{opacity:1}69%,100%{opacity:0}}
    @keyframes dir-photo-3{0%,62%{opacity:0}69%,100%{opacity:1}}

    /* copy slides up; windows are disjoint so no two are ever on screen at once */
    @keyframes dir-copy-1{
      0%{opacity:1;transform:translateY(26px)}
      30%{opacity:1;transform:translateY(-14px)}
      34%{opacity:0;transform:translateY(-34px)}
      100%{opacity:0;transform:translateY(-34px)}
    }
    @keyframes dir-copy-2{
      0%,33%{opacity:0;transform:translateY(34px)}
      37%{opacity:1;transform:translateY(18px)}
      63%{opacity:1;transform:translateY(-14px)}
      67%{opacity:0;transform:translateY(-34px)}
      100%{opacity:0;transform:translateY(-34px)}
    }
    @keyframes dir-copy-3{
      0%,66%{opacity:0;transform:translateY(34px)}
      70%{opacity:1;transform:translateY(18px)}
      100%{opacity:1;transform:translateY(-16px)}
    }
  }
}


/* The founders flip shipped mobile-only: its back face was display:none above
   1280px and the hover/focus trigger lived inside the max-width:1279 block, so
   on desktop there was nothing to reveal and nothing to reveal it. The trigger
   is now unscoped; the back-face geometry is percentage-based so it follows the
   card, and only the px type is rescaled by the card-height ratio 388.03/247. */
.ab-flip.is-flipped .ab-flip-inner{transform:rotateY(180deg)}
@media (min-width:1280px){
  .ab-flip-rule{position:absolute;left:50%;top:7.287%;height:85.142%;border-left:.7px solid #908D58}
  .ab-portrait{position:absolute;top:12.146%;width:auto;height:46.559%;aspect-ratio:1;border-radius:50%;object-fit:cover;display:block}
  .ab-portrait-1{left:8.16%}
  .ab-portrait-2{left:57.95%}
  .ab-name,.ab-role{position:absolute;margin:0;text-align:center;color:var(--neel)}
  .ab-name{top:62.348%;width:34.114%;font-family:var(--font-display);font-weight:400;font-size:19px;line-height:24px;letter-spacing:.05em}
  .ab-name-1{left:8.027%}
  .ab-name-2{left:57.86%}
  .ab-role{top:69.636%;font-family:var(--font-body);font-weight:400;font-size:13px;line-height:16px}
  .ab-role-1{left:10.702%;width:29.097%}
  .ab-role-2{left:56.522%;width:37.458%}
  .ab-social{position:absolute;display:flex;gap:10px;align-items:center;justify-content:center;color:var(--neel)}
  .ab-social-1{left:8.027%;top:84%;width:34.114%}
  .ab-social-2{left:57.86%;top:84%;width:34.114%}
  .ab-social a{color:var(--neel);line-height:0;transition:opacity .2s ease}
  .ab-social a:hover{opacity:.7}
  .ab-social svg{width:20px;height:20px;display:block}
}


/* RESPONSIVE FIX - menu overlay: Careers and About us were unreachable on short phones.
   The mobile block absolutely positions .overlay-links at top:190px, and each link is
   height:28px with margin-bottom:74px, so six items end at 190+28+(5*102) = 728px.
   Any viewport shorter than that cut the last links off with no way to scroll:
   measured Careers unreachable at 375x667 (iPhone 8) and 360x640, Careers AND About us
   at 320x568. Two changes: overflow-y:auto makes the overlay scrollable as a guaranteed
   floor at any height, and on short viewports the stack is tightened so nothing needs
   scrolling at all - 120+28+(5*72) = 508px, inside a 568px screen. The 393x852 design
   frame is taller than 750px so it is untouched, and desktop is unaffected. */
.nav-overlay{overflow-y:auto;overscroll-behavior:contain}
@media (max-width:1279px) and (max-height:750px){
  .overlay-links{top:120px}
  .overlay-links a{margin:0 0 44px}
  .overlay-links a+a::before{top:-22px}
}


/* ---- Role detail page (/careers/<slug>) -------------------------------------
   Built in the site's own language: navy ground, sage type, Optiker for display
   and Rethink Sans for body, and the same olive pill as the careers list. Content
   is injected from Supabase job_posts by slug. */
.rl{background:var(--neel);color:var(--sage);padding:236px 0 120px}
.rl-inner{width:min(840px,86%);margin:0 auto}
.rl-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.rl-back{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);border-radius:80px;color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.rl-back:hover,.rl-back:focus-visible{background:color-mix(in srgb,var(--sage) 12%,transparent)}
.rl-meta{margin:0;font-family:var(--font-display);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--sage) 82%,transparent)}
.rl-dot{margin:0 10px}
.rl-rule{height:0;margin:26px 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--sage) 32%,transparent)}
.rl-rule-short{width:44%;margin:26px 0 0}
.rl h1{margin:44px 0 0;font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1.18;letter-spacing:.11em;text-transform:uppercase}
.rl-summary{margin:26px 0 0;font-family:var(--font-body);font-size:19px;line-height:1.5}
.rl-cta-wrap{margin:38px 0 0}
.rl-apply{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border:1px solid color-mix(in srgb,var(--sage) 55%,transparent);color:var(--sage);font-family:var(--font-display);font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.rl-apply:hover,.rl-apply:focus-visible{background:color-mix(in srgb,var(--sage) 12%,transparent)}
.rl-block{margin:66px 0 0}
.rl-eyebrow{margin:0 0 26px;font-family:var(--font-display);font-weight:400;font-size:11px;letter-spacing:.19em;text-transform:uppercase;color:color-mix(in srgb,var(--sage) 82%,transparent)}
.rl-bullets{margin:0;padding:0;list-style:none}
.rl-bullets li{position:relative;margin:0 0 15px;padding-left:26px;font-family:var(--font-body);font-size:17px;line-height:1.5}
.rl-bullets li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--sage)}
.rl-note{margin:22px 0 0;font-family:var(--font-body);font-size:15px;line-height:1.5;color:color-mix(in srgb,var(--sage) 80%,transparent)}
.rl-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.rl-detail{padding:20px 22px;border:1px solid color-mix(in srgb,var(--sage) 30%,transparent);border-radius:10px}
.rl-detail dt{margin:0 0 10px;font-family:var(--font-display);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:color-mix(in srgb,var(--sage) 72%,transparent)}
.rl-detail dd{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.45}
.rl-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:44px 0 0}
.rl-missing h1{margin-top:0}
@media (max-width:1279px){
  .rl{padding:164px 0 90px}
  .rl-inner{width:88%}
  .rl h1{margin-top:32px;font-size:27px;letter-spacing:.09em}
  .rl-summary{margin-top:20px;font-size:15px}
  .rl-rule-short{width:70%}
  .rl-cta-wrap{margin-top:30px}
  .rl-apply{padding:15px 24px;font-size:11px}
  .rl-block{margin-top:48px}
  .rl-eyebrow{margin-bottom:20px;font-size:10px}
  .rl-bullets li{font-size:14px;padding-left:22px;margin-bottom:13px}
  .rl-detail{padding:16px 18px}
  .rl-detail dd{font-size:14px}
  .rl-foot{margin-top:36px}
}
@media (prefers-reduced-motion:reduce){.rl-back,.rl-apply{transition:none}}


/* ---- Edits archive (/edits.html), reached from the View all card ------------
   Figma frame 66: navy ground, two columns of deck cards at x 269 and 688 in a
   1280 frame, so a 742.84px content column (58.03%) with a 95.16px gutter and a
   610px row pitch. Cards reuse the homepage .edit-card / .deck styles verbatim.
   Top padding clears the 181px absolutely-positioned site header. */
.ea{background:var(--neel);color:var(--sage);padding:236px 0 140px}
.ea-inner{width:min(742.84px,86%);margin:0 auto}
.ea-head{text-align:center;margin-bottom:68px}
.ea h1{margin:0 0 26px;font-family:var(--font-display);font-weight:400;font-size:50px;line-height:40px;letter-spacing:.05em;text-transform:uppercase;color:var(--sage)}
.ea-head .eyebrow{margin:0;font-size:18px;line-height:18px;letter-spacing:.1em}
.ea-search{position:relative;display:flex;align-items:center;height:55px;margin:0 0 68px;background:#4766A9;border-radius:20.0455px;padding:0 22px;gap:14px}
.ea-search-icon{width:24.5px;height:24.5px;flex:0 0 auto;color:var(--sage)}
.ea-search-input{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;color:var(--sage);font-family:var(--font-body);font-weight:400;font-size:17.8182px;line-height:23px}
.ea-search-input::placeholder{color:color-mix(in srgb,var(--sage) 72%,transparent)}
.ea-search-input:focus{outline:none}
.ea-search:focus-within{outline:2px solid color-mix(in srgb,var(--sage) 60%,transparent);outline-offset:2px}
.ea-search-input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.ea-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:95.16px;row-gap:58px;max-width:none;margin:0;padding:0;overflow:visible}
.ea-grid .edit-card{text-align:center}
/* The deck cards carry animation:section-reveal bound to the --edits-reveal view
   timeline, which is declared by .edits on the homepage. That section does not
   exist here, so the animation has no timeline and a "both" fill leaves it frozen
   at its start state - opacity 0, invisible, while every measurement reports the
   cards present and their images loaded. Cancel it on this page. */
.ea-grid>.edit-card,.ea-grid>.view-all{animation:none;opacity:1}
.ea-grid .edit-card h3{margin-top:47px}
.ea-note{margin:40px 0 0;text-align:center;font-family:var(--font-body);font-size:16px;color:color-mix(in srgb,var(--sage) 80%,transparent)}
@media (max-width:1279px){
  .ea{padding:164px 0 96px}
  .ea-inner{width:86%}
  .ea h1{font-size:28px;line-height:25px;margin-bottom:18px}
  .ea-head{margin-bottom:40px}
  .ea-head .eyebrow{font-size:10px}
  .ea-search{height:48px;margin-bottom:44px;padding:0 16px;gap:10px}
  .ea-search-icon{width:20px;height:20px}
  .ea-search-input{font-size:15px}
  .ea-grid{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:52px;justify-items:center}
  .ea-grid .edit-card{width:min(292px,100%)}
  .ea-grid .edit-card h3{margin-top:36px}
}

/* ---- Loading states ---------------------------------------------------- */
@keyframes pp-shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
.pp-skel{background:color-mix(in srgb,var(--sage) 14%,transparent);background-image:linear-gradient(90deg,transparent 0%,color-mix(in srgb,var(--sage) 22%,transparent) 50%,transparent 100%);background-size:220% 100%;animation:pp-shimmer 1.5s linear infinite;border-radius:2px}
.edit-card-skel{min-width:0;text-align:center}
.edit-card-skel .pp-skel-deck{width:100%;aspect-ratio:.72;margin-bottom:45px}
.edit-card-skel .pp-skel-line{height:13px;margin:0 auto 12px;width:78%}
.edit-card-skel .pp-skel-line.is-short{width:52%;height:10px}
.pp-img-loading{background:color-mix(in srgb,var(--sage) 12%,transparent)}
.pp-img-fade{opacity:0;transition:opacity .45s ease}
.pp-img-fade.is-loaded{opacity:1}
.pp-embed-loading{position:relative;min-height:280px}
.pp-embed-loading iframe{opacity:0;transition:opacity .35s ease}
.pp-embed-ready iframe{opacity:1}
.pp-spinner{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid color-mix(in srgb,var(--sage) 30%,transparent);border-top-color:var(--sage);border-radius:50%;animation:pp-spin .8s linear infinite}
@keyframes pp-spin{to{transform:rotate(360deg)}}
.pp-route-bar{position:fixed;left:0;top:0;height:2px;width:100%;z-index:9999;background:transparent;overflow:hidden}
.pp-route-bar::after{content:"";display:block;height:100%;width:40%;background:var(--sage,#e8e2d4);animation:pp-slide 1s ease-in-out infinite}
@keyframes pp-slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
@media (prefers-reduced-motion:reduce){.pp-skel,.pp-spinner,.pp-route-bar::after{animation:none}.pp-img-fade{transition:none}}

/* ---- Mobile alignment + founders spacing ------------------------------- */
@media (max-width:1279px){
  .direction{align-items:center;text-align:left}
  .direction .section-copy{text-align:left;width:300px;max-width:none}
  .para-frame{align-self:center}
  .para-frame img{left:0;top:0;width:100%;height:100%;transform:none;object-fit:cover}
  .family-photo{margin-inline:auto}
  .ab-flip{top:150px}
  .ab-founders-copy{top:418px}
}