/* Common Ground, an illustrative studio by Matt's Websites.
   Source: design/showcase/common-ground-v2/src/site.css (build.py copies it into the site). */

@font-face{font-family:'CG Sans';src:url('/static/cg-sans-3094dcfb2e68.woff2') format('woff2');font-weight:270 400;font-style:normal;font-display:swap}
@font-face{font-family:'CG Hand';src:url('/static/cg-hand-63cfd3daabeb.woff2') format('woff2');font-weight:360 520;font-style:normal;font-display:swap}

:root{
  --page:#e9e2dc;--card:#efe9e3;--ink:#2d2c30;--ink-2:#564e4f;--mute:#6c6364;--mute-dk:#9a9192;--mute-2:#978a8b;
  --line:#c2b9ba;--line-2:#ded5ce;--green:#2a4b38;--pill:#e5ded8;--dark-line:#4a474b;
  --sans:'CG Sans','Albert Sans','Helvetica Neue',Arial,sans-serif;
  --hand:'CG Hand','Alegreya Sans','Gill Sans','Trebuchet MS',sans-serif;
  --m:60px;--g:32px;
  --u:calc((100cqw - 2 * var(--m) - 23 * var(--g)) / 24);
  --step:calc(var(--u) + var(--g));
  --x2:calc(var(--m) + var(--step));--x3:calc(var(--m) + 2 * var(--step));--x5:calc(var(--m) + 4 * var(--step));
  --x7:calc(var(--m) + 6 * var(--step));--x9:calc(var(--m) + 8 * var(--step));--x13:calc(var(--m) + 12 * var(--step));
  --x15:calc(var(--m) + 14 * var(--step));--x17:calc(var(--m) + 16 * var(--step));
  --s4:calc(4 * var(--u) + 3 * var(--g));--s6:calc(6 * var(--u) + 5 * var(--g));--s8:calc(8 * var(--u) + 7 * var(--g));
  --s10:calc(10 * var(--u) + 9 * var(--g));--s12:calc(12 * var(--u) + 11 * var(--g));--s16:calc(16 * var(--u) + 15 * var(--g));
  --tw:var(--s6);--tw8:var(--s8);
  --pad:240px;--vh:100vh;--head:110px;
  /* the reference's own curves (values read from its source; the code is ours) */
  --std:cubic-bezier(.4,0,.2,1);       /* the default transition: buttons, the menu sheet, the cross, the page fade */
  --ease-out:cubic-bezier(0,0,.58,1);  /* tweens given only a duration */
  --ease-io:cubic-bezier(.42,0,.58,1); /* ease in out: the booking list's height, the reel's first fade */
  --half-in:cubic-bezier(0,.2,.2,1);   /* the menu halves coming in */
  --half-out:cubic-bezier(.2,0,1,.3);  /* the menu halves going */
  --glide:cubic-bezier(.6,0,.4,1);     /* the wordmark and the sub navigation, and the anchor scroll */
  --arrive:cubic-bezier(.1,.4,.12,1);  /* the carousel row arriving */
  --ink-in:cubic-bezier(.32,.72,0,1);  /* a word inking itself */
  --link:cubic-bezier(.6,0,.9,.6);     /* the menu's large links on hover */
  --flip:cubic-bezier(.87,0,.13,1);    /* the header's ink changing (0.25 s, the reference's expo in out) */
}
@supports (height:100svh){:root{--vh:100svh}}
@media (max-width:1199px){:root{--m:40px;--g:24px;--pad:180px;--tw:var(--s8);--tw8:var(--s10)}}
@media (max-width:999px){
  :root{--c:calc(100cqw - 2 * var(--m));--c6:calc(var(--c) * .7383);--c7:calc(var(--c) * .8692);--cx2:calc(var(--m) + var(--c) * .1308);
    --cx3:calc(var(--m) + var(--c) * .2617)}
}
@media (max-width:767px){
  :root{--m:24px;--g:16px;--pad:120px;--head:74px;
    --u:calc((100cqw - 2 * var(--m) - 7 * var(--g)) / 8);
    --x2:calc(var(--m) + var(--step));--p6:calc(6 * var(--u) + 5 * var(--g));--p7:calc(7 * var(--u) + 6 * var(--g))}
}

html{background:var(--page);scroll-padding-top:140px}
body.cg{container-type:inline-size;min-height:100vh;background:var(--page);color:var(--ink);font:360 18px/26px var(--sans);
  font-kerning:normal;overflow-x:clip}
/* the page's content fades in once on load (0.6 s), as the reference's main does; the header draws its own way in */
body.cg>main{animation:cg-in .6s var(--std) both}
@keyframes cg-in{from{opacity:0}}
/* resets carry no weight (:where), so every component rule below wins over them */
:where(.cg) :where(h1,h2,h3,p,ul,ol,figure,dl,dd,blockquote){margin:0}
:where(.cg) :where(ul,ol){padding:0;list-style:none}
:where(.cg) a{color:inherit;text-decoration:none}
:where(.cg) img{max-width:none}
:where(.cg) button{color:inherit}
:where(.cg) strong{font-weight:400}
.cg :focus-visible{outline:2px solid currentColor;outline-offset:4px}
.cg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cg .skip-link{background:var(--ink);color:var(--card)}

/* ---------- type roles ---------- */
.cg-eyebrow{font:400 19px/26px var(--hand);letter-spacing:.2px;text-transform:uppercase;color:var(--mute)}
.cg-lead{font:360 24px/34px var(--sans)}
.cg-h-xl{font:340 56px/56px var(--sans);letter-spacing:-.2px}
.cg-h-lg{font:300 36px/46px var(--sans);letter-spacing:.02em}
.cg-h-md{font:300 28px/36px var(--sans);letter-spacing:.02em}
.cg-body{font:360 18px/26px var(--sans)}
.cg-small{font:360 15px/23px var(--sans)}
.cg-tiny{font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase}
.cg-statement{font:360 34px/46px var(--hand);letter-spacing:.3px}
.cg-statement p+p{margin-top:46px}

/* ---------- buttons and links ---------- */
/* hover changes apply only where a pointer can hover, so a tap never leaves one stuck on */
.cg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 16px;border:1px solid var(--line);border-radius:3px;
  background:var(--page);color:var(--ink);font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
  transition:background-color .15s var(--std),border-color .15s var(--std),color .15s var(--std)}
.cg-btn--dark{background:var(--ink);border-color:var(--ink-2);color:var(--page)}
.cg-btn--clear{background:transparent;border-color:rgba(233,226,220,.62);color:var(--page)}
.cg-round{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(130,119,121,.5);border-radius:50%;
  background:var(--page);color:var(--ink);cursor:pointer;transition:background-color .3s var(--std),color .3s var(--std),border-color .3s var(--std)}
.cg-round svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.cg-round--dark{background:var(--ink);border-color:rgba(194,185,186,.45);color:var(--page)}
.cg-round:disabled{opacity:.35;cursor:default}
.cg-link{display:inline-flex;align-items:center;min-height:44px;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .15s var(--std)}
@media (hover:hover){
  .cg-btn:hover,.cg-btn--clear:hover,.cg-btn--dark:hover{background:var(--green);border-color:var(--green);color:#fff}
  .cg-round:hover:not(:disabled),.cg-round--dark:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff}
  .cg-link:hover{color:var(--mute)}
}

