/* Fieldwork v2: a garden design studio in Melbourne (illustrative business by Matt's Websites).
   Hand written. One class prefix (fw-). Desktop sizes come from a 1440 px design (--u is one design
   pixel; the layout stops growing at 1600 px and centres), phones from a 375 px design up to 767 px.
   Small text has floors so it never drops below a readable size. */

/* The display face's ascent is trimmed so its letters sit in their line boxes the way the measured
   headings do (capitals start near the top of the box, descenders stay inside it). */
@font-face{font-family:'FW Grotesk';src:url('/static/fw-grotesk-8c1d7aad21b4.woff2') format('woff2');font-weight:340 440;font-display:swap;ascent-override:89.8%;descent-override:43.2%;line-gap-override:0%}
@font-face{font-family:'FW Text';src:url('/static/fw-text-0a4e883ce530.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'FW Serif';src:url('/static/fw-serif-09c376d8450f.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'FW Italic';src:url('/static/fw-italic-031258501bfe.woff2') format('woff2');font-style:italic;font-weight:450;font-display:swap}

:root{
  --white:#fff;--stone:#f2ede4;--ink:#1e1d1c;--black:#060606;
  /* small muted text: the reference's 60% and 40% ink, darkened so 14 px words keep 4.5:1 on white, stone, the
     pastels and celeste (74% and 68%; ledger 62); the chapter digits keep the reference's 40% (decorative) */
  --ink80:rgba(30,29,28,.8);--ink60:rgba(30,29,28,.74);--ink40:rgba(30,29,28,.68);--ink20:rgba(30,29,28,.2);
  --sage:#d3dcd2;--blush:#f2e2ed;--sky:#dbe5f7;--lilac:#e8dbf5;--celeste:#cdcfc7;
  --vw:1vw;                                            /* site.js replaces this with the width without a scrollbar */
  --W:min(calc(var(--vw) * 100), 1600px);
  --u:calc(var(--W) / 1440);                           /* one design pixel */
  --t:var(--u);                                        /* type unit */
  --x0:max(0px, calc((var(--vw) * 100 - 1600px) / 2)); /* left edge of the centred layout above 1600 px */
  --rib0:30px;                                         /* the illustrative business bar (site.js sets --rib to its real height) */
  --rib:var(--rib0);
  --cap:max(14px, calc(19 * var(--u)));                /* wordmark cap height */
  --mk:calc(var(--cap) / 700);                         /* wordmark font unit */
  --gap:calc(185 * var(--u));                          /* the rhythm between sections on the detail pages */
  --f-grot:'FW Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-text:'FW Text','Helvetica Neue',Arial,sans-serif;
  --f-serif:'FW Serif',Georgia,serif;
  --f-ital:'FW Italic',Georgia,serif;
  --e-out:cubic-bezier(.22,1,.36,1);    /* quint out */
  --e-out3:cubic-bezier(.33,1,.68,1);   /* cubic out */
  --e-out4:cubic-bezier(.25,1,.5,1);    /* quart out */
  --e-io:cubic-bezier(.45,0,.55,1);     /* quad in out */
  --e-io2:cubic-bezier(.65,0,.35,1);    /* cubic in out: the menu, the page change and the wordmark's last letter */
  --e-io1:cubic-bezier(.37,0,.63,1);    /* sine in out */
  --e-io5:cubic-bezier(.87,0,.13,1);    /* expo in out, approximated: link underlines */
  --body:max(15px, calc(16 * var(--t)));
  --small:max(13px, calc(14 * var(--t)));
  --hb:#fff;                                           /* the colour behind the header pill (site.js) */
}
@media (max-width:767px){
  :root{--u:calc(var(--vw) * 100 / 375);--t:calc(min(var(--vw) * 100, 460px) / 375);--x0:0px;--rib0:28px;--cap:calc(20.2 * var(--t));--gap:calc(120 * var(--u))}
}

html{scroll-behavior:auto;scroll-padding-top:0;background:var(--white)}
/* the header floats over the sections, so anchors land at the top; the form result keeps clear of the header */
[data-form-result]{scroll-margin-top:110px}
body{margin:0;background:transparent;color:var(--ink);font:400 var(--body)/1.5 var(--f-text);font-kerning:normal;text-rendering:optimizeLegibility}
.fw-studio,.fw-care,.fw-enquire{background:var(--stone);--bar:var(--stone)}   /* --bar: the phones' bar takes the page's own ground */
.fw-js body{background:transparent}
a{color:inherit}
p,h1,h2,h3,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3{font-weight:400}
ul,ol{padding:0;list-style:none}
img{max-width:none}
.fw-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fw-mask{display:block;overflow:clip;padding:var(--mt,.14em) 0 var(--mb,.14em);margin:0 0 calc(-1 * (var(--mt,.14em) + var(--mb,.14em)))}
/* line masks stack at the text's own line pitch: sibling margins collapse, so only the bottom one is negative */
.fw-mask:first-child{margin-top:calc(-1 * var(--mt,.14em))}
.fw-mask:last-child{margin-bottom:calc(-1 * var(--mb,.14em))}
.fw-ln{display:block;text-wrap:balance}
h1,h2,h3,.fw-statement,.fw-say-text,.fw-serif64,.fw-lead,.fw-tm-text{text-wrap:pretty}
.fw-bg{position:fixed;inset:0;z-index:-1;background:var(--white);transition:background-color .5s ease}
.fw-main{display:block;position:relative}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
picture{display:block}
.fw-dim{position:absolute;inset:0;z-index:3;background:var(--black);opacity:0;pointer-events:none}

/* ---------------------------------------------------------------- the illustrative business bar */
/* a solid band in the colour of the section it sits on (build.py), so its words read on every page: ink on the light
   pages, light words on the ink band of the pages that open on a dark stage or a photograph */
.fw-ribbon{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:var(--rib0);
  padding:0 calc(var(--x0) + 30 * var(--u));background:var(--rb,var(--white));color:var(--ink60);font:400 12px/1.3 var(--f-text)}
.fw-ribbon p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fw-ribbon a{position:relative;white-space:nowrap;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink20)}
.fw-ribbon a::after{content:'';position:absolute;inset:-12px -8px}
.fw-ribbon a:hover{color:var(--ink)}
.fw-ribbon-dark{background:var(--ink);color:rgba(255,255,255,.74)}
.fw-ribbon-dark a{text-decoration-color:rgba(255,255,255,.35)}
.fw-ribbon-dark a:hover{color:var(--white)}
@media (max-width:767px){
  .fw-ribbon{padding:4px calc(20 * var(--u));font-size:11.5px;gap:10px}
  /* "All examples" keeps a 44 px tap target in the slim bar: its hit area runs from the top of the screen into the
     header's top edge (the bar sits above the header for that; the button and the pill below keep 44 px of their own) */
  .fw-ribbon{z-index:61}
  .menu-open .fw-ribbon{z-index:2}
  .fw-ribbon a::after{inset:-10px -10px -24px}
  /* so the round button keeps 44 px of its own below the link's, while the bar is on screen */
  html:not(.fw-bar) .fw-burger{position:relative}
  html:not(.fw-bar) .fw-burger::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px}
}
@media (max-width:379px){
  .fw-ribbon{padding:4px 12px;font-size:10.5px;gap:8px;letter-spacing:-.05px}
}

/* ---------------------------------------------------------------- header (move B) */
.fw-head{position:fixed;z-index:60;left:0;right:0;top:var(--rib);height:calc(42 * var(--u));color:var(--black);pointer-events:none;transition:color .3s ease}
.fw-head a,.fw-head button{pointer-events:auto}
.fw-mark{position:absolute;left:calc(var(--x0) + 30 * var(--u));top:calc(5.2 * var(--u) - 20 * var(--mk));display:block;color:inherit;text-decoration:none}
.fw-mark::after{content:'';position:absolute;inset:-13px -6px}
.fw-mark-in{position:relative;display:block;width:calc(var(--mw) * var(--mk));height:calc(var(--mh) * var(--mk))}
.fw-l{position:absolute;top:0;left:calc(var(--lx) * var(--mk));width:calc(var(--lw) * var(--mk));height:100%;overflow:clip}
.fw-l svg{display:block;width:100%;height:100%;fill:currentColor;transition:transform 1s var(--e-out) calc(var(--i) * 50ms)}
.fw-l-first{overflow:visible;transform-origin:calc(12 * var(--mk)) calc(370 * var(--mk));transition:transform 1s var(--e-out)}
.fw-l-first svg{clip-path:inset(0 -2px)}
/* the letters fall away from the last one back towards the F, so the collapse travels to the letter that stays */
.fw-collapsed .fw-head .fw-l:not(.fw-l-first) svg{transform:translateY(calc(var(--ld) * var(--mk)));transition:transform .7s var(--e-out3) calc(var(--r) * 24ms)}
.fw-collapsed .fw-head .fw-l-first{transform:scale(1.4);transition:transform .53s var(--e-io2) .28s,color .3s ease,filter .3s ease}
/* the wordmark takes one tone, read by site.js from the pixels under it, with a thin halo (the ground's colour, or over a
   photograph a nearly neutral shade or light), so the word stays clear over photographs, drawings and headings */
.fw-head .fw-l{color:var(--lc,inherit);filter:drop-shadow(0 0 1.5px var(--lh,transparent)) drop-shadow(0 0 5px var(--lh,transparent));transition:color .3s ease,filter .3s ease}
.fw-head .fw-l-first{transition:transform 1s var(--e-out),color .3s ease,filter .3s ease}
.menu-open .fw-head .fw-l,.fw-bar .fw-head .fw-l,.fw-opening .fw-head .fw-l{color:inherit;filter:none}

.fw-head-r{position:absolute;right:calc(var(--x0) + 30 * var(--u));top:0;height:100%;display:flex;align-items:center;gap:calc(24 * var(--u))}
.fw-head-cta{display:block;overflow:clip;padding:4px;margin:-4px}
/* the pill is filled with the colour behind it (site.js sets --hb), so words scrolling under it never show through */
.fw-head .fw-head-pill{background:var(--hb,var(--white))}
.fw-head-pill{transition:transform .65s ease,background-color .3s ease,color .3s ease,border-color .3s ease}
/* it slides up with the Menu word when the home header collapses, and steps aside while another way into the brief
   is on screen, so two of the same pill never sit side by side */
.fw-collapsed .fw-head-pill,.fw-cta-seen .fw-head-pill{transform:translateY(calc(-100% - 6px));pointer-events:none}
.fw-collapsed .fw-head-cta:focus-within .fw-head-pill,.fw-cta-seen .fw-head-cta:focus-within .fw-head-pill{transform:none;pointer-events:auto}

.fw-burger{display:flex;align-items:center;gap:calc(13.2 * var(--u));height:100%;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.fw-burger-word{display:block;overflow:clip;height:calc(14 * var(--t));font:400 var(--small)/1 var(--f-text)}
.fw-burger-word>span{display:block;transition:transform .65s ease}
.fw-collapsed .fw-burger-word>span{transform:translateY(-100%)}
.fw-menu-closing .fw-burger-word>span{transition:transform .65s var(--e-io) .33s}
.fw-burger-icon{position:relative;display:block;width:calc(42 * var(--u));height:calc(42 * var(--u))}
.fw-burger-disc{position:absolute;inset:0;border-radius:50%;background:var(--black);transition:transform .47s cubic-bezier(.5,1,.89,1),background-color .3s ease}
.fw-burger:hover .fw-burger-disc{transform:scale(.9)}
.fw-burger-icon i{position:absolute;left:50%;top:50%;width:calc(14 * var(--u));height:1px;margin:-.5px 0 0 calc(-7 * var(--u));background:var(--white);transition:transform .65s ease,background-color .3s ease,opacity .3s ease}
.fw-burger-icon i:nth-of-type(1){transform:translateY(calc(-3 * var(--u)))}
.fw-burger-icon i:nth-of-type(3){transform:translateY(calc(3 * var(--u)))}

/* Each side of the header takes the tone of what lies under it (site.js asks the page every frame): ink over light
   sections, light words over dark ones, and over a photograph the tone that reads with what it needs behind the
   wordmark, a shaded pill and the Menu word stepping aside (the button keeps its name). */
.fw-mark,.fw-burger-word{transition:color .3s ease}   /* not on .fw-head-r: the pill has its own, and a chained one lags */
/* a soft pool only where the tone falls short over a photograph: its own darkest or lightest tone, nearly neutral and
   taken only as far towards black or white as it must go, at half strength and tight to the letters; over a drawing a
   solid plate of its own paper, so its lines never print through the word; and where the word lies across a flat
   ground and something else, a solid plate of that ground, so it reads as on one ground. Each is drawn over the images
   or sections it is for only (site.js clips it), never onto the page beside them, and never on the phones' white bar. */
.fw-mark::before{content:'';position:absolute;inset:-4px -8px;z-index:-1;pointer-events:none;border-radius:999px;background:var(--mp,transparent);
  box-shadow:0 0 8px 3px var(--mp,transparent);clip-path:var(--mpc,none);opacity:0;transition:opacity .3s ease}
.fw-mark-pool .fw-mark::before,.fw-mark-plate .fw-mark::before{opacity:1}
.fw-mark-plate .fw-mark::before{inset:-6px -12px;box-shadow:none}
.fw-bar .fw-mark::before,.fw-opening .fw-mark::before{opacity:0}
.fw-zr-dark .fw-head-r{color:var(--white)}
/* the round button stays black, white only where what lies under the button itself is dark (site.js) */
.fw-disc-light .fw-burger-disc{background:var(--white)}
.fw-disc-light .fw-burger-icon i{background:var(--black)}
.fw-zr-dark .fw-head-pill{border-color:rgba(255,255,255,.4)}
.fw-zr-pic .fw-head .fw-head-pill{background:rgba(6,6,6,.6)}
.fw-zr-pic .fw-burger-word>span{transform:translateY(-100%)}
/* the header's band (phones: behind the header while the menu is open, below) */
.fw-head::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--rib));height:calc(var(--rib) + 130px);pointer-events:none;opacity:0;transition:opacity .3s ease}
.menu-open .fw-head::before,.menu-open .fw-mark::before{opacity:0}
/* on phones the open menu scrolls: its links pass under a band of the menu's own black behind the header instead of
   through the wordmark; it shows once the curtain is down */
