/* Generated by build/build.py - do not edit by hand. */

/* --- shared nav styles --- */
.csDropMenu{display:none}
  .csDrop:hover > .csDropMenu{display:flex}
  .csDrop:focus-within > .csDropMenu{display:flex}
  .csNavCta:active{transform:translateY(1px)}
  @media (max-width:1280px){ .csNavLink{display:none !important} .csBurger{display:flex !important} }
  @media (max-width:980px){ .csNav{padding:12px 20px !important;gap:14px !important} .csWordmark{font-size:15px !important} .csNavCta{display:inline-flex !important;padding:12px 18px !important;font-size:10px !important} }
  @media (max-width:900px){ .csNavCta{display:none !important} .csBottomBar{display:grid !important} body{padding-bottom:58px} }

/* --- shared footer styles --- */
footer a{flex:none}
  @media (max-width:900px){ .csAngleR{clip-path:polygon(0 0,100% 9vw,100% 100%,0 100%) !important;margin-top:-9vw !important;padding-top:calc(56px + 9vw) !important} }

/* --- cookie consent --- */

.csConsent{position:fixed;left:0;right:0;bottom:0;z-index:130;
  background:#4C1134;border-top:1px solid rgba(197,145,73,.5);
  padding:20px 6vw;display:flex;gap:18px;align-items:center;
  flex-wrap:wrap;justify-content:space-between}
.csConsentText{max-width:640px;color:rgba(247,241,232,.9);font-size:14.5px;
  line-height:1.55}