/* ---------- illustrative top bar ---------- */
.cg-ribbon{position:absolute;top:0;left:0;right:0;z-index:54;display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:32px;padding:0 var(--m);font:400 12.5px/16px var(--hand);letter-spacing:.3px;color:var(--card)}
/* the link's box is 44 px tall (a full tap target) while the strip stays 32 px (20 on phones) */
.cg-ribbon a{display:inline-flex;align-items:center;min-height:44px;margin:-6px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cg--light-top .cg-ribbon{color:var(--ink-2)}

/* ---------- header ---------- */
/* transparent throughout; text that scrolls up under it dissolves (site.js), pictures pass under untouched */
.cg-header{position:fixed;inset:0 0 auto;z-index:56;height:var(--head);pointer-events:none;color:var(--ink)}
.cg-header>*{pointer-events:auto}
/* Each row of the header takes one ink (site.js). Under a light row, where a picture is too bright for white, a soft dark
   band lies behind the header: up to 0.6 down to just under the row's ink (--scrim), then eased out over 120 px, so small
   white type keeps 4.5:1 even on white. Under a dark row, where a framed picture is too dark for black, the same band in
   the page's colour (--veil, eased out over 80 px), so the picture eases into the page under the header as text does. Each is cut to the
   pictures under the header's parts, so neither ever tints the page colour, and is only as strong as the worst point
   under a part needs (pass 5; review round 4 and the closing fix for the dark band) */
.cg-header::before,.cg-header::after{content:'';position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .25s var(--flip)}
.cg-header::before{clip-path:var(--scrim-clip,none);height:calc(var(--scrim,110px) + 120px);
  background:linear-gradient(180deg,rgba(20,18,17,.62) 0,rgba(20,18,17,.6) var(--scrim,110px),rgba(20,18,17,.46) calc(var(--scrim,110px) + 16px),
    rgba(20,18,17,.29) calc(var(--scrim,110px) + 38px),rgba(20,18,17,.14) calc(var(--scrim,110px) + 64px),rgba(20,18,17,.045) calc(var(--scrim,110px) + 94px),rgba(20,18,17,0) 100%)}
.cg-header::after{clip-path:var(--veil-clip,none);height:calc(var(--veil,110px) + 80px);
  background:linear-gradient(180deg,rgba(233,226,220,.62) 0,rgba(233,226,220,.6) var(--veil,110px),rgba(233,226,220,.44) calc(var(--veil,110px) + 12px),
    rgba(233,226,220,.26) calc(var(--veil,110px) + 28px),rgba(233,226,220,.11) calc(var(--veil,110px) + 48px),rgba(233,226,220,.03) calc(var(--veil,110px) + 66px),rgba(233,226,220,0) 100%)}
.cg-header.is-scrim::before{opacity:var(--scrim-o,1)}
.cg-header.is-veil::after{opacity:var(--veil-o,1)}
body.menu-open .cg-header::before,body.menu-open .cg-header::after{opacity:0}
/* the icon: two bars (30 x 16) that give way to a separate 24 x 24 cross. On load the bars' icon fades and grows from 0.8
   while each bar slides in from 10 px out (0.3 s). Opening: the bars go (0.3 s), then the cross turns in from -45 degrees
   (0.2 s); closing: the cross turns on to 45 degrees and goes (0.2 s), then the bars come back the way they came in. */
.cg-burger{position:absolute;left:calc(var(--m) - 7px);top:30px;width:44px;height:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.cg-burger__bars{position:absolute;left:7px;top:14px;width:30px;height:16px;
  transition:opacity .3s var(--ease-out) .2s,scale .3s var(--ease-out) .2s;animation:cg-icon-in .3s var(--ease-out)}
.cg-burger__bars span{position:absolute;left:0;width:30px;height:2px;background:currentColor;
  transition:opacity .3s var(--ease-out) .2s,translate .3s var(--ease-out) .2s,background-color .25s var(--flip),box-shadow .25s var(--flip)}
.cg-burger__bars span:first-child{top:0;animation:cg-bar-l .3s var(--ease-out)}
.cg-burger__bars span:last-child{top:14px;animation:cg-bar-r .3s var(--ease-out)}
@keyframes cg-icon-in{from{opacity:0;scale:.8}}
@keyframes cg-bar-l{from{opacity:0;translate:-10px 0}}
@keyframes cg-bar-r{from{opacity:0;translate:10px 0}}
.cg-burger__x{position:absolute;left:10px;top:10px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;opacity:0;rotate:45deg;
  transition:opacity .2s var(--std),rotate .2s var(--std)}
.cg-burger[aria-expanded=true] .cg-burger__bars{opacity:0;scale:.8;transition:opacity .3s var(--ease-out),scale .3s var(--ease-out)}
.cg-burger[aria-expanded=true] .cg-burger__bars span{opacity:0;transition:opacity 0s .3s,translate 0s .3s}
.cg-burger[aria-expanded=true] .cg-burger__bars span:first-child{translate:-10px 0}
.cg-burger[aria-expanded=true] .cg-burger__bars span:last-child{translate:10px 0}
.cg-burger[aria-expanded=true] .cg-burger__x{opacity:1;rotate:0deg;transition:none;animation:cg-x-in .2s var(--std) .3s backwards}
@keyframes cg-x-in{from{opacity:0;rotate:-45deg}}
/* centred by auto margins rather than a translate, so the script can read each part's resting place from its offsets */
.cg-mark{position:absolute;left:0;right:0;top:34px;display:block;width:fit-content;margin:0 auto;padding:8px 0;color:inherit;
  transition:color .25s var(--flip),opacity 1s var(--glide),translate 1s var(--glide),visibility 0s}
.cg-mark svg{display:block;width:auto;height:28px}
.cg-mark svg,.cg-footer__mark svg{fill:currentColor}
.cg-header__links{position:absolute;right:var(--m);top:45px;display:flex;gap:32px;transition:visibility 0s}
.cg-header__links a{display:block;font:520 13.5px/19.5px var(--hand);letter-spacing:1.3px;text-transform:uppercase}
/* the ink follows the section under each row of the header (site.js sets one colour for the whole row: the reference's
   pair over the page's surfaces, white or black where a picture lies under the row); the header is light while its
   top row is. Over a picture each part carries a soft halo of the other tone, which steadies small type over busy mid
   tones and is lost on plain ones */
.cg-header.is-light,.cg-header .is-light{color:var(--card)}
.cg-header__links a.is-pic,.cg-subnav a.is-pic{text-shadow:0 0 14px rgba(255,255,255,.36),0 0 3px rgba(255,255,255,.22)}
.cg-header__links a.is-pic.is-light,.cg-subnav a.is-pic.is-light{text-shadow:0 0 14px rgba(0,0,0,.34),0 0 3px rgba(0,0,0,.2)}
.cg-mark.is-pic svg{filter:drop-shadow(0 0 7px rgba(255,255,255,.3))}
.cg-mark.is-pic.is-light svg{filter:drop-shadow(0 0 7px rgba(0,0,0,.3))}
.cg-burger.is-pic .cg-burger__bars span{box-shadow:0 0 8px rgba(255,255,255,.34)}
.cg-burger.is-pic.is-light .cg-burger__bars span{box-shadow:0 0 8px rgba(0,0,0,.32)}
/* The sub navigation (massage and movement): a row of page anchors under the wordmark, 40 px below it (20 under
   1200 px). From 1000 px, once the page moves, the wordmark rises 70 px and fades while the row rises into its place
   (both 1 s, the row 0.05 s later); under 1000 px the row stays where it is and scrolls sideways if it must. */
/* each anchor's box is 44 px tall with its line 12 px down, so the line sits at 110 (the box clears the wordmark's) */
.cg-subnav{position:absolute;left:0;right:0;top:98px;width:max-content;max-width:calc(100% - 32px);margin:0 auto;overflow-x:auto;scrollbar-width:none;
  transition:translate 1s var(--glide) .05s,visibility 0s}
.cg-subnav::-webkit-scrollbar{display:none}
/* where the row scrolls sideways, the cut end fades out over 28 px (site.js marks the ends) */
.cg-subnav.is-scroll{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.cg-subnav.is-scroll.is-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%)}
.cg-subnav.is-scroll.is-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
.cg-subnav.is-scroll.is-start.is-end{-webkit-mask-image:none;mask-image:none}
.cg-subnav ul{display:flex;gap:24px;width:max-content;margin:0 auto;padding:0 16px}
/* the anchors not marked sit at 72% (4.93:1 on the page colour) where the reference's sit at 60% (3.57:1) */
.cg-subnav a{display:block;padding:12px 0;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
  opacity:.72;transition:color .25s var(--flip),text-shadow .25s var(--flip)}
.cg-subnav a[aria-current]{opacity:1}
/* on touch screens, and wherever the row stays under the wordmark, a short anchor ("FAQ") gets a tap area at least 44 px
   wide, centred on it and reaching into the gaps, so the row's spacing does not change */
@media (max-width:999px),(pointer:coarse){
  .cg-subnav a{position:relative}
  .cg-subnav a::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:max(100%,44px);translate:-50% 0}
}
.cg-header.is-sub .cg-subnav{translate:0 calc(-1 * var(--dock,68px))}
.cg-header.is-sub .cg-mark{translate:0 -70px;opacity:0;visibility:hidden;transition:color .25s var(--flip),opacity 1s var(--glide),translate 1s var(--glide),visibility 0s linear 1s}
:root:not(.cg-js) .cg-header{position:absolute}
:root:not(.cg-js) .cg-burger{display:none}
/* the open menu covers the wordmark and the links as the reference's sheet does: they go with the sheet's fade in
   (0.3 s) and come back with its fade out (1 s, after the halves) */
body.menu-open .cg-header,body.menu-open .cg-header .is-light{color:var(--ink)}
body.menu-open .cg-burger__bars span{background:currentColor!important}
.cg-mark svg,.cg-header__links a,.cg-subnav ul{transition:opacity 1s var(--std) .25s}
.cg-header__links a{transition:color .25s var(--flip),text-shadow .25s var(--flip),opacity 1s var(--std) .25s}
body.menu-open .cg-mark svg,body.menu-open .cg-header__links a,body.menu-open .cg-subnav ul{opacity:0;transition:opacity .3s var(--std)}
body.menu-open .cg-mark,body.menu-open .cg-header__links,body.menu-open .cg-subnav{visibility:hidden;
  transition:color .25s var(--flip),opacity 1s var(--glide),translate 1s var(--glide),visibility 0s linear .3s}
body.menu-open{overflow:hidden}

/* ---------- menu (two halves; one column under 1000) ---------- */
/* Opening: the sheet fades in over 0.3 s, then the halves slide 20 px towards the middle and fade in over 0.5 s.
   Closing: the halves slide 20 px apart and fade over 0.25 s, then the sheet fades over 1 s. */
.cg-menu{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-start;background:var(--page);color:var(--ink);visibility:hidden;opacity:0;
  overflow-y:auto;overscroll-behavior:contain;transition:opacity 1s var(--std) .25s,visibility 0s linear 1.25s}
.cg-menu[data-open]{visibility:visible;opacity:1;transition:opacity .3s var(--std),visibility 0s}
/* the links start under the cross as the reference's do: the first large link's 66 px row at y 78, the small links
   19 px after the last (one column under 1000 px is centred, as the reference's phone menu is) */
.cg-menu__nav{flex:0 0 50%;display:flex;flex-direction:column;min-height:100%;padding:78px 0 56px;
  opacity:0;translate:-20px 0;transition:opacity .25s var(--half-out),translate .25s var(--half-out)}
.cg-menu[data-open] .cg-menu__nav{opacity:1;translate:0 0;transition:opacity .5s var(--half-in) .3s,translate .5s var(--half-in) .3s}
.cg-menu__big a{display:flex;align-items:center;justify-content:center;min-height:66px;font:400 32px/48px var(--sans);text-align:center;transition:color .15s var(--link)}
/* the large links lighten to mid grey on hover (3.37:1, large text; the reference's lighter grey reads 2.59:1); the
   current page and keyboard focus show the same grey */