@media (max-width:767px){.menu-open .fw-head::before{opacity:1;height:calc(var(--rib) + 100%);background:#060606;transition:opacity 0s linear .767s}}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.menu-open .fw-head::before{transition:none}}
/* light header while the menu is open */
.menu-open .fw-head,.menu-open .fw-mark,.menu-open .fw-head-r{color:var(--white)}
.menu-open .fw-burger-disc{background:var(--white)}
.menu-open .fw-burger-icon i{background:var(--black)}
.menu-open .fw-head .fw-head-pill{background:transparent;border-color:rgba(255,255,255,.4)}
.menu-open .fw-burger-word>span{transform:translateY(-100%)}
.menu-open .fw-head-pill{transform:none;pointer-events:auto}
.menu-open .fw-burger-icon i:nth-of-type(1){transform:rotate(-45deg)}
.menu-open .fw-burger-icon i:nth-of-type(2){transform:scaleX(0)}
.menu-open .fw-burger-icon i:nth-of-type(3){transform:rotate(-135deg)}

@media (max-width:767px){
  .fw-head{top:calc(var(--rib) - var(--hshift, 0px));height:calc(62 * var(--u))}
  .fw-mark{left:calc(20 * var(--u));top:calc(21.6 * var(--u) - 20 * var(--mk))}
  .fw-collapsed .fw-head .fw-l-first{transform:scale(1.3)}
  .fw-head-r{right:calc(20 * var(--u));gap:calc(8 * var(--u))}
  .fw-burger-word{display:none}
  /* phones keep a short enquiry pill beside the button: its visible words are part of its full name */
  .fw-head-pill{height:44px;padding:0 14px}
  .fw-head-start{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fw-head-end{display:inline-block}
  .fw-head-end::first-letter{text-transform:uppercase}
  .fw-collapsed .fw-head-pill{transform:none;pointer-events:auto}
  .fw-cta-seen .fw-head-cta .fw-head-pill{transform:translateY(calc(-100% - 6px));pointer-events:none}
  .fw-cta-seen .fw-head-cta:focus-within .fw-head-pill{transform:none;pointer-events:auto}
  .fw-burger-icon{width:calc(50 * var(--u));height:calc(50 * var(--u))}
  .fw-burger-icon i{width:calc(14 * var(--u));margin-left:calc(-7 * var(--u))}
  /* on the white bar: ink words, and the round button shows as dark lines on white */
  .fw-bar .fw-head,.fw-bar .fw-mark,.fw-bar .fw-head-r{color:var(--black)}
  .fw-bar .fw-burger-disc{background:var(--bar,var(--white))}
  .fw-bar .fw-burger-icon i{background:var(--black)}
  .fw-bar .fw-head .fw-head-pill{border-color:var(--ink20);background:var(--bar,var(--white))}
  .menu-open .fw-head,.menu-open .fw-mark,.menu-open .fw-head-r{color:var(--white)}
  .menu-open .fw-burger-disc{background:var(--white)}
  .menu-open .fw-burger-icon i{background:var(--black)}
  .menu-open .fw-head .fw-head-pill{border-color:rgba(255,255,255,.4);background:transparent}
}
/* the home bar holds the chapter name beside the collapsed letter; on the narrowest phones the pill makes room for it */
@media (max-width:359px){[data-page="index"].fw-bar .fw-head-cta{visibility:hidden}}

/* ---------------------------------------------------------------- chapter label */
.fw-chapter{position:fixed;z-index:55;left:calc(var(--x0) + 30 * var(--u));bottom:calc(30 * var(--u));color:var(--ink);pointer-events:none;transition:color .3s ease,opacity .4s ease}
.fw-ch-in{position:relative;display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:400 var(--small)/calc(20 * var(--t)) var(--f-text);white-space:nowrap}
.fw-ch-item{display:block;transition:transform .6s var(--e-out),opacity .6s var(--e-out)}
.fw-ch-item b,.fw-ch-item i{font-weight:400;font-style:normal;color:rgba(30,29,28,.4);margin-inline-end:calc(4 * var(--t));transition:color .3s ease}
.fw-ch-item.is-out{position:absolute;inset-block-start:0;inset-inline-start:0;transform:translateX(20px);opacity:0}
.fw-ch-item.is-new{transform:translateX(-20px);opacity:0;transition:none}
.fw-ch-light .fw-chapter{color:var(--white)}
.fw-chapter::before{content:'';position:absolute;inset:-8px;z-index:-1;pointer-events:none;border-radius:999px;background:var(--chp,transparent);
  box-shadow:0 0 8px 3px var(--chp,transparent);clip-path:var(--chc,none);opacity:0;transition:opacity .3s ease}
.fw-ch-plate .fw-chapter::before{inset:-6px;box-shadow:none}
.fw-ch-item{text-shadow:0 0 2px var(--chh,transparent),0 0 5px var(--chh,transparent),0 0 8px var(--chh,transparent)}
/* the side label keeps a thin halo of what is under it (the ground colour, or where its tone falls short over a
   photograph a nearly neutral shade or light; set by site.js), so lines, notes and headings passing under it fade
   around its letters, with the same pool or plate as the wordmark where it needs one. The back link's words sit on a
   small solid pill of the ground wherever a photograph, a drawing or an edge between two surfaces lies under them
   (site.js), and are bare words over one flat surface, as the reference shows them. */
.fw-back-label{position:relative;display:block;padding:calc(8 * var(--u)) calc(13 * var(--u));margin-right:calc(-7 * var(--u));border-radius:999px;background:var(--bkg,transparent);
  text-shadow:0 0 2px var(--lh,#fff),0 0 5px var(--lh,#fff),0 0 8px var(--lh,#fff);transition:background-color .3s ease}
.fw-back-plate .fw-back-label,.fw-back-plate .fw-back-label .fw-c{text-shadow:none}
.fw-ch-pool .fw-chapter::before,.fw-ch-plate .fw-chapter::before{opacity:1}
.fw-ch-light .fw-ch-item b,.fw-ch-light .fw-ch-item i{color:rgba(255,255,255,.5)}
/* a label never divides: where an edge between two surfaces passes under the side label, it keeps one tone (the flat
   ground's, with a plate of that ground over the rest) and letters over a second photograph a halo of their own
   (set by site.js) */
.fw-ch-item .fw-c,.fw-back-label .fw-c{color:var(--c,inherit)}
.fw-ch-item b .fw-c,.fw-ch-item i .fw-c{color:var(--c2,inherit)}
.fw-ch-item .fw-c{text-shadow:0 0 2px var(--h,var(--chh,transparent)),0 0 5px var(--h,var(--chh,transparent)),0 0 8px var(--h,var(--chh,transparent))}
.fw-back-label .fw-c{text-shadow:0 0 2px var(--lh,#fff),0 0 5px var(--lh,#fff),0 0 8px var(--lh,#fff)}
.fw-ch-off .fw-chapter,.fw-feat-on .fw-chapter{opacity:0}
@media (min-width:768px){.fw-ch-wait .fw-chapter{opacity:0}}   /* while a page change settles (site.js) */
@media (max-width:767px){
  /* the white bar (the reference's stays white over every section); on the inner pages it holds no chapter name,
     because their wordmark stays whole */
  .fw-chapter{left:0;right:0;top:0;bottom:auto;height:calc(62 * var(--u));background:var(--bar,var(--white));transform:translateY(-100%);transition:transform .52s ease}
  .fw-chapter::before{display:none}
  .fw-bar .fw-chapter{transform:none}
  html:not([data-page="index"]) .fw-ch-in{display:none}
  .fw-ch-off .fw-chapter,.fw-feat-on .fw-chapter{opacity:1}
  .menu-open .fw-chapter{visibility:hidden}
  .fw-ch-in{position:absolute;left:calc(60 * var(--u));top:50%;margin-top:calc(-11 * var(--t));writing-mode:horizontal-tb;transform:none;font-size:calc(14 * var(--t));line-height:calc(22 * var(--t))}
  .fw-ch-item b,.fw-ch-item i{display:none}
  .fw-ch-item.is-out{transform:translateY(-100%)}
  .fw-ch-item.is-new{transform:translateY(100%)}
  .fw-ch-light .fw-chapter{color:var(--ink)}
  .fw-ch-light .fw-ch-item{text-shadow:none}
  .fw-ch-item .fw-c{color:inherit;text-shadow:none}
}

/* ---------------------------------------------------------------- back link (process and garden pages) */
.fw-back{position:fixed;z-index:55;right:calc(var(--x0) + 30 * var(--u));bottom:calc(30 * var(--u));display:flex;align-items:center;gap:calc(12 * var(--u));
  min-height:44px;color:var(--ink);font:400 var(--small)/1 var(--f-text);text-decoration:none;transition:color .3s ease,opacity .4s ease}
.fw-back-disc{display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));min-width:36px;min-height:36px;border-radius:50%;background:var(--black);color:var(--white);
  transition:transform .47s cubic-bezier(.5,1,.89,1),background-color .3s ease,color .3s ease}
.fw-back:hover .fw-back-disc{transform:scale(.9)}
.fw-back-light .fw-back{color:var(--white)}
.fw-bdisc-light .fw-back-disc{background:var(--white);color:var(--ink)}
.fw-ch-off .fw-back{opacity:0;pointer-events:none}
@media (max-width:767px){.fw-back{display:none}}

/* ---------------------------------------------------------------- pills */
.fw-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;height:calc(42 * var(--u));min-height:36px;padding:0 calc(24.5 * var(--u));
  border:1px solid var(--ink20);border-radius:999px;background:transparent;color:inherit;font:400 var(--small)/1.2 var(--f-text);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.fw-pill:hover,.fw-pill.is-going{background:var(--ink);border-color:var(--ink);color:var(--white)}
.fw-pill-light{border-color:rgba(255,255,255,.4);color:var(--white)}
.fw-pill-light:hover,.fw-pill-light.is-going{background:var(--white);border-color:var(--white);color:var(--ink)}
.fw-zr-dark .fw-head .fw-head-pill:hover,.fw-zr-pic .fw-head .fw-head-pill:hover,.menu-open .fw-head .fw-head-pill:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.fw-pill-dark{background:var(--ink);border-color:var(--ink);color:var(--white)}
.fw-pill-dark:hover{background:var(--black)}
@media (max-width:767px){.fw-pill{height:44px;padding:0 calc(25 * var(--u))}}

/* ---------------------------------------------------------------- menu (shared [data-menu-toggle] contract) */
/* the panel reveals from the top with its black curtain, so nothing inside it shows past the curtain's edge */
.fw-menu{position:fixed;inset:0;z-index:58;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(0 0 100% 0);color:var(--white);
  transition:visibility 0s linear .86s,clip-path .567s var(--e-io2) .234s}
.fw-menu[data-open]{visibility:visible;clip-path:inset(0);transition:visibility 0s,clip-path .533s var(--e-io2) .234s}
.fw-menu-curtain{position:fixed;inset:0;background:var(--black);transform:translateY(-100%);transition:transform .567s var(--e-io2) .234s}
.fw-menu[data-open] .fw-menu-curtain{transform:none;transition:transform .533s var(--e-io2) .234s}
.fw-menu-in{position:relative;min-height:100%;transform:translateY(-50vh);opacity:.5;transition:transform .567s var(--e-io2) .234s,opacity .567s ease .234s}
.fw-menu[data-open] .fw-menu-in{transform:none;opacity:1;transition:transform .533s var(--e-io2) .234s,opacity .533s ease .234s}
.fw-menu a{color:inherit;text-decoration:none}
.fw-menu-media{display:none;position:absolute;left:0;top:0;bottom:0;width:calc(var(--x0) + 622 * var(--u));overflow:hidden}
.fw-menu-live .fw-menu-media,.fw-menu[data-open] .fw-menu-media{display:block}
.fw-menu-media img{width:100%;height:100%;object-fit:cover}
.fw-menu-main{position:absolute;left:calc(var(--x0) + 730 * var(--u));top:calc(50% - 210 * var(--u));font:340 calc(64 * var(--t))/calc(70 * var(--t)) var(--f-grot);letter-spacing:calc(-.75 * var(--t))}
.fw-menu-main li{display:block;overflow:clip;padding:0 0 .12em;margin:0 0 -.12em}
.fw-menu-main a{position:relative;display:inline-block}
.fw-menu-main a>span{position:relative;display:inline-block;transform:translateY(-60px);transition:transform 0s .86s;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - .07em)/0 2px no-repeat}
.fw-menu[data-open] .fw-menu-main a>span{transform:none;transition:transform .6s var(--e-out) calc(351ms + var(--i) * 100ms),background-size .5s var(--e-io)}
.fw-menu[data-open] .fw-menu-main a:hover>span,.fw-menu[data-open] .fw-menu-main a[aria-current]>span{background-size:100% 2px}
.fw-menu-svc{position:absolute;left:calc(var(--x0) + 1167.5 * var(--u));top:calc(50% + 210 * var(--u));transform:translateY(-100%);font:italic 450 var(--body)/calc(29 * var(--t)) var(--f-ital);font-optical-sizing:auto}
.fw-menu-svc li{overflow:clip}
.fw-menu-svc a{display:inline-block;transform:translateY(-24px);transition:transform 0s .86s}
.fw-menu[data-open] .fw-menu-svc a{transform:none;transition:transform .6s var(--e-out) calc(451ms + var(--i) * 100ms)}
.fw-menu-svc a:hover{text-decoration:underline;text-underline-offset:4px}
.fw-menu-sub{position:absolute;left:calc(var(--x0) + 730 * var(--u));right:calc(var(--x0) + 30 * var(--u));bottom:calc(50 * var(--u));display:flex;color:rgba(255,255,255,.6);font:400 var(--body)/calc(29 * var(--t)) var(--f-text)}
.fw-menu-sub p{opacity:0;white-space:nowrap;transition:opacity 0s .86s}
.fw-menu-sub p:last-child{position:absolute;left:calc(437.5 * var(--u));bottom:0}
.fw-menu[data-open] .fw-menu-sub p{opacity:1;transition:opacity .5s ease .583s}
.fw-menu[data-open] .fw-menu-sub p:last-child{transition-delay:.633s}
.fw-menu-thumb{display:none}
@media (max-width:767px){
  .fw-menu-in{display:flex;flex-direction:column;align-items:flex-start;padding:calc(130 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u))}
  .fw-menu-media{display:none!important}
  .fw-menu-main,.fw-menu-svc,.fw-menu-sub{position:static;transform:none}
  .fw-menu-main{font-size:calc(48 * var(--t));line-height:calc(57 * var(--t));letter-spacing:calc(-.5 * var(--t))}
  .fw-menu-main a{display:flex;align-items:center;min-height:44px}
  .fw-menu-svc{margin-top:calc(30 * var(--u));font-size:max(15px, calc(15 * var(--t)));line-height:1.4}
  .fw-menu-svc a{display:flex;align-items:center;min-height:44px}
  .fw-menu-sub{display:block;margin-top:calc(22 * var(--u));font-size:calc(14 * var(--t));line-height:calc(22 * var(--t))}
  .fw-menu-sub p{white-space:normal}
  .fw-menu-sub p:last-child{position:static}
  .fw-menu-thumb{display:flex;align-items:center;gap:calc(20 * var(--u));margin-top:calc(34 * var(--u));min-height:44px;font:400 var(--body)/1.4 var(--f-text);opacity:0;transition:opacity 0s .86s}
  .fw-menu[data-open] .fw-menu-thumb{opacity:1;transition:opacity .5s ease .7s}
  .fw-menu-thumb-pic{display:block;width:calc(70 * var(--u));height:calc(70 * var(--u));border-radius:50%;overflow:hidden}
  .fw-menu-thumb-pic img{width:100%;height:100%;object-fit:cover}
}
/* Short landscape screens: the links stay put (they only fade) so every one is reachable at once. */
@media (max-height:480px){
  .fw-menu-in,.fw-menu[data-open] .fw-menu-in{transform:none}
  .fw-menu-main a>span,.fw-menu-svc a{transform:none}
}

/* ---------------------------------------------------------------- opening (move A, index only, once a session) */
.fw-opening body::before{content:'';position:fixed;inset:0;z-index:57;background:var(--black)}
.fw-opening.fw-open-on body::before{display:none}
.fw-open{position:fixed;inset:0;z-index:57;overflow:hidden}
.fw-open-cover{position:absolute;inset:0;background:var(--black)}
.fw-open-move{position:absolute;left:0;top:0;width:100%;height:100%}
.fw-open-pic{position:absolute;inset:0;transform-origin:100% 0}
.fw-open-pic>span{position:absolute;inset:0}
.fw-open-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-open-b{opacity:0}
.fw-open-phone{display:none}
/* a soft pool of the darkest tone behind each serif line (the stills are bright where the video was not) */
.fw-open-pool{position:absolute;inset:0;opacity:0;background:radial-gradient(calc(640 * var(--u)) calc(190 * var(--u)) at 50% 50%,rgba(6,6,6,.44),rgba(6,6,6,.26) 45%,rgba(6,6,6,0))}
.fw-open-mark{position:absolute;left:50%;top:50%;color:var(--white);transform:translate(-50%,-50%);--mk:calc(var(--cap) * 2.08 / 700)}
.fw-open-mark .fw-l svg{transition:none}
.fw-open-mark .fw-l-first{overflow:clip}
.fw-open-mark .fw-l-first svg{clip-path:none}
.fw-open-line{position:absolute;left:0;right:0;top:50%;height:calc(41 * var(--t));margin-top:calc(-20.5 * var(--t));overflow:clip;color:var(--white);text-align:center;
  font:400 calc(36 * var(--t))/calc(41 * var(--t)) var(--f-serif);font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;text-shadow:0 0 18px rgba(6,6,6,.25)}
.fw-open-line .fw-ln{transform:translateY(100%)}
@media (max-width:767px){
  .fw-open-desk{display:none}
  .fw-open-phone{display:block}
  .fw-open-pool{background:radial-gradient(calc(300 * var(--u)) calc(110 * var(--u)) at 50% 50%,rgba(6,6,6,.44),rgba(6,6,6,.26) 45%,rgba(6,6,6,0))}
  .fw-open-line{height:calc(24 * var(--t));margin-top:calc(-12 * var(--t));font-size:calc(20 * var(--t));line-height:calc(24 * var(--t))}
}
/* while the opening runs, the page underneath waits in its first state; the hero's words and button sit above
   the moving picture (as the measured opening draws them), so taking the picture away changes nothing */
.fw-opening .fw-hero-frame>picture,.fw-opening .fw-round,.fw-opening .fw-chapter{opacity:0}
.fw-opening .fw-hero-frame{background:transparent}
.fw-open-on .fw-hero-frame{z-index:58}
.fw-open-on .fw-hero-col{z-index:59}
.fw-js.fw-opening .fw-hero [data-rise] .fw-ln,.fw-js.fw-opening .fw-hero [data-rise].is-in .fw-ln{transform:translateY(100%)}
.fw-opening .fw-head .fw-l svg{transform:translateY(calc(var(--ld) * var(--mk) + 2px))}
.fw-opening .fw-head .fw-l-first{overflow:clip}
.fw-opening .fw-head .fw-l-first svg{clip-path:none}
.fw-opening .fw-burger-word>span,.fw-opening .fw-head-pill{transform:translateY(110%)}
.fw-opening .fw-burger-disc{transform:scale(0)}
.fw-opening .fw-burger-icon i{opacity:0}
/* a click or tap while it plays reaches nothing hidden (the header and hero wait); the ribbon's link still works */
.fw-opening :is(.fw-head,.fw-main),.fw-opening :is(.fw-head,.fw-main) *{pointer-events:none}
.fw-round,.fw-hero-frame>picture{transition:opacity .6s ease}

.fw-notrans *,.fw-notrans *::before,.fw-notrans *::after{transition:none!important}

/* ---------------------------------------------------------------- reveals (lines rise out of their masks) */
/* hidden lines sit a little more than their line and mask padding below, so no ascender peeks out */
.fw-js [data-rise] .fw-ln{transform:translateY(calc(100% + var(--mb, .14em) + .1em));transition:transform .8s var(--e-io) calc(var(--d, 0) * 1ms)}
.fw-js [data-rise].is-in .fw-ln{transform:none}
.fw-js [data-rise] .fw-mask:nth-child(2) .fw-ln{--d:120}
.fw-js [data-rise] .fw-mask:nth-child(3) .fw-ln{--d:240}
/* grotesk headings: the trimmed ascent keeps their letters inside the line box, so the masks need almost no padding */
.fw-h64,.fw-h96,.fw-panel-name,.fw-ehead-title{--mt:.02em;--mb:.05em}
/* the hero's lines rise exactly one line pitch, as measured */
.fw-hero-title,.fw-hero-eyebrow{--mt:0em;--mb:0em}
.fw-js .fw-hero [data-rise] .fw-ln{transform:translateY(100%)}
.fw-js .fw-hero [data-rise].is-in .fw-ln{transform:none}
.fw-js .fw-hero-eyebrow .fw-ln{transition-duration:.68s;transition-timing-function:ease}
.fw-js .fw-hero-title .fw-mask:nth-child(2) .fw-ln{--d:267;transition-duration:.75s;transition-timing-function:var(--e-out4)}
.fw-js .fw-hero-quote .fw-ln{transform:translateY(calc(100% + var(--mb, .14em) + .1em));transition:transform .7s var(--e-out4)}
.fw-js .fw-hero-quote .fw-mask:nth-child(2) .fw-ln{transition-delay:.1s}
.fw-js.fw-scrolled .fw-hero-quote .fw-ln{transform:none}

/* ---------------------------------------------------------------- home: split hero (move B) */
.fw-hero{position:relative;height:calc(1235 * var(--u) - var(--rib))}
.fw-hero-col{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:transform}
.fw-hero-col>*{pointer-events:auto}
.fw-hero-eyebrow{position:absolute;left:calc(var(--x0) + 117.5 * var(--u));top:calc(192 * var(--u) - var(--rib));
  font:italic 450 max(17px, calc(24 * var(--t)))/calc(32 * var(--t)) var(--f-ital);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 12}
.fw-hero-title{position:absolute;left:calc(var(--x0) + 110.5 * var(--u));top:calc(279 * var(--u) - var(--rib));white-space:nowrap;
  font:340 calc(128 * var(--t))/calc(130 * var(--t)) var(--f-grot);letter-spacing:calc(-5 * var(--t))}
.fw-hero-quote{position:absolute;left:calc(var(--x0) + 205.5 * var(--u));top:calc(751 * var(--u) - var(--rib));width:calc(242 * var(--u));
  font:italic 450 var(--body)/calc(24 * var(--t)) var(--f-ital);font-optical-sizing:auto}
.fw-hero-frame{position:absolute;z-index:1;left:calc(var(--x0) + 730 * var(--u));top:calc(149 * var(--u) - var(--rib));width:calc(680 * var(--u));height:calc(882 * var(--u));overflow:hidden;background:var(--sage)}
.fw-hero-frame picture,.fw-hero-frame picture img{display:block;width:100%;height:100%;object-fit:cover}
.fw-hero-frame>picture{position:absolute;inset:0}
.fw-hero-frame .fw-reel-on{opacity:0;transition:opacity 1.2s var(--e-io1)}
.fw-hero-frame .fw-reel-on.is-shown{opacity:1}
.fw-round{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:calc(9 * var(--u));
  color:var(--white);text-decoration:none;font:400 var(--body)/calc(24 * var(--t)) var(--f-text)}
.fw-round-label{position:relative;text-shadow:0 0 5px rgba(6,6,6,.5),0 0 14px rgba(6,6,6,.45)}
/* a soft shade right behind the words: the frame's middle is pale sunlit stone */
.fw-round-label::before{content:'';position:absolute;inset:-16px -34px;z-index:-1;background:radial-gradient(closest-side,rgba(6,6,6,.5),rgba(6,6,6,.4) 50%,rgba(6,6,6,0));pointer-events:none}
.fw-round::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:calc(300 * var(--u));height:calc(220 * var(--u));transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(6,6,6,.5),rgba(6,6,6,.22) 55%,rgba(6,6,6,0));pointer-events:none}
.fw-round-disc{display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));min-width:36px;min-height:36px;border:1px solid rgba(255,255,255,.9);border-radius:50%;
  transition:transform .47s cubic-bezier(.5,1,.89,1),background-color .3s ease,color .3s ease}