.csConsentText strong{color:#FFFBF4;font-size:15.5px}
.csConsentText a{color:#EFA139;text-decoration:underline}
.csConsentBtns{display:flex;gap:10px;flex-wrap:wrap}
.csConsentGhost,.csConsentPrimary{font:inherit;font-size:11px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;border-radius:999px;
  cursor:pointer;min-height:44px;padding:0 18px}
.csConsentGhost{background:transparent;color:#FFFBF4;
  border:1px solid rgba(255,251,244,.5)}
.csConsentPrimary{background:#EE5B1D;color:#FFFBF4;border:0;padding:0 20px}

@media (max-width:900px){
  /* stack above the booking bar instead of covering it */
  .csConsent{bottom:58px;padding:12px 5vw;gap:10px;
    flex-wrap:nowrap;align-items:center}
  .csConsentText{font-size:13px;line-height:1.4;flex:1 1 auto;min-width:0}
  .csConsentText strong{font-size:13px}
  /* the full explanation lives behind Manage on a phone */
  .csConsentLong{display:none}
  .csConsentBtns{flex:none;flex-wrap:nowrap;gap:6px}
  .csConsentGhost,.csConsentPrimary{font-size:10px;letter-spacing:.1em;
    padding:0 11px;min-height:44px}
}
@media (max-width:420px){
  .csConsent{flex-wrap:wrap}
  .csConsentText{flex:1 1 100%}
  .csConsentBtns{flex:1 1 100%;justify-content:space-between}
  .csConsentGhost,.csConsentPrimary{flex:1;padding:0 6px}
}


.csLb{position:fixed;inset:0;z-index:200;display:none;background:rgba(10,8,10,.96)}
.csLb.csOpen{display:block}
.csLbBar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 5vw;background:rgba(10,8,10,.96);color:#FFFBF4}
.csLbTitle{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.csLbCount{font-size:11px;letter-spacing:.14em;color:rgba(247,241,232,.62)}
.csLbBtn{background:none;border:0;color:#FFFBF4;cursor:pointer;min-width:44px;min-height:44px;font-size:24px;line-height:1}
.csLbScroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.csLbGrid{columns:3;column-gap:12px;padding:0 5vw 60px}
.csLbGrid img{width:100%;display:block;margin:0 0 12px;break-inside:avoid;border-radius:2px;cursor:zoom-in}
.csLbOne{position:fixed;inset:0;z-index:3;display:none;background:rgba(8,6,8,.98)}
.csLbOne.csOpen{display:flex;align-items:center;justify-content:center;padding:64px 5vw}
.csLbOneImg{max-width:100%;max-height:100%;object-fit:contain;display:block}
.csLbNav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(20,16,20,.62);border:0;color:#FFFBF4;cursor:pointer;width:48px;height:64px;font-size:26px}
.csLbPrev{left:8px}.csLbNext{right:8px}
[data-gallery]{cursor:zoom-in}
@media (max-width:900px){.csLbGrid{columns:2}}
@media (max-width:560px){.csLbGrid{columns:1}.csLbNav{width:40px;height:56px}}

/* --- shared single-image lightbox for portfolio/gallery sections --- */
.csLightboxImage{cursor:zoom-in}
#csSiteLb{position:fixed;inset:0;z-index:220;display:none;align-items:center;
  justify-content:center;background:rgba(10,8,10,.97);padding:72px 64px 58px}
#csSiteLb.csOpen{display:flex}
.csSiteLbFigure{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:12px}
.csSiteLbImage{display:block;max-width:min(88vw,1500px);max-height:calc(100vh - 150px);
  width:auto;height:auto;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.48)}
.csSiteLbCaption{max-width:min(82vw,900px);color:rgba(247,241,232,.78);
  font-size:13px;line-height:1.45;text-align:center}
.csSiteLbClose,.csSiteLbNav{position:absolute;border:1px solid rgba(255,251,244,.38);
  background:rgba(20,16,20,.66);color:#FFFBF4;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:background .18s ease}
.csSiteLbClose:hover,.csSiteLbNav:hover{background:#4C1134}
.csSiteLbClose{top:max(14px,env(safe-area-inset-top));right:18px;width:48px;height:48px;
  border-radius:999px;font-size:30px;line-height:1}
.csSiteLbNav{top:50%;transform:translateY(-50%);width:52px;height:72px;
  font-size:34px;line-height:1}
.csSiteLbPrev{left:12px}.csSiteLbNext{right:12px}
.csSiteLbCount{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));
  transform:translateX(-50%);color:#FFFBF4;font-size:11px;font-weight:800;
  letter-spacing:.18em}

/* Mobile gallery rhythm: even two-up thumbnails with full, uncropped imagery
   available in the lightbox. */
@media (max-width:760px){
  [data-screen-label="The work"] [style*="columns:3"]{columns:auto !important;
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important}
  [data-screen-label="The work"] [style*="columns:3"] > img{width:100% !important;
    aspect-ratio:4/5 !important;height:auto !important;object-fit:cover !important;
    margin:0 !important;break-inside:auto !important}
  [data-screen-label="Gallery"] .csR3 > div > div[style*="aspect-ratio:4/5"] > img{
    width:100% !important;height:100% !important;max-width:none !important;
    max-height:none !important;object-fit:cover !important}
  #csSiteLb{padding:64px 14px 62px}
  .csSiteLbImage{max-width:calc(100vw - 28px);max-height:calc(100vh - 150px)}
  .csSiteLbNav{top:auto;bottom:max(10px,env(safe-area-inset-bottom));
    transform:none;width:48px;height:48px;border-radius:999px}
  .csSiteLbPrev{left:14px}.csSiteLbNext{right:14px}
  .csSiteLbCount{bottom:max(27px,calc(env(safe-area-inset-bottom) + 17px))}
  .csSiteLbCaption{font-size:12px;max-width:86vw}
}


/* --- mobile fixes, see site-audit/redesign-mobile-audit.md --- */

@media (max-width:900px){
  /* 44px is the minimum comfortable touch target. The drawer and footer
     links were 21px tall, which is a fat-finger trap. */
  #csDrawer a{min-height:44px;display:flex;align-items:center;
    font-size:24px;line-height:1.25}
  #csDrawer a[data-drawer-link]{padding:2px 0}

  /* Collapsible drawer groups. Closed the drawer is one screen instead of
     2.2; the group holding the current page opens itself. */
  .csDrawerGroup{border-top:1px solid rgba(247,241,232,.12)}
  .csDrawerToggle{width:100%;min-height:56px;display:flex;align-items:center;
    justify-content:space-between;gap:12px;background:none;border:0;
    padding:14px 0;cursor:pointer;color:#EFA139;font-family:inherit;
    font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase}
  .csDrawerChev{font-size:20px;font-weight:400;line-height:1;color:#FFFBF4;
    transition:transform .18s ease}
  .csDrawerToggle[aria-expanded="true"] .csDrawerChev{transform:rotate(45deg)}
  .csDrawerPanel{display:none;padding:0 0 14px}
  .csDrawerPanel.csOpen{display:block}
  /* Sub-items match the group heading's type exactly, in white rather than
     gold, so the heading reads as the label and the links as its contents.
     The prototype set these at 26px display type, which made an open group
     nearly as long as the old flat list. */
  #csDrawer .csDrawerPanel a{font-size:11px !important;font-weight:800 !important;
    letter-spacing:.3em !important;text-transform:uppercase !important;
    line-height:1.4 !important;color:#FFFBF4 !important}

  footer a{min-height:44px;display:inline-flex;align-items:center}

  /* 11px letterspaced uppercase is decoration, not text, at arm's length. */
  .csBottomBar a{font-size:12px;letter-spacing:.12em}
  footer a{font-size:13.5px}
}

@media (max-width:600px){
  /* iOS Safari zooms any input under 16px on focus and does not zoom back. */
  input,select,textarea{font-size:16px}
}

@media (max-width:900px){
  /* Lift the hero scrim so the work is actually visible on a phone. The
     wordmark still reads: the centre stays dark enough for the type, the
     edges open up from 18% to let the photo wall through. */
  .csHeroVeil{background:radial-gradient(ellipse 60% 46% at 50% 50%,
    rgba(20,16,20,.72) 0%, rgba(20,16,20,.55) 62%,
    rgba(20,16,20,.12) 100%) !important}

  /* ~330px of empty black sat above the first line of text, so the content
     began 40% down the first screen. */
  #top{min-height:640px !important}
  #top .csHeroPad{padding-top:14vh !important}
}


/* --- hover states ported from style-hover attributes --- */
.csHv1:hover{color:#EFA139 !important}
.csHv2:hover{background:#EF1CB5 !important}
.csHv3:hover{background:#EFA139 !important}
.csHv4:hover{background:#FFFBF4 !important;color:#141014 !important}
.csHv5:hover{background:#EE5B1D !important}
.csHv6:hover{background:#EE5B1D !important;color:#FFFBF4 !important}
.csHv7:hover{background:#FFFBF4 !important}
.csHv8:hover{background:#EFA139 !important;color:#141014 !important}
.csHv9:hover{background:#EFA139 !important;color:#141014 !important;border-color:#EFA139 !important}
.csHv10:hover{background:#EF1CB5 !important;color:#141014 !important;border-color:#EF1CB5 !important}
.csHv11:hover{background:#9B17C0 !important;color:#141014 !important;border-color:#9B17C0 !important}
.csHv12:hover{background:#156A7E !important;color:#141014 !important;border-color:#156A7E !important}
.csHv13:hover{background:#EE5B1D !important;color:#141014 !important;border-color:#EE5B1D !important}
.csHv14:hover{background:#141014 !important;color:#FFFBF4 !important}
.csHv15:hover{background:#4C1134 !important}
.csHv16:hover{background:#141014 !important}