.cg-menu__big a:focus-visible,.cg-menu__big a[aria-current=page]{color:#827779}
.cg-menu__small{margin:19px 0 0}
.cg-menu__small a{display:flex;align-items:center;justify-content:center;min-height:44px;font:400 14px/17.5px var(--hand);letter-spacing:1.4px;
  text-transform:uppercase;color:var(--ink-2);text-align:center}
@media (hover:hover){
  .cg-menu__big a:hover{color:#827779}
  .cg-menu__small a:hover{color:var(--ink)}
}
/* the right half: the card colour until a large link is pointed at, then that link's tone (off black, dark grey, light
   grey, the card colour, in turn) under its picture; both stay until another link is pointed at */
.cg-menu__pics{position:sticky;top:0;flex:0 0 50%;height:100%;overflow:hidden;background:var(--card);opacity:0;translate:20px 0;
  transition:opacity .25s var(--half-out),translate .25s var(--half-out),background-color .15s ease}
.cg-menu__pics[data-tone="0"]{background-color:var(--ink)}
.cg-menu__pics[data-tone="1"]{background-color:var(--ink-2)}
.cg-menu__pics[data-tone="2"]{background-color:var(--line)}
.cg-menu[data-open] .cg-menu__pics{opacity:1;translate:0 0;transition:opacity .5s var(--half-in) .3s,translate .5s var(--half-in) .3s,background-color .15s ease}
.cg-menu__pic{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.cg-menu__pic.is-on{opacity:1}
.cg-menu__pic img{width:100%;height:100%;object-fit:cover}
.cg-menu__veil{position:absolute;inset:0;background:rgba(0,0,0,.6);transition:opacity .3s ease}
.cg-menu__pic.is-on .cg-menu__veil{opacity:0}

/* ---------- framed pictures that drift (move B); card pictures rest at 1.05, and under the pointer they lean up to
   10 px away from it and grow to 1.07 (site.js); without the script every picture sits still ---------- */
.cg-frame{position:relative;overflow:hidden;background:#d6cdc6}
.cg-frame__layer{position:absolute;inset:-5%;will-change:transform}
.cg-frame__layer img,.cg-frame__layer picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.cg-frame__layer img{object-fit:cover}
.cg-frame--card .cg-frame__layer{inset:0;transform:scale(1.05)}
.cg-card__pic{display:block}
/* the home massage reel: three stills that cut every 5 s, the first fading in once (0.5 s) when it has loaded */
.cg-reel img{opacity:0}
.cg-reel img.is-on{opacity:1}
.cg-js .cg-reel{opacity:0;transition:opacity .5s var(--ease-io)}
.cg-js .cg-reel.is-ready{opacity:1}
.cg-still .cg-frame__layer,:root:not(.cg-js) .cg-frame__layer{inset:0;transform:none!important}
:root:not(.cg-js) .cg-reel picture+picture{display:none}
@media (prefers-reduced-motion:reduce){.cg-frame__layer{inset:0;transform:none!important;transition:none!important}}

/* ---------- full bleed hero (type one: centred title) ---------- */
.cg-hero{--hero-top:.34;--hero-mid:.3;--hero-bottom:.38;position:relative;display:flex;align-items:center;justify-content:center;height:var(--vh);min-height:520px;overflow:hidden;background:#978a8b;color:#fff}
.cg-massage .cg-hero{--hero-top:.44;--hero-mid:.34}
.cg-movement .cg-hero{--hero-top:.5;--hero-mid:.36}
.cg-studio .cg-hero{--hero-top:.42;--hero-mid:.44;--hero-bottom:.56}
.cg-hero__media,.cg-hero__media img{position:absolute;inset:0;width:100%;height:100%}
.cg-hero__media img{object-fit:cover}
.cg-hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
    linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.24) 100%),rgba(0,0,0,.2)}
/* the home title crosses a bright window at its left end: a soft band of shade sits behind the line */
.cg-index .cg-hero::after{background:radial-gradient(ellipse 70% 16% at 50% 50%,rgba(0,0,0,.16),rgba(0,0,0,0)),
  linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
    linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.24) 100%),rgba(0,0,0,.2)}
/* the sessions hallway (R201) has sunlit boards a little above its foot: where the window is wider than the picture, its foot
   stays in view, so the line under the title keeps the shaded boards below the sun behind it, as at 1440 x 900 (pass 5) */
.cg-sessions .cg-hero__media img{object-position:50% 100%}
/* where the window is narrower than the picture's shape the line sits a little higher, on the edge of the sun: a firmer foot shade */
@media (min-width:768px) and (max-aspect-ratio:3/2){
  .cg-sessions .cg-hero::after{background:linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
    linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.32) 100%),rgba(0,0,0,.2)}
}
.cg-hero__title{position:relative;z-index:1;max-width:calc(100% - 2 * var(--m));font:270 clamp(40px,3.89cqw,56px)/1 var(--sans);letter-spacing:.006em;text-align:center;text-wrap:balance}
.cg-hero__sub{position:absolute;z-index:1;left:var(--m);right:var(--m);bottom:80px;font:360 18px/26px var(--sans);text-align:center;color:#fff}

/* ---------- full bleed hero (type two: title and short paragraph at the left) ---------- */
.cg-hero--two{display:block;color:var(--page)}
.cg-hero--two::after{background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.18) 34%,rgba(0,0,0,0) 56%),
  linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
  linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.2) 100%),rgba(0,0,0,.2)}
/* the studio hero: a light side shade in the chapter off black #2d2c30 behind the title (review rounds 2 and 3). Owner photo
   direction (22 October 2026): the new picture (P511) has the top of a bright window under Book now and Contact, so a soft
   band of shade runs down the top 280 px and fades by 400 px, keeping the header links at 4.5:1 while the page scrolls past */
.cg-hero--shade::after{background:linear-gradient(90deg,rgba(45,44,48,.3) 0,rgba(45,44,48,.24) 36%,rgba(45,44,48,0) 55%),
  linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
  linear-gradient(180deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 280px,rgba(0,0,0,0) 400px),rgba(0,0,0,.2)}
/* the title, its paragraph and "Back to sessions" are one block, centred on the picture as the reference centres its
   block (title 160 over a ten line paragraph, 227 over seven, 233 over eleven); 40 px between them (phones 20) */
.cg-hero__block{position:absolute;z-index:1;top:0;bottom:0;left:var(--x5);width:var(--s6);display:flex;flex-direction:column;justify-content:center}
.cg-hero--two .cg-hero__title{max-width:none;font:340 56px/56px var(--sans);letter-spacing:-.2px;text-align:left;text-wrap:pretty}
.cg-hero--two .cg-hero__text{margin-top:40px;font:360 18px/26px var(--sans)}
/* the link's 44 px box reaches 12 px above its line, so the line itself sits 40 px under the paragraph */
.cg-back{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:28px;
  font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--page);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;transition:color .15s var(--std)}
.cg-back svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4}
@media (hover:hover){.cg-back:hover{color:var(--line)}}

/* ---------- booking card ---------- */
.cg-book{position:relative;z-index:2}
.cg-book__card{margin-left:var(--x5);width:var(--s16);min-height:444px;padding:80px 40px 80px;background:var(--card);text-align:center}
.cg-book__card>.cg-h-lg{max-width:640px;margin:0 auto;text-wrap:balance}
.cg-book__ask{margin-top:58px}
.cg-chips{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.cg-chips__row{display:flex;justify-content:center;gap:8px}
.cg-chip{min-height:46px;padding:12px 16px;border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--ink);
  font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;cursor:pointer;transition:border-color .15s var(--std),background-color .15s var(--std)}
@media (hover:hover){.cg-chip:hover{border-color:#827779}}
.cg-chip[aria-pressed=true],.cg-chip[aria-selected=true]{border-color:var(--green)}
/* choosing a day: the list's height opens over 0.3 s (ease in out) while the day fades in; its label drops 10 px into
   place after 0.1 s and the rows rise 20 px, 0.1 s apart from the start, each over 0.3 s */
.cg-days{overflow:hidden}
.cg-js .cg-days{height:0;transition:height .3s var(--ease-io)}
.cg-day{padding:56px 40px 0}
.cg-day+.cg-day{padding-top:48px}
.cg-js .cg-day+.cg-day{padding-top:56px}
.cg-day__label{font:360 18px/26px var(--sans)}
.cg-day__name{display:none}
:root:not(.cg-js) .cg-day__when,:root:not(.cg-js) .cg-book__ask,:root:not(.cg-js) .cg-chips{display:none}
:root:not(.cg-js) .cg-day__name{display:inline}
.cg-js .cg-day.is-in{animation:cg-in .3s var(--ease-io)}
.cg-js .cg-day.is-in .cg-day__label{animation:cg-drop .3s var(--ease-out) .1s both}
@keyframes cg-drop{from{opacity:0;translate:0 -10px}}
.cg-day__list{margin-top:18px;border-top:1px solid var(--line-2);text-align:left}
.cg-slot{position:relative;display:flex;align-items:center;gap:24px;padding:20px 0 18px;border-bottom:1px solid var(--line-2)}
.cg-js .cg-day.is-in .cg-slot{animation:cg-rise .3s var(--ease-out) both}
.cg-js .cg-day.is-in .cg-slot:nth-child(2){animation-delay:.1s}
.cg-js .cg-day.is-in .cg-slot:nth-child(3){animation-delay:.2s}
@keyframes cg-rise{from{opacity:0;translate:0 20px}}
.cg-slot__text{flex:1}
.cg-slot__meta{font:400 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.cg-slot__title{margin-top:0}
.cg-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cg-pills li{padding:4px 11px;border-radius:999px;background:var(--pill);font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase}
.cg-slot__link{position:static}
.cg-slot__link::before{content:'';position:absolute;inset:0}
.cg-slot .cg-slot__link{border-color:var(--line)}
@media (hover:hover){.cg-slot:hover .cg-slot__link.cg-round{background:var(--ink);border-color:var(--ink);color:var(--page)}}
.cg-book__note{margin-top:24px;padding:0 40px;font:360 15px/23px var(--sans);color:var(--ink-2)}

/* ---------- next times card (session pages) ---------- */
.cg-next{position:relative;z-index:2}
.cg-next__card{margin-left:var(--x5);width:var(--s16);padding:80px 40px;background:var(--card);text-align:center}
.cg-next__card>.cg-h-lg{max-width:440px;margin:0 auto;text-wrap:balance}
.cg-week{display:inline-flex;align-items:center;margin-top:32px;border-radius:999px;background:var(--line-2)}
.cg-week__btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--page);
  cursor:pointer;transition:background-color .3s var(--std),color .3s var(--std)}
@media (hover:hover){.cg-week__btn:hover:not(:disabled){background:var(--green);color:#fff}}
.cg-week__btn:disabled{opacity:.35;cursor:default}
.cg-week__btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.cg-week__label{min-width:120px;padding:0 14px;font:360 15px/23px var(--sans)}
.cg-next__week{margin-top:28px}
.cg-next__name{display:none;margin-bottom:12px;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.cg-next__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:380px;margin:0 auto}
.cg-next__card>.cg-btn{margin-top:32px}
.cg-next__note{max-width:520px;margin:24px auto 0;font:360 15px/23px var(--sans);color:var(--ink-2)}
:root:not(.cg-js) .cg-week{display:none}
:root:not(.cg-js) .cg-next__name{display:block}
.cg-next__week[hidden]{display:none}

/* ---------- sticky booking bar (session pages; on phones a full width strip of the page colour): there from the
   start, 67 px above the foot of the window, as the reference's; it steps aside over the band, the footer and the open
   menu, and stays away without the script, where it would cover the footer's last lines ---------- */
.cg-sticky{position:fixed;z-index:50;right:var(--m);bottom:67px;display:flex;gap:8px;transition:opacity .3s var(--std),visibility 0s}
.cg-sticky.is-off,body.menu-open .cg-sticky{opacity:0;visibility:hidden;transition:opacity .3s var(--std),visibility 0s linear .3s}
:root:not(.cg-js) .cg-sticky{display:none}

/* ---------- hand statement on blush ---------- */
.cg-words{padding:var(--pad) 0}
.cg-words__text{margin-left:var(--x13);width:var(--s8)}

/* ---------- split: bleeding portrait with an inset ---------- */
.cg-split{position:relative;display:flex;align-items:flex-start;padding-bottom:var(--pad)}
.cg-split__tall{flex:0 0 auto;width:calc(var(--m) + var(--s12));aspect-ratio:704/923}
.cg-split__side{padding-top:92px;margin-left:calc(var(--x17) - var(--m) - var(--s12))}
.cg-split__inset{width:var(--s6);aspect-ratio:306/367}
.cg-split--square-inset .cg-split__side{padding-top:121px}
.cg-split--square-inset .cg-split__inset{aspect-ratio:1}
.cg-split__copy{width:var(--s6);margin-top:40px}
.cg-split__copy .cg-lead{margin-top:20px}
.cg-split__copy .cg-btn{margin-top:28px}

/* ---------- square splits (move B): text at col 3 and the square at col 13, or the square at col 3 and text at col 15 ---------- */
.cg-pin{position:relative}
/* the stage sticks once its bottom meets the bottom of the window; the script measures it, and without the script only
   the home square (whose height CSS knows) pins */
.cg-pin__stage{position:sticky;z-index:1;top:var(--pin-top,var(--pin-css,-99999px))}
/* the room under a pinned stage: the panel after it rises over the last window of it, so the stage first holds whole
   for 0.4 of a window (review round 4: with no hold the panel covered a stage's button and picture as soon as they
   came into view); a stage that does not pin (no script) keeps the plain window, so no empty gap opens */
.cg-pin__room{height:var(--vh)}
:root.cg-js .cg-pin__room,.cg-pin:has(.cg-square--home) .cg-pin__room{height:calc(var(--vh) * 1.4)}
.cg-square{display:flex;align-items:flex-start;padding-bottom:var(--pad)}
.cg-square__frame{flex:0 0 auto;width:var(--s10);aspect-ratio:1}
.cg-square__copy{width:var(--tw)}
.cg-square__copy>*+*{margin-top:20px}
.cg-square__copy>.cg-body+.cg-body{margin-top:16px}
.cg-square__copy>.cg-btn{margin-top:28px}
.cg-square--right .cg-square__copy{order:1;margin-left:var(--x3);padding-top:100px}
.cg-square--right .cg-square__frame{order:2;margin-left:calc(var(--x13) - var(--x3) - var(--tw))}
.cg-square--left{align-items:center}
.cg-square--left .cg-square__frame{margin-left:var(--x3)}
.cg-square--left .cg-square__copy{margin-left:calc(var(--x15) - var(--x3) - var(--s10))}
.cg-square--home.cg-pin__stage{--pin-css:calc(var(--vh) - var(--s10) - var(--pad) - 40px)}
.cg-square--dark .cg-square__copy .cg-body{color:var(--page)}

/* ---------- small split: text at col 3 from the section's top, a 306 picture at col 15 70 px lower (the reference's
   story split, measured: text at 0, picture at 69.7) ---------- */
.cg-mini{display:flex;align-items:flex-start;padding-bottom:var(--pad)}
.cg-mini__copy{width:var(--tw);margin-left:var(--x3)}
.cg-mini__copy .cg-lead,.cg-mini__copy .cg-body{margin-top:20px}
.cg-mini__copy .cg-h-xl+.cg-body{margin-top:32px}
.cg-mini__copy .cg-btn{margin-top:32px}
.cg-mini__pic{flex:0 0 auto;width:var(--s6);aspect-ratio:306/367;margin:70px 0 0 calc(var(--x15) - var(--x3) - var(--tw))}
.cg-mini--help{padding-top:var(--pad)}
.cg-mini--help .cg-mini__pic{aspect-ratio:1;margin-top:98px}

/* ---------- rising picture panel ---------- */
.cg-panel{position:relative;z-index:2;display:flex;align-items:center;height:var(--vh);min-height:480px;margin-top:calc(-1 * var(--vh));overflow:hidden;background:#3c3a37;color:var(--page)}
.cg-panel__media,.cg-panel__media img{position:absolute;inset:0;width:100%;height:100%}
.cg-panel__media img{object-fit:cover}
.cg-panel::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.2);pointer-events:none}
.cg-panel--shade::after{background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.2) 55%),rgba(0,0,0,.2)}
/* the statement's own soft shade, which goes wherever the words go: its first lines start on the brightest haze, so a
   feathered dark oval behind the block keeps them clear of it (review round 4; at 3.1:1 there before) */