.fw-round:hover .fw-round-disc{transform:scale(.9);background:var(--white);color:var(--ink)}
.fw-arrow{display:block;width:calc(14 * var(--u));min-width:12px;height:auto}
.fw-plus{display:block;width:12px;height:12px}
.fw-hero-foot{position:absolute;left:calc(var(--x0) + 730 * var(--u));top:calc(1077 * var(--u) - var(--rib));width:calc(504 * var(--u))}
.fw-hero-lead{font:400 max(17px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
.fw-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:calc(23 * var(--u))}
@media (max-width:767px){
  .fw-hero{height:calc(1120 * var(--u) - var(--rib))}
  .fw-hero-eyebrow{left:calc(20 * var(--u));top:calc(163.9 * var(--u) - var(--rib));font-size:calc(16 * var(--t));line-height:calc(22 * var(--t));letter-spacing:calc(-.1 * var(--t));font-variation-settings:normal;font-optical-sizing:auto}
  .fw-hero-title{left:calc(20 * var(--u));top:calc(201 * var(--u) - var(--rib));font-size:calc(48 * var(--t));line-height:calc(50 * var(--t));letter-spacing:calc(-1.5 * var(--t))}
  .fw-hero-frame{left:calc(20 * var(--u));top:calc(335 * var(--u) - var(--rib));width:calc(335 * var(--u));height:calc(435 * var(--u))}
  /* the reference's phone layout has no italic line between the photo and the lead */
  .fw-hero-quote{display:none}
  .fw-hero-foot{left:calc(20 * var(--u));top:calc(810 * var(--u) - var(--rib));width:calc(335 * var(--u))}
  .fw-hero-lead{font-size:calc(20 * var(--t));line-height:calc(28 * var(--t))}
  .fw-round{gap:calc(8 * var(--u))}
  .fw-round-disc{width:calc(44 * var(--u));height:calc(44 * var(--u))}
  .fw-round::before{width:calc(220 * var(--u));height:calc(160 * var(--u))}
  /* the recut phone frame is brighter around the words: a slightly deeper shade right behind them */
  .fw-round-label::before{background:radial-gradient(closest-side,rgba(6,6,6,.58),rgba(6,6,6,.46) 50%,rgba(6,6,6,0))}
}

/* ---------------------------------------------------------------- home: 01 Services */
.fw-svc{position:relative;padding:0 0 calc(170 * var(--u))}
.fw-svc-row{position:relative;width:calc(330 * var(--u))}
.fw-svc-row-1{margin-left:calc(var(--x0) + 555 * var(--u));padding-top:calc(280 * var(--u))}
.fw-svc-row-2{margin-left:calc(var(--x0) + 117.5 * var(--u))}
.fw-svc-row-3{margin-left:calc(var(--x0) + 905 * var(--u));margin-top:calc(140 * var(--u))}
.fw-svc-pic{position:absolute;display:block;width:calc(242.5 * var(--u));height:calc(280 * var(--u));will-change:transform}
.fw-svc-pic picture,.fw-svc-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-svc-row-1 .fw-svc-pic{left:calc(-350 * var(--u));top:0}
.fw-svc-row-2 .fw-svc-pic{left:calc(875 * var(--u));top:calc(-140 * var(--u))}
.fw-svc-row-3 .fw-svc-pic{left:calc(-350 * var(--u));top:calc(-106 * var(--u))}
.fw-svc-num{margin:0 0 calc(52 * var(--u));font:400 var(--body)/calc(24 * var(--t)) var(--f-text)}
.fw-svc-name{margin:0 0 calc(30 * var(--u));font:400 max(26px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-svc-text{margin:0 0 calc(30 * var(--u))}
@media (max-width:767px){
  .fw-svc{padding:0 0 calc(121.5 * var(--u))}
  .fw-svc-row,.fw-svc-row-1,.fw-svc-row-2,.fw-svc-row-3{width:auto;margin:0 0 calc(60 * var(--u));padding:calc(383.2 * var(--u)) calc(20 * var(--u)) 0 calc(79.1 * var(--u))}
  .fw-svc-row-3{margin-bottom:0}
  .fw-svc-row-1 .fw-svc-pic,.fw-svc-row-2 .fw-svc-pic,.fw-svc-row-3 .fw-svc-pic{left:calc(79.1 * var(--u));top:calc(30 * var(--u));width:calc(275.9 * var(--u));height:calc(319.2 * var(--u))}
  .fw-svc-num{position:absolute;left:calc(20 * var(--u));top:calc(24 * var(--u));margin:0;font-size:calc(16 * var(--t));line-height:calc(24 * var(--t))}
  .fw-svc-name{margin-bottom:calc(12.7 * var(--u));font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-svc-text{margin-bottom:calc(24 * var(--u))}
}

/* ---------------------------------------------------------------- full bleed garden panels with a drifting inset (move C) */
.fw-panels{position:relative;--ph:max(100vh, 600px);color:var(--white)}
.fw-panel{position:relative;display:block;height:var(--ph);overflow:clip;color:var(--white);text-decoration:none;background:#3d4a3a}
.fw-panel-cover{position:absolute;inset:0;display:block;will-change:transform}
.fw-panel-cover picture,.fw-panel-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* one soft pool travels with the sticky name, not with the moving photo; no veil over the whole picture */
.fw-panel-stick::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(calc(820 * var(--u)) calc(440 * var(--u)) at calc(var(--x0) + 380 * var(--u)) 50%,rgba(6,6,6,.58),rgba(6,6,6,.36) 50%,rgba(6,6,6,0) 100%)}
@media (min-width:768px){.fw-panel-stick::before{opacity:var(--pk,1)}
  /* the 16 px label keeps a small pool of its own, so the big pool can stay as light as the name allows */
  .fw-panel-label{position:relative;width:max-content;max-width:100%}
  .fw-panel-label::before{content:'';position:absolute;z-index:-1;inset:calc(-50 * var(--u)) calc(-110 * var(--u));pointer-events:none;
    background:radial-gradient(closest-side,rgba(6,6,6,.2),rgba(6,6,6,.17) 35%,rgba(6,6,6,.1) 62%,rgba(6,6,6,.035) 82%,rgba(6,6,6,0))}}
/* gardens.html: the toggle and the counter sit in the bottom corners of the photo */
.fw-featured .fw-panel-stick::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(calc(420 * var(--u)) calc(190 * var(--u)) at 0 100%,rgba(6,6,6,.5),rgba(6,6,6,0)),
    radial-gradient(calc(380 * var(--u)) calc(190 * var(--u)) at 100% 100%,rgba(6,6,6,.62),rgba(6,6,6,0))}
.fw-panel-label{text-shadow:0 0 5px rgba(6,6,6,.45),0 0 14px rgba(6,6,6,.45),0 0 28px rgba(6,6,6,.3)}
.fw-panel-name{text-shadow:0 0 34px rgba(6,6,6,.32),0 0 8px rgba(6,6,6,.12)}
.fw-panel-track{position:absolute;left:0;right:0;top:calc(var(--i) * var(--ph) * -1);height:calc(var(--n) * var(--ph));display:block;pointer-events:none}
.fw-panel-stick{position:sticky;top:0;display:block;height:var(--ph)}
/* with JavaScript off each panel holds its own name and label in its own frame (the shared sticky track lays all three
   at the top of the first panel until the page scrolls, so a still page showed only the first name) */
html:not(.fw-js) .fw-panel-track{top:0;height:100%}
.fw-panel-text{position:absolute;left:calc(var(--x0) + 118 * var(--u));top:50%;width:calc(600 * var(--u));transform:translateY(-50%);display:block}
.fw-panel-label{display:block;margin:0 0 calc(27 * var(--u));font:400 var(--body)/calc(24 * var(--t)) var(--f-text)}
.fw-panel-name{display:block;font:340 calc(96 * var(--t))/calc(96 * var(--t)) var(--f-grot);letter-spacing:calc(-3.75 * var(--t))}
.fw-panel-inset{position:absolute;left:calc(var(--x0) + 817 * var(--u));top:50%;width:calc(418 * var(--u));height:calc(433 * var(--u));margin-top:calc(-216.5 * var(--u));overflow:hidden;display:block;background:#e4e6df}
.fw-panel-inset picture,.fw-panel-inset img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
  .fw-panels{--ph:calc(666 * var(--u))}
  .fw-panel-track{top:0;height:100%}
  .fw-panel-stick{position:absolute;inset:0;height:auto}
  .fw-panel-text{left:calc(20 * var(--u));top:calc(85 * var(--u));width:calc(305 * var(--u));transform:none}
  .fw-panel-label{margin-bottom:calc(5 * var(--u));font-size:max(14px, calc(14 * var(--t)));line-height:calc(20 * var(--t))}
  .fw-panel-name{font-size:calc(36 * var(--t));line-height:calc(39 * var(--t));letter-spacing:calc(-.7 * var(--t))}
  .fw-panel-inset{left:calc(20 * var(--u));top:calc(230 * var(--u));width:calc(335 * var(--u));height:calc(345 * var(--u));margin:0}
  .fw-panel-stick::before{background:radial-gradient(calc(470 * var(--u)) calc(215 * var(--u)) at calc(120 * var(--u)) calc(118 * var(--u)),rgba(6,6,6,.64),rgba(6,6,6,.42) 50%,rgba(6,6,6,0))}
}

/* frames that drift: the hero frame and the panel photos breathe between 1 and 1.06 (8 s each way), only on screen */
@keyframes fw-drift{from{transform:scale(1)}to{transform:scale(1.06)}}
.fw-js .fw-hero-frame picture img,.fw-js .fw-panel-cover img{animation:fw-drift 8s var(--e-io1) infinite alternate paused}
.fw-js .fw-hero-frame.is-live picture img,.fw-js .fw-panel.is-live .fw-panel-cover img{animation-play-state:running}
.fw-opening .fw-hero-frame picture img{animation:none}

/* ---------------------------------------------------------------- home: 03 to 05 banners */
.fw-banner{position:relative;padding:calc(200 * var(--u)) 0 calc(150 * var(--u))}
.fw-banner-care{padding-top:calc(150 * var(--u))}
.fw-banner-pic{width:calc(417.5 * var(--u));height:calc(433 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u));overflow:hidden;background:var(--sage)}
.fw-banner-pic picture,.fw-banner-pic img,.fw-about-pic picture,.fw-about-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-banner-text{position:absolute;left:calc(var(--x0) + 730 * var(--u));top:calc(200 * var(--u));width:calc(505 * var(--u));height:calc(433 * var(--u));display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.fw-banner-care .fw-banner-text{top:calc(150 * var(--u))}
.fw-banner-eyebrow{margin-bottom:calc(28 * var(--u));font:italic 450 var(--body)/calc(24 * var(--t)) var(--f-ital);font-optical-sizing:auto;--mt:0em;--mb:.04em}
.fw-banner .fw-h64,.fw-about-h{line-height:calc(65 * var(--t))}
.fw-banner .fw-pill{margin-top:calc(42 * var(--u))}
.fw-about{position:relative;padding:calc(150 * var(--u)) 0}
.fw-about-h{position:absolute;left:calc(var(--x0) + 205 * var(--u));top:calc(150 * var(--u));width:calc(418 * var(--u))}
.fw-about-pic{width:calc(242 * var(--u));height:calc(332 * var(--u));margin-left:calc(var(--x0) + 817.5 * var(--u));overflow:hidden;background:var(--sage)}
.fw-about-text{width:calc(418 * var(--u));margin:calc(36 * var(--u)) 0 0 calc(var(--x0) + 817.5 * var(--u))}
.fw-about-text .fw-pill{margin-top:calc(47 * var(--u))}
@media (max-width:767px){
  /* phones: each banner opens 120 design px above its photo and ends at its pill, as the reference's do, so one band
     of about 125 px sits between a pill and the next section (review round 2) */
  .fw-banner,.fw-banner-care{padding:calc(120 * var(--u)) calc(20 * var(--u)) 0}
  .fw-banner-care{padding-bottom:calc(60 * var(--u))}
  .fw-banner-pic{width:100%;height:calc(348 * var(--u));margin:0}
  .fw-banner-text,.fw-banner-care .fw-banner-text{position:static;width:auto;height:auto;display:block;margin-top:calc(40 * var(--u))}
  .fw-banner-eyebrow{margin-bottom:calc(16 * var(--u))}
  .fw-banner .fw-h64,.fw-about-h{line-height:calc(42 * var(--t))}
  .fw-banner .fw-pill{margin-top:calc(30 * var(--u))}
  .fw-about{padding:calc(120 * var(--u)) calc(20 * var(--u)) 0}
  .fw-about-h{position:static;width:auto}
  .fw-about-pic{width:calc(276 * var(--u));height:calc(379 * var(--u));margin:calc(40 * var(--u)) 0 0 calc(59 * var(--u))}
  .fw-about-text{width:auto;margin:calc(30 * var(--u)) 0 0 calc(59 * var(--u))}
  .fw-about-text .fw-pill{margin-top:calc(30 * var(--u))}
}

/* ---------------------------------------------------------------- shared type for the inner pages */
.fw-eyebrow{font:italic 450 max(17px, calc(24 * var(--t)))/calc(32 * var(--t)) var(--f-ital);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 12}
.fw-h64{font:340 max(36px, calc(64 * var(--t)))/calc(72 * var(--t)) var(--f-grot);letter-spacing:calc(-.75 * var(--t))}
.fw-h96{font:340 calc(96 * var(--t))/calc(96 * var(--t)) var(--f-grot);letter-spacing:calc(-3.75 * var(--t))}
.fw-statement{font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-lead{font:400 max(17px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
.fw-serif64{font:400 max(32px, calc(64 * var(--t)))/calc(72 * var(--t)) var(--f-serif);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0}
.fw-cap{max-width:calc(593 * var(--u));margin:calc(16 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u));color:var(--ink60);font-size:var(--small);line-height:calc(20 * var(--t))}
@media (max-width:767px){
  .fw-eyebrow{font-size:calc(20 * var(--t));line-height:calc(26 * var(--t));letter-spacing:calc(-.4 * var(--t))}
  .fw-h64{font-size:calc(36 * var(--t));line-height:calc(42 * var(--t));letter-spacing:calc(-.7 * var(--t))}
  .fw-h96{font-size:calc(48 * var(--t));line-height:calc(50 * var(--t));letter-spacing:calc(-1.5 * var(--t))}
  .fw-statement{font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-lead{font-size:calc(20 * var(--t));line-height:calc(28 * var(--t))}
  .fw-serif64{font-size:calc(36 * var(--t));line-height:calc(42 * var(--t));letter-spacing:calc(-.4 * var(--t))}
  .fw-cap{margin:calc(12 * var(--u)) calc(20 * var(--u)) 0}
}

/* ---------------------------------------------------------------- services: the dark opener */
.fw-sopen{position:relative;height:calc(2920 * var(--u));overflow-x:clip;background:var(--ink);color:var(--white)}
.fw-sopen-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.fw-sopen-pics{position:absolute;inset:0;opacity:.64}
.fw-sopen-pic{position:absolute;inset:0;opacity:0}
.fw-sopen-pic:first-child{opacity:1}
.fw-sopen-pic picture,.fw-sopen-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-sopen-steps{position:absolute;inset:0}
.fw-sopen-step{position:absolute;z-index:0;left:calc(var(--x0) + 292.5 * var(--u));width:calc(768 * var(--u))}
.fw-sopen-step-1{top:calc(434 * var(--u))}
.fw-sopen-step-2{top:calc(1334 * var(--u))}
.fw-sopen-step-3{top:calc(2234 * var(--u))}
.fw-sopen-h{color:var(--white);text-shadow:0 0 30px rgba(6,6,6,.3)}
.fw-sopen-step::before{content:'';position:absolute;left:calc(-160 * var(--u));right:calc(-200 * var(--u));top:calc(-120 * var(--u));bottom:calc(-140 * var(--u));z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,6,6,.46),rgba(6,6,6,.3) 55%,rgba(6,6,6,0))}
.fw-sopen-para{width:calc(505 * var(--u));margin:calc(36 * var(--u)) 0 0 calc(175 * var(--u));color:rgba(255,255,255,.86)}
@media (max-width:767px){
  .fw-sopen{height:calc(2504 * var(--u))}
  .fw-sopen-step{left:calc(20 * var(--u));width:calc(335 * var(--u))}
  .fw-sopen-step::before{left:calc(-20 * var(--u));right:calc(-20 * var(--u));top:calc(-80 * var(--u));bottom:calc(-80 * var(--u))}
  .fw-sopen-step-1{top:calc(380 * var(--u))}
  .fw-sopen-step-2{top:calc(1150 * var(--u))}
  .fw-sopen-step-3{top:calc(1900 * var(--u))}
  .fw-sopen-para{width:auto;margin:calc(24 * var(--u)) 0 0 calc(59 * var(--u));color:rgba(255,255,255,.94)}
}

/* ---------------------------------------------------------------- services: three circles become one */
/* the merged circle stays until the first panel is 560 px down the screen (measured), so the panels start 340 px early */
.fw-circles{position:relative;height:calc(5740 * var(--u));background:var(--ink);color:var(--white)}
.fw-circles+.fw-slides{margin-top:calc(-340 * var(--u))}
.fw-circles-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.fw-circles-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-ring{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1;vector-effect:non-scaling-stroke}
.fw-ring-labels{position:absolute;inset:0;pointer-events:none}
.fw-ring-label,.fw-ring-name{position:absolute;left:50%;top:50%;white-space:nowrap;transform:translate(-50%,-50%)}
.fw-ring-label{font:italic 450 max(17px, calc(24 * var(--t)))/1.2 var(--f-ital);font-variation-settings:'opsz' 12;opacity:0}
.fw-ring-name{font:400 calc(27 * var(--t))/1.2 var(--f-text);letter-spacing:calc(-.3 * var(--t));opacity:0}
/* without the scroll effect (no script, reduced motion): one circle, the studio's name, the three parts under it */
.fw-circles-static .fw-circles{height:auto}
.fw-circles-static .fw-circles-stage{position:relative;height:auto;min-height:calc(700 * var(--u));padding-bottom:calc(120 * var(--u))}
.fw-circles-static .fw-circles-svg{height:calc(700 * var(--u))}
.fw-circles-static .fw-ring-name{top:calc(350 * var(--u));opacity:1}
.fw-circles-static .fw-ring-label{position:static;display:inline-block;transform:none;opacity:1;margin:0 calc(24 * var(--u))}
.fw-circles-static .fw-ring-labels{position:relative;inset:auto;display:flex;justify-content:center;flex-wrap:wrap;padding-top:calc(700 * var(--u))}
@media (max-width:767px){
  .fw-circles{height:calc(2435 * var(--u))}
  .fw-circles+.fw-slides{margin-top:0}
  .fw-ring-label{font-size:calc(16 * var(--t))}
  .fw-ring-name{font-size:calc(26 * var(--t))}
}

/* ---------------------------------------------------------------- stacked pastel panels (services and process) */
.fw-slides{position:relative}
.fw-slide{position:relative;display:block;height:max(100vh, calc(900 * var(--u)));overflow:hidden;color:var(--ink);scroll-margin-top:0}
.fw-js .fw-slide{position:sticky;top:var(--stick, 0px)}
.fw-slide+.fw-slide{margin-top:calc(450 * var(--u))}
.fw-js .fw-slides::after{content:'';display:block;height:calc(450 * var(--u))}
.fw-slide-sage{background:var(--sage)}
.fw-slide-blush{background:var(--blush)}
.fw-slide-stone{background:var(--stone)}
.fw-slide-text{position:absolute;left:calc(var(--x0) + 117.5 * var(--u));top:calc(132 * var(--u));bottom:calc(60 * var(--u));width:calc(484 * var(--u));display:flex;flex-direction:column;align-items:flex-start}
.fw-slide-h{margin:calc(14 * var(--u)) 0 calc(30 * var(--u)) calc(-3.5 * var(--u));line-height:calc(65 * var(--t))}
.fw-slide-para{width:calc(434 * var(--u));margin-top:auto}
.fw-slide-pic{position:absolute;left:calc(var(--x0) + 730 * var(--u));top:calc(30 * var(--u));bottom:calc(30 * var(--u));width:calc(680 * var(--u));overflow:hidden}
.fw-slide-pic picture,.fw-slide-pic img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){
  .fw-slide{height:auto;min-height:0;padding:calc(110 * var(--u)) calc(20 * var(--u)) calc(50 * var(--u))}
  .fw-slide+.fw-slide{margin-top:0}
  .fw-js .fw-slides::after{display:none}
  .fw-slide-text,.fw-slide-pic{position:static;width:auto}
  .fw-slide-text{display:block}
  .fw-slide-h{margin:calc(10 * var(--u)) 0 calc(24 * var(--u));line-height:calc(42 * var(--t))}
  .fw-slide-para{width:auto;margin-top:calc(30 * var(--u))}
  .fw-slide-pic{height:calc(414 * var(--u));margin-top:calc(40 * var(--u))}
  .fw-slide-text{display:flex;flex-direction:column}
  .fw-slide-para{order:3}
}

/* ---------------------------------------------------------------- process: split header, intro, five steps */
/* a full screen header on tall windows too, so the next statement never starts half on the first screen */
.fw-split{position:relative;height:max(calc(100vh - var(--rib)), calc(900 * var(--u) - var(--rib)))}
.fw-split-pic{position:absolute;left:0;top:calc(-1 * var(--rib));bottom:0;width:calc(var(--x0) + 710 * var(--u));overflow:hidden;background:var(--sage)}
.fw-split-pic picture,.fw-split-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-split-text{position:absolute;left:calc(var(--x0) + 817.5 * var(--u));top:calc(267 * var(--u) - var(--rib));width:calc(505 * var(--u))}
.fw-split-text .fw-h64{margin-top:calc(14 * var(--u));line-height:calc(65 * var(--t))}
.fw-split-para{width:calc(434 * var(--u));margin-top:calc(53 * var(--u))}
.fw-intro{padding-top:calc(193 * var(--u))}
.fw-intro-h{width:calc(855 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u))}
.fw-intro-cols{display:grid;grid-template-columns:repeat(2, calc(330 * var(--u)));column-gap:calc(20 * var(--u));margin:calc(64 * var(--u)) 0 0 calc(var(--x0) + 642.5 * var(--u))}
.fw-intro-pic{width:calc(1292.5 * var(--u));margin:calc(184 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u))}
.fw-intro-pic img,.fw-wide-pic img,.fw-full-pic img,.fw-plan-pic img,.fw-tm-pic img,.fw-step-pic img{display:block;width:100%;height:auto}
.fw-intro-pic .fw-cap{margin-left:0}
.fw-steps{padding-top:calc(199 * var(--u))}
.fw-steps-h{width:calc(1204 * var(--u));margin:0 0 calc(160 * var(--u)) calc(var(--x0) + 117.5 * var(--u))}
.fw-step{display:grid;align-items:end;margin-left:calc(var(--x0));width:calc(1440 * var(--u))}
.fw-step+.fw-step{margin-top:calc(140 * var(--u))}
.fw-step-photo{grid-template-columns:calc(292.5 * var(--u)) calc(418 * var(--u)) calc(107 * var(--u)) calc(330 * var(--u))}
.fw-step-photo .fw-step-pic{grid-column:2;height:calc(471 * var(--u));overflow:hidden;background:var(--sage)}
.fw-step-photo .fw-step-pic picture,.fw-step-photo .fw-step-pic img{width:100%;height:100%;object-fit:cover}
.fw-step-photo .fw-step-text{grid-column:4}
.fw-step-drawing{grid-template-columns:calc(205 * var(--u)) calc(330 * var(--u)) calc(107.5 * var(--u)) calc(680 * var(--u))}
.fw-step-drawing .fw-step-pic{grid-column:4;grid-row:1}
.fw-step-drawing .fw-step-text{grid-column:2;grid-row:1}
.fw-step-num{color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-step-name{margin:calc(30 * var(--u)) 0 calc(18 * var(--u));font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
@media (max-width:767px){
  .fw-split{height:auto}
  .fw-split-pic{position:relative;top:calc(-1 * var(--rib));width:100%;height:calc(442 * var(--u))}
  .fw-split-text{position:static;width:auto;padding:calc(30 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u))}
  .fw-split-text .fw-h64{line-height:calc(42 * var(--t))}
  .fw-split-para{width:auto;margin-top:calc(26 * var(--u))}
  .fw-intro{padding:calc(100 * var(--u)) calc(20 * var(--u)) 0}
  .fw-intro-h,.fw-intro-pic{width:auto;margin-left:0}
  .fw-intro-cols{display:block;margin:calc(30 * var(--u)) 0 0}
  .fw-intro-cols p+p{margin-top:calc(16 * var(--u))}
  .fw-intro-pic{margin:calc(60 * var(--u)) calc(-20 * var(--u)) 0}
  .fw-intro-pic .fw-cap{margin:calc(12 * var(--u)) calc(20 * var(--u)) 0}
  .fw-steps{padding:calc(120 * var(--u)) calc(20 * var(--u)) 0}
  .fw-steps-h{width:auto;margin:0 0 calc(70 * var(--u))}
  .fw-step,.fw-step-photo,.fw-step-drawing{display:block;width:auto;margin:0}
  .fw-step+.fw-step{margin-top:calc(80 * var(--u))}
  .fw-step-photo .fw-step-pic{width:calc(276 * var(--u));height:calc(311 * var(--u));margin-left:calc(59 * var(--u))}
  .fw-step-drawing .fw-step-pic{margin:0 calc(-20 * var(--u))}
  .fw-step-text{margin-top:calc(26 * var(--u))}
  .fw-step-photo .fw-step-text{margin-left:calc(59 * var(--u))}
  .fw-step-name{margin:calc(14 * var(--u)) 0 calc(12 * var(--u));font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
}
/* short phone screens (with the browser bars showing): the process photo fills the first screen, from its taller cut,
   so the heading sits wholly below the fold instead of across it */
@media (max-width:767px) and (min-aspect-ratio:390/700) and (max-aspect-ratio:4/5){.fw-split-pic{height:100svh}}


/* ---------------------------------------------------------------- detail page rhythm: wide, full bleed, leads, statements */
.fw-wide,.fw-full,.fw-lead-sec,.fw-say,.fw-big,.fw-q,.fw-strip,.fw-plan,.fw-seq,.fw-tm,.fw-pair,.fw-pano,.fw-details,.fw-copy,.fw-seasons{margin-top:var(--gap)}
.fw-wide-pic{width:calc(1292.5 * var(--u));margin-left:calc(var(--x0) + 117.5 * var(--u))}
.fw-wide-in{display:block;overflow:hidden;background:var(--sage)}
.fw-wide-drawing .fw-wide-pic{background:none}
.fw-wide-pic>.fw-cap{margin-left:0}
.fw-full-pic{width:100%;overflow:hidden}
.fw-full-in{display:block}
.fw-full-in picture,.fw-full-in img{display:block;width:100%;height:auto}
.fw-lead-sec .fw-lead{width:calc(680 * var(--u))}
.fw-lead-205 .fw-lead{margin-left:calc(var(--x0) + 205 * var(--u))}
.fw-lead-555 .fw-lead{margin-left:calc(var(--x0) + 555 * var(--u))}
.fw-say-text{width:calc(855 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u));font:400 max(20px, calc(32 * var(--t)))/calc(44 * var(--t)) var(--f-text)}
.fw-say-468 .fw-say-text{margin-left:calc(var(--x0) + 467.5 * var(--u))}
.fw-big-text{width:calc(1030 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u))}
.fw-q .fw-serif64{width:calc(960 * var(--u));margin:0 auto;text-align:center}
.fw-q-cite{margin-top:calc(26 * var(--u));text-align:center;color:var(--ink60);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-q-close{text-align:center}
.fw-strip .fw-wide-pic{background:none}
@media (max-width:767px){
  .fw-wide-pic{width:auto;margin:0 calc(20 * var(--u))}
  .fw-wide-drawing .fw-wide-pic,.fw-strip .fw-wide-pic{margin:0}
  .fw-wide-drawing .fw-wide-pic>.fw-cap{margin:calc(12 * var(--u)) calc(20 * var(--u)) 0}
  .fw-lead-sec{padding:0 calc(20 * var(--u))}
  .fw-lead-sec .fw-lead,.fw-lead-205 .fw-lead,.fw-lead-555 .fw-lead{width:auto;margin-left:0}
  .fw-say{padding:0 calc(20 * var(--u))}
  .fw-say-text,.fw-say-468 .fw-say-text{width:auto;margin-left:0;font-size:calc(20 * var(--t));line-height:calc(28 * var(--t))}
  .fw-big{padding:0 calc(20 * var(--u))}
  .fw-big-text{width:auto;margin-left:0}
  .fw-q{padding:0 calc(20 * var(--u))}
  .fw-q .fw-serif64{width:auto}
}

/* ---------------------------------------------------------------- garden pages: header, brief and tags */
.fw-ghead{padding:calc(157 * var(--u)) 0 0}
.fw-ghead .fw-h64{margin-left:calc(var(--x0) + 205 * var(--u));max-width:calc(1030 * var(--u))}
.fw-meta{display:grid;grid-template-columns:repeat(3, calc(330 * var(--u)));column-gap:calc(20 * var(--u));margin:calc(25 * var(--u)) 0 0 calc(var(--x0) + 205 * var(--u))}
.fw-meta dt{color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-meta dd{margin:calc(4 * var(--u)) 0 0}
.fw-ghead-pic{width:calc(1292.5 * var(--u));height:calc(1338 * var(--u));margin:calc(140 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u));overflow:hidden;background:var(--sage)}
.fw-grow{display:block;width:100%;height:100%;transform-origin:50% 0;will-change:transform}
.fw-grow picture,.fw-grow img{display:block;width:100%;height:100%;object-fit:cover}
.fw-details-brief{width:calc(593 * var(--u));margin-left:calc(var(--x0) + 730 * var(--u))}
.fw-tag-row{display:grid;grid-template-columns:repeat(4, calc(286 * var(--u)));column-gap:calc(20 * var(--u));margin:calc(136 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u))}
.fw-tag-label{margin-bottom:calc(12 * var(--u));color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-tags{display:flex;flex-wrap:wrap;gap:6px}
.fw-tags li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1px solid var(--ink20);border-radius:999px;font-size:var(--small);line-height:1}
.fw-list li{line-height:calc(24 * var(--t))}
@media (max-width:767px){
  .fw-ghead{padding-top:calc(150 * var(--u))}
  .fw-ghead .fw-h64{margin:0 calc(20 * var(--u))}
  /* as the reference's project pages: each fact on one row, the label at the margin and the value at the third
     column (x 144 at 390); the first wide photo edge to edge, 390 x 404 */
  .fw-meta{grid-template-columns:1fr;row-gap:calc(2 * var(--u));margin:calc(46 * var(--u)) calc(20 * var(--u)) 0}
  .fw-meta div{display:grid;grid-template-columns:calc(118.4 * var(--u)) 1fr;align-items:baseline}
  .fw-meta dd{margin:0}
  .fw-ghead-pic{width:auto;height:calc(388.5 * var(--u));margin:calc(120 * var(--u)) 0 0}
  .fw-details{padding:0 calc(20 * var(--u))}
  .fw-details-brief{width:auto;margin-left:0}
  /* the tag groups as rows too: the label at the margin, its pills or names stacked in the third column */
  .fw-tag-row{grid-template-columns:1fr;row-gap:calc(64 * var(--u));margin:calc(70 * var(--u)) 0 0}
  .fw-tag-group{display:grid;grid-template-columns:calc(118.4 * var(--u)) 1fr;align-items:start}
  .fw-tag-label{margin:calc(5 * var(--u)) 0 0}
  .fw-tags{flex-direction:column;align-items:flex-start;gap:calc(10 * var(--u))}
}

/* ---------------------------------------------------------------- notes on a drawing or photo */
.fw-plan-fig{position:relative}
.fw-plan-pic{position:relative;max-width:calc(var(--x0) * 2 + 1440 * var(--u));margin:0 auto}
.fw-spots{counter-reset:spot}
.fw-js .fw-spot{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.fw-spot-btn{display:none}
.fw-js .fw-spot-btn{position:absolute;left:calc(-21 * var(--u));top:calc(-21 * var(--u));display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));min-width:36px;min-height:36px;
  margin:0;padding:0;border:0;border-radius:50%;background:var(--white);color:var(--ink);cursor:pointer;box-shadow:0 2px 14px rgba(6,6,6,.18);
  transition:transform .47s cubic-bezier(.5,1,.89,1),background-color .3s ease,color .3s ease}