.cg-index .cg-panel__words::before{content:'';position:absolute;inset:-55% -45%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.3) 0,rgba(0,0,0,.29) 38%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.12) 72%,rgba(0,0,0,.045) 86%,rgba(0,0,0,0) 100%)}
.cg-panel__words{position:relative;z-index:1;margin-left:var(--x13);width:var(--s8)}

/* ---------- picture pairs, wide and full bleed pictures ---------- */
.cg-pt{padding-top:var(--pad)}
.cg-duo{display:flex;align-items:flex-start;padding-bottom:var(--pad)}
.cg-duo__small{flex:0 0 auto;width:var(--s8);aspect-ratio:419/502}
.cg-duo__big{flex:0 0 auto}
.cg-duo--a .cg-duo__small{margin:101px 0 0 var(--x3)}
.cg-duo--a .cg-duo__big{width:calc(100cqw - var(--x13));aspect-ratio:1;margin-left:calc(var(--x13) - var(--x3) - var(--s8))}
.cg-duo--b .cg-duo__big{width:calc(var(--m) + var(--s12));aspect-ratio:704/923}
.cg-duo--b .cg-duo__small{margin:209px 0 0 calc(var(--x15) - var(--m) - var(--s12))}
.cg-duo--c .cg-duo__small{margin:171px 0 0 var(--x3)}
.cg-duo--c .cg-duo__big{width:calc(100cqw - var(--x13));aspect-ratio:704/843;margin-left:calc(var(--x13) - var(--x3) - var(--s8))}
.cg-wide{padding-bottom:var(--pad)}
.cg-wide__frame{width:calc(100cqw - var(--x3));aspect-ratio:1267/845}
.cg-full__frame{width:100%;aspect-ratio:3/2;max-height:calc(var(--vh) * 1.07)}

/* ---------- 24 column lists ---------- */
.cg-steps__list,.cg-stagger,.cg-pair__list,.cg-collage,.cg-notes,.cg-timeline,.cg-faq,.cg-qa,.cg-drawings{
  display:grid;grid-template-columns:repeat(24,minmax(0,1fr));column-gap:var(--g);padding-left:var(--m);padding-right:var(--m);align-items:start}

/* five steps, each column 80 lower (massage) */
.cg-steps{padding-bottom:var(--pad)}
.cg-steps__list{row-gap:120px}
.cg-steps__item:nth-child(1){grid-area:1/5/2/span 6}
.cg-steps__item:nth-child(2){grid-area:1/11/2/span 6;margin-top:80px}
.cg-steps__item:nth-child(3){grid-area:1/17/2/span 6;margin-top:160px}
.cg-steps__item:nth-child(4){grid-area:2/3/3/span 6}
.cg-steps__item:nth-child(5){grid-area:2/9/3/span 6;margin-top:80px}
.cg-steps__frame{aspect-ratio:306/401}
.cg-steps__title{margin-top:24px}
.cg-steps__text{margin-top:12px}

/* cards 531 wide, two to a row, the right one 160 lower (sessions, the class, the half hour) */
.cg-stagger{row-gap:120px}
.cg-stagger>li:nth-child(1){grid-area:1/3/2/span 10}
.cg-stagger>li:nth-child(2){grid-area:1/15/2/span 10;margin-top:160px}
.cg-stagger>li:nth-child(3){grid-area:2/1/3/span 10}
.cg-stagger>li:nth-child(4){grid-area:2/13/3/span 10;margin-top:160px}
.cg-stagger>li:nth-child(5){grid-area:3/8/4/span 10}
.cg-cards{padding:120px 0 var(--pad)}
.cg-cards__head{margin:0 0 52px var(--x3);width:var(--s10)}
.cg-card__frame{aspect-ratio:531/637}
.cg-card:nth-child(even) .cg-card__frame{aspect-ratio:531/695}
.cg-card__meta{margin-top:24px;font:400 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.cg-card__title{margin-top:6px}
.cg-card__text{max-width:var(--s8);margin-top:12px}
.cg-card .cg-btn{margin-top:20px}
.cg-acts{padding-bottom:var(--pad)}
.cg-acts__head{width:var(--s10);margin:0 0 120px var(--x3)}
.cg-acts__head .cg-h-lg{margin-top:16px}
.cg-act__frame{aspect-ratio:531/637}
.cg-act__title{margin-top:24px}
.cg-act__text{max-width:var(--s8);margin-top:10px}

/* ---------- intro split (massage) ---------- */
.cg-intro{display:flex;align-items:center;padding:var(--pad) 0}
.cg-intro__pic{flex:0 0 auto;width:var(--s10);aspect-ratio:531/695;margin-left:var(--x3)}
.cg-intro__copy{width:var(--s8);margin-left:calc(var(--x15) - var(--x3) - var(--s10))}
.cg-intro__copy .cg-body{margin-top:20px}
.cg-intro__copy .cg-h-xl+.cg-body{margin-top:40px}

/* ---------- who you'll see ---------- */
/* follows the second picture pair straight on, as the reference's staff split does (about 160 px from the pictures) */
.cg-who{display:flex;align-items:flex-start;padding:0 0 var(--pad)}
.cg-who__copy{width:var(--s8);margin-left:var(--x3)}
.cg-who__copy .cg-h-lg{margin-top:16px}
.cg-who__copy .cg-body{margin-top:20px}
.cg-who__copy .cg-h-lg+.cg-body{margin-top:28px}
.cg-who__pic{flex:0 0 auto;width:var(--s10);aspect-ratio:3/2;margin-left:calc(var(--x13) - var(--x3) - var(--s8))}

/* ---------- 60 or 90 minutes (tabs) ---------- */
.cg-timeline{padding-bottom:var(--pad)}
.cg-timeline__side{grid-column:3/span 7}
.cg-timeline__lead{margin-top:20px}
.cg-timeline__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.cg-timeline__panels{grid-column:13/span 8}
.cg-timeline__panel+.cg-timeline__panel{margin-top:64px}
.cg-timeline__name{display:inline-block;padding:12px 16px;border:1px solid var(--line);border-radius:3px;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase}
.cg-timeline__list{margin-top:36px}
.cg-timeline__list li+li{margin-top:30px}
.cg-timeline__step{font:400 18px/26px var(--sans)}
.cg-timeline__step span{margin-left:6px;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.cg-timeline__list .cg-small{margin-top:6px}
:root:not(.cg-js) .cg-timeline__tabs{display:none}

/* ---------- included / not included and the questions (rows that open) ---------- */
.cg-included{padding-bottom:var(--pad)}
.cg-acc{width:var(--s12);margin-left:var(--x7)}
.cg-acc+.cg-acc{margin-top:80px}
.cg-acc__list{margin-top:40px;border-top:1px solid var(--line-2)}
.cg-acc__row{border-bottom:1px solid var(--line-2)}
.cg-acc__head{font:inherit}
.cg-acc__btn{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-height:66px;padding:20px 0;border:0;background:none;
  color:var(--ink-2);font:360 18px/26px var(--sans);letter-spacing:.2px;text-transform:uppercase;text-align:left;cursor:pointer;transition:color .15s var(--std)}
.cg-acc__btn[aria-expanded=true]{color:var(--ink)}
@media (hover:hover){.cg-acc__btn:hover{color:var(--ink)}}
.cg-acc__icon{flex:0 0 24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2}
.cg-acc__btn[aria-expanded=true] .cg-acc__bar{display:none}
/* a row opens and closes on a spring (site.js: stiffness 180, damping 30, mass 1) on its height and opacity */
.cg-acc__panel{overflow:hidden}
.cg-acc__inner{padding:0 48px 26px 0}
.cg-acc__inner .cg-small+.cg-small{margin-top:10px}
.cg-faq{padding-top:var(--pad);padding-bottom:var(--pad)}
/* movement: the reference's wide plate and square pair sit between "Not included" and the questions; without them the two
   paddings close up to one, so no empty band twice the page's rhythm opens there (review round 3) */
.cg-included+.cg-faq{padding-top:0}
.cg-faq__head{grid-column:3/span 8}
.cg-faq__head .cg-h-xl{margin-top:16px}
.cg-faq__head .cg-body{margin-top:32px;max-width:var(--s6)}
.cg-faq__list{grid-column:7/span 12;margin-top:120px}
.cg-faq__list .cg-acc__btn{text-transform:none;font-size:20px;letter-spacing:0}

/* ---------- dark chapters ---------- */
.cg-dark{background:var(--ink);color:var(--page)}
.cg-dark .cg-eyebrow{color:var(--mute-dk)}
.cg-dark .cg-frame{background:#3a383b}
.cg-dark .cg-btn{background:var(--ink);border-color:var(--ink-2);color:var(--line)}
@media (hover:hover){
  .cg-dark .cg-btn:hover{background:var(--green);border-color:var(--green);color:#fff}
  .cg-dark .cg-link:hover{color:var(--line)}
}
.cg-chapter-head{padding:var(--pad) 0 var(--pad) var(--x3)}
.cg-chapter-head .cg-h-xl{width:var(--s8)}
.cg-chapter-head .cg-body{width:var(--tw);margin-top:40px}

/* dark carousel of the rooms */
.cg-rooms{padding:var(--pad) 0;overflow:hidden}
.cg-rooms__head{width:var(--tw);margin-left:var(--x7)}
.cg-rooms__head .cg-lead{margin-top:20px}
.cg-rooms__track{display:flex;gap:var(--g);margin-top:80px;padding:0 calc(100cqw - var(--x7) - var(--s8)) 0 var(--x7);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--x7);scrollbar-width:none;overscroll-behavior-x:contain}
.cg-rooms__track::-webkit-scrollbar{display:none}
.cg-rooms__track:focus-visible{outline-offset:-4px}
.cg-rooms__slide{flex:0 0 var(--s8);scroll-snap-align:start}
.cg-rooms__slide a{display:block}
.cg-rooms__frame{aspect-ratio:419/645}
.cg-rooms__title{margin-top:20px;font:400 16px/23px var(--hand);letter-spacing:.75px;text-transform:uppercase;color:var(--page);transition:color .15s ease}
@media (hover:hover){.cg-rooms__slide a:hover .cg-rooms__title{color:var(--line)}}
.cg-rooms__nav{display:flex;align-items:center;gap:8px;margin:48px 0 0 var(--x7)}
.cg-rooms__count{margin-left:16px;font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute-dk)}
.cg-rooms__count span{color:var(--page)}
:root:not(.cg-js) .cg-rooms__nav{display:none}
/* the row arrives from 400 px to the right the first time it comes into view (1.6 s) */
.cg-js .cg-rooms__track{translate:400px 0}
.cg-js .cg-rooms.is-in .cg-rooms__track{translate:0 0;transition:translate 1.6s var(--arrive)}

/* dark collage (home) */
.cg-collage{padding-top:0;padding-bottom:var(--pad)}
.cg-collage__copy{grid-area:1/3/2/span 6}
.cg-collage__copy .cg-lead{margin-top:20px}
.cg-collage__copy .cg-btn{margin-top:28px}
.cg-collage__wide{grid-area:2/1/3/span 16;margin-top:80px;aspect-ratio:869/545}
.cg-collage__square{grid-area:2/17/3/span 8;margin-top:80px;aspect-ratio:1}
/* the small square drifts like the others (its picture 10% over its frame, so no strip of the frame shows) and sits on
   the portrait's left edge, column 17 (closing fix of pass 5) */
.cg-collage__small{grid-area:2/17/4/span 4;width:16cqw;aspect-ratio:1;margin-top:calc(80px + var(--s8) + 30px)}
.cg-collage__text{grid-area:3/3/4/span 8;margin-top:48px}
.cg-plate{padding-bottom:var(--pad)}
.cg-plate__frame{width:calc(100cqw - var(--x3));aspect-ratio:1267/697}

/* three practical notes (home): the reference's three press notes keep their places (col 7, then col 12 lower, then col 3);
   each note's heading is set large in the hand face, where the reference has a press logo, and the first note sits
   between hairlines as its first quote does */
/* the first note's heading sits 256 px under the plate, as the reference's first press logo sits 257 under its plate */
.cg-notes{padding-top:16px;padding-bottom:var(--pad)}
.cg-note--one{grid-column:7/span 12}
.cg-note--two{grid-column:12/span 6;margin-top:180px}
.cg-note--three{grid-column:3/span 6;margin-top:40px}
.cg-note__head{font:360 32px/40px var(--hand);letter-spacing:.3px;color:var(--page)}
.cg-note--one .cg-note__head{font-size:46px;line-height:54px}
.cg-note__big{margin-top:28px;padding:30px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);
  font:360 25px/32px var(--hand);letter-spacing:.75px}
.cg-note .cg-small{margin-top:20px}
.cg-note .cg-link{margin-top:12px}

/* pair it with (session pages) */
.cg-pair{padding:var(--pad) 0}
.cg-pair__head{width:var(--tw8);margin-left:var(--x7)}
.cg-pair__head .cg-lead{margin-top:20px}
.cg-pair__list{margin-top:144px}
.cg-pair__item:nth-child(1){grid-column:5/span 6}
.cg-pair__item:nth-child(2){grid-column:11/span 6;margin-top:80px}
.cg-pair__item:nth-child(3){grid-column:17/span 6;margin-top:160px}
.cg-pair__item a{display:block}
.cg-pair__frame{aspect-ratio:306/401}
.cg-pair__title{margin-top:24px;transition:color .15s ease}
@media (hover:hover){.cg-pair__item a:hover .cg-pair__title{color:var(--line)}}
.cg-pair__fact{display:block;margin-top:6px;font:360 18px/26px var(--sans);color:var(--line)}

/* the tea room (rituals) */
.cg-quiet{display:flex;align-items:center;padding-bottom:var(--pad)}
.cg-quiet__pic{flex:0 0 auto;width:calc(50cqw - 8px);aspect-ratio:712/549}
.cg-quiet__copy{width:var(--tw);margin-left:calc(var(--x15) - 50cqw + 8px)}
.cg-quiet__copy .cg-lead{margin-top:20px}

/* ---------- the statement that inks itself word by word (move C) ---------- */
.cg-reveal{display:flex;align-items:center;height:var(--vh);min-height:600px}
.cg-reveal__block{width:var(--s12);margin-left:var(--x7);padding:40px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
/* each word turns from the hairline grey to ink as the scroll passes its point (site.js), easing over 0.5 s */
.cg-js [data-cg-reveal] span{color:var(--line);transition:color .5s var(--ink-in)}
.cg-js [data-cg-reveal] span.is-on{color:var(--ink)}
.cg-quote{display:flex;align-items:center;min-height:546px;padding:120px 0}
.cg-quote__block{width:var(--s12);margin-left:var(--x7);padding-top:40px;border-top:1px solid var(--line-2)}
.cg-quote__mark{display:block;height:28px;font:400 60px/46px var(--hand);color:var(--ink)}
.cg-quote blockquote{margin-top:12px;padding-bottom:40px;border-bottom:1px solid var(--line-2)}
.cg-quote__cap{margin-top:24px;font:400 15px/23px var(--hand);letter-spacing:.75px;text-transform:uppercase}
.cg-quote__cap span{display:block}
.cg-quote__cap span+span{color:var(--mute)}

/* ---------- through the year (studio) ---------- */
.cg-year{padding-bottom:var(--pad)}
.cg-year__head{width:var(--s12);margin-left:var(--x7)}
.cg-year__head .cg-h-lg{margin-top:16px}
.cg-year__head .cg-body{max-width:var(--s10);margin-top:20px}
.cg-year__stage{position:relative;margin-top:80px;aspect-ratio:16/9;overflow:hidden;background:#5a524c}
/* the shade under the season chips keeps its depth on short stages (1000 to 1200 wide), where 12% of the height no longer
   reaches the chips; review round 2: the 11.5 to 12.5 px chip text keeps 5:1 over all four pictures from 320 to 1920 */
.cg-year__stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.24) max(12%,97px),rgba(0,0,0,0) max(28%,160px)),rgba(0,0,0,.06)}
/* a season's picture and line change at once, as the reference's */
.cg-year__pic{position:absolute;inset:0;opacity:0}
.cg-year__pic.is-on{opacity:1}
.cg-year__pic img{display:block;width:100%;height:100%;object-fit:cover}
.cg-year__chips{position:absolute;z-index:1;top:40px;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 var(--m)}
.cg-year__chip{min-height:46px;padding:12px 16px;border:1px solid rgba(194,185,186,.85);border-radius:3px;background:rgba(45,44,48,.34);color:var(--page);
  font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;cursor:pointer;transition:border-color .15s var(--std),color .15s var(--std)}