.fw-js .fw-spot-btn:hover{transform:scale(.9)}
.fw-js .fw-spot-btn .fw-plus{transition:transform .5s var(--e-out)}
.fw-js .fw-spot-btn[aria-expanded="true"]{background:var(--ink);color:var(--white)}
.fw-js .fw-spot-btn[aria-expanded="true"] .fw-plus{transform:rotate(45deg)}
.fw-js .fw-spot-note{position:absolute;left:calc(32 * var(--u));top:calc(-21 * var(--u));z-index:2;width:calc(280 * var(--u));min-width:220px;padding:calc(18 * var(--u)) calc(20 * var(--u));
  background:var(--white);color:var(--ink);box-shadow:0 6px 28px rgba(6,6,6,.14);opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .3s ease,transform .5s var(--e-out),visibility 0s .3s}
.fw-js .fw-spot.is-left .fw-spot-note{left:auto;right:calc(32 * var(--u))}
.fw-js .fw-spot.is-open .fw-spot-note{opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .5s var(--e-out),visibility 0s}
.fw-js .fw-spot.is-open{z-index:3}
.fw-spot-name{margin-bottom:6px;font-size:var(--small);line-height:1.4;color:var(--ink60)}
/* no script, or a phone (where the drawing is recut): the notes are a numbered list under the picture */
html:not(.fw-js) .fw-spots,.fw-spots-list .fw-spots{display:grid;grid-template-columns:repeat(2, minmax(0, calc(418 * var(--u))));gap:calc(24 * var(--u)) calc(40 * var(--u));margin:calc(40 * var(--u)) 0 0 calc(var(--x0) + 205 * var(--u))}
html:not(.fw-js) .fw-spot,.fw-spots-list .fw-spot{position:static;width:auto;height:auto;counter-increment:spot}
html:not(.fw-js) .fw-spot-name::before{content:counter(spot) '. '}
@media (max-width:767px){
  .fw-js .fw-spot{position:static;width:auto;height:auto;counter-increment:spot}
  .fw-js .fw-spot-btn{display:none}
  .fw-js .fw-spot-note{position:static;width:auto;padding:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .fw-spots,html:not(.fw-js) .fw-spots{display:grid;grid-template-columns:1fr;gap:calc(20 * var(--u));margin:calc(30 * var(--u)) calc(20 * var(--u)) 0}
  .fw-spot-name::before{content:counter(spot) '. '}
}

/* ---------------------------------------------------------------- courtyard: the sticky numbered sequence */
.fw-seq{position:relative;height:calc(4320 * var(--u))}
.fw-seq-stage{position:sticky;top:calc(50vh - 326.5 * var(--u));width:calc(855 * var(--u));height:calc(653 * var(--u));margin-left:calc(var(--x0) + 117.5 * var(--u))}
.fw-seq-frame{position:relative;width:100%;height:100%}
.fw-seq-pic{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--e-io1)}
.fw-seq-pic.is-on,html:not(.fw-js) .fw-seq-pic:first-child{opacity:1}
.fw-seq-pic img{display:block;width:100%;height:100%;object-fit:contain}
.fw-seq-steps{position:absolute;top:0;left:calc(var(--x0) + 992.5 * var(--u));width:calc(330 * var(--u));height:100%}
.fw-seq-step{position:absolute;left:0;width:100%;transition:opacity .5s ease}
.fw-seq-step:nth-child(1){top:calc(560 * var(--u))}
.fw-seq-step:nth-child(2){top:calc(1760 * var(--u))}
.fw-seq-step:nth-child(3){top:calc(2960 * var(--u))}
.fw-js .fw-seq-step{opacity:.35}
.fw-js .fw-seq-step.is-on{opacity:1}
.fw-seq-phone{display:none}
.fw-seq-num{color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-seq-name{margin:calc(14 * var(--u)) 0 calc(12 * var(--u));font:400 max(19px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
@media (max-width:767px){
  .fw-seq{height:auto;padding:0 calc(20 * var(--u))}
  .fw-seq-stage{display:none}
  .fw-seq-steps{position:static;width:auto}
  .fw-seq-step,.fw-js .fw-seq-step{position:static;opacity:1}
  .fw-seq-step+.fw-seq-step{margin-top:calc(60 * var(--u))}
  .fw-seq-phone{display:block;margin:0 calc(-20 * var(--u)) calc(20 * var(--u))}
  .fw-seq-phone img{display:block;width:100%;height:auto}
}

/* ---------------------------------------------------------------- text beside a tall picture */
.fw-tm{position:relative;display:grid;align-items:end;width:calc(1440 * var(--u));margin-left:var(--x0)}
.fw-tm-right{grid-template-columns:calc(117.5 * var(--u)) calc(330 * var(--u)) calc(107.5 * var(--u)) calc(768 * var(--u))}
.fw-tm-right .fw-tm-pic{grid-column:4;grid-row:1}
.fw-tm-right .fw-tm-text{grid-column:2;grid-row:1}
.fw-tm-left{grid-template-columns:calc(117.5 * var(--u)) calc(768 * var(--u)) calc(107 * var(--u)) calc(330 * var(--u))}
.fw-tm-left .fw-tm-pic{grid-column:2;grid-row:1}
.fw-tm-left .fw-tm-text{grid-column:4;grid-row:1;align-self:start}
.fw-tm-left.fw-tm-bottom .fw-tm-text{align-self:end}
.fw-tm-pic{overflow:hidden}
.fw-pair{position:relative;display:grid;width:calc(1440 * var(--u));margin-left:var(--x0);grid-template-columns:calc(117.5 * var(--u)) calc(330 * var(--u)) calc(107.5 * var(--u)) calc(437.5 * var(--u)) calc(330.5 * var(--u)) calc(117 * var(--u));row-gap:calc(20 * var(--u));align-items:end}
.fw-pair-a{grid-column:4 / 6;grid-row:1}
.fw-pair-a-text{grid-column:2;grid-row:1}
.fw-pair-b{grid-column:2 / 5;grid-row:2;width:calc(768 * var(--u))}
.fw-pair-b-text{grid-column:5;grid-row:2;padding-left:calc(107.5 * var(--u));width:calc(437.5 * var(--u))}
.fw-pair img{display:block;width:100%;height:auto}
@media (max-width:767px){
  .fw-tm,.fw-pair{display:block;width:auto;margin-left:0;padding:0 calc(20 * var(--u))}
  .fw-tm-text,.fw-pair-a-text,.fw-pair-b-text{margin-top:calc(20 * var(--u));width:auto;padding:0}
  .fw-pair-b{width:auto;margin-top:calc(60 * var(--u))}
  .fw-tm-pic img{width:100%}
}

/* ---------------------------------------------------------------- pill panorama */
.fw-pano{position:relative;height:calc(1120 * var(--u));background:var(--ink);color:var(--white);overflow:hidden}
.fw-pano-frame{position:absolute;inset:0;clip-path:inset(calc(180 * var(--u)) calc(208 * var(--u)) calc(260 * var(--u)) round calc(340 * var(--u)))}
.fw-pano-in{position:absolute;inset:0;display:block}
.fw-pano-in picture,.fw-pano-in img{display:block;width:100%;height:100%;object-fit:cover}
.fw-pano-text{position:absolute;left:0;right:0;top:calc(520 * var(--u));transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.fw-pano-text::before{content:'';position:absolute;left:50%;top:50%;z-index:-1;width:calc(900 * var(--u));height:calc(440 * var(--u));transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(6,6,6,.56),rgba(6,6,6,.36) 55%,rgba(6,6,6,0));pointer-events:none}
.fw-pano .fw-pill-light{background:rgba(6,6,6,.3)}
.fw-pano-h{color:var(--white);line-height:calc(65 * var(--t));text-shadow:0 0 30px rgba(6,6,6,.3)}
.fw-pano-text .fw-pill{margin-top:calc(34 * var(--u))}
@media (max-width:767px){
  .fw-pano{height:calc(811 * var(--u))}
  .fw-pano-frame{clip-path:inset(calc(110 * var(--u)) calc(20 * var(--u)) calc(110 * var(--u)) round calc(167 * var(--u)))}
  .fw-pano-text{top:50%;padding:0 calc(20 * var(--u))}
  .fw-pano-h{line-height:calc(42 * var(--t))}
}

/* ---------------------------------------------------------------- next garden: one panel */
.fw-next{margin-top:0}
.fw-q+.fw-next,.fw-wide+.fw-next{margin-top:var(--gap)}
.fw-q-close+.fw-next{margin-top:calc(120 * var(--u))}

/* ---------------------------------------------------------------- gardens.html: featured stack, toggle, the All grid */
.fw-toggle,.fw-counter{position:fixed;z-index:56;bottom:calc(30 * var(--u));opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.fw-feat-on .fw-toggle,.fw-feat-on .fw-counter{opacity:1;visibility:visible;transition:opacity .4s ease,visibility 0s}
/* frosted, so a garden's name passing under it as the next panel rises is softened rather than printed through it */
.fw-toggle{left:calc(var(--x0) + 30 * var(--u));display:flex;padding:3px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(6,6,6,.48);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fw-toggle a{display:flex;align-items:center;min-height:36px;padding:0 calc(16 * var(--u));border-radius:999px;color:var(--white);font-size:var(--small);text-decoration:none;transition:background-color .3s ease,color .3s ease}
.fw-toggle a:first-child,.fw-toggle a:hover{background:var(--white);color:var(--ink)}
.fw-toggle a:first-child:hover{background:rgba(255,255,255,.85)}
.fw-counter{right:calc(var(--x0) + 30 * var(--u));color:var(--white);font-size:var(--small);line-height:calc(20 * var(--t));text-shadow:0 0 5px rgba(6,6,6,.45),0 0 14px rgba(6,6,6,.4)}
.fw-featured .fw-panel{--ph:max(100vh, 600px)}
.fw-all{position:relative;margin-top:0;padding:calc(160 * var(--u)) 0 calc(120 * var(--u));background:var(--celeste);scroll-margin-top:0}
.fw-all-in{position:relative;display:grid;grid-template-columns:calc(var(--x0) + 423 * var(--u)) auto}
.fw-all-side{padding:0 calc(40 * var(--u)) 0 calc(var(--x0) + 117.5 * var(--u))}
.fw-all-h{font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-all-note{margin-top:calc(24 * var(--u));color:var(--ink80)}
.fw-filters{margin-top:calc(46 * var(--u))}
.fw-filter{display:flex;align-items:center;min-height:32px;padding:0;margin:0;border:0;background:none;color:var(--ink60);font:400 var(--body)/1.5 var(--f-text);cursor:pointer;transition:color .3s ease}
.fw-filter:hover,.fw-filter[aria-pressed="true"]{color:var(--ink)}
.fw-filter[aria-pressed="true"]::before{content:'';width:6px;height:6px;margin-right:10px;border-radius:50%;background:currentColor}
.fw-cards{display:grid;grid-template-columns:repeat(3, calc(309 * var(--u)));column-gap:calc(30 * var(--u));align-items:start}
.fw-cards-col-2{padding-top:calc(175 * var(--u));will-change:transform}
.fw-card{padding-bottom:calc(30 * var(--u))}
.fw-card[hidden]{display:none}
.fw-card-link{position:relative;display:block;color:var(--white);text-decoration:none}
.fw-card-pic{position:relative;display:block;height:calc(320 * var(--u));overflow:hidden;background:#b9bdb2}
.fw-card-pic::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.6),rgba(6,6,6,.5) 24%,rgba(6,6,6,.16) 46%,rgba(6,6,6,0) 62%)}
.fw-card-pic picture,.fw-card-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-card-name{position:absolute;left:0;right:0;bottom:calc(22 * var(--u));padding:0 calc(16 * var(--u));text-align:center;font:400 max(18px, calc(20 * var(--t)))/1.25 var(--f-text);text-shadow:0 0 12px rgba(6,6,6,.35)}
.fw-card-name small{display:block;margin-top:4px;font-size:var(--small);opacity:.92}
.fw-close{position:relative;padding:0 calc(var(--x0) + 30 * var(--u)) calc(120 * var(--u)) calc(var(--x0) + 205 * var(--u))}
.fw-close .fw-statement{max-width:calc(855 * var(--u))}
.fw-close .fw-pill{margin-top:calc(46 * var(--u))}
@media (max-width:767px){
  .fw-featured .fw-panel{--ph:max(100vh, 560px)}
  /* the inset sits clear above the Featured | All toggle, also on the first screen, where the slim bar above the panels
     pushes the panel's foot below the fold */
  .fw-featured .fw-panel-inset{top:auto;bottom:calc(16 * var(--u) + 66px + var(--rib))}
  .fw-toggle,.fw-counter{bottom:calc(16 * var(--u))}
  .fw-toggle{left:calc(20 * var(--u))}
  .fw-toggle a{min-height:44px}
  .fw-counter{right:calc(20 * var(--u))}
  .fw-all{padding:calc(110 * var(--u)) calc(20 * var(--u)) calc(90 * var(--u))}
  .fw-all-in{display:block}
  .fw-all-side{padding:0}
  .fw-filters{display:flex;flex-wrap:wrap;gap:0 calc(18 * var(--u));margin:calc(30 * var(--u)) 0 calc(40 * var(--u))}
  .fw-filter{min-height:44px}
  .fw-cards{display:block}
  .fw-cards-col-2{padding-top:0}
  .fw-card-pic{height:calc(347 * var(--u))}
  .fw-close{padding:0 calc(20 * var(--u)) calc(120 * var(--u))}
}

/* ---------------------------------------------------------------- studio */
.fw-shead{position:relative;padding:calc(162 * var(--u)) 0 calc(120 * var(--u))}
.fw-shead .fw-eyebrow,.fw-shead .fw-h64{margin-left:calc(var(--x0) + 205 * var(--u))}
.fw-shead .fw-h64{width:calc(943 * var(--u));margin-top:calc(31 * var(--u));line-height:calc(65 * var(--t))}
.fw-shead-pic{width:calc(1292.5 * var(--u));height:calc(862 * var(--u));margin:calc(116 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u));overflow:hidden;background:var(--sage)}
.fw-culture{position:relative;padding-bottom:calc(150 * var(--u));overflow:hidden}
.fw-culture-text{width:calc(593 * var(--u));margin-left:calc(var(--x0) + 292.5 * var(--u))}
.fw-culture-text .fw-pill{margin-top:calc(36 * var(--u))}
.fw-culture-aside{position:absolute;top:0;left:calc(var(--x0) + 992.5 * var(--u));width:calc(330 * var(--u));font:italic 450 max(17px, calc(24 * var(--t)))/calc(32 * var(--t)) var(--f-ital);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 12}
.fw-row{display:flex;align-items:center;gap:calc(20 * var(--u));width:max-content;margin:calc(150 * var(--u)) 0 0 calc(var(--x0) + 117.5 * var(--u));will-change:transform}
.fw-row-item{flex:none;overflow:hidden;background:var(--sage)}
.fw-row-wide{width:calc(418 * var(--u));height:calc(279 * var(--u))}
.fw-row-tall{width:calc(330 * var(--u));height:calc(440 * var(--u))}
.fw-row-item picture,.fw-row-item img,.fw-value-pic picture,.fw-value-pic img,.fw-shead-pic picture,.fw-shead-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-values{position:relative;height:calc(1899 * var(--u));margin-top:0;background:var(--ink);color:var(--white)}
.fw-values-h{position:absolute;left:calc(var(--x0) + 117.5 * var(--u));top:calc(180 * var(--u));width:calc(767 * var(--u));line-height:calc(65 * var(--t))}
.fw-value-text{position:absolute;width:calc(330 * var(--u))}
.fw-value-pic{position:absolute;width:calc(242.5 * var(--u));height:calc(280 * var(--u));overflow:hidden;background:#3a3937}
.fw-value-1 .fw-value-text{left:calc(var(--x0) + 555 * var(--u));top:calc(520 * var(--u))}
.fw-value-1 .fw-value-pic{left:calc(var(--x0) + 992.5 * var(--u));top:calc(420 * var(--u))}
.fw-value-2 .fw-value-text{left:calc(var(--x0) + 992.5 * var(--u));top:calc(1000 * var(--u))}
.fw-value-2 .fw-value-pic{left:calc(var(--x0) + 117.5 * var(--u));top:calc(900 * var(--u))}
.fw-value-3 .fw-value-text{left:calc(var(--x0) + 205 * var(--u));top:calc(1440 * var(--u))}
.fw-value-3 .fw-value-pic{left:calc(var(--x0) + 642.5 * var(--u));top:calc(1360 * var(--u))}
.fw-value-num{color:rgba(255,255,255,.5);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-value-name{margin:calc(30 * var(--u)) 0 calc(18 * var(--u));font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-value-text p:last-child{color:rgba(255,255,255,.78)}
.fw-vision{position:relative;margin-top:0;padding-top:calc(180 * var(--u))}
.fw-vision-h{width:calc(1030 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u));line-height:calc(65 * var(--t))}
.fw-vision-text{width:calc(680 * var(--u));margin:calc(80 * var(--u)) 0 0 calc(var(--x0) + 555 * var(--u));font:400 max(17px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
.fw-vision-text p+p{margin-top:calc(31 * var(--u))}
.fw-vision-text .fw-pill{margin-top:calc(46 * var(--u))}
.fw-vision-pic{margin-top:calc(185 * var(--u));overflow:hidden}
.fw-vision-pic img{display:block;width:100%;height:auto}
.fw-how{display:grid;grid-template-columns:calc(var(--x0) + 555 * var(--u)) auto;padding:calc(185 * var(--u)) 0 calc(185 * var(--u))}
.fw-how-h{padding-left:calc(var(--x0) + 205 * var(--u));font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-how-list{display:grid;grid-template-columns:repeat(3, calc(242.5 * var(--u)));column-gap:calc(20 * var(--u))}
.fw-how-num{color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-how-name{margin:calc(30 * var(--u)) 0 calc(12 * var(--u));font:400 max(19px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
.fw-plants{position:relative;margin-top:0;padding:calc(110 * var(--u)) 0;overflow:hidden;background:var(--white)}
.fw-plants-row{white-space:nowrap;font:italic 450 calc(56 * var(--t))/1.3 var(--f-ital);font-variation-settings:'opsz' 18;letter-spacing:calc(-1 * var(--t))}
.fw-plants-row+.fw-plants-row{margin-top:calc(10 * var(--u))}
.fw-plants-track{display:inline-block;will-change:transform}
.fw-plants-track span{display:inline-block;padding:0 calc(36 * var(--u))}
.fw-plants-track span::after{content:'';display:inline-block;width:calc(8 * var(--u));height:calc(8 * var(--u));margin-left:calc(72 * var(--u));border-radius:50%;background:var(--sage);vertical-align:middle}
.fw-plants-row-2 .fw-plants-track{transform:translateX(-30%)}
.fw-plants-cap{max-width:calc(680 * var(--u));margin:calc(48 * var(--u)) auto 0;text-align:center;font:400 max(17px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
.fw-ways{position:relative;padding:calc(150 * var(--u)) 0 calc(200 * var(--u));background:var(--white);margin-top:0}
.fw-ways-h{width:calc(855 * var(--u));margin-left:calc(var(--x0) + 117.5 * var(--u))}
.fw-ways-list{width:calc(768 * var(--u));margin:calc(90 * var(--u)) 0 0 calc(var(--x0) + 555 * var(--u));border-top:1px solid var(--ink20)}
.fw-ways-list li{border-bottom:1px solid var(--ink20)}
.fw-way{display:grid;grid-template-columns:calc(593 * var(--u)) auto 42px;align-items:center;min-height:calc(110 * var(--u));color:var(--ink);text-decoration:none}
.fw-way-name{font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text);transition:transform .5s var(--e-out)}
.fw-way-label{color:var(--ink60);font-size:var(--body)}
.fw-way-plus{display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));min-width:36px;min-height:36px;border:1px solid var(--ink20);border-radius:50%;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .47s cubic-bezier(.5,1,.89,1)}
.fw-way:hover .fw-way-plus{background:var(--ink);border-color:var(--ink);color:var(--white);transform:scale(.9)}
.fw-way:hover .fw-way-name{transform:translateX(calc(10 * var(--u)))}
@media (max-width:767px){
  .fw-shead{padding:calc(150 * var(--u)) 0 calc(70 * var(--u))}
  .fw-shead .fw-eyebrow,.fw-shead .fw-h64{width:auto;margin-left:calc(20 * var(--u));margin-right:calc(20 * var(--u))}
  .fw-shead .fw-h64{line-height:calc(42 * var(--t))}
  .fw-shead-pic{width:auto;height:calc(224 * var(--u));margin:calc(50 * var(--u)) calc(20 * var(--u)) 0}
  .fw-culture{padding:0 0 calc(50 * var(--u))}
  .fw-culture-text{width:auto;margin:0 calc(20 * var(--u))}
  .fw-culture-aside{position:static;width:auto;margin:calc(40 * var(--u)) calc(20 * var(--u)) 0 calc(59 * var(--u));font-size:calc(20 * var(--t));line-height:calc(26 * var(--t))}
  .fw-row{margin:calc(60 * var(--u)) 0 0 calc(20 * var(--u))}
  .fw-row-wide{width:calc(240 * var(--u));height:calc(160 * var(--u))}
  .fw-row-tall{width:calc(180 * var(--u));height:calc(240 * var(--u))}
  .fw-values{height:auto;padding:calc(110 * var(--u)) calc(20 * var(--u)) calc(110 * var(--u))}
  .fw-values-h{position:static;width:auto;line-height:calc(42 * var(--t))}
  .fw-value{margin-top:calc(70 * var(--u))}
  .fw-value-text,.fw-value-pic{position:static!important;width:auto}
  .fw-value-pic{width:calc(240 * var(--u));height:calc(277 * var(--u));margin-bottom:calc(26 * var(--u))}
  .fw-value-2 .fw-value-pic{margin-left:auto}
  .fw-value-name{margin:calc(14 * var(--u)) 0 calc(12 * var(--u));font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-vision{padding:calc(110 * var(--u)) 0 0}
  .fw-vision-h{width:auto;margin:0 calc(20 * var(--u));line-height:calc(42 * var(--t))}
  .fw-vision-text{width:auto;margin:calc(40 * var(--u)) calc(20 * var(--u)) 0;font-size:calc(18 * var(--t));line-height:calc(27 * var(--t))}
  .fw-vision-pic{margin-top:calc(80 * var(--u))}
  .fw-how{display:block;padding:calc(110 * var(--u)) calc(20 * var(--u))}
  .fw-how-h{padding:0;font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-how-list{display:block;margin-top:calc(40 * var(--u))}
  .fw-how-list li+li{margin-top:calc(36 * var(--u))}
  .fw-how-name{margin:calc(10 * var(--u)) 0 calc(8 * var(--u))}
  .fw-plants{padding:calc(70 * var(--u)) 0}
  .fw-plants-row{font-size:calc(32 * var(--t))}
  .fw-plants-cap{margin:calc(30 * var(--u)) calc(20 * var(--u)) 0;font-size:calc(18 * var(--t));line-height:calc(26 * var(--t))}
  .fw-ways{padding:calc(110 * var(--u)) calc(20 * var(--u)) calc(120 * var(--u))}
  .fw-ways-h{width:auto;margin:0}
  .fw-ways-list{width:auto;margin:calc(50 * var(--u)) 0 0}
  .fw-way{grid-template-columns:1fr 44px;row-gap:2px;min-height:0;padding:calc(20 * var(--u)) 0}
  .fw-way-name{font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-way-label{grid-row:2;font-size:max(14px, calc(14 * var(--t)))}
  .fw-way-plus{grid-column:2;grid-row:1 / span 2;width:44px;height:44px}
}

/* ---------------------------------------------------------------- garden care */
.fw-chead{padding-top:calc(155 * var(--u))}
.fw-chead-h{width:calc(1030 * var(--u));margin-left:calc(var(--x0) + 205 * var(--u))}
.fw-wide-first{margin-top:var(--gap)}
.fw-copy{width:calc(680 * var(--u));margin-left:calc(var(--x0) + 380 * var(--u))}
.fw-copy p+p{margin-top:calc(24 * var(--u))}
.fw-seasons{position:relative}
.fw-seasons-list{display:flex;gap:calc(40 * var(--u));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:calc(var(--x0) + 117.5 * var(--u));padding:0 calc(var(--x0) + 117.5 * var(--u)) calc(4 * var(--u));scrollbar-width:none;overscroll-behavior-x:contain}
.fw-seasons-list::-webkit-scrollbar{display:none}
.fw-seasons-list:focus-visible{outline-offset:-2px}
.fw-season{position:relative;flex:none;display:flex;flex-direction:column;justify-content:flex-end;width:calc(416 * var(--u));height:calc(500 * var(--u));padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(96 * var(--u));box-sizing:border-box;scroll-snap-align:start}
.fw-season-sage{background:var(--sage)}
.fw-season-blush{background:var(--blush)}
.fw-season-sky{background:var(--sky)}
.fw-season-lilac{background:var(--lilac)}
.fw-season-stone{background:#e9e1d3}
.fw-season-name{margin-bottom:calc(14 * var(--u));font:400 max(24px, calc(32 * var(--t)))/calc(36 * var(--t)) var(--f-text)}
.fw-seasons-bar{display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));margin-top:calc(40 * var(--u))}
.fw-seasons-count{min-width:calc(90 * var(--u));text-align:center;font-size:var(--small);color:var(--ink60)}
.fw-seasons-btn{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:1px solid var(--ink20);border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.fw-seasons-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.fw-seasons-btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.fw-seasons-count{order:-1}
.fw-related{padding:calc(150 * var(--u)) 0 calc(200 * var(--u));margin-top:var(--gap);display:grid;grid-template-columns:calc(var(--x0) + 467.5 * var(--u)) auto}
.fw-related-h{padding-left:calc(var(--x0) + 117.5 * var(--u));font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-related-list{display:grid;grid-template-columns:repeat(2, calc(418 * var(--u)));column-gap:calc(20 * var(--u))}
.fw-rel-card{display:block;color:var(--ink);text-decoration:none}
.fw-rel-pic{display:block;height:calc(433 * var(--u));overflow:hidden;background:var(--stone)}
.fw-rel-pic picture,.fw-rel-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-rel-name{display:block;margin-top:calc(18 * var(--u));font:400 max(19px, calc(22 * var(--t)))/calc(31 * var(--t)) var(--f-text)}
@media (max-width:767px){
  .fw-chead{padding:calc(150 * var(--u)) calc(20 * var(--u)) 0}
  .fw-chead-h{width:auto;margin:0}
  .fw-copy{width:auto;margin-left:0;padding:0 calc(20 * var(--u))}
  .fw-seasons-list{gap:calc(10 * var(--u));scroll-padding-left:calc(20 * var(--u));padding:0 calc(20 * var(--u)) 4px}
  .fw-season{width:calc(315 * var(--u));height:calc(400 * var(--u));padding:calc(24 * var(--u)) calc(24 * var(--u)) calc(60 * var(--u))}
  .fw-season-name{font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-related{display:block;padding:calc(100 * var(--u)) calc(20 * var(--u)) calc(120 * var(--u))}
  .fw-related-h{padding:0;font-size:calc(28 * var(--t));line-height:calc(32 * var(--t))}
  .fw-related-list{display:block;margin-top:calc(40 * var(--u))}
  .fw-related-list li+li{margin-top:calc(40 * var(--u))}
  .fw-rel-pic{height:calc(347 * var(--u))}
}

/* ---------------------------------------------------------------- enquire */
/* on taller windows the header grows so the form's heading starts at or below the fold, never across it */
.fw-ehead{position:relative;min-height:max(calc(845 * var(--u) - var(--rib)), calc(100vh - var(--rib) - 60 * var(--u) + 4px))}
.fw-ehead-title{position:absolute;left:calc(var(--x0) + 110.5 * var(--u));top:calc(231 * var(--u));font:340 calc(128 * var(--t))/calc(130 * var(--t)) var(--f-grot);letter-spacing:calc(-5 * var(--t))}
.fw-ehead-lead{position:absolute;left:calc(var(--x0) + 205 * var(--u));top:calc(423 * var(--u));width:calc(418 * var(--u));
  font:italic 450 max(17px, calc(24 * var(--t)))/calc(32 * var(--t)) var(--f-ital);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 12}
.fw-ehead-pic{position:absolute;left:calc(var(--x0) + 730 * var(--u));top:calc(125 * var(--u));width:calc(330 * var(--u));height:calc(500 * var(--u));overflow:hidden;background:var(--sage)}
.fw-ehead-pic picture,.fw-ehead-pic img{display:block;width:100%;height:100%;object-fit:cover}
.fw-ehead-details{position:absolute;left:calc(var(--x0) + 1167.5 * var(--u));top:calc(125 * var(--u));height:calc(500 * var(--u));width:calc(242.5 * var(--u));display:grid;align-content:end;gap:calc(22 * var(--u))}
.fw-ehead-details dt,.fw-foot-dl dt{color:var(--ink40);font-size:var(--small);line-height:calc(20 * var(--t))}
.fw-ehead-details dd{margin:calc(2 * var(--u)) 0 0}
.fw-brief-form{display:grid;grid-template-columns:calc(var(--x0) + 730 * var(--u)) calc(593 * var(--u));padding:calc(60 * var(--u)) 0 calc(200 * var(--u))}
/* the brief runs longer than the map, so on desktop the map holds its place in the left column while the form goes by
   (centred in the window, never under the header) and ends level with the form, leaving no empty band beside it */
.fw-map{position:sticky;top:max(calc(96 * var(--u)), calc(50vh - 355 * var(--u)));align-self:start;margin-left:calc(-185 * var(--u));width:calc(var(--x0) + 808 * var(--u));justify-self:end;margin-right:calc(107 * var(--u))}
.fw-map img{display:block;width:100%;height:auto}
.fw-brief-h{margin-bottom:calc(24 * var(--u))}
.fw-next-steps{counter-reset:step;display:grid;gap:calc(10 * var(--u));margin-bottom:calc(46 * var(--u))}
.fw-next-steps li{counter-increment:step;display:grid;grid-template-columns:calc(40 * var(--u)) 1fr}
.fw-next-steps li::before{content:counter(step, decimal-leading-zero);color:var(--ink40);font-size:var(--small);line-height:1.7}
.fw-form{display:grid;grid-template-columns:1fr 1fr;gap:calc(30 * var(--u)) calc(20 * var(--u))}
.fw-form-intro{grid-column:1 / -1;color:var(--ink60);font-size:var(--small)}
.fw-field{display:grid;gap:calc(6 * var(--u))}
.fw-field-wide{grid-column:1 / -1}
.fw-field label{color:var(--ink60);font-size:var(--small)}
.fw-field input,.fw-field select,.fw-field textarea{width:100%;padding:10px 0;border:0;border-bottom:1px solid var(--ink20);border-radius:0;background:transparent;color:var(--ink);font:400 var(--body)/1.5 var(--f-text);transition:border-color .3s ease}
.fw-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink60) 50%),linear-gradient(-45deg,transparent 50%,var(--ink60) 50%);background-size:5px 5px;background-position:calc(100% - 9px) 55%,calc(100% - 4px) 55%;background-repeat:no-repeat;padding-right:24px}
.fw-field textarea{resize:vertical;min-height:120px}
.fw-field input:focus,.fw-field select:focus,.fw-field textarea:focus{border-bottom-color:var(--ink)}
.fw-field small{color:var(--ink60);font-size:var(--small);line-height:1.45}
.fw-form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:calc(24 * var(--u));margin-top:calc(10 * var(--u))}
.fw-form-reset{min-height:44px;min-width:44px;padding:0 4px;border:0;background:none;color:var(--ink60);font:400 var(--small)/1 var(--f-text);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.fw-form-result{display:grid;gap:calc(20 * var(--u));justify-items:start}
.fw-form-result h2{font:400 max(24px, calc(40 * var(--t)))/calc(48 * var(--t)) var(--f-text)}
.fw-form-summary{white-space:pre-wrap;padding:calc(24 * var(--u)) 0;border-top:1px solid var(--ink20);border-bottom:1px solid var(--ink20);width:100%}
@media (max-width:767px){
  .fw-ehead{min-height:0;padding:calc(150 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u))}
  .fw-ehead-title,.fw-ehead-lead,.fw-ehead-pic,.fw-ehead-details{position:static;width:auto}
  .fw-ehead-title{font-size:calc(48 * var(--t));line-height:calc(50 * var(--t));letter-spacing:calc(-1.5 * var(--t))}
  .fw-ehead-lead{margin-top:calc(20 * var(--u));font-size:calc(20 * var(--t));line-height:calc(26 * var(--t))}
  .fw-ehead-pic{width:calc(335 * var(--u));height:calc(436 * var(--u));margin-top:calc(40 * var(--u))}
  .fw-ehead-details{height:auto;margin-top:calc(40 * var(--u))}
  .fw-brief-form{display:block;padding:calc(20 * var(--u)) 0 calc(120 * var(--u))}
  .fw-map{position:static;width:auto;margin:0 0 calc(50 * var(--u))}
  .fw-brief-main{padding:0 calc(20 * var(--u))}
  .fw-form{grid-template-columns:1fr;gap:calc(24 * var(--u))}
}

/* ---------------------------------------------------------------- footer (revealed from underneath, every page) */
.fw-foot{position:relative;z-index:1;height:calc(971 * var(--u));overflow:clip;background:var(--ink);color:var(--stone)}
.fw-foot-in{position:absolute;inset:0;will-change:transform}
.fw-foot a{color:inherit;text-decoration:none}
.fw-marquee{position:absolute;left:0;top:calc(160 * var(--u));white-space:nowrap;overflow:visible;
  font:340 calc(200 * var(--t))/calc(200 * var(--t)) var(--f-grot);letter-spacing:calc(-12.5 * var(--t));color:var(--stone)}
.fw-marquee-track{display:inline-block;will-change:transform}
.fw-marquee-track span{display:inline-block;padding:0 calc(72 * var(--t)) 0 calc(30 * var(--u))}
.fw-foot-card{position:absolute;left:calc(var(--x0) + 292.5 * var(--u));top:calc(450 * var(--u));width:calc(417.5 * var(--u));padding-left:calc(88 * var(--u))}
.fw-foot-round{position:absolute;left:0;top:0;display:block;width:calc(68 * var(--u));height:calc(68 * var(--u));min-width:48px;min-height:48px;border-radius:50%;object-fit:cover;background:var(--stone)}
.fw-foot-name{color:var(--white);line-height:calc(24 * var(--t))}
.fw-foot-role{color:rgba(255,255,255,.55);line-height:calc(24 * var(--t))}
.fw-foot-quote{margin-top:calc(28 * var(--u));font:italic 450 max(17px, calc(24 * var(--t)))/calc(32 * var(--t)) var(--f-ital);letter-spacing:calc(-.6 * var(--t));font-variation-settings:'opsz' 12;color:var(--stone)}
.fw-foot-card .fw-pill{margin-top:calc(28 * var(--u))}
.fw-foot-dl{display:grid;gap:calc(12 * var(--u));margin-top:calc(28 * var(--u))}
.fw-foot-dl dt{color:rgba(255,255,255,.55)}
.fw-foot-dl dd{color:var(--white)}
.fw-foot-links{position:absolute;top:calc(739 * var(--u));width:calc(242.5 * var(--u));line-height:calc(24 * var(--t))}
.fw-foot-a{left:calc(var(--x0) + 905 * var(--u))}
.fw-foot-b{left:calc(var(--x0) + 1167.5 * var(--u))}
.fw-foot-links li{padding:calc(4 * var(--u)) 0}
/* links draw a 1 px line under themselves on hover */
.fw-foot-links a,.fw-foot-bottom a{color:rgba(255,255,255,.6);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .3s ease,background-size .5s var(--e-io5)}
.fw-foot-links a:hover,.fw-foot-bottom a:hover{color:var(--white);background-size:100% 1px}
.fw-foot-bottom{position:absolute;left:calc(var(--x0) + 30 * var(--u));right:calc(var(--x0) + 30 * var(--u));top:calc(879 * var(--u));border-top:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.55);line-height:calc(24 * var(--t))}
.fw-foot-bottom li{position:absolute;top:calc(29 * var(--u))}
.fw-foot-bottom li:nth-child(1){left:calc(87.5 * var(--u))}
.fw-foot-bottom li:nth-child(2){left:calc(350 * var(--u));width:calc(505 * var(--u))}
.fw-foot-bottom li:nth-child(3){left:calc(875 * var(--u))}
.fw-foot-bottom li:nth-child(4){left:calc(1137.5 * var(--u))}
/* the garden pages and gardens.html end on their last panel, as the reference's project pages do: only a slim
   colophon follows, with the illustrative business note (ledger 67) */
.fw-foot-slim{height:auto;overflow:visible}
.fw-foot-slim .fw-foot-bottom{position:relative;left:auto;right:auto;top:auto;height:calc(92 * var(--u));margin:0 calc(var(--x0) + 30 * var(--u));border-top:0}
@media (max-width:767px){
  .fw-foot{height:auto;min-height:calc(897 * var(--u))}
  .fw-foot-in{position:relative;padding:calc(110 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u))}
  .fw-marquee{position:relative;left:auto;top:auto;margin:0 calc(-20 * var(--u));font-size:calc(120 * var(--t));line-height:calc(120 * var(--t));letter-spacing:calc(-5 * var(--t))}
  .fw-marquee-track span{padding:0 calc(42 * var(--t)) 0 calc(20 * var(--u))}
  .fw-foot-card{position:relative;left:auto;top:auto;width:auto;margin-top:calc(80 * var(--u));padding-left:calc(70 * var(--u))}
  .fw-foot-round{width:calc(50 * var(--u));height:calc(50 * var(--u))}
  .fw-foot-quote{margin-top:calc(26 * var(--u));font-size:calc(20 * var(--t));line-height:calc(26 * var(--t));letter-spacing:calc(-.4 * var(--t))}
  .fw-foot-card .fw-pill{margin-top:calc(22 * var(--u))}
  .fw-foot-links{position:static;width:auto;display:inline-block;vertical-align:top;margin-top:calc(70 * var(--u));font-size:max(14px, calc(14 * var(--t)))}
  .fw-foot-a{width:calc(236.6 * var(--u))}
  .fw-foot-links li{padding:0}
  .fw-foot-links a,.fw-foot-bottom a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;background-position:0 calc(100% - 10px)}
  .fw-foot-bottom{position:relative;left:auto;right:auto;top:auto;margin-top:calc(50 * var(--u));padding-top:calc(14 * var(--u));display:grid;grid-template-columns:1fr 1fr;column-gap:calc(20 * var(--u));font-size:max(14px, calc(14 * var(--t)));line-height:calc(20 * var(--t))}
  .fw-foot-bottom li{position:static;width:auto!important;padding:calc(12 * var(--u)) 0 0;display:flex;align-items:center;min-height:44px}
  .fw-foot-bottom li:nth-child(2){grid-column:1 / -1;grid-row:3}
  .fw-foot-bottom li:nth-child(4){grid-column:2;grid-row:2;padding-top:0}
  .fw-foot-slim{min-height:0;padding:calc(6 * var(--u)) calc(20 * var(--u)) calc(26 * var(--u))}
  .fw-foot-slim .fw-foot-bottom{height:auto;margin:0;padding-top:0;border-top:0}
}

/* ---------------------------------------------------------------- the follower dot (fine pointers only) */
.fw-dot{position:fixed;left:0;top:0;z-index:62;width:calc(42 * var(--u));height:calc(42 * var(--u));min-width:36px;min-height:36px;pointer-events:none;transform:translate3d(-200px,-200px,0)}
.fw-dot i{position:absolute;inset:0;border-radius:50%;background:var(--white);transform:scale(0);transition:transform .3s var(--e-out)}
.fw-dot i::before,.fw-dot i::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:1px;margin:-.5px 0 0 -6px;background:var(--ink)}
.fw-dot i::after{transform:rotate(90deg)}
.fw-dot.is-on i{transform:scale(1)}
@media not ((hover:hover) and (pointer:fine)){.fw-dot{display:none}}

/* ---------------------------------------------------------------- page transitions (same site links; skipped for reduced motion) */
@view-transition{navigation:auto}
.fw-head{view-transition-name:fw-head}
.fw-chapter{view-transition-name:fw-chapter}
::view-transition-group(root){animation-duration:.533s}
::view-transition-old(root){animation:fw-page-out .533s var(--e-io2) both}
::view-transition-new(root){animation:fw-page-in .533s var(--e-io2) both}
@keyframes fw-page-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes fw-page-out{from{transform:none;filter:brightness(1)}to{transform:translateY(-18%);filter:brightness(.55)}}

/* ---------------------------------------------------------------- reduced motion and no script */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .fw-js [data-rise] .fw-ln,.fw-js .fw-hero-quote .fw-ln,.fw-js .fw-hero [data-rise] .fw-ln{transform:none}
  .fw-menu-in,.fw-menu-main a>span,.fw-menu-svc a,.fw-menu-curtain{transform:none}
  .fw-menu,.fw-menu[data-open]{clip-path:none;transition:none}
  .fw-hero-col,.fw-svc-pic,.fw-panel-cover,.fw-foot-in,.fw-marquee,.fw-marquee-track,.fw-grow,.fw-row,.fw-plants-track,.fw-cards-col-2{transform:none!important}
  .fw-dim{display:none}
  .fw-js .fw-hero-frame picture img,.fw-js .fw-panel-cover img{animation:none}
  /* the header and the label change state at once instead of moving */
  .fw-head *,.fw-head *::before,.fw-chapter *,.fw-back *{transition-duration:.01s!important;transition-delay:0s!important}
  .fw-bg,.fw-chapter{transition:none}
  .fw-pano-frame{clip-path:inset(calc(180 * var(--u)) calc(208 * var(--u)) calc(260 * var(--u)) round calc(340 * var(--u)))!important}
}
html:not(.fw-js) .fw-burger{display:none}
html:not(.fw-js) .fw-menu{position:relative;inset:auto;z-index:1;visibility:visible;clip-path:none;overflow:visible;color:var(--ink);background:var(--stone);padding:calc(70 * var(--u)) calc(var(--x0) + 30 * var(--u)) 20px}
html:not(.fw-js) .fw-menu-curtain,html:not(.fw-js) .fw-menu-media,html:not(.fw-js) .fw-menu a.fw-menu-thumb{display:none}
html:not(.fw-js) .fw-menu-in{transform:none;opacity:1;min-height:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;padding:0}
html:not(.fw-js) .fw-menu-main,html:not(.fw-js) .fw-menu-svc,html:not(.fw-js) .fw-menu-sub{position:static;transform:none;display:flex;flex-wrap:wrap;gap:4px 18px;font:400 var(--body)/1.6 var(--f-text);letter-spacing:0}
html:not(.fw-js) .fw-menu-main a>span,html:not(.fw-js) .fw-menu-svc a,html:not(.fw-js) .fw-menu-sub p{transform:none;opacity:1}
html:not(.fw-js) .fw-menu-sub{color:var(--ink60)}
html:not(.fw-js) .fw-menu-sub p:last-child{position:static}
html:not(.fw-js) .fw-menu a{min-height:44px;display:inline-flex;align-items:center}
html:not(.fw-js) .fw-toggle,html:not(.fw-js) .fw-counter{display:none}
html:not(.fw-js) .fw-circles{height:auto}
html:not(.fw-js) .fw-circles-stage{position:relative;height:auto;min-height:calc(700 * var(--u));padding-bottom:calc(120 * var(--u))}
html:not(.fw-js) .fw-circles-svg{height:calc(700 * var(--u))}
html:not(.fw-js) .fw-ring-name{top:calc(350 * var(--u));opacity:1}
html:not(.fw-js) .fw-ring-labels{position:relative;inset:auto;display:flex;justify-content:center;flex-wrap:wrap;padding-top:calc(700 * var(--u))}
html:not(.fw-js) .fw-ring-label{position:static;display:inline-block;transform:none;opacity:1;margin:0 calc(24 * var(--u))}