.cg-year__chip[aria-pressed=true]{border-color:#fff;color:#fff}
@media (hover:hover){.cg-year__chip:hover{border-color:#fff;color:#fff}}
.cg-year__notes{width:var(--s12);margin:32px 0 0 var(--x7);font:360 18px/26px var(--sans)}
.cg-year__notes span{font:450 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute);margin-right:6px}
.cg-year__notes li+li{margin-top:10px}
.cg-js .cg-year__notes li{display:none}
.cg-js .cg-year__notes li.is-on{display:block}
:root:not(.cg-js) .cg-year__chips{display:none}

/* ---------- what we look after (studio): the reference's list, a left aligned column of 504 at x 468 with a hairline
   between lines, 104 px apart ---------- */
.cg-list{padding-bottom:var(--pad)}
.cg-list .cg-h-lg,.cg-list ul{width:35cqw;margin:0 auto}
.cg-list ul{margin-top:38px}
.cg-list li{padding:40px 0 40px;border-top:1px solid var(--line-2)}
.cg-list li:first-child{padding-top:0;border-top:0}

/* ---------- your visit: the details, the drawings and the questions ---------- */
/* The reference sets the details straight after the getting there split (its text at the section's top, 193 px under
   the square) and the wide picture straight after the drawings (187 px under them). Ours runs the details and the
   drawings in a dark chapter, so each of those gaps is shared: half the page colour, half the chapter. */
.cg-your-visit #getting-here{padding-bottom:calc(var(--pad) / 2)}
.cg-your-visit .cg-wide.cg-pt{padding-top:calc(var(--pad) / 2)}
.cg-details{width:var(--s12);margin-left:var(--x7);padding:calc(var(--pad) / 2) 0 120px}
.cg-details__group{margin-top:44px}
.cg-details__head{font:360 18px/26px var(--sans);letter-spacing:.2px;text-transform:uppercase;color:var(--line)}
.cg-details__group .cg-small{margin-top:8px}
.cg-drawings{padding-bottom:calc(var(--pad) / 2)}
.cg-drawings__item:nth-child(1){grid-column:2/span 11}
.cg-drawings__item:nth-child(2){grid-column:13/span 11}
.cg-drawings figcaption{margin-top:16px;color:var(--line)}
/* the drawing's pane sits behind it on the figure, so the drawing's lines and labels dissolve under the header while the
   pane stays whole (closing fix of pass 5) */
.cg-drawings__item{position:relative;isolation:isolate}
.cg-drawings__item::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:0;aspect-ratio:1;background:#353438}
.cg-drawing{display:block;width:100%;height:auto;aspect-ratio:1}
.cg-drawing text{font:400 17px var(--hand);letter-spacing:1px;text-transform:uppercase;fill:var(--line)}
.cg-draw__roads path{fill:none;stroke:#423f43;stroke-width:16;stroke-linecap:square}
.cg-draw__rail path{fill:none;stroke:var(--mute-dk);stroke-width:2.5}
.cg-draw__rail .cg-draw__ties{stroke-width:10;stroke-dasharray:2 12}
.cg-draw__river path{fill:none;stroke:#6c6364;stroke-width:2}
.cg-draw__park path{fill:rgba(154,145,146,.14);stroke:#6c6364;stroke-width:1.5;stroke-dasharray:5 6}
.cg-draw__shops rect{fill:none;stroke:var(--mute-dk);stroke-width:1.5}
.cg-draw__station{fill:var(--mute-dk)}
.cg-draw__studio{fill:var(--page);stroke:rgba(233,226,220,.35);stroke-width:12}
.cg-draw__walk{fill:none;stroke:var(--page);stroke-width:1.5;stroke-dasharray:4 6}
.cg-draw__walls path{fill:none;stroke:var(--line);stroke-width:3}
.cg-draw__doors path{fill:none;stroke:var(--mute-dk);stroke-width:1.5;stroke-dasharray:4 4}
.cg-draw__garden path,.cg-draw__garden circle{fill:none;stroke:#6c6364;stroke-width:1.5}
.cg-draw__furniture rect,.cg-draw__furniture circle{fill:none;stroke:var(--mute-dk);stroke-width:1.5}
.cg-qa{padding-bottom:var(--pad)}
.cg-qa__pic{grid-area:1/3/2/span 10;aspect-ratio:531/756}
.cg-frame.cg-qa__pic{position:sticky;top:calc(var(--head) + 24px)}
.cg-qa__copy{grid-area:1/15/2/span 8;padding-top:120px}
.cg-qa--right .cg-qa__pic{grid-area:1/13/2/span 10}
.cg-qa--right .cg-qa__copy{grid-area:1/3/2/span 8}
.cg-qa__copy .cg-body{margin-top:20px}
.cg-qa__copy .cg-qa__q+.cg-body{margin-top:40px}

/* ---------- booking band (every page) ---------- */
.cg-band{position:relative;display:flex;flex-direction:column;align-items:center;height:420px;padding-top:157px;overflow:hidden;background:#5a4f47;color:var(--page);text-align:center}
.cg-band__media,.cg-band__media img{position:absolute;inset:0;width:100%;height:100%}
.cg-band__media img{object-fit:cover}
.cg-band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 34% 46% at 50% 50%,rgba(0,0,0,.4),rgba(0,0,0,0)),rgba(0,0,0,.2)}
.cg-band__title,.cg-band .cg-btn{position:relative;z-index:1}
.cg-band__title{font-weight:300}
.cg-band .cg-btn{margin-top:32px}

/* ---------- footer ---------- */
.cg-footer{padding:120px var(--m) 40px;background:var(--page)}
.cg-footer__top{display:flex;align-items:flex-start}
.cg-footer__mark{flex:0 0 calc(var(--x13) - var(--m));color:var(--ink)}
.cg-footer__mark a{display:inline-block;padding:4px 0;margin:-4px 0}
.cg-footer__mark svg{display:block;height:37px;width:auto}
.cg-footer__cols{display:flex}
.cg-footer__cols ul{width:calc(var(--s6) + var(--g))}
.cg-footer__cols a{display:inline-flex;align-items:center;min-height:31px;font:400 15px/23px var(--hand);letter-spacing:.75px;text-transform:uppercase;transition:color .15s var(--std)}
.cg-footer__legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;margin-top:120px;padding-top:24px;border-top:1px solid var(--line-2);
  font:400 12px/20px var(--hand);letter-spacing:.6px;color:var(--ink-2)}
.cg-footer__legal p{max-width:760px}
.cg-footer__legal a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover){
  .cg-footer__cols a:hover{color:var(--mute)}
  .cg-footer__legal a:hover{color:var(--ink)}
}

/* ---------- text only hero (rituals) and split heroes (your visit, contact) ---------- */
.cg-textonly{padding:240px 0 200px}
.cg-textonly .cg-h-xl{margin-left:var(--x5);width:var(--s8)}
.cg-textonly .cg-body{margin:40px 0 0 var(--x5);width:var(--tw)}
.cg-sidehero{display:flex;align-items:center;padding:150px 0 var(--pad)}
.cg-sidehero__copy{flex:0 0 auto;width:var(--tw);margin-left:var(--x3)}
.cg-sidehero__copy .cg-eyebrow+.cg-h-xl{margin-top:20px}
.cg-sidehero__text{margin-top:40px}
.cg-sidehero__pic{flex:0 0 auto;width:50cqw;aspect-ratio:712/699;margin-left:auto}
.cg-contact .cg-sidehero__pic{aspect-ratio:720/699}
.cg-sidehero--form{align-items:flex-start}
.cg-sidehero--form .cg-sidehero__pic{position:sticky;top:127px;margin-top:127px}

/* contact form */
.cg-form{margin-top:44px}
.cg-form fieldset{margin:0;padding:0;border:0;min-width:0}
.cg-field{display:block;margin-top:25px}
.cg-field>span{display:block;font:400 12.5px/20px var(--hand);letter-spacing:.7px;text-transform:uppercase;color:var(--mute)}
.cg-field input,.cg-field select,.cg-field textarea{display:block;width:100%;margin-top:8px;padding:11px 14px;border:1px solid var(--line);border-radius:3px;background:var(--page);color:var(--ink);
  font:360 16px/24px var(--sans);transition:border-color .15s ease}
.cg-field select{appearance:none;padding-right:42px;cursor:pointer;
  background:var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%232d2c30' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center/14px 14px}
.cg-field textarea{min-height:120px;resize:vertical}
@media (hover:hover){.cg-field input:hover,.cg-field select:hover,.cg-field textarea:hover{border-color:var(--mute-2)}}
.cg-field input:focus,.cg-field select:focus,.cg-field textarea:focus{border-color:var(--mute);outline:2px solid var(--ink);outline-offset:2px}
.cg-form__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cg-form__note{margin-top:24px;font:360 15px/23px var(--sans);color:var(--ink-2)}
.cg-result{margin-top:44px;padding:32px;background:var(--card)}
.cg-result h2{font:300 28px/36px var(--sans);letter-spacing:.02em}
.cg-result [data-form-summary]{margin-top:16px;font:360 16px/24px var(--sans)}
.cg-result [data-form-message]{margin-top:16px;font:360 15px/23px var(--sans);color:var(--ink-2)}
.cg-result .cg-btn{margin-top:24px}

/* ---------- under 1200: the reference's smaller type roles take over here, as its own do ---------- */
@media (max-width:1199px){
  .cg-eyebrow{font-size:16px;line-height:22px}
  .cg-lead{font-size:20px;line-height:28px}
  .cg-h-xl{font-size:38px;line-height:44px}
  .cg-h-lg{font-size:28px;line-height:34px}
  .cg-h-md{font-size:22px;line-height:28px}
  .cg-body{font-size:16px;line-height:24px}
  .cg-small{font-size:15px;line-height:22px}
  body.cg{font-size:16px;line-height:24px}
  /* the statement that inks itself, the quote and the questions beside the pictures (the hand statements in the
     panels and on the home keep 34/46 at every width, as the reference's) */
  .cg-reveal .cg-statement,.cg-quote .cg-statement,.cg-qa__q{font-size:25.5px;line-height:34px}
  .cg-hero--two .cg-hero__title{font-size:38px;line-height:44px}
  .cg-hero--two .cg-hero__text{margin-top:20px;font-size:16px;line-height:24px}
  .cg-back{margin-top:8px}
  .cg-acc__btn{min-height:58px;padding:16px 0;font-size:15px;line-height:22px}
  .cg-faq__list .cg-acc__btn{font-size:17px;line-height:24px}
  /* the anchor row sits 20 px under the wordmark in 11 px caps; its box starts where the wordmark's ends */
  .cg-subnav{top:78px}
  .cg-subnav ul{gap:16px}
  .cg-subnav a{padding:12px 0 17px;font-size:11px;line-height:15px;letter-spacing:.6px}
  .cg-hero__block{width:var(--s8)}
  .cg-words__text{margin-left:var(--x9);width:var(--s12)}
  .cg-panel__words{margin-left:var(--x9);width:var(--s12)}
  /* the statement starts at about 35% under 1200, so the local shade (ledger 16) starts with it (review round 3) */
  .cg-panel--shade::after{background:linear-gradient(90deg,rgba(0,0,0,0) 21%,rgba(0,0,0,.2) 35%),rgba(0,0,0,.2)}
  .cg-book__card,.cg-next__card{margin-left:var(--x3);width:calc(var(--s16) + 4 * var(--step))}
  .cg-split__copy,.cg-split__inset{width:var(--s8)}
  .cg-reveal__block,.cg-quote__block,.cg-year__head,.cg-year__notes,.cg-acc,.cg-details{width:calc(var(--s16));margin-left:var(--x5)}
  .cg-pair__item:nth-child(1){grid-column:3/span 7}
  .cg-pair__item:nth-child(2){grid-column:10/span 7}
  .cg-pair__item:nth-child(3){grid-column:17/span 7}
  .cg-steps__item:nth-child(1){grid-area:1/3/2/span 7}
  .cg-steps__item:nth-child(2){grid-area:1/10/2/span 7}
  .cg-steps__item:nth-child(3){grid-area:1/17/2/span 7}
  .cg-steps__item:nth-child(4){grid-area:2/6/3/span 7}
  .cg-steps__item:nth-child(5){grid-area:2/13/3/span 7}
  .cg-timeline__side{grid-column:2/span 9}
  .cg-timeline__panels{grid-column:13/span 11}
  .cg-faq__list{grid-column:5/span 16}
  .cg-qa__copy{grid-area:1/14/2/span 10}
  .cg-qa--right .cg-qa__copy{grid-area:1/2/2/span 10}
  .cg-note--two{grid-column:12/span 9}
  .cg-note--three{grid-column:3/span 9}
  .cg-collage__copy{grid-column:3/span 9}
  .cg-collage__text{grid-column:3/span 11}
  .cg-list .cg-h-lg,.cg-list ul{width:50cqw}
}

/* ---------- 768 to 999: the splits stack ---------- */
@media (max-width:999px){
  /* one column: after the sheet, each row fades in over 0.2 s while its bottom margin closes from 24 to 16 px, so the
     centred rows gather on the fourth link (drawn here as each row's offset); going, 0.1 s, then the sheet */
  .cg-menu{transition:opacity 1s var(--std) .1s,visibility 0s linear 1.1s}
  .cg-menu__nav,.cg-menu[data-open] .cg-menu__nav{flex-basis:100%;opacity:1;translate:none;transition:none}
  .cg-menu__big li,.cg-menu__small{opacity:0;translate:0 var(--gather,0px);transition:opacity .1s var(--ease-out),translate .1s var(--ease-out)}
  .cg-menu__big li:nth-child(1){--gather:-24px}
  .cg-menu__big li:nth-child(2){--gather:-16px}
  .cg-menu__big li:nth-child(3){--gather:-8px}
  .cg-menu__big li:nth-child(5){--gather:8px}
  .cg-menu__small{--gather:16px}
  .cg-menu[data-open] .cg-menu__big li,.cg-menu[data-open] .cg-menu__small{opacity:1;translate:0 0;transition:opacity .2s var(--ease-out) .3s,translate .2s var(--ease-out) .3s}
  .cg-menu__pics{display:none}
  .cg-menu__big{margin-top:auto}
  .cg-menu__small{margin:30px 0 auto}
  .cg-menu__big a{min-height:52px;font-size:24px;line-height:32px}
  .cg-menu__small a{font:450 12.5px/18px var(--hand);letter-spacing:1.2px;color:var(--ink-2)}

  .cg-split,.cg-square,.cg-square--left,.cg-mini,.cg-intro,.cg-who,.cg-duo,.cg-quiet{display:flex;flex-direction:column;align-items:stretch}
  .cg-split__tall{width:auto;margin:0 var(--m)}
  .cg-split__side{padding:40px 0 0;margin-left:var(--cx2)}
  .cg-split__inset{width:var(--c6)}
  .cg-split--square-inset .cg-split__side{padding-top:40px}
  .cg-split__copy{width:var(--c7);margin-top:40px}
  .cg-split__copy .cg-lead{margin-top:12px}
  /* two classes, so these win over the desktop placements of both sides (a right hand square kept its desktop
     margin here before and showed narrow and pushed right) */
  .cg-square .cg-square__frame{order:1;width:auto;margin:0 var(--m)}
  .cg-square .cg-square__copy{order:2;width:var(--c7);margin-left:var(--cx2);padding-top:40px}
  .cg-square__copy>*+*{margin-top:12px}
  .cg-square--home.cg-pin__stage{--pin-css:calc(var(--vh) - 820px)}
  .cg-mini__copy{order:2;width:var(--c7);margin-left:var(--cx2);padding-top:40px}
  .cg-mini--help .cg-mini__copy{padding-top:40px}
  .cg-mini__pic,.cg-mini--help .cg-mini__pic{order:1;width:var(--c6);margin:0 0 0 var(--cx2)}
  .cg-mini--help{padding-top:var(--pad)}
  /* a stage that pins under a rising panel shows its words before its picture here, so the panel covers the picture
     first and the words stay in view for most of the pin (picture first, the words were covered within a quarter of
     a screen of scrolling) */
  .cg-pin__stage.cg-square .cg-square__copy,.cg-pin__stage.cg-mini .cg-mini__copy{order:1;padding-top:0}
  .cg-pin__stage.cg-square .cg-square__frame{order:2;margin:48px var(--m) 0}
  .cg-pin__stage.cg-mini .cg-mini__pic{order:2;margin:48px 0 0 var(--cx2)}
  .cg-intro{padding-top:120px}
  .cg-intro__pic{width:auto;margin:0 var(--m)}
  .cg-intro__copy{width:auto;margin:48px var(--m) 0}
  .cg-intro__copy .cg-h-xl+.cg-body{margin-top:28px}
  .cg-who{padding-top:0}
  .cg-who__pic{order:1;width:auto;margin:0 var(--m)}
  .cg-who__copy{order:2;width:var(--c7);margin:40px 0 0 var(--cx2)}
  .cg-duo__small,.cg-duo--a .cg-duo__small,.cg-duo--b .cg-duo__small,.cg-duo--c .cg-duo__small{width:var(--c6);margin:0 0 0 var(--cx2)}
  .cg-duo__big,.cg-duo--a .cg-duo__big,.cg-duo--b .cg-duo__big,.cg-duo--c .cg-duo__big{width:auto;margin:40px var(--m) 0}
  .cg-duo--b .cg-duo__big{margin-top:0}
  .cg-duo--b .cg-duo__small{margin-top:40px}
  .cg-wide__frame{width:100%;aspect-ratio:1}
  .cg-quiet__pic{width:auto;margin:0 var(--m)}
  .cg-quiet__copy{width:var(--c7);margin:40px 0 0 var(--cx2)}

  .cg-steps__list,.cg-stagger,.cg-pair__list,.cg-collage,.cg-notes,.cg-timeline,.cg-faq,.cg-qa,.cg-drawings{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cg-steps__list,.cg-pair__list{row-gap:72px}
  .cg-steps__item:nth-child(n),.cg-pair__item:nth-child(n){grid-area:auto/1/auto/span 6;margin-top:0}
  .cg-steps__item:nth-child(3n+2),.cg-pair__item:nth-child(3n+2){grid-column:2/span 6}
  .cg-steps__item:nth-child(3n),.cg-pair__item:nth-child(3n){grid-column:3/span 6}
  .cg-stagger{row-gap:72px}
  .cg-stagger>li:nth-child(n){grid-area:auto/1/auto/span 7;margin-top:0}
  .cg-stagger>li:nth-child(even){grid-column:2/span 7}
  .cg-card:nth-child(even) .cg-card__frame{aspect-ratio:531/637}
  .cg-cards{padding-top:120px}
  .cg-cards__head,.cg-acts__head{width:auto;margin:0 var(--m) 48px}
  .cg-pair__head{width:var(--c7);margin-left:var(--m)}
  .cg-pair__list{margin-top:64px}
  .cg-timeline__side,.cg-timeline__panels{grid-column:1/-1}
  .cg-timeline__panels{margin-top:56px}
  .cg-acc,.cg-reveal__block,.cg-quote__block,.cg-year__head,.cg-year__notes,.cg-details{width:auto;margin-left:var(--m);margin-right:var(--m)}
  .cg-faq__head,.cg-faq__list{grid-column:1/-1}
  .cg-faq__list{margin-top:56px}
  .cg-collage__copy,.cg-collage__wide,.cg-collage__text{grid-column:1/-1}
  .cg-collage__copy{grid-row:1}
  .cg-collage__wide{grid-row:2;margin-top:48px}
  .cg-collage__square{grid-area:3/1/4/span 5;margin-top:16px}
  .cg-collage__small{grid-area:3/6/4/span 3;width:auto;margin:16px 0 0}
  .cg-collage__text{grid-row:4;margin-top:40px}
  .cg-plate__frame{width:100%;aspect-ratio:1}
  .cg-notes{row-gap:64px}
  .cg-note--one,.cg-note--two,.cg-note--three{grid-column:1/-1;margin-top:0}
  .cg-rooms__head{width:var(--c7);margin-left:var(--cx2)}
  .cg-rooms__track{gap:16px;margin-top:48px;padding:0 calc(100cqw - var(--cx2) - 68cqw) 0 var(--cx2);scroll-padding-left:var(--cx2)}
  .cg-rooms__slide{flex-basis:68cqw}
  .cg-rooms__nav{margin-left:var(--cx2)}
  .cg-chapter-head{padding:var(--pad) var(--m)}
  .cg-chapter-head .cg-h-xl,.cg-chapter-head .cg-body{width:auto}
  .cg-drawings__item:nth-child(n){grid-column:1/-1}
  .cg-drawings{row-gap:56px}
  .cg-qa{row-gap:40px}
  .cg-qa__pic,.cg-qa--right .cg-qa__pic{grid-area:1/1/2/-1;aspect-ratio:342/487}
  .cg-frame.cg-qa__pic{position:relative;top:auto}
  .cg-qa__copy,.cg-qa--right .cg-qa__copy{grid-area:2/1/3/-1;padding-top:0}
  .cg-full__frame{aspect-ratio:1}
  .cg-year__stage{aspect-ratio:3/4}
  .cg-list .cg-h-lg,.cg-list ul{width:auto;margin-left:var(--m);margin-right:var(--m)}
  .cg-textonly{padding:180px var(--m) 120px}
  .cg-textonly .cg-h-xl,.cg-textonly .cg-body{margin-left:0;width:auto}
  .cg-sidehero,.cg-sidehero--form{flex-direction:column;align-items:stretch;padding:128px var(--m) var(--pad)}
  .cg-sidehero__pic,.cg-sidehero--form .cg-sidehero__pic{order:-1;position:relative;top:auto;width:100%;margin:0}
  .cg-sidehero__copy{width:auto;margin:48px 0 0}
  .cg-sidehero__text{margin-top:24px}
}

/* ---------- phone ---------- */
@media (max-width:767px){
  .cg-ribbon{height:20px;font-size:11px;line-height:13px;letter-spacing:.2px}
  .cg-ribbon a{margin:-12px 0}
  .cg-burger{top:20px}
  .cg-mark{top:26px;padding:6px 0 18px}
  .cg-mark svg{height:20px}
  .cg-header__links{top:27px;right:calc(var(--m) - 10px)}
  .cg-header__links a{padding:6px 10px 21px;font-size:11.5px;line-height:17px;letter-spacing:1.1px}
  .cg-header__links a+a{display:none}
  /* the anchor row's line sits 20 px under the wordmark (at 72); its box starts at the foot of the wordmark's (70) */
  .cg-subnav{top:70px}
  .cg-subnav ul{gap:10px;padding:0 11px}
  .cg-subnav a{padding:2px 0 27px}

  .cg-menu__nav{padding:96px 0 40px}
  .cg-menu__small{margin-top:24px}

  .cg-hero{min-height:480px}
  .cg-hero__title{font-size:38px;line-height:44px;margin-top:-28px}
  .cg-hero__sub{bottom:56px;font-size:16px;line-height:24px}
  /* the line under the title sits low on phones, over the brightest floor, so the shade at the foot starts higher */
  .cg-hero:not(.cg-hero--two)::after{background:linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,calc(var(--hero-top) * .8)) 70px,rgba(0,0,0,0) 210px),
    linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.4) 100%),rgba(0,0,0,.2)}
  /* phones centre the block on the picture, as the reference does (its blocks sit about the middle at 390) */
  .cg-hero__block{left:var(--m);width:var(--p7)}
  .cg-hero--two .cg-hero__title{margin:0}
  .cg-hero--two::after,.cg-hero--shade::after{background:linear-gradient(180deg,rgba(0,0,0,var(--hero-top)) 0,rgba(0,0,0,.08) 20%,rgba(0,0,0,var(--hero-mid)) 36%,
    rgba(0,0,0,var(--hero-mid)) 68%,rgba(0,0,0,.08) 84%,rgba(0,0,0,var(--hero-bottom)) 100%),rgba(0,0,0,.2)}

  .cg-book,.cg-next{padding:24px var(--m) 0}
  .cg-book__card,.cg-next__card{width:auto;min-height:0;margin:0;padding:40px 0 48px}
  .cg-book__card>.cg-h-lg,.cg-next__card>.cg-h-lg{padding:0 20px}
  .cg-book__ask{margin-top:44px;font-size:16px;line-height:24px}
  /* phones show the short day names, four then three */
  .cg-chips{flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:260px;margin:16px auto 0}
  .cg-chips__row{display:contents}
  .cg-chip{min-height:44px;padding:11px 12px;font-size:11.5px;line-height:20px;letter-spacing:.7px}
  .cg-chips .cg-chip{min-width:56px}
  .cg-chip__more{display:none}
  .cg-day,.cg-js .cg-day+.cg-day{padding:40px 20px 0}
  .cg-day__label{font-size:16px;line-height:24px}
  .cg-slot{gap:16px;padding:18px 0 20px}
  .cg-pills li{font-size:11px;letter-spacing:.6px;padding:3px 10px}
  .cg-book__note,.cg-next__note{padding:0 20px;font-size:15px;line-height:22px}
  .cg-week{margin-top:28px}
  .cg-next__chips{max-width:330px;padding:0 6px}
  .cg-next__chips .cg-chip{padding:11px 8px;letter-spacing:.5px}
  .cg-sticky{left:0;right:0;bottom:0;padding:12px var(--m) calc(12px + env(safe-area-inset-bottom,0px));background:var(--page);
    border-top:1px solid var(--line-2)}
  .cg-sticky .cg-btn{flex:1}
  .cg-round,.cg-week__btn{width:44px;height:44px}

  .cg-words{padding:var(--pad) 0}
  .cg-words__text{margin-left:var(--m);width:calc(100cqw - 2 * var(--m))}
  .cg-split__tall{margin:0 var(--m)}
  .cg-split__side{margin-left:var(--x2)}
  .cg-split__inset{width:var(--p6)}
  .cg-split__copy{width:var(--p7)}

  .cg-panel{align-items:center}
  /* the band under the statement reaches from 18% to 82%, as nine lines do on a 320 x 568 phone (review round 3; 30% to 76% before) */
  .cg-panel--phone-shade::after,.cg-panel--shade::after{background:linear-gradient(180deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.2) 18%,rgba(0,0,0,.2) 82%,rgba(0,0,0,0) 90%),rgba(0,0,0,.2)}
  .cg-panel__words{margin:0 var(--m);width:auto}

  .cg-reveal{height:auto;min-height:var(--vh)}
  .cg-quote{padding:var(--pad) 0}
  .cg-quote__mark{font-size:48px}
  .cg-year__chips{top:20px;gap:6px}
  .cg-year__chip{padding:11px 10px;font-size:11.5px}
  .cg-year__stage{margin-top:48px}
  .cg-rooms__title{font-size:12.5px;line-height:18px}
  .cg-notes{padding-top:40px}
  .cg-note__head{font-size:26px;line-height:32px}
  .cg-note--one .cg-note__head{font-size:34px;line-height:40px}
  .cg-note__big{margin-top:20px;padding:24px 0;font-size:20px;line-height:28px}
  .cg-acc__inner{padding-right:24px}
  .cg-drawing text{font-size:21px}
  .cg-timeline__tabs .cg-chip{min-height:44px}

  .cg-band{height:375px;padding:136px var(--m) 0}
  .cg-band::after{background:radial-gradient(ellipse 76% 46% at 50% 50%,rgba(0,0,0,.4),rgba(0,0,0,0)),rgba(0,0,0,.2)}
  .cg-band__title{font-size:22px;line-height:28px}
  .cg-band .cg-btn{margin-top:28px}

  .cg-footer{padding:80px var(--m) 32px}
  .cg-footer__top{display:block}
  .cg-footer__mark svg{height:24px}
  .cg-footer__mark a{padding:10px 0;margin:-10px 0}
  .cg-footer__cols{margin-top:40px}
  .cg-footer__cols ul{width:calc(4 * var(--step))}
  .cg-footer__cols a{min-height:44px;font-size:13px;line-height:18px;letter-spacing:.7px}
  .cg-footer__legal{display:block;margin:48px 0 0;font-size:12px}
  .cg-footer__legal>*+*{margin-top:10px}
  .cg-footer__legal a{display:inline-flex;align-items:center;min-height:44px;margin:0}

  .cg-textonly{padding:140px var(--m) 80px}
  .cg-sidehero,.cg-sidehero--form{padding:114px var(--m) var(--pad)}
  .cg-result{padding:24px}
}
@media (max-width:359px){
  .cg-hero__title{font-size:34px;line-height:40px}
  .cg-statement{font-size:30px;line-height:42px}
  .cg-statement p+p{margin-top:42px}
  .cg-h-xl{font-size:34px;line-height:40px}
  .cg-chips{max-width:240px}
  .cg-chips .cg-chip{min-width:52px;padding:11px 8px}
  .cg-ribbon{padding:0 16px;font-size:10.5px;letter-spacing:0}
  .cg-year__chip{padding:11px 7px;letter-spacing:.4px}
  /* the header keeps room between the wordmark and "Book now", as the reference's does at narrow widths: the mark at the
     reference's own phone width (96 px, 15.3 px tall, on the same centre line) and "Book now" at its 11 px, tracked
     0.6 px, so 22 px stay between them at 320 (pass 5; 12 px before) */
  .cg-mark{padding:8.35px 0 20.35px}
  .cg-mark svg{height:15.3px}
  .cg-header__links a{font-size:11px;letter-spacing:.6px}
  /* both sticky buttons fit inside the 24 px gutters */
  .cg-sticky .cg-btn{padding:12px 10px;font-size:11.5px;letter-spacing:.4px}
}
@media (pointer:coarse){
  .cg-footer__legal a{min-height:44px}
  .cg-header__links a{padding-top:12px;padding-bottom:12px;margin:-12px 0}
}
@media (pointer:coarse) and (max-width:767px){
  .cg-header__links a{padding:6px 10px 21px;margin:0}
}
/* reduced motion: nothing moves, slides or fades; changes happen at once */
@media (prefers-reduced-motion:reduce){
  body.cg>main{animation:none}
  .cg-js .cg-days{transition:none}
  .cg-js .cg-day.is-in,.cg-js .cg-day.is-in .cg-day__label,.cg-js .cg-day.is-in .cg-slot{animation:none}
  .cg-burger__bars,.cg-burger__bars span,.cg-burger__x{animation:none!important;transition:none!important}
  .cg-js .cg-rooms__track{translate:none!important;transition:none!important}
  .cg-js [data-cg-reveal] span{color:var(--ink)!important;transition:none!important}
  .cg-js .cg-reel{opacity:1;transition:none}
  .cg-menu,.cg-menu__nav,.cg-menu__pics,.cg-menu__pic,.cg-menu__veil,.cg-menu__big li,.cg-menu__small{transition:none!important}
  .cg-sticky,.cg-subnav,.cg-subnav ul,.cg-subnav a,.cg-mark,.cg-mark svg,.cg-header__links,.cg-header__links a,.cg-header::before,.cg-header::after{transition:none!important}
  .cg-frame--card .cg-frame__layer{transform:none!important}
}