/* ============================================================================
   Platinum Creative, "After dark"
   A near-black stage lit by one soft silver light, monumental type set against
   small precise details, the work shown big, and light panels that slide over
   the dark. The photographs behind the heroes are in black and white. One
   accent only: platinum silver, used sparingly. Corners are rounded
   rectangles; nothing is a pill.
   ========================================================================== */
:root{
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
  --bg:#060606; --bg-2:#0D0D0D; --ink:#F3F1EC; --dim:#8E8C86; --mute:#4E4D4A;
  --line:rgba(243,241,236,.1); --line-2:rgba(243,241,236,.2);
  --card:rgba(255,255,255,.035); --card-line:rgba(255,255,255,.075);
  --paper:#ECEAE5; --paper-2:#F8F7F4; --paper-3:#E3E0DA; --paper-ink:#121212; --paper-body:#45433F; --paper-dim:#67655F; --paper-line:rgba(18,18,18,.12);
  --accent:#FF9BB4; --accent-deep:#B23A62; --accent-rgb:255,155,180;   /* the soft rose: blush on dark, deep rose on light (AA) */
  --glow-hi:rgba(242,246,252,.66); --glow-lo:rgba(178,190,206,.24);
  --gutter:clamp(20px,3.4vw,48px); --max:1376px; --r-lg:28px; --r:22px; --r-sm:14px; --r-xs:11px;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Schibsted Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:110px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#060606}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
p{text-wrap:pretty}
.visually-hidden,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--ink);color:#060606;font-weight:500;transition:top .3s}
.skip-link:focus{top:16px}
.nowrap{white-space:nowrap}

/* the design studio's page is light; the dark bands inside it say so */
html[data-site="design"],html[data-site="design"] body{background:var(--paper);color:var(--paper-ink)}

/* ---------------------------------------------------------------- type */
.wrap{max-width:var(--max);margin-inline:auto}
.big{font-weight:500;letter-spacing:-.04em;line-height:1.02;font-size:clamp(38px,5.4vw,84px);text-wrap:balance}
.big--md{font-size:clamp(34px,4.2vw,64px)}
.big--sm{font-size:clamp(28px,3vw,46px);letter-spacing:-.035em}
.big .dim,.dim{color:var(--dim)}
.center{text-align:center;margin-inline:auto}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--dim);max-width:52ch}
.lede strong{color:var(--ink);font-weight:500}
.small{font-size:14.5px;line-height:1.55;color:var(--dim)}
.label{font-size:14px;font-weight:500;color:var(--dim)}
.light .dim,.paper .dim{color:var(--paper-dim)}
.light .big .dim,.paper .big .dim{color:var(--accent-deep)}
/* except in Tend's band, where Tend's own pink is beside it: two pinks side by side would blur the two brands */
.tend__intro .big .dim{color:var(--paper-dim)}
.light .lede,.paper .lede{color:var(--paper-body)}
.light .lede strong,.paper .lede strong{color:var(--paper-ink)}
.light .small,.paper .small,.light .label,.paper .label{color:var(--paper-dim)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 19px;border-radius:var(--r-xs);font-size:15px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;transition:background .3s,color .3s,box-shadow .3s}
.btn--play:hover svg{transform:scale(1.1)}
.btn--white{background:var(--ink);color:#0A0A0A}
.btn--white:hover{background:#fff}
.btn--quiet{background:rgba(243,241,236,.08);color:var(--ink)}
.btn--quiet:hover{background:rgba(243,241,236,.14)}
.btn--dark{background:#121212;color:var(--ink)}
.btn--dark:hover{background:#000}
.btn--line{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink)}
.btn--line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.light .btn--quiet,.paper .btn--quiet{background:rgba(18,18,18,.07);color:var(--paper-ink)}
.light .btn--quiet:hover,.paper .btn--quiet:hover{background:rgba(18,18,18,.12)}
.light .btn--line,.paper .btn--line{box-shadow:inset 0 0 0 1px rgba(18,18,18,.25);color:var(--paper-ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .3s}
.link:hover{text-decoration-color:currentColor}
.go{display:inline-block;font-size:15px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px;transition:text-decoration-color .3s}
.go:hover{text-decoration-color:currentColor}

/* ---------------------------------------------------------------- header */
/* ---------------------------------------------------------------- header: a floating bar
   a rounded bar of frosted glass held just in from the edges: lighter over the photographs, deeper once the page moves,
   light frosted over the paper sections. The logo, the pages in the middle, Architecture and Get in touch at the right.
   It stays at the top the whole way down the page */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;padding:12px clamp(12px,1.6vw,24px) 0;pointer-events:none;color:var(--ink);transition:color .4s}
.hdr.is-light{color:var(--paper-ink)}
.hdr__bar{pointer-events:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,1.6vw,28px);max-width:calc(var(--max) + 64px);height:60px;margin:0 auto;padding:0 10px 0 clamp(20px,1.8vw,26px);border-radius:var(--r-lg);background:rgba(12,12,12,calc(.26 + var(--fade,0) * .5));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 18px 40px -26px rgba(0,0,0,calc(var(--fade,0) * .8));transition:background .45s,box-shadow .45s}
.hdr.is-light .hdr__bar{background:rgba(248,247,244,calc(.62 + var(--fade,0) * .28));box-shadow:inset 0 0 0 1px rgba(18,18,18,.08),0 18px 40px -26px rgba(0,0,0,.28)}
.hdr__bar > .logo{grid-column:1;justify-self:start}
.hdr__nav{grid-column:2;display:flex;align-items:center;gap:2px}
.hdr__nav a,.hdr__switch{position:relative;padding:9px 14px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;opacity:.8;transition:opacity .25s,background .25s}
.hdr__nav a:hover,.hdr__switch:hover{opacity:1;background:rgba(255,255,255,.08)}
.hdr.is-light .hdr__nav a:hover,.hdr.is-light .hdr__switch:hover{background:rgba(18,18,18,.06)}
.hdr__nav a[aria-current]{opacity:1}
.hdr__nav a[aria-current]::after{content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.hdr.is-light .hdr__nav a[aria-current]::after{background:var(--accent-deep)}
.hdr__nav a:focus-visible,.hdr__switch:focus-visible,.hdr__start:focus-visible,.hdr__menu:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.hdr__end{grid-column:3;justify-self:end;display:flex;align-items:center;gap:6px}
.hdr__switch{margin-right:4px}
.hdr__switch::before{content:"";position:absolute;left:-4px;top:9px;bottom:9px;width:1px;background:currentColor;opacity:.22}
.hdr__start{display:inline-flex;align-items:center;height:40px;padding:0 19px;border-radius:calc(var(--r-lg) - 10px);background:var(--ink);color:#0A0A0A;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .25s,transform .25s}
.hdr__start:hover{background:#fff}
.hdr__start:active{transform:scale(.98)}
.hdr.is-light .hdr__start{background:#111;color:var(--ink)}
.hdr.is-light .hdr__start:hover{background:#000}
.logo{display:inline-flex;align-items:center;gap:11px;justify-self:start}
.logo svg{width:17px;height:22px;fill:currentColor;flex:none}
.logo span{font-family:"Urbanist",var(--sans);font-size:14px;letter-spacing:.17em;font-weight:500;white-space:nowrap}
.logo span i{font-style:normal;font-weight:300;opacity:.7}
.capsule{display:flex;align-items:center;height:46px;padding:4px;border-radius:13px;background:rgba(22,22,22,.66);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--ink)}
.capsule button{display:flex;align-items:center;gap:9px;height:38px;padding:0 15px;border-radius:9px;font-size:15px;font-weight:500;transition:background .3s}
.capsule button:hover{background:rgba(255,255,255,.08)}
.capsule button i{display:grid;grid-template-columns:4px 4px;gap:3px}
.capsule button i b{width:4px;height:4px;border-radius:1px;background:currentColor}
/* the two studios side by side; the one you are in is lit */
/* the studio switch: the studio you're in as the light pill; it opens a short list of all three, with what each does */
.studio{position:relative;margin-left:4px;padding-left:5px;border-left:1px solid rgba(255,255,255,.1)}
.studio summary{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 14px;border-radius:9px;background:var(--ink);color:#0A0A0A;font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer;list-style:none;transition:background .3s}
.studio summary::-webkit-details-marker{display:none}
.studio summary:hover{background:#fff}
.studio summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.studio summary svg{width:14px;height:14px;opacity:.75;transition:transform .3s var(--ease)}
.studio[open] summary svg{transform:rotate(180deg)}
.studio__pop{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;z-index:5;display:grid;gap:2px;width:310px;padding:6px;border-radius:14px;background:rgba(18,18,18,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.55);color:var(--ink)}
.studio__pop a{display:grid;gap:3px;padding:10px 12px;border-radius:9px;transition:background .25s}
.studio__pop a:hover,.studio__pop a:focus-visible,.studio__pop a[aria-current]{background:rgba(255,255,255,.07)}
.studio__pop a:focus-visible{outline:2px solid rgba(243,241,236,.5);outline-offset:-2px}
.studio__pop b{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500}
.studio__pop b svg{width:10px;height:10px;opacity:.7}
.studio__pop span{font-size:13px;color:#9C9A94}
.studio__pop a[aria-current] b::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--ink)}
/* narrow screens carry the studios at the top of the menu instead */
@media (max-width:720px){.studio{display:none}}
.hdr__cta{justify-self:end}
.hdr.is-light .hdr__cta{background:#111;color:var(--ink)}
.hdr.is-light .hdr__cta:hover{background:#000}
@media (max-width:760px){
  .logo{gap:12px}
  .logo svg{width:19px;height:25px}
  .logo span{font-size:15px;letter-spacing:.15em}
  .capsule{justify-self:end;height:44px}
  .hdr__cta span{display:none}
  .hdr__cta{width:44px;height:44px;padding:0;justify-content:center}
}

/* the menu button is two lines, the lower one shorter; it draws out to full width on hover */
.lines{position:relative;display:block;width:26px;height:9px}
.lines i{position:absolute;right:0;height:1.5px;border-radius:1px;background:currentColor;transition:width .4s var(--ease)}
.lines i:first-child{top:0;width:100%}
.lines i:last-child{bottom:0;width:62%}
button:hover > .lines i:last-child,button:focus-visible > .lines i:last-child{width:100%}
.hdr__menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:calc(var(--r-lg) - 8px);transition:background .25s}
.hdr__menu:hover{background:rgba(255,255,255,.08)}
.hdr.is-light .hdr__menu:hover{background:rgba(18,18,18,.06)}
@media (max-width:1180px){.hdr__nav{display:none}.hdr__menu{display:inline-flex}}
@media (max-width:760px){.hdr{padding:10px 10px 0}.hdr__bar{height:56px;padding:0 6px 0 18px}.hdr__switch{display:none}}
@media (max-width:480px){.hdr__start{display:none}}

/* ---------------------------------------------------------------- home hero: the film (after the live site's finale)
   one photograph full screen, the words over its sky; scrolling pulls it back into its cell of a full-width grid of
   small photographs, which fade in around it, then one line arrives beneath. ad.js builds the grid, measures the
   photograph's cell (each cell has the screen's shape, so the frame shrinks into it whole) and sets --t (the words
   leaving), --g (the pull back) and --glow (the photograph's edge lighting) */
.hf2{background:var(--bg)}
/* on a phone the film fills the whole screen, down under the browser's bars (the large viewport, lvh), so no strip of
   page shows beneath it; the corner label rises by the bars' height (lvh minus svh) so it stays in view. On a laptop
   the two are the same and nothing changes */
.hero.hf2{height:100vh;height:100lvh}
.hf2__place,.hf2__scroll{bottom:calc(100lvh - 100svh + clamp(22px,3.4vh,36px))}
.hf2__frame{position:absolute;inset:0;z-index:3;margin:0;overflow:hidden;transform-origin:50% 50%}
.hf2__frame img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);transform:scale(calc(1.06 - var(--g,0) * .06))}
.hf2__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.6) 0%,rgba(6,6,6,.16) 36%,rgba(6,6,6,0) 54%,rgba(6,6,6,0) 74%,rgba(6,6,6,.5) 100%);opacity:calc(1 - var(--g,0));pointer-events:none}
/* the grid covers the whole hero: as many rows as columns, so every cell has the screen's shape */
.hf2__grid{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:6px;pointer-events:none}
.hf2__tile{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:2px;background:#111;opacity:0;transform:scale(.94)}
.hf2__tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.55);transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
/* once the grid is in, the frames open: one lights to full colour under the pointer, film stills show a play button */
.hf2.is-grid .hf2__tile:not(.hf2__tile--hero),.hf2.is-grid .hf2__frame{pointer-events:auto;cursor:pointer}
.hf2__play{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:grid;place-items:center;background:rgba(243,241,236,.92);color:#111;opacity:0;transform:scale(.85);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hf2__play svg{width:16px;height:16px;margin-left:2px}
@media (hover:hover){
  .hf2.is-grid .hf2__tile:hover{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.65)}
  .hf2.is-grid .hf2__tile:hover img{filter:none;transform:scale(1.05)}
  .hf2.is-grid .hf2__tile:hover .hf2__play{opacity:1;transform:none}
}
.hf2__tile--hero{position:relative;background:transparent;opacity:1;transform:none;overflow:visible}
.hf2__tile--hero::after{content:"";position:absolute;inset:-4px;border-radius:6px;border:1px solid var(--accent);box-shadow:0 0 44px 2px rgba(var(--accent-rgb),.3);opacity:var(--glow,0);pointer-events:none}
.hf2__kicker,.hf2__place,.hf2__scroll{font-size:12px;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.hf2__copy{position:absolute;left:var(--gutter);right:var(--gutter);top:17vh;z-index:4;text-align:center;opacity:calc(1 - var(--t,0));pointer-events:none}
.hf2__kicker{color:var(--accent)}
.hf2__title{margin-top:22px;font-size:clamp(44px,6.3vw,104px);font-weight:500;letter-spacing:-.045em;line-height:1.02;color:var(--ink);text-shadow:0 2px 34px rgba(0,0,0,.28)}
.hf2__title em{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:-.015em;line-height:1}
.hf2__place,.hf2__scroll{position:absolute;bottom:clamp(22px,3.4vh,36px);z-index:4;color:rgba(243,241,236,.78);opacity:calc(1 - var(--t,0))}
.hf2__place{left:var(--gutter)}
.hf2__scroll{right:var(--gutter);display:flex;align-items:center;gap:8px}
.hf2__scroll svg{width:12px;height:12px}
.cover__lift{height:150vh}
@media (max-width:760px){
  .hf2__grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px}
  .hf2__copy{top:15vh}
  .hf2__title{font-size:clamp(40px,11vw,54px)}
  .hf2__kicker,.hf2__place,.hf2__scroll{font-size:10.5px;letter-spacing:.24em}
  .hf2__scroll{display:none}
  .cover__lift{height:130vh}
}
@media (prefers-reduced-motion:reduce){.hf2__grid{display:none}.cover__lift{display:none}}

/* ---------------------------------------------------------------- menu */
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;padding:18px var(--gutter) max(24px,env(safe-area-inset-bottom));background:rgba(6,6,6,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;overflow-y:auto}
.menu.open{opacity:1;visibility:visible}
.menu__top{display:flex;justify-content:space-between;align-items:center;min-height:46px}
.menu__top > span{font-size:14px;color:var(--dim)}
.menu__close{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 15px;border-radius:10px;background:rgba(255,255,255,.08);font-size:15px;font-weight:500}
.menu__close svg{width:14px;height:14px}
.menu__body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding:clamp(28px,6vh,72px) 0 clamp(20px,4vh,40px)}
.menu__list a{display:block;padding:4px 0;font-size:clamp(30px,min(5.6vw,7.2vh),76px);font-weight:500;letter-spacing:-.045em;line-height:1.02;color:var(--mute);transition:color .3s,transform .5s var(--ease)}
.menu__list a:hover,.menu__list a[aria-current="page"]{color:var(--ink)}
.menu__list a:hover{transform:translateX(8px)}
.menu__side{display:grid;gap:26px;justify-items:end;text-align:right;padding-bottom:10px}
.menu__studios{display:flex;gap:6px;padding:4px;border-radius:12px;background:rgba(255,255,255,.06)}
.menu__studios a{padding:9px 13px;border-radius:9px;font-size:14px;font-weight:500;color:var(--dim)}
.menu__studios a[aria-current]{background:var(--ink);color:#0A0A0A}
.menu__contact{display:grid;gap:4px;font-size:16px;font-weight:500}
.menu__contact a:hover{color:var(--accent)}
.menu__contact span{font-size:14px;font-weight:400;color:var(--dim)}
/* the menu is a panel about a third of the screen wide that slides in from the right, under the button that opens it,
   over a soft wash of the page */
.menu:has(> .menu__panel){display:block;padding:0;overflow:hidden;background:rgba(6,6,6,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.menu__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;width:clamp(380px,34vw,580px);padding:18px clamp(26px,2.8vw,44px) max(28px,env(safe-area-inset-bottom));overflow-y:auto;background:#0B0B0B;box-shadow:-1px 0 0 rgba(255,255,255,.08),-50px 0 100px -40px rgba(0,0,0,.9);transform:translateX(100%);transition:transform .7s var(--ease)}
.menu.open .menu__panel{transform:none}
.menu__panel .menu__body{grid-template-columns:1fr;align-items:start;align-content:space-between;gap:48px}
/* smaller and airier in the panel: more room between the items, less tight tracking */
.menu__panel .menu__list a{padding:clamp(7px,1.25vh,12px) 0;font-size:clamp(23px,min(2.1vw,4.4vh),33px);letter-spacing:-.022em;line-height:1.1}
.menu__panel .menu__side{justify-items:start;text-align:left}
@media (max-width:760px){.menu__panel{width:100%}.menu__panel .menu__body{align-content:start;gap:32px}}
@media (max-width:760px){.menu__body{grid-template-columns:1fr;align-items:start;align-content:start}.menu__side{display:contents}.menu__studios{order:-1;justify-self:stretch}.menu__studios a{flex:auto;text-align:center;white-space:nowrap}.menu__studios{flex-wrap:wrap}.menu__contact{justify-self:start;text-align:left}}

/* ---------------------------------------------------------------- the cover: a pinned hero the next section slides over */
.cover{position:relative}
.hero,.phero{position:sticky;top:0;height:100vh;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;--cover:0}
.hero > *,.phero > *{transition:none}
/* page heroes: a colour photograph at a calmer height, with the heading at a reading size */
.phero{height:76vh;height:76svh;min-height:520px}
.hero__img,.phero__img{position:absolute;inset:0;z-index:-3}
.hero__img img,.phero__img img,.phero__img iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.hero__img img{opacity:.34;filter:saturate(.16) brightness(.85);transform:scale(calc(1.06 - var(--cover) * .04));animation:settleIn 2.4s var(--ease) both}
.hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(6,6,6,.82) 0%,rgba(6,6,6,.25) 34%,rgba(6,6,6,.15) 60%,rgba(6,6,6,.7) 100%)}
@keyframes settleIn{from{opacity:0;transform:scale(1.1)}}
.glow{position:absolute;left:-14%;right:-14%;bottom:-12%;height:96%;z-index:-2;background:url(../img/ad/glow.jpg) 50% 55%/cover;filter:blur(26px) saturate(1.3);-webkit-mask-image:radial-gradient(ellipse 46% 74% at 50% 100%,#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.32) 56%,transparent 76%);mask-image:radial-gradient(ellipse 46% 74% at 50% 100%,#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.32) 56%,transparent 76%);pointer-events:none}
.glow::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 42% at 50% 92%,var(--glow-hi),var(--glow-lo) 45%,transparent 75%);mix-blend-mode:screen}
.grain{position:absolute;inset:-50%;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* as the next section rises over it, the hero recedes a little */
.hero__inner,.phero__inner{position:absolute;inset:0;transform:scale(calc(1 - var(--cover) * .045));opacity:calc(1 - var(--cover) * .75);transform-origin:50% 60%}
.over{position:relative;z-index:2;background:var(--bg);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -60px 120px -50px rgba(0,0,0,.95)}
.over.paper,.over.light{box-shadow:0 -60px 120px -50px rgba(0,0,0,.7)}

/* home hero */
.hero__statement{position:absolute;left:50%;top:clamp(110px,19vh,190px);width:min(560px,44vw);font-size:clamp(28px,2.7vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.meta{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:13px;color:#B5B3AD}
.meta > div{display:flex;gap:34px;align-items:center}
.hero .meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--markH,22vw) * .87 + clamp(18px,3vh,30px))}
.sun{display:inline-flex;align-items:center;gap:8px}
.sun svg{width:14px;height:14px;flex:none}
.sun b{font-weight:500;color:var(--ink)}
.scrollcue{display:inline-flex;align-items:center;gap:8px}
.scrollcue svg{width:11px;height:11px;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.mark{display:block;width:100%;height:auto;overflow:visible}
.mark text{font-family:"Urbanist",-apple-system,sans-serif;font-weight:200}
.hero__mark{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(var(--markH,22vw) * -.13);width:calc(100% - 2 * var(--gutter))}

/* page heroes */
.phero__img img{animation:settleIn 2.4s var(--ease) both}
.phero__img iframe{width:max(100%,177.78vh);height:max(100%,56.25vw);left:50%;top:50%;transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity 1.4s;pointer-events:none}
.phero__img iframe.on{opacity:1}
.phero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,6,.86) 0%,rgba(6,6,6,.5) 34%,rgba(6,6,6,.08) 62%),linear-gradient(to right,rgba(6,6,6,.38) 0%,rgba(6,6,6,0) 55%),linear-gradient(to bottom,rgba(6,6,6,.55) 0%,rgba(6,6,6,0) 24%)}
.phero__body{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(40px,8vh,90px);display:grid;gap:clamp(26px,4vh,40px)}
.phero h1{max-width:min(20ch,100%);font-size:clamp(36px,4.2vw,64px);font-weight:500;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
.phero h1 .dim{display:block;color:rgba(243,241,236,.62)}
.phero__say{max-width:26ch;font-size:clamp(28px,3vw,46px);font-weight:500;letter-spacing:-.03em;line-height:1.16;text-wrap:balance}
.phero .jump a{color:rgba(243,241,236,.72)}
.phero .jump a:hover{color:#fff}
.phero__lede{max-width:52ch;color:rgba(243,241,236,.82);font-size:clamp(17px,1.35vw,20px)}
.phero .meta{padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.phero__quick{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:17px;font-weight:500}
.phero__quick a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px}
.phero__quick a:hover{text-decoration-color:#fff}
.phero__caption{font-size:13px;color:rgba(243,241,236,.6)}

/* design studio cover: the photograph at full strength, light text over it */
.phero--photo .phero__img img{opacity:1;filter:none}
.phero--photo .phero__img::after{background:linear-gradient(to top,rgba(8,8,10,.74) 0%,rgba(8,8,10,.42) 34%,rgba(8,8,10,0) 60%),linear-gradient(to right,rgba(8,8,10,.4) 0%,rgba(8,8,10,0) 60%),linear-gradient(to bottom,rgba(8,8,10,.45) 0%,rgba(8,8,10,0) 22%)}
/* the property websites hero: the words on the left, the live sites stacked on the right in a soft light */
.phero--web{height:88vh;height:88svh;min-height:620px}
.phero--web .phero__img img{opacity:.3}
.pweb__light{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 34% 40% at 70% 50%,rgba(243,241,236,.075),transparent 70%),radial-gradient(ellipse 26% 30% at 78% 62%,rgba(var(--accent-rgb),.07),transparent 72%)}
.phero--web .phero__body{right:auto;width:min(44vw,640px)}
.phero--web h1{max-width:13ch}
.phero--web .phero__lede{max-width:40ch}
.phero--web .meta{width:calc(100vw - 2 * var(--gutter))}
.pweb{position:absolute;right:var(--gutter);top:calc(50% - 12px);display:grid;width:min(48vw,860px,calc((88vh - 250px) * 1.12));margin:0;transform:translateY(-54%)}
.pweb > *{grid-area:1 / 1}
.pweb .browser{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.9)}
.pweb__back{width:66%;justify-self:start;align-self:start;opacity:.5;animation:pwebIn 1.4s var(--ease) .15s both}
.pweb__front{width:80%;justify-self:end;align-self:end;margin-top:24%;animation:pwebIn 1.4s var(--ease) .35s both}
.pweb .pweb__phone{position:absolute;right:4%;bottom:-12%;left:auto;width:16%;animation:pwebIn 1.4s var(--ease) .55s both}
@keyframes pwebIn{from{opacity:0;transform:translateY(34px)}}
@media (max-width:900px){
  .phero--web .phero__body{right:var(--gutter);width:auto}
  .phero--web .meta{width:auto}
  .pweb{left:var(--gutter);right:auto;top:clamp(84px,12vh,120px);width:calc(100vw - 2 * var(--gutter));transform:none}
  .pweb .pweb__phone{width:20%;bottom:-12%}
  .pweb__light{background:radial-gradient(ellipse 60% 30% at 50% 28%,rgba(243,241,236,.07),transparent 70%)}
}
@media (max-width:760px){
  .phero--web .phero__quick{font-size:15.5px;gap:6px 20px}
  .phero--web .phero__body{gap:18px}
  .phero--web h1{font-size:clamp(36px,10vw,46px)}
  .phero--web .phero__lede{font-size:16px}
  .pweb{top:80px;width:calc(100vw - 2 * var(--gutter) - 6vw)}
  .pweb__back{display:none}
  .pweb__front{width:100%;margin-top:0}
  .pweb .pweb__phone{width:22%;right:-5vw;bottom:-16%}
}
@media (prefers-reduced-motion:reduce){.pweb > *{animation:none}}
@media (max-width:760px){.phero--photo .phero__img::after{background:linear-gradient(to top,rgba(8,8,10,.84) 0%,rgba(8,8,10,.56) 42%,rgba(8,8,10,0) 70%),linear-gradient(to bottom,rgba(8,8,10,.45) 0%,rgba(8,8,10,0) 22%)}}
.phero--photo{color:#fff}

@media (max-width:760px){
  .hero{min-height:560px}
  .phero{height:72svh;min-height:480px}
  .phero--web{height:100svh;min-height:640px}
  .hero__statement{left:var(--gutter);right:var(--gutter);width:auto;top:clamp(104px,16vh,140px);font-size:30px}
  .hero .meta{flex-direction:column;align-items:flex-start;gap:8px;bottom:calc(22px + env(safe-area-inset-bottom,0px) + var(--markH,22vw) + 18px)}
  .hero .meta > div{flex-direction:column;align-items:flex-start;gap:6px}
  .scrollcue{display:none}
  .hero__mark{bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .hero__img img{object-position:var(--fpm,40% 50%)}
  .phero .meta{flex-direction:column;align-items:flex-start;gap:6px}
  .phero .meta > div{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ---------------------------------------------------------------- home hero: photographs
   small photographs around the headline; scrolling sends them outward and larger, as if walking into the work, while
   the lead opens to the whole screen and holds before the next section slides over. ad.js sets --t (the flight, 0 to
   1) and --e (the opening) on the hero, the lead's box (--lx --ly --lw --lh --lr), and --px --py from the pointer */
.hs{position:absolute;inset:0}
.hs .hero__inner{z-index:2;transform:none;opacity:1;pointer-events:none}
.hs__ph,.hs__lead,.hs__spot{--x:var(--dx);--y:var(--dy);--w:var(--dw);position:absolute;margin:0}
.hs__ph,.hs__lead{overflow:hidden;border-radius:10px;animation:hsIn 1.1s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms)}
/* a photograph shows only once it has loaded (ad.js adds .is-in), so no empty frame ever animates in */
.js .hs__ph:not(.is-in),.js .hs__lead:not(.is-in){opacity:0;animation:none}
/* the small ones keep their resting box and fly on a transform: outward from the centre and larger, the nearer faster.
   translate3d puts each on its own layer, so moving one never leaves a trail of edge pixels on what lies beneath */
.hs__ph{z-index:1;--s:calc(1 + var(--t,0) * var(--d) * 2.2);--m:calc(var(--t,0) * var(--d) * 1.7);left:calc(50% + var(--x) * 1vw);top:calc(50% + var(--y) * 1vh);width:calc(var(--w) * 1vw);aspect-ratio:var(--ar);translate:-50% -50%;transform:translate3d(calc(var(--x) * 1vw * var(--m) - var(--px,0) * var(--d) * 14px),calc(var(--y) * 1vh * var(--m) - var(--py,0) * var(--d) * 10px),0) scale(var(--s));opacity:calc(1 - (var(--t,0) - .5) * 2.4)}
/* the lead and its still marker share a resting box; once measured, ad.js gives the lead its opening box in pixels */
.hs__spot,.hs__lead{left:calc(50% + var(--x) * 1vw);top:calc(50% + var(--y) * 1vh);width:calc(var(--w) * 1vw);aspect-ratio:var(--ar);translate:-50% -50%}
.hs__spot{visibility:hidden;pointer-events:none}
.hs__lead{z-index:3;transform:translateZ(0)}
.hs__lead[style*="--lw"]{left:var(--lx);top:var(--ly);width:var(--lw);height:var(--lh);aspect-ratio:auto;translate:none;border-radius:var(--lr)}
.hs__ph img,.hs__lead img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.hs__lead::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0) 40%);opacity:var(--e,0);pointer-events:none}
@keyframes hsIn{from{opacity:0;scale:.86}}
.hs__title{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;translate:0 -50%;text-align:center;font-size:clamp(40px,6.2vw,100px);font-weight:500;letter-spacing:-.05em;line-height:.98;opacity:calc(1 - var(--t,0) * 2.6);scale:calc(1 + var(--t,0) * .06)}
.hs__title .dim{color:rgba(243,241,236,.42)}
.hs .meta{bottom:clamp(26px,4vh,40px);opacity:calc(1 - var(--t,0) * 3)}
@media (max-width:760px){
  .hs__ph,.hs__lead,.hs__spot{--x:var(--mx);--y:var(--my);--w:var(--mw)}
  .hs__ph,.hs__lead{border-radius:8px}
  .hs__ph[data-nm]{display:none}
  .hs__title{font-size:clamp(38px,11vw,56px);line-height:1}
  .hs .meta{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){
  .cover__lift{display:none}
  .hs__ph,.hs__lead{animation:none}
}
/* ---------------------------------------------------------------- sections */
.sec{position:relative;padding:clamp(110px,15vh,180px) var(--gutter)}
.sec--tight{padding-top:clamp(70px,10vh,120px);padding-bottom:clamp(70px,10vh,120px)}
.sec--flush{padding-top:0}
.light{background:var(--paper);color:var(--paper-ink)}
.dark{background:var(--bg);color:var(--ink)}
.head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,90px);align-items:end;max-width:var(--max);margin:0 auto}
.head .big{max-width:15ch}
.head__side{display:grid;gap:20px;justify-items:start;padding-bottom:10px}
.head--stack{grid-template-columns:1fr}
@media (max-width:860px){.head{grid-template-columns:1fr}}

/* statement: said once, big */
.statement{padding:clamp(120px,18vh,220px) var(--gutter) clamp(90px,13vh,160px)}
.statement .big{max-width:17ch}
.statement--studio .big{max-width:20ch}
/* the three specialties, each a way in: a row of three on a wide screen, stacked on a phone */
.specialties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(16px,2vw,28px);max-width:820px;margin:clamp(52px,8vh,88px) auto 0}
.specialty{display:grid;align-content:space-between;gap:16px;height:100%;padding:22px 0 6px;border-top:1px solid var(--line-2);transition:border-color .4s}
.specialty__name{font-size:clamp(21px,1.9vw,28px);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--ink);text-wrap:balance}
.specialty__go{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--dim);transition:color .3s}
.specialty:hover{border-top-color:var(--ink)}
.specialty:hover .specialty__go{color:var(--ink)}
/* on paper the specialties are set in ink */
.paper .specialty{border-top-color:var(--paper-line)}
.paper .specialty__name{color:var(--paper-ink)}
.paper .specialty__go{color:var(--paper-dim)}
.paper .specialty:hover{border-top-color:var(--paper-ink)}
.paper .specialty:hover .specialty__go{color:var(--paper-ink)}
.statement--studio .about{display:block;max-width:44ch;margin-top:clamp(52px,8vh,88px);text-align:center}
@media (max-width:760px){.specialties{grid-template-columns:1fr}.specialty{padding:18px 0 20px}}
.about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,120px);max-width:1080px;margin:clamp(64px,10vh,120px) auto 0}
.about p.reveal,.reveal-p{font-size:clamp(19px,1.6vw,24px);line-height:1.45;font-weight:500;letter-spacing:-.015em}
.reveal .w{color:var(--mute);transition:color .5s}
.reveal .w.on{color:var(--ink)}
.reveal .lead{color:var(--ink)}
.light .reveal .w,.paper .reveal .w{color:#B3B0A9}
.light .reveal .w.on,.paper .reveal .w.on{color:var(--paper-ink)}
.about__side{display:grid;gap:22px;align-content:start;padding-top:6px}
.about__side .btn{justify-self:start}
.facts{max-width:46ch;border-top:1px solid var(--line)}
.facts li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.light .facts,.paper .facts,.light .facts li,.paper .facts li{border-color:var(--paper-line);color:var(--paper-ink)}
.jump{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:15px;font-weight:500}
.jump a{color:var(--dim);transition:color .3s}
.jump a:hover{color:var(--ink)}
@media (max-width:860px){.about{grid-template-columns:1fr}}

/* a large paragraph that reads like a statement */
.say{max-width:30ch;margin:0 auto;text-align:center;font-size:clamp(26px,2.8vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.22}
.say + .jump{justify-content:center;margin-top:clamp(36px,5vh,56px)}
.sub{max-width:var(--max);margin:clamp(130px,17vh,220px) auto 0}

/* services: one row per service, the picture and the words side by side */
.svc-rows{max-width:var(--max);margin:clamp(40px,6vh,72px) auto 0}
.svc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center;padding:clamp(56px,8vh,96px) 0;border-top:1px solid var(--line)}
.svc-row[id]{scroll-margin-top:110px}
.svc-row:nth-child(even) .svc-row__media{order:2}
.svc-row__media{position:relative;display:block;width:100%;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:#121212;color:var(--ink);cursor:pointer}
.svc-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);transition:transform 1.4s var(--ease)}
.svc-row__media:hover img{transform:scale(1.03)}
.svc-row__media--site{aspect-ratio:auto;background:none;overflow:visible;border-radius:0}
.svc-row__media--site img{position:static;height:auto;transition:none}
.svc-row__media--site:hover img{transform:none}
.svc-row__media--site .phone img{height:auto}
.svc-row h2{font-size:clamp(34px,3.6vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1}
.svc-row__lead{margin-top:16px;max-width:30ch;font-size:clamp(19px,1.5vw,23px);line-height:1.35;font-weight:500;letter-spacing:-.015em}
.svc-row__body > p:not(.svc-row__lead){margin-top:14px;max-width:46ch;color:var(--dim);font-size:16.5px;line-height:1.6}
.svc-row .facts{margin-top:24px}
.svc-row .go{margin-top:24px}
@media (max-width:900px){.svc-row{grid-template-columns:1fr;gap:28px}.svc-row:nth-child(even) .svc-row__media{order:0}}

/* ---------------------------------------------------------------- the film frame that opens to the full screen */
.feature{position:relative;height:200vh}
.feature__stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.feature__frame{position:relative;width:100%;height:100%;overflow:hidden;clip-path:inset(var(--iy,14%) var(--ix,14%) round var(--r,28px));will-change:clip-path;background:#0d0d0d}
.feature__frame img,.feature__frame iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.feature__frame iframe{width:max(100%,177.78vh);height:max(100%,56.25vw);left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s;pointer-events:none}
.feature__frame iframe.on{opacity:1}
.feature__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 40%);pointer-events:none}
.feature__cap{position:absolute;left:calc(var(--ix,14%) + 28px);right:calc(var(--ix,14%) + 28px);bottom:calc(var(--iy,14%) + 26px);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.feature__cap b{display:block;font-size:clamp(20px,1.8vw,28px);font-weight:500;letter-spacing:-.025em}
.feature__cap i{font-style:normal;font-size:14px;color:rgba(243,241,236,.75)}
@media (max-width:760px){.feature{height:160vh}.feature__cap{flex-direction:column;align-items:flex-start;left:calc(var(--ix,5%) + 18px);right:calc(var(--ix,5%) + 18px)}}

/* ---------------------------------------------------------------- tiles: the work, big */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:var(--max);margin:clamp(48px,7vh,80px) auto 0}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{position:relative;display:block;width:100%;aspect-ratio:1.22;border-radius:var(--r);overflow:hidden;background:#121212;isolation:isolate;color:var(--ink);text-align:left;cursor:pointer}
.tile--wide{aspect-ratio:16/9}
.tile--tall{aspect-ratio:9/16}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);transition:transform 1.4s var(--ease)}
.tile:hover img{transform:scale(1.035)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0) 40%);pointer-events:none}
.tile__tag{position:absolute;top:18px;right:20px;z-index:2;font-size:13px;font-weight:500;color:rgba(243,241,236,.88);text-shadow:0 1px 10px rgba(0,0,0,.5)}
.tile__cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.tile__cap b{display:block;font-size:clamp(19px,1.6vw,25px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.tile__cap i{font-style:normal;font-size:14px;color:rgba(243,241,236,.74)}
.tile__play{position:absolute;right:18px;bottom:18px;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(243,241,236,.94);color:#0A0A0A;transition:transform .45s var(--ease)}
.tile__play svg{width:15px;height:15px;margin-left:2px}
.tile:hover .tile__play{transform:scale(1.08)}
.tile--tall .tile__cap{right:16px;left:16px;bottom:16px}
.tile--tall .tile__play{top:14px;right:14px;bottom:auto;width:40px;height:40px}
.note{max-width:var(--max);margin:22px auto 0;font-size:15px;color:var(--dim)}
.note a{color:var(--ink)}
@media (max-width:1000px){.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tiles,.tiles--3{grid-template-columns:1fr}.tile{border-radius:18px}.tiles--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* ---------------------------------------------------------------- paper: a light panel that slides over the dark */
.paper{position:relative;z-index:2;background:var(--paper);color:var(--paper-ink);border-radius:34px 34px 0 0;margin-top:-34px;padding:clamp(110px,15vh,180px) var(--gutter) clamp(120px,16vh,200px)}
.paper + .dark,.paper + .sec:not(.paper):not(.light),.sec--rise{position:relative;z-index:3;border-radius:34px 34px 0 0;margin-top:-34px;background:var(--bg)}
/* a page that ends on a light panel: the footer rises over it the same way */
main:has(> .paper:last-child) + .foot{z-index:3;border-radius:34px 34px 0 0;margin-top:-34px;border-top:0}
.paper .tile{color:var(--ink)}

/* staggered service cards */
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);max-width:1080px;margin:clamp(56px,8vh,96px) auto 0}
.svcs > :nth-child(even){transform:translateY(clamp(40px,8vw,120px))}
.svcs--flat > :nth-child(even){transform:none}
/* what we do (home): the four services as a large-type list between hairlines, and one photograph beside it that
   changes to whichever service is under the pointer. On phones each service carries its own photograph */
.wwd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,96px);align-items:start;max-width:var(--max);margin:clamp(48px,7vh,80px) auto 0}
.wwd__list{border-top:1px solid var(--paper-line)}
.wwd__list li{border-bottom:1px solid var(--paper-line)}
.wwd__row{display:grid;gap:10px;padding:clamp(26px,3.6vh,40px) 0;color:var(--paper-ink);transition:opacity .45s var(--ease)}
.wwd__row h3{font-size:clamp(34px,3.6vw,58px);font-weight:500;letter-spacing:-.045em;line-height:1;transition:transform .55s var(--ease)}
.wwd__row p{max-width:44ch;font-size:16px;line-height:1.55;color:var(--paper-body)}
.wwd__thumb{display:none}
.wwd__list:hover .wwd__row:not(:hover),.wwd__list:focus-within .wwd__row:not(:focus-visible){opacity:.32}
@media (hover:hover){.wwd__row:hover h3{transform:translateX(10px)}}
.wwd__row:focus-visible{outline:2px solid var(--paper-ink);outline-offset:4px;border-radius:4px}
.wwd__pics{position:sticky;top:100px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:#141414}
.wwd__pic{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease)}
.wwd__pic.is-on{opacity:1}
.wwd__pic img,.wwd__thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
/* the websites picture is the site itself, a browser card on dark */
.wwd__pic--web{display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 40%,#2B2B2B,#111)}
.wwd__pic--web img{width:84%;height:auto;aspect-ratio:1.6;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -24px rgba(0,0,0,.85);object-position:50% 0%}
@media (max-width:900px){
  .wwd{grid-template-columns:minmax(0,1fr)}
  .wwd__pics{display:none}
  .wwd__thumb{display:block;aspect-ratio:3/2;margin-bottom:14px;overflow:hidden;border-radius:var(--r-sm);background:#141414}
  .wwd__thumb--web{display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 40%,#2B2B2B,#111)}
  .wwd__thumb.wwd__thumb--web img{width:80%;height:auto;aspect-ratio:1.6;border-radius:8px;object-position:50% 0%;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -20px rgba(0,0,0,.85)}
  .wwd__list:hover .wwd__row:not(:hover){opacity:1}
}
/* the staggered cards drop by up to 120px; when they end a section, keep that room below them */
.svcs:not(.svcs--flat):last-child{margin-bottom:clamp(40px,8vw,120px)}
.svc{display:grid;align-content:start;background:var(--paper-2);border-radius:var(--r);padding:12px 12px 26px;box-shadow:0 1px 0 rgba(18,18,18,.04),0 24px 50px -38px rgba(18,18,18,.35);color:var(--paper-ink)}
.svc__img{aspect-ratio:1.5;border-radius:var(--r-sm);overflow:hidden;background:#DDDAD3}
.svc__img img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.svc h3{margin:22px 14px 0;font-size:clamp(22px,1.9vw,28px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.svc hr{border:0;border-top:1px solid var(--paper-line);margin:16px 14px 14px}
.svc p{margin:0 14px;font-size:15.5px;line-height:1.55;color:var(--paper-dim)}
.svc p b{display:block;margin-top:10px;color:var(--paper-ink);font-weight:500}
.svc .go{margin:20px 14px 0;justify-self:start}
.dark .svc,.sec:not(.light):not(.paper) .svc{background:#111;color:var(--ink);box-shadow:inset 0 0 0 1px var(--card-line)}
.dark .svc p,.sec:not(.light):not(.paper) .svc p{color:var(--dim)}
.dark .svc p b,.sec:not(.light):not(.paper) .svc p b{color:var(--ink)}
.dark .svc hr,.sec:not(.light):not(.paper) .svc hr{border-color:var(--line)}
@media (max-width:860px){.svcs{grid-template-columns:1fr}.svcs > :nth-child(even){transform:none}.svcs:not(.svcs--flat):last-child{margin-bottom:0}}
/* four smaller tiles in a row (services, Add to your shoot) */
.svcs.svcs--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:var(--max)}
.svcs--four .svc{padding:10px 10px 22px}
.svcs--four .svc h3{margin:18px 10px 0;font-size:clamp(19px,1.45vw,22px)}
.svcs--four .svc hr{margin:14px 10px 12px}
.svcs--four .svc p{margin:0 10px;font-size:14.5px}
@media (max-width:1000px){.svcs.svcs--four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svcs.svcs--four{grid-template-columns:minmax(0,1fr)}}

/* ---------------------------------------------------------------- ruled rows: one idea per line */
.rows{max-width:var(--max);margin:clamp(48px,7vh,80px) auto 0;border-top:1px solid var(--line-2)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(16px,4vw,80px);padding:clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--line)}
.row h3{font-size:clamp(24px,2.4vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.row p{color:var(--dim);font-size:16.5px;line-height:1.6;max-width:62ch}
.row p + p{margin-top:12px}
.row ul{margin-top:18px;display:grid;gap:9px}
.row ul li{position:relative;padding-left:18px;font-size:15px;color:var(--ink)}
.row ul li::before{content:"";position:absolute;left:0;top:.7em;width:7px;height:1px;background:var(--accent)}
.light .rows,.paper .rows{border-color:rgba(18,18,18,.3)}
.light .row,.paper .row{border-color:var(--paper-line)}
.light .row p,.paper .row p{color:var(--paper-body)}
.light .row ul li,.paper .row ul li{color:var(--paper-ink)}
.light .row ul li::before,.paper .row ul li::before{background:var(--accent-deep)}
@media (max-width:860px){.row{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- questions: rounded cards in two columns */
.faqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;max-width:var(--max);margin:clamp(44px,6vh,72px) auto 0}
.faq{border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);transition:background .3s}
.faq[open]{background:rgba(255,255,255,.055)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-size:clamp(16.5px,1.25vw,18.5px);font-weight:500;letter-spacing:-.015em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq__chev{position:relative;flex:none;width:14px;height:14px}
.faq__chev::before,.faq__chev::after{content:"";position:absolute;left:0;top:50%;width:14px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.faq__chev::after{transform:rotate(90deg)}
.faq[open] .faq__chev::after{transform:rotate(0)}
.faq p{padding:0 22px 22px;color:var(--dim);font-size:15.5px;line-height:1.6;max-width:62ch}
.faq p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.faq summary:focus-visible{outline-offset:-2px;border-radius:var(--r-sm)}
.light .faq,.paper .faq{background:var(--paper-2);box-shadow:none}
.light .faq p,.paper .faq p{color:var(--paper-body)}
.light .faq p a,.paper .faq p a{color:var(--paper-ink)}
@media (max-width:860px){.faqs{grid-template-columns:1fr}}
/* what agents say. Desktop: centred like a magazine cover, one agent's strongest line large in the serif, their name
   and site beneath and the full testimonial behind "Read more"; the six names run in a row underneath, the current one
   underlined in rose as it fills, then the next agent takes over (paused on hover, focus or while Read more is open).
   The quotes share one cell, so nothing moves as they change. Phones: the names in a row above, the full testimonial shown */
.tqx{display:grid;grid-template-areas:"head" "panel" "names";justify-items:center;max-width:var(--max);margin:0 auto;text-align:center}
.tqx__side{display:contents}
.tqx h2{grid-area:head}
.tqx__panels{grid-area:panel;display:grid;width:100%;margin-top:clamp(24px,4vh,40px)}
.tqx__panel{grid-area:1/1;align-self:center;margin:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.tqx__panel.is-on{opacity:1;visibility:visible;transition:opacity .8s var(--ease) .1s,visibility 0s}
.tqx__panel::before{content:"\201C";display:block;height:.5em;font-family:var(--serif);font-size:clamp(90px,8vw,130px);line-height:1;color:var(--accent)}
.tqx__pull{max-width:30ch;margin:clamp(14px,2vh,22px) auto 0;font-family:var(--serif);font-size:clamp(32px,3.5vw,56px);line-height:1.14;color:var(--ink);text-wrap:balance}
.tqx__by{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 22px;margin-top:clamp(22px,3vh,32px);font-size:15px}
.tqx__who b{font-weight:500}
.tqx__who{color:var(--dim)}
.tqx__who b{color:var(--ink);margin-right:6px}
.tqx__more{font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:5px;transition:text-decoration-color .3s}
.tqx__more:hover{text-decoration-color:currentColor}
.tqx__full{display:none;max-width:62ch;margin:clamp(24px,3.4vh,34px) auto 0;text-align:left;animation:tqIn .5s var(--ease)}
.tqx.is-open .tqx__panel.is-on .tqx__full{display:block}
.tqx__full p{font-family:var(--serif);font-size:clamp(17px,1.3vw,20px);line-height:1.62;color:#B9B7B1}
.tqx__full p + p{margin-top:.75em}
.tqx__full em{font-style:italic}
.tqx__names{grid-area:names;display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(24px,2.6vw,40px);margin-top:clamp(40px,6vh,64px)}
.tqx__names button{position:relative;padding:10px 0;font-size:15px;color:var(--mute);transition:color .3s}
.tqx__names b{font-weight:500}
.tqx__names span{display:none}
.tqx__names button::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--line-2);opacity:0;transition:opacity .3s}
.tqx__names button::after{content:"";position:absolute;left:0;bottom:2px;width:0;height:1.5px;background:var(--accent)}
.tqx__names button:hover{color:var(--dim)}
.tqx__names button[aria-selected="true"]{color:var(--ink)}
.tqx__names button[aria-selected="true"]::before{opacity:1}
.tqx__names button.is-on::after{animation:tqfill var(--tqdur,8s) linear forwards}
.tqx.is-paused .tqx__names button.is-on::after{animation-play-state:paused}
.tqx__names button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@keyframes tqfill{to{width:100%}}
@keyframes tqIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.tqx__panel,.tqx__panel.is-on{transition:none}.tqx__full{animation:none}.tqx__names button.is-on::after{animation:none;width:100%}}
@media (max-width:860px){
  .tqx{grid-template-areas:"head" "names" "panel";justify-items:stretch;text-align:left}
  .tqx__names{justify-content:flex-start;flex-wrap:nowrap;gap:26px;margin-top:22px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
  .tqx__names::-webkit-scrollbar{display:none}
  .tqx__names button{flex:none;padding:12px 0;white-space:nowrap}
  .tqx__names button::before,.tqx__names button::after{display:none}
  .tqx__names button[aria-selected="true"]{box-shadow:inset 0 -2px 0 var(--accent)}
  .tqx__panels{display:block;margin-top:clamp(24px,4vh,36px);touch-action:pan-y}
  .tqx__panel{opacity:1;visibility:visible;transition:none;animation:tqIn .5s var(--ease)}
  .tqx__panel:not(.is-on){display:none}
  .tqx__pull{max-width:none;margin-left:0;font-size:clamp(26px,7vw,34px)}
  .tqx__full{display:block;margin-left:0}
  .tqx__by{justify-content:flex-start}
  .tqx__more{display:none}
}
/* a single line from a client at a key moment (contact, pricing): the serif under a rose quotation mark */
.pull{margin:0}
.pull::before{content:"\201C";display:block;height:.5em;font-family:var(--serif);font-size:72px;line-height:1;color:var(--accent)}
.pull blockquote p{margin-top:10px;font-family:var(--serif);font-size:clamp(24px,2.2vw,34px);line-height:1.22;color:var(--ink);text-wrap:balance}
.pull figcaption{display:grid;gap:3px;margin-top:16px;font-size:14.5px}
.pull figcaption a{font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;transition:text-decoration-color .3s}
.pull figcaption a:hover{text-decoration-color:currentColor}
.pull figcaption span{color:var(--dim)}
.pull--wide{max-width:var(--max);margin:clamp(64px,10vh,120px) auto 0;padding-top:clamp(36px,5vh,56px);border-top:1px solid var(--line);text-align:center}
.pull--wide blockquote p{max-width:30ch;margin-left:auto;margin-right:auto;font-size:clamp(28px,3vw,46px)}
.pull--wide figcaption{justify-items:center}
@media print{.pull{display:none}}
/* straight after another dark section the two paddings would double up */
.sec + .tqs{padding-top:clamp(24px,5vh,56px)}
/* the testimonials rise over pricing as a charcoal panel, one step up from the black, with the sections' curve */
.sec + .tqs.tqs--panel{padding-top:clamp(100px,14vh,160px)}
.tqs--panel{z-index:4;background:linear-gradient(to bottom,#161616,#101010);border-radius:34px 34px 0 0;margin-top:-34px;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -60px 120px -50px rgba(0,0,0,.95);padding-bottom:clamp(110px,15vh,170px)}
.tqs--panel + .sec--rose{margin-top:-34px;z-index:5}
@media (max-width:760px){.sec + .tqs.tqs--panel{padding-top:clamp(64px,9vh,84px)}.tqs--panel{padding-bottom:clamp(80px,11vh,110px)}}
/* a rose band (home page questions): deep rose rising to the blush accent, the cards set darker so the text stays clear */
.sec--rose{position:relative;z-index:2;border-radius:var(--r-lg);background:radial-gradient(85% 115% at 100% 0%,rgba(255,176,198,.85) 0%,rgba(255,155,180,0) 62%),radial-gradient(70% 90% at 0% 100%,rgba(120,20,60,.32) 0%,rgba(120,20,60,0) 70%),linear-gradient(150deg,#F27AA0 0%,#E05587 45%,#C23A6C 100%);color:#fff}
.sec--rose .faq{background:rgba(70,6,32,.26);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.sec--rose .faq[open]{background:rgba(70,6,32,.36)}
.sec--rose .faq p{color:rgba(255,255,255,.92)}
.sec--rose ::selection{background:#fff;color:#C23A6C}
.sec--rose h2{text-shadow:0 1px 24px rgba(120,20,60,.25)}

/* ---------------------------------------------------------------- photography galleries: nothing cropped, every row one height */
.gal-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;max-width:none;padding:clamp(64px,9vh,110px) var(--gutter) clamp(20px,3vh,30px);margin:0}
.gal-head h2,.gal-head span:first-child{font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.035em}
.gal-head span:last-child{font-size:15px;color:var(--dim)}
.ph-label{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;padding:clamp(64px,9vh,110px) var(--gutter) clamp(20px,3vh,30px);scroll-margin-top:100px}
.ph-label span:first-child{font-size:clamp(26px,2.6vw,40px);font-weight:500;letter-spacing:-.035em}
.ph-label span:last-child{font-size:15px;font-weight:400;color:var(--dim)}
.ph-gal{padding:0 var(--gutter)}
.ph-row{display:flex;align-items:flex-start;gap:clamp(8px,.9vw,14px);margin-bottom:clamp(8px,.9vw,14px)}
.ph-row > figure{flex:var(--ar) 1 0;min-width:0;margin:0;overflow:hidden;border-radius:var(--r-sm);background:#121212;cursor:zoom-in}
.ph-row > figure img{display:block;width:100%;height:auto;transition:transform 1.4s var(--ease)}
.ph-row > figure:hover img{transform:scale(1.025)}
@media (max-width:760px){.ph-label span:last-child{width:100%}.ph-row{flex-wrap:wrap}.ph-row > figure{flex:1 1 100%;border-radius:12px}}

/* ---------------------------------------------------------------- price teaser cards (home, services) */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:1080px;margin:clamp(56px,8vh,90px) auto 0}
.price{background:var(--card);border-radius:var(--r);padding:clamp(24px,2.4vw,34px);box-shadow:inset 0 0 0 1px var(--card-line)}
.price__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.price__name{font-size:19px;font-weight:500;letter-spacing:-.02em}
.price__flag{font-size:13px;font-weight:500;color:var(--accent)}
.price__amt{margin-top:34px;display:flex;align-items:baseline;gap:10px;font-size:clamp(56px,6vw,88px);font-weight:500;letter-spacing:-.05em;line-height:1}
.price__amt small{font-size:16px;letter-spacing:0;color:var(--dim);font-weight:400}
.price ul{margin-top:30px;border-top:1px solid var(--line)}
.price li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:#CFCDC7}
.more{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:44px}
.glowband{position:relative;overflow:hidden;isolation:isolate}
.glowband::before{content:"";position:absolute;left:-10%;right:-10%;top:-34%;height:76%;z-index:-1;background:url(../img/ad/glow.jpg) 50% 60%/cover;filter:blur(40px) saturate(1.25);opacity:.8;-webkit-mask-image:radial-gradient(ellipse 50% 55% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 50% 55% at 50% 0%,#000,transparent 72%);pointer-events:none}
@media (max-width:760px){.prices{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- a door to the other studio */
.door{position:relative;display:block;max-width:var(--max);margin:0 auto;aspect-ratio:2.2;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:#fff}
.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.door:hover img{transform:scale(1.03)}
.door::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(8,8,10,.72),rgba(8,8,10,.15) 60%)}
.door__copy{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,52px);z-index:2;display:grid;gap:16px;max-width:44ch}
.door__copy .big{font-size:clamp(34px,4.4vw,68px)}
.door__copy p{color:rgba(255,255,255,.82)}
.door__copy .btn{justify-self:start}
@media (max-width:760px){.door{aspect-ratio:4/5}.door::after{background:linear-gradient(to top,rgba(8,8,10,.8),rgba(8,8,10,.1) 70%)}}

/* ---------------------------------------------------------------- contact band */
.cta{padding:clamp(120px,16vh,200px) var(--gutter);text-align:center}
.cta .big{max-width:14ch}
.cta p{max-width:46ch;margin:26px auto 0;color:var(--dim);font-size:clamp(17px,1.3vw,19px)}
.cta .btn{margin-top:34px}
.cta__lines{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 34px;margin-top:40px;font-size:clamp(17px,1.4vw,21px);font-weight:500;letter-spacing:-.01em}
.cta__lines a{transition:color .3s}
.cta__lines a:hover{color:var(--accent)}
.light.cta p,.paper.cta p{color:var(--paper-body)}
/* the scene: the photograph rises out of the page's black and sinks back into it, a shade sits behind the words so they
   read, and the picture drifts a little slower than the page (data-drift, set in ad.js) */
.cta--scene{position:relative;isolation:isolate;overflow:hidden;padding-top:clamp(240px,30vh,330px);padding-bottom:clamp(140px,18vh,210px)}
.cta--scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 44% 36% at 50% 64%,rgba(6,6,6,.66),rgba(6,6,6,0)),linear-gradient(to bottom,var(--bg),rgba(6,6,6,.12) 24%,rgba(6,6,6,.18) 66%,var(--bg))}
.cta__bg{position:absolute;left:0;right:0;top:-8%;bottom:-8%;z-index:-2;translate:0 calc(var(--drift,0) * 6%)}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 30%)}
.cta--scene p{color:rgba(243,241,236,.8)}
@media (prefers-reduced-motion:reduce){.cta__bg{translate:none}}

/* ---------------------------------------------------------------- footer: the name, lit from below */
.foot{position:relative;overflow:hidden;padding:clamp(80px,12vh,140px) var(--gutter) clamp(56px,8vh,90px);background:var(--bg);color:var(--ink);border-top:1px solid var(--line)}
.foot__row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;max-width:var(--max);margin:0 auto}
.foot__contact{display:grid;align-content:start;justify-items:start;gap:6px;font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.02em}
.foot__contact a{transition:opacity .3s}
.foot__contact a:hover{opacity:.7}
.foot__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;font-size:15px}
.foot__nav h2{font-size:13px;font-weight:500;color:var(--dim);margin-bottom:12px}
.foot__nav ul{display:grid;gap:6px}
.foot__nav a{color:#D9D7D1;transition:color .3s}
.foot__nav a:hover{color:var(--ink)}
.foot__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;max-width:var(--max);margin:clamp(48px,8vh,80px) auto 0;font-size:12.5px;color:#7A7872}
.foot__legal a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:3px}
/* the footer's writing sits above its mark. The mark's proportions are the logo's: bars 8 wide, gaps 5, 44 tall, the middle 28 */
.foot__row,.foot__legal{position:relative;z-index:1}
/* the mark, oversized in the bottom-right corner: it runs off the right edge (the third bar half gone) and sinks below
   the footer's foot, as if falling out of the frame. Its bars catch a little light at the top, like brushed metal, and
   rise one after another as the page ends (ad.js sets --b1 --b2 --b3) */
.foot__mark{--mh:clamp(300px,33vw,480px);position:absolute;right:calc(var(--mh) * -.1);bottom:calc(var(--mh) * -.22);z-index:0;display:flex;align-items:flex-end;gap:calc(var(--mh) * 5 / 44);height:var(--mh);pointer-events:none}
.foot__mark i{display:block;flex:none;width:calc(var(--mh) * 8 / 44);height:var(--mh);border-radius:calc(var(--mh) * 4 / 44);background:linear-gradient(to bottom,rgba(243,241,236,.11),rgba(243,241,236,.025) 72%);translate:0 calc((1 - var(--b,1)) * 70%)}
.foot__mark i:nth-child(1){--b:var(--b1,1)}
.foot__mark i:nth-child(2){height:calc(var(--mh) * 28 / 44);--b:var(--b2,1)}
.foot__mark i:nth-child(3){--b:var(--b3,1)}
@media (max-width:760px){.foot__row{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- arrivals */
.settle{filter:blur(14px);transform:scale(1.04);transition:filter 1.2s var(--ease),transform 1.6s var(--ease)}
.settle.in{filter:none;transform:none}
html:not(.js) .settle{filter:none;transform:none}

/* ---------------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--gutter);background:rgba(6,6,6,.94);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lb.open{opacity:1;visibility:visible}
.lb__frame{width:min(1200px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
.lb__frame.tall{width:auto;height:min(86vh,900px);aspect-ratio:9/16}
.lb__frame.img{aspect-ratio:auto;width:auto;max-width:100%;max-height:88vh;background:transparent;box-shadow:none;display:grid;place-items:center}
.lb__frame.img img{max-height:88vh;max-width:min(1400px,100%);border-radius:6px}
.lb__frame iframe{width:100%;height:100%;border:0}
.lb__close{position:absolute;top:18px;right:var(--gutter);width:44px;height:44px;border-radius:11px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.08)}
.lb__close svg{width:20px;height:20px}
.lb__nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:11px;display:none;place-items:center;color:#fff;background:rgba(255,255,255,.08);transition:background .25s}
.lb__nav:hover{background:rgba(255,255,255,.16)}
.lb__nav svg{width:20px;height:20px}
.lb__nav--prev{left:var(--gutter)}
.lb__nav--next{right:var(--gutter)}
.lb.has-set .lb__nav{display:grid}
.lb.has-set .lb__frame.img img{max-width:min(1400px,calc(100vw - 2 * var(--gutter) - 120px))}
@media (max-width:760px){
  .lb__nav{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));margin-top:0}
  .lb__nav--prev{left:calc(50% - 54px)}
  .lb__nav--next{right:calc(50% - 54px)}
  .lb.has-set .lb__frame.img img{max-width:100%;max-height:calc(88vh - 90px)}
}
.lb__title{position:absolute;left:var(--gutter);top:30px;color:#fff;font-size:14px;font-weight:500}

/* ---------------------------------------------------------------- property websites */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:var(--max);margin:0 auto}
.path{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:clamp(28px,3vw,44px);border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
.path__for{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--accent)}
.path__mark{width:24px;height:24px;flex:none}
.path__mark--pc{width:auto;height:20px;fill:var(--ink)}
.path__title{margin-top:22px;font-size:clamp(30px,3vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1.02}
.path__text{margin-top:16px;max-width:44ch;color:var(--dim);font-size:16.5px;line-height:1.6}
.path__stat{margin-top:auto;padding-top:36px;display:grid;gap:8px}
.path__stat b{font-size:clamp(34px,3vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1}
.path__stat span{color:var(--dim);font-size:15px}
.path .go{margin-top:26px}
/* three paths side by side, numbered to match the chapters below */
.paths--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.paths--three .path__title{font-size:clamp(26px,2.3vw,38px)}
.paths--three .path__stat b{font-size:clamp(30px,2.6vw,42px)}
/* each chapter opens with its number and name */
.tier{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.paper .tier{color:var(--paper-dim)}
.tend__intro .tier{margin-bottom:26px}
/* a chapter that rises over the black as a charcoal panel */
.sec--raised{z-index:2;background:#121212;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.08),0 -60px 120px -50px rgba(0,0,0,.95)}
.example{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);align-items:center;max-width:var(--max);margin:0 auto}
.listing-meta{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:22px;font-size:14px;color:var(--dim)}
.listing-meta b{color:var(--ink);font-weight:500}
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.spec span{display:block;font-size:13px;color:var(--dim)}
.spec b{display:block;margin-top:6px;font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.03em}
.spec small{font-size:13px;color:var(--dim);font-weight:400;margin-left:4px}
.includes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;max-width:var(--max);margin:22px auto 0;border-top:1px solid var(--line)}
.includes li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.includes--groups li{display:grid;gap:4px;padding:18px 0}
.includes--groups b{font-weight:500}
.includes--groups span{font-size:15px;line-height:1.5;color:var(--dim)}
.devices{position:relative;margin:0;padding:0 8% 9% 0}
.browser{position:relative;border-radius:12px;overflow:hidden;background:#19191B;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -50px rgba(0,0,0,.8)}
.browser__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#262628}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:#48484D;flex:none}
.browser__bar span{flex:0 1 auto;min-width:0;margin-left:10px;padding:3px 12px;border-radius:6px;background:#19191B;font-size:11px;color:#A2A2A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:absolute;right:0;bottom:0;width:22%;padding:2.6%;border-radius:17%/7.9%;background:#111113;box-shadow:0 34px 60px -26px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06) inset}
.phone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:14%/6.5%}
/* the campaign site: one property's own site, shown screen by screen, each with what it does */
.campaign{max-width:var(--max);margin:0 auto}
/* a few more screens, side by side and without captions: the range shows without a tour of every part */
.cmosaic{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(14px,1.6vw,24px);margin-top:clamp(56px,8vh,96px)}
.cmosaic > :first-child{grid-row:1 / span 2;align-self:center}
.phone.phone--solo{position:relative;right:auto;bottom:auto;width:100%}
.cmobile{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(28px,4.5vw,80px);align-items:center;margin-top:clamp(100px,15vh,170px)}
.cmobile__copy .small{max-width:36ch;margin-top:16px}
.cphones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.cphones .phone:nth-child(even){transform:translateY(clamp(24px,4vw,56px))}
.campaign__ask{margin-top:clamp(36px,5vh,56px)}
@media (max-width:860px){
  .cmobile,.cmosaic{grid-template-columns:1fr}
  .cmosaic > :first-child{grid-row:auto}
  .cphones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:58%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(-1 * var(--gutter))}
  .cphones .phone{scroll-snap-align:start}
  .cphones .phone:nth-child(even){transform:none}
}
.browser__bar .project__flag{flex:none;margin-left:auto;padding:3px 9px;border-radius:4px;background:rgba(var(--accent-rgb),.16);color:var(--accent);font-size:11px;font-weight:600}
.tend__lockup{display:block;width:auto;height:clamp(34px,3vw,42px)}
.tend__intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,110px);align-items:center;max-width:var(--max);margin:0 auto}
.tend__intro .big{margin-top:clamp(24px,4vh,36px);max-width:17ch}
.tend__intro .lede{margin-top:22px}
.tend__intro .lede + .lede{margin-top:14px}
.tend__intro .actions{margin-top:32px}
.tend__block{max-width:var(--max);margin:clamp(96px,13vh,160px) auto 0}
.tend__block h3{margin-bottom:clamp(28px,4vh,44px);font-size:clamp(26px,2.4vw,38px);font-weight:500;letter-spacing:-.035em}
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4.5vw,72px)}
.project{margin:0}
.project figcaption{display:grid;gap:6px;margin-top:22px}
.project figcaption b{font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.025em}
.project figcaption span{color:var(--paper-dim);font-size:15.5px;line-height:1.55}
.paper .browser{box-shadow:0 50px 100px -50px rgba(30,30,32,.5),0 18px 40px -24px rgba(30,30,32,.28)}
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px)}
.tl li{padding-top:20px;border-top:2px solid var(--paper-ink)}
.tl li.tl__on{border-top-color:var(--accent-deep)}
.tl__when{display:block;font-size:14px;color:var(--paper-dim)}
.tl b{display:block;margin-top:8px;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em}
.tl p{margin-top:10px;color:var(--paper-body);font-size:15px;line-height:1.55}
.tend__more{margin-top:clamp(40px,6vh,64px);color:var(--paper-body)}
.tend__more a{color:var(--paper-ink);text-decoration:underline;text-decoration-color:rgba(18,18,18,.3);text-underline-offset:3px}
@media (max-width:900px){.paths,.paths--three,.example,.tend__intro,.projects{grid-template-columns:1fr}.tl{grid-template-columns:1fr 1fr;row-gap:36px}.includes{grid-template-columns:1fr 1fr}.spec{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tl{grid-template-columns:1fr}.browser__bar{height:22px;padding:0 9px;gap:5px}.browser__bar i{width:7px;height:7px}.browser__bar span{font-size:9px;padding:2px 8px;margin-left:6px}.browser{border-radius:9px}}

/* ---------------------------------------------------------------- video: the master and the reel */
.delivery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:var(--max);margin:clamp(48px,7vh,80px) auto 0}
.delivery figure{margin:0;padding:12px 12px 28px;border-radius:var(--r);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line)}
.delivery__media{position:relative;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;background:#111114;display:flex;align-items:center;justify-content:center}
.delivery__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.delivery__media--phone{background:radial-gradient(60% 80% at 50% 50%,#1d1d22,#0d0d10)}
.delivery__media .ph{position:relative;z-index:2;flex:none;height:84%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:3px solid #232327;box-shadow:0 30px 60px -24px rgba(0,0,0,.9);background:#000}
.delivery__media .ph img{width:100%;height:100%;object-fit:cover}
.delivery__media .ph--side{height:68%;z-index:1;border-radius:16px;filter:brightness(.72)}
.delivery__media .ph--l{transform:translateX(22%)}
.delivery__media .ph--r{transform:translateX(-22%)}
.delivery__ratio{position:absolute;right:14px;top:12px;z-index:3;font-size:12px;font-weight:500;color:#fff;background:rgba(8,8,10,.55);padding:5px 8px;border-radius:6px}
.delivery figcaption{padding:0 14px}
.delivery .label{display:block;margin-top:22px;color:var(--accent)}
.delivery h3{margin-top:8px;font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.03em}
.delivery p{margin-top:10px;color:var(--dim);font-size:15.5px;line-height:1.6}
@media (max-width:760px){.delivery{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the design studio (light) */
.dn-intro{padding:clamp(110px,15vh,180px) var(--gutter) clamp(40px,6vh,72px)}
.dn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start;max-width:var(--max);margin:0 auto}
.dn-grid .big{max-width:12ch}
.dn-copy p{max-width:44ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--paper-body)}
.dn-copy p + p{margin-top:16px}
.dn-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);max-width:var(--max);margin:clamp(56px,8vh,96px) auto 0}
.dn-facts li{padding-top:20px;border-top:2px solid var(--paper-ink)}
.dn-facts b{display:block;font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em}
.dn-facts span{display:block;margin-top:10px;max-width:34ch;font-size:16px;line-height:1.55;color:var(--paper-body)}
.dn-chapter{padding:0 var(--gutter)}
.dn-head{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px 48px;padding:clamp(88px,12vh,150px) 0 clamp(28px,4vh,48px)}
.dn-head--in{padding-top:0}
.dn-title{font-size:clamp(42px,5.4vw,88px);font-weight:500;letter-spacing:-.05em;line-height:.95}
.dn-title--sm{font-size:clamp(30px,3.2vw,50px);letter-spacing:-.04em;line-height:1}
.dn-note{max-width:38ch;font-size:16px;line-height:1.55;color:var(--paper-dim);text-wrap:balance}
.dn-plates{max-width:var(--max);margin:0 auto}
.dn-row{display:flex;gap:clamp(8px,.9vw,12px);margin:0 0 clamp(8px,.9vw,12px)}
.dn-row > figure{flex:var(--ar) 1 0;min-width:0;margin:0;overflow:hidden;border-radius:10px;background:var(--paper-3);cursor:zoom-in}
.dn-row > figure img{display:block;width:100%;height:auto}
.dn-break{margin:clamp(64px,9vh,120px) 0 0;cursor:zoom-in;overflow:hidden}
.dn-break img{display:block;width:100%;height:auto}
.dn-film{margin-top:clamp(64px,9vh,120px);padding:clamp(110px,15vh,170px) var(--gutter);border-radius:34px 34px 0 0;color:var(--ink)}
.dn-film .dn-note{color:var(--dim)}
.dn-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:var(--max);margin:0 auto}
.dn-film__card .tile{aspect-ratio:16/9}
.dn-film__card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity 1.2s}
.dn-film__card iframe.on{opacity:1}
.dn-film__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;padding:0 4px}
.dn-film__meta b{font-size:clamp(19px,1.6vw,24px);font-weight:500;letter-spacing:-.025em}
.dn-film__meta span{font-size:14px;color:var(--dim)}
.dn-clients{padding:clamp(100px,14vh,160px) var(--gutter) clamp(70px,10vh,120px)}
.dn-clients ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,2.4vw,40px);max-width:var(--max);margin:0 auto;border-top:1px solid var(--paper-line)}
.dn-clients li{padding:14px 0;border-bottom:1px solid var(--paper-line);font-size:clamp(16px,1.3vw,19px);font-weight:500;letter-spacing:-.01em}
.dn-about{padding:clamp(100px,14vh,160px) var(--gutter);background:var(--paper-3)}
.dn-about__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,110px);align-items:center;max-width:var(--max);margin:0 auto}
.dn-about__copy p{margin-top:22px;max-width:42ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--paper-body)}
.dn-about__pics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dn-about__pic{position:relative;margin:0;overflow:hidden;border-radius:12px;background:#D6D2CA}
.dn-about__pic--sq{aspect-ratio:1/1}
.dn-about__pic--wide{aspect-ratio:3/2}
.dn-about__pic img{width:100%;height:100%;object-fit:cover}
.dn-about__pic::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(to top,rgba(8,8,10,.66),rgba(8,8,10,0));pointer-events:none}
.dn-about__pic figcaption{position:absolute;left:12px;bottom:10px;z-index:1;color:#fff;font-size:13px;font-weight:500;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.dn-about + .cta.dark{position:relative;z-index:3;border-radius:34px 34px 0 0;margin-top:-34px}
@media (max-width:900px){.dn-grid,.dn-about__grid{grid-template-columns:1fr}.dn-facts{grid-template-columns:1fr}.dn-films{grid-template-columns:1fr}.dn-clients ul{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.dn-row{flex-direction:column}.dn-row > figure{flex:none;width:100%}}
@media (max-width:560px){.dn-clients ul{grid-template-columns:1fr}}

/* ================================================================ Design & Architecture: a different site
   Light and quiet: a neutral white wall, Urbanist throughout, small type, near-square corners, no slide-over
   panels and no dark bands. The photographs carry it; the hero is the work, with no headline. */
html[data-site="design"]{--max:1680px;--ds-bg:#F2F1EE;--ds-wall:#E8E7E3;--ds-ink:#141414;--ds-body:#4A4946;--ds-dim:#7B7A75;--ds-mute:#6B6A65;--ds-line:rgba(20,20,20,.12)}
html[data-site="design"],html[data-site="design"] body{background:var(--ds-bg);color:var(--ds-ink)}
html[data-site="design"] body{font-family:"Urbanist",var(--sans)}
html[data-site="design"] ::selection{background:var(--ds-ink);color:#fff}
/* header, menu and footer, in the light */
html[data-site="design"] .hdr,html[data-site="design"] .hdr.is-light{color:var(--ds-ink)}
html[data-site="design"] .hdr::before{background:linear-gradient(to bottom,rgba(242,241,238,.96),rgba(242,241,238,.72) 55%,rgba(242,241,238,0))}
/* the design side has square corners throughout, including the shared lightbox and skip link */
html[data-site="design"] .lb__frame,html[data-site="design"] .lb__frame img,html[data-site="design"] .lb__close,html[data-site="design"] .lb__nav,html[data-site="design"] .skip-link,html[data-site="design"] .ds .faq summary:focus-visible,html[data-site="design"] :focus-visible,html[data-site="design"] .lines i{border-radius:0}
html[data-site="design"] .capsule{border-radius:0;background:rgba(255,255,255,.7);color:var(--ds-ink);box-shadow:inset 0 0 0 1px rgba(20,20,20,.08)}
html[data-site="design"] .capsule button{border-radius:0}
html[data-site="design"] .capsule button:hover{background:rgba(20,20,20,.06)}
html[data-site="design"] .hdr__cta,html[data-site="design"] .hdr.is-light .hdr__cta{border-radius:0;background:var(--ds-ink);color:#fff}
html[data-site="design"] .hdr__cta:hover{background:#000}
html[data-site="design"] .menu{background:rgba(242,241,238,.98);color:var(--ds-ink)}
html[data-site="design"] .menu__top > span,html[data-site="design"] .menu__contact span{color:var(--ds-dim)}
html[data-site="design"] .menu__close{border-radius:0;background:rgba(20,20,20,.06)}
html[data-site="design"] .menu__list a{color:var(--ds-ink);font-weight:300;letter-spacing:-.02em}
html[data-site="design"] .menu__list a:hover{color:var(--ds-ink)}
html[data-site="design"] .menu__studios{border-radius:0;background:rgba(20,20,20,.05)}
html[data-site="design"] .menu__studios a{border-radius:0;color:var(--ds-dim)}
html[data-site="design"] .menu__studios a[aria-current]{background:var(--ds-ink);color:#fff}
html[data-site="design"] .menu__contact a:hover{color:var(--ds-dim)}
html[data-site="design"] .foot{background:#1A1A18;border-top-color:rgba(255,255,255,.08)}
html[data-site="design"] .foot__contact{font-weight:300;letter-spacing:-.01em}

/* the bar: the logo, the sections and the menu along the top, clear over the hero (white on the photograph) and
   frosted once the page moves onto the light. The section you are in is underlined */
.dbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);height:72px;padding:0 var(--gutter);color:#fff;transition:color .35s}
.dbar::before,.dbar::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .45s}
.dbar::before{bottom:-36px;background:linear-gradient(to bottom,rgba(12,12,12,.36),rgba(12,12,12,0))}
.dbar::after{background:rgba(242,241,238,.86);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 1px 0 var(--ds-line);opacity:0}
.dbar.is-light{color:var(--ds-ink)}
.dbar.is-light::before{opacity:0}
.dbar.is-light::after{opacity:var(--fade,0)}
.dbar__logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.dbar__logo svg{flex:none;width:14px;height:18px;fill:currentColor}
.dbar__logo span{font-size:12.5px;font-weight:500;letter-spacing:.17em}
.dbar__logo span i{font-style:normal;font-weight:300;opacity:.72}
.dbar__logo em{margin-left:6px;padding-left:16px;border-left:1px solid color-mix(in srgb,currentColor 32%,transparent);font-style:normal;font-size:14px;opacity:.78}
.dbar__nav{display:flex;gap:clamp(18px,2.2vw,36px);margin-left:auto}
.dbar__nav a{position:relative;padding:6px 0;font-size:14.5px;white-space:nowrap;opacity:.74;transition:opacity .25s}
.dbar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.dbar__nav a:hover,.dbar__nav a[aria-current]{opacity:1}
.dbar__nav a:hover::after,.dbar__nav a[aria-current]::after{transform:scaleX(1)}
.dbar__here{display:none}
/* the way back to the real estate studio, set apart from the sections by a hairline */
.dbar__switch{display:inline-flex;align-items:center;gap:7px;padding-left:clamp(16px,2vw,30px);border-left:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:14.5px;font-weight:500;white-space:nowrap}
.dbar__menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-9px;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.dbar__menu:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
@media (max-width:1180px){.dbar__logo em{display:none}}
/* below a small laptop the sections no longer fit beside the logo, so the menu takes their place */
@media (max-width:900px){
  .dbar{height:60px}
  .dbar__nav{display:none}
  .dbar__here{display:block;margin-left:auto;font-size:14px;opacity:.75;white-space:nowrap}
  .dbar__menu{display:flex}
}
/* on a phone the bar keeps the logo, the way back and the menu: the section name gives way and the logo tightens */
@media (max-width:600px){
  .dbar{gap:12px}
  .dbar__logo{gap:11px}
  .dbar__logo svg{width:16px;height:21px}
  .dbar__logo span{font-size:14px;letter-spacing:.13em}
  .dbar__here{display:none}
  .dbar__switch{margin-left:auto;padding-left:0;border-left:0;gap:5px;font-size:13.5px}
}
@media (max-width:380px){.dbar__logo span i{display:none}}

/* the side menu: everything the old column held (the sections, every project, the way back to real estate and the
   contact lines) slides in from the right over a soft wash of the page */
html[data-site="design"] .menu.menu--side{display:block;padding:0;overflow:hidden;background:rgba(18,18,18,.28);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.side{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;width:min(430px,100vw);padding:16px clamp(24px,2.8vw,40px) max(28px,env(safe-area-inset-bottom));overflow-y:auto;background:var(--ds-bg);color:var(--ds-ink);box-shadow:-40px 0 90px -50px rgba(20,20,20,.5);transform:translateX(100%);transition:transform .7s var(--ease)}
.menu--side.open .side{transform:none}
.side__top{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.side__logo{display:inline-flex;align-items:center;gap:10px;color:var(--ds-ink)}
.side__logo svg{flex:none;width:14px;height:18px;fill:currentColor}
.side__logo span{font-size:12.5px;font-weight:500;letter-spacing:.17em;white-space:nowrap}
.side__logo i{font-style:normal;font-weight:300;opacity:.7}
.side__close{display:grid;place-items:center;width:42px;height:42px;background:rgba(20,20,20,.06);color:var(--ds-ink);transition:background .25s}
.side__close:hover{background:rgba(20,20,20,.11)}
.side__close svg{width:15px;height:15px}
.side__studio{margin-top:6px;font-size:14px;color:var(--ds-dim)}
.side__nav{display:grid;justify-items:start;margin-top:clamp(28px,6vh,64px)}
.side__nav a{position:relative;padding:clamp(5px,.9vh,8px) 0;font-size:clamp(19px,2.5vh,22px);font-weight:300;letter-spacing:-.015em;color:var(--ds-mute);transition:color .25s,transform .5s var(--ease)}
.side__nav a:hover{color:var(--ds-ink);transform:translateX(4px)}
.side__nav a[aria-current]{color:var(--ds-ink)}
.side__nav a[aria-current]::before{content:"";position:absolute;left:-18px;top:50%;width:10px;height:1px;background:var(--ds-ink)}
.side__nav .side__sub{padding:4px 0 4px 18px;font-size:14.5px;font-weight:400;letter-spacing:0}
.side__nav .side__sub[aria-current]::before{left:0;width:10px}
.side__foot{display:grid;justify-items:start;gap:6px;margin-top:auto;padding-top:36px;font-size:14px;color:var(--ds-dim)}
.side__foot a{transition:color .25s}
.side__foot a:hover{color:var(--ds-ink)}
.side__switch{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:14px;border-bottom:1px solid var(--ds-line);font-size:15px;font-weight:500;color:var(--ds-ink)}
.side__switch:has(+ .side__switch){margin-bottom:8px;padding-bottom:0;border-bottom:0}

/* the hero: the work, one photograph after another, edge to edge and the full height of the screen, with a single
   line and the progress bars over its foot */
.ds-hero{position:relative}
.ds-hero__frame{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ds-wall)}
.ds-hero__frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(10,10,12,.32) 0%,rgba(10,10,12,0) 22%),linear-gradient(to bottom,rgba(10,10,12,.3),rgba(10,10,12,0) 22%)}
.ds-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease)}
.ds-slide.is-on{opacity:1}
.ds-slide img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.ds-hero__foot{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:flex-end;align-items:flex-end;gap:24px;padding:0 var(--gutter) clamp(28px,5vh,56px);color:#fff;pointer-events:none}
/* the design home opens on the photographs alone; the statement follows just below the fold, on white */
.ds-lead{padding-bottom:clamp(24px,4vh,48px)}
.ds-lead + .ds-band{padding-top:clamp(48px,8vh,96px)}
.ds-lead__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(28px,5vw,96px);align-items:end}
.ds-lead__h{max-width:20ch;font-size:clamp(40px,4.6vw,76px);font-weight:300;letter-spacing:-.035em;line-height:1.04;color:var(--ds-ink);text-wrap:balance}
.ds-lead__h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.ds-lead__lede{max-width:34ch;padding-bottom:.5em;font-size:clamp(16px,1.2vw,18.5px);line-height:1.6;color:var(--ds-body)}
@media (max-width:900px){.ds-lead__in{grid-template-columns:minmax(0,1fr);gap:18px}.ds-lead__h{font-size:clamp(34px,8.6vw,48px)}}
.ds-cap{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;line-height:1.4}
.ds-cap__k{color:var(--ds-dim)}
.ds-bars{display:flex;gap:5px;width:min(300px,34vw);flex:none}
.ds-bars i{position:relative;flex:1;height:1.5px;background:rgba(255,255,255,.34);overflow:hidden}
.ds-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.ds-bars i.is-done::after{transform:scaleX(1)}
.ds-bars i.is-on::after{animation:dsbar 5.5s linear forwards}
@keyframes dsbar{to{transform:scaleX(1)}}
.ds-hero.is-held .ds-bars i.is-on::after{animation-play-state:paused}
/* stepping by hand: over the photograph the pointer becomes a round arrow, pointing back on the left half and on
   on the right; a click (or a tap) steps that way, and a swipe works on a phone. The two buttons stay for the
   keyboard and only show when focused */
.ds-hero__frame{cursor:pointer;-webkit-user-select:none;user-select:none}
.ds-slide img{pointer-events:none;-webkit-user-drag:none}
.ds-hero__frame.has-cursor{cursor:none}
.ds-cursor{position:fixed;left:0;top:0;z-index:45;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;color:#fff;filter:drop-shadow(0 1px 8px rgba(0,0,0,.45));pointer-events:none;opacity:0;scale:.6;transition:opacity .25s,scale .35s var(--ease);will-change:transform}
.ds-cursor.is-on{opacity:1;scale:1}
.ds-cursor svg{width:42px;height:42px;transition:rotate .35s var(--ease)}
.ds-cursor.is-prev svg{rotate:180deg}
.ds-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:48px;height:48px;margin-top:-24px;background:#fff;color:var(--ds-ink);opacity:0;pointer-events:none}
.ds-arrow--prev{left:clamp(14px,1.6vw,24px)}
.ds-arrow--next{right:clamp(14px,1.6vw,24px)}
.ds-arrow svg{width:18px;height:18px}
.ds-arrow:focus-visible{opacity:1;pointer-events:auto}

/* type: small, light, one tone */
.ds-h{font-weight:300;font-size:clamp(30px,3.2vw,48px);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.ds-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,110px)}
.ds-copy p{max-width:46ch;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
.ds-copy p + p{margin-top:16px}
.ds-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,40px);margin-top:clamp(48px,7vh,80px)}
.ds-facts li{padding-top:16px;border-top:1px solid var(--ds-line)}
.ds-facts b{display:block;font-size:15.5px;font-weight:500}
.ds-facts span{display:block;margin-top:8px;max-width:34ch;font-size:15px;line-height:1.55;color:var(--ds-body)}
.ds-chapter{max-width:var(--max);margin:clamp(110px,16vh,180px) auto 0;padding:0 var(--gutter)}
.ds-label{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 40px;margin-bottom:clamp(22px,3vh,34px)}
.ds-label h2{font-size:clamp(40px,5vw,76px);font-weight:300;letter-spacing:-.035em;line-height:1}
.ds-label p{max-width:56ch;font-size:14.5px;line-height:1.5;color:var(--ds-dim)}
/* the plates: square corners, tight and even */
.ds .dn-plates{max-width:none}
.ds .dn-row{gap:10px;margin:0 0 10px}
.ds .dn-row > figure{border-radius:0;background:var(--ds-wall)}
.ds .dn-row > figure img{transition:transform 1.4s var(--ease),filter 1.2s var(--ease)}
@media (hover:hover){.ds .dn-row > figure:hover img{transform:scale(1.025)}}
.ds .dn-break{margin:clamp(110px,16vh,180px) 0 0}
/* films */
.ds-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ds .tile{border-radius:0;color:#fff}
.ds .dn-film__meta{padding:0}
.ds .dn-film__meta b{font-size:16px;font-weight:500;letter-spacing:0}
.ds .dn-film__meta span{color:var(--ds-dim)}
/* clients */
/* the clients read as one line of names, like the tags in Services */
.ds-clients ul{display:flex;flex-wrap:wrap;row-gap:6px;max-width:92ch;padding-top:16px;border-top:1px solid var(--ds-line)}
.ds-clients li{font-size:16px;line-height:1.6;color:var(--ds-body)}
.ds-clients li:not(:last-child)::after{content:"/";margin:0 12px;color:rgba(20,20,20,.22)}
/* the projects index: a card for each, with what was made for it */
/* bands break the page into its parts, all of them light: projects on bright white, the films on a warmer wall */
.ds-band{margin-top:clamp(110px,16vh,180px);padding:clamp(80px,12vh,140px) var(--gutter)}
.ds-band + .ds-band,.feature--ds + .ds-band,.ds-band + .feature--ds{margin-top:0}
.ds-band__in{max-width:var(--max);margin:0 auto}
.ds-band--white{background:#FCFBF9}
.ds-band--wall{background:#E4E2DC}
.ds-band + .ds-chapter{margin-top:clamp(100px,14vh,160px)}
/* the projects begin where the hero ends */
.ds-hero + .ds-band{margin-top:0}
@media (max-width:760px){.ds-band{padding-top:clamp(56px,8vh,80px);padding-bottom:clamp(56px,8vh,80px)}.ds-chapter{margin-top:clamp(80px,12vh,110px)}}
.ds-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,6vh,64px) 14px}
.ds-cards > :first-child{grid-column:1 / -1}
.ds-cards > :first-child .ds-card__img{aspect-ratio:2.2}
.ds-cards > :first-child .ds-card__name{font-size:clamp(28px,3vw,46px)}
/* an even number of projects sits in pairs, so no card is left alone on a row; an odd number leads with the first wide */
.ds-cards:has(> :last-child:nth-child(even)) > :first-child{grid-column:auto}
.ds-cards:has(> :last-child:nth-child(even)) > :first-child .ds-card__img{aspect-ratio:3/2}
.ds-cards:has(> :last-child:nth-child(even)) > :first-child .ds-card__name{font-size:clamp(24px,2.3vw,36px)}
.ds-card{display:grid;justify-items:start;gap:4px}
.ds-card__img{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;margin-bottom:14px;background:var(--ds-wall)}
.ds-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ds-card:hover .ds-card__img img{transform:scale(1.03)}
.ds-card__name{font-size:clamp(24px,2.3vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.08}
.ds-card__credits{font-size:15px;color:var(--ds-body)}
.ds-card__services{font-size:14px;color:var(--ds-dim)}
.ds-card__go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding-bottom:3px;border-bottom:1px solid currentColor;font-size:14.5px;font-weight:500}

/* a project's own page */
.ds-proj{padding-top:72px}
.ds-back{display:inline-flex;align-items:center;gap:6px;margin:clamp(18px,3.4vh,32px) var(--gutter) 0;font-size:14px;color:var(--ds-dim);transition:color .25s}
.ds-back:hover{color:var(--ds-ink)}
.ds-back svg{width:14px;height:14px}
.ds-proj__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px clamp(32px,6vw,110px);align-items:end;max-width:var(--max);margin:clamp(40px,7vh,80px) auto 0;padding:0 var(--gutter)}
.ds-proj__name{grid-column:1;font-weight:300;font-size:clamp(44px,6.2vw,108px);letter-spacing:-.035em;line-height:.98}
.ds-proj__services{grid-column:1;font-size:15px;color:var(--ds-dim)}
.ds-proj__meta{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;align-self:end}
.ds-proj__meta dt{font-size:13px;color:var(--ds-dim)}
.ds-proj__meta dd{margin:3px 0 0;font-size:15.5px}
.ds-proj__block{max-width:var(--max);margin:clamp(56px,9vh,110px) auto 0;padding:0 var(--gutter)}
.ds-proj__h{margin-bottom:clamp(18px,3vh,30px);font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:-.01em}
.ds-film{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#111;color:#fff;cursor:pointer}
.ds-film img,.ds-film iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.ds-film iframe{opacity:0;transition:opacity 1.2s;pointer-events:none}
.ds-film iframe.on{opacity:1}
.ds-film::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 40%);pointer-events:none}
.ds-film__play{position:absolute;left:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,26px);z-index:2;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;background:#fff;color:var(--ds-ink);font-size:15px;font-weight:500}
.ds-film__play svg{width:13px;height:13px}
.ds-film__play i{font-style:normal;color:var(--ds-dim)}
.ds-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:960px}
.ds-reel{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#111;cursor:pointer}
.ds-reel img,.ds-reel iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.ds-reel iframe{opacity:0;transition:opacity 1.2s;pointer-events:none}
.ds-reel iframe.on{opacity:1}
.ds-reel .tile__play{top:12px;right:12px;bottom:auto;width:38px;height:38px}
.ds-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end;gap:clamp(24px,4vw,60px);max-width:var(--max);margin:clamp(100px,15vh,170px) auto 0;padding:0 var(--gutter)}
.ds-next__copy{display:grid;gap:6px;align-self:start}
.ds-next__k{font-size:14px;color:var(--ds-dim)}
.ds-next__name{font-weight:300;font-size:clamp(32px,4.4vw,72px);letter-spacing:-.03em;line-height:1.02}
.ds-next__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ds-wall)}
.ds-next__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ds-next:hover .ds-next__img img{transform:scale(1.03)}
.ds-proj .ds-contact{margin-top:clamp(100px,15vh,170px)}
/* about: the studio, the facts, the clients and the two of us */
.ds-sub{margin-top:clamp(72px,10vh,120px)}
.ds-sub__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 30px;margin-bottom:18px}
.ds-sub__head h3{font-size:15.5px;font-weight:500}
.ds-sub__head p{font-size:14.5px;color:var(--ds-dim)}

/* projects: one block per project, its name and details over a run of photographs */
.ds-project + .ds-project{margin-top:clamp(90px,13vh,150px)}
.ds-project__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,6vw,110px);align-items:start;margin-bottom:clamp(26px,4vh,40px)}
.ds-project__name{grid-column:1;font-weight:300;font-size:clamp(30px,3.2vw,48px);letter-spacing:-.02em;line-height:1.1}
.ds-project__meta{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
.ds-project__meta dt{font-size:13px;color:var(--ds-dim)}
.ds-project__meta dd{margin:3px 0 0;font-size:15.5px}
.ds-project__note{grid-column:1;max-width:46ch;font-size:clamp(16px,1.15vw,17.5px);line-height:1.6;color:var(--ds-body)}
.ds-about__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,110px);align-items:start}
.ds-about__copy{max-width:42ch;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
.ds-about__copy + .ds-about__copy{margin-top:16px}
.ds .dn-about__pic{border-radius:0;background:var(--ds-wall)}
/* services: three photographs, one for each of the people we work for, with a line each; then one quiet line of
   what and where */
.ds-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.ds-plate{margin:0}
.ds-plate__img{aspect-ratio:4/5;overflow:hidden;background:var(--ds-wall)}
.ds-plate__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ds-plate:hover .ds-plate__img img{transform:scale(1.03)}
.ds-plate figcaption{margin-top:16px}
.ds-plate h3{font-size:clamp(20px,1.6vw,24px);font-weight:400;letter-spacing:-.01em}
.ds-plate p{max-width:30ch;margin-top:6px;font-size:15.5px;line-height:1.55;color:var(--ds-dim)}
.ds-label--centre{text-align:center}
.ds-label--centre p{margin-left:auto;margin-right:auto}
.ds-line--centre{margin-left:auto;margin-right:auto;text-align:center;max-width:62ch}
.ds-line{max-width:60ch;margin-top:clamp(28px,4vh,44px);font-size:15.5px;line-height:1.6;color:var(--ds-dim)}
.ds-line a{color:var(--ds-ink);text-decoration:underline;text-decoration-color:rgba(20,20,20,.25);text-underline-offset:3px;white-space:nowrap}
.ds-line a:hover{text-decoration-color:currentColor}
/* about: the statement, one line, a strip of the two of us, one paragraph, the clients */
.ds-h--lg{font-size:clamp(36px,4.4vw,70px);letter-spacing:-.03em;line-height:1.02}
.ds-strip{margin-top:clamp(36px,6vh,64px)}
.ds-strip .dn-row{margin:0}
@media (max-width:900px){.ds-plates{grid-template-columns:1fr}.ds-plate__img{aspect-ratio:3/2}}
/* cost sharing: set on the centre line, step by step: the packages across the width, the count, what each pays,
   and the row of every count */
/* cost sharing: the set on a scale of four stops, the companies sharing it ticked by name, and one bar split evenly
   between them. Centred, ink on the warm wall, no boxes */
.ds-split{max-width:900px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.ds-split fieldset{min-width:0;margin:0;padding:0;border:0}
.ds-split__q{display:block;width:100%;margin-bottom:24px;font-size:clamp(17px,1.3vw,20px);font-weight:400;color:var(--ds-ink)}
.ds-split .ds-split__who{margin-top:clamp(52px,7vh,76px)}
.ds-split__scale{--fill:50%;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:620px;margin:0 auto}
.ds-split__scale::before,.ds-split__scale::after{content:"";position:absolute;left:12.5%;top:9px;height:1px}
.ds-split__scale::before{right:12.5%;background:rgba(20,20,20,.18)}
.ds-split__scale::after{width:var(--fill);background:var(--ds-ink);transition:width .55s var(--ease)}
.ds-split__scale label{position:relative;z-index:1;display:grid;justify-items:center;gap:14px;cursor:pointer}
.ds-split__scale input{position:absolute;inset:0;z-index:1;margin:0;opacity:0;cursor:pointer}
.ds-split__dot{width:19px;height:19px;border-radius:50%;background:#E4E2DC;box-shadow:inset 0 0 0 1px rgba(20,20,20,.32);transition:background .35s,box-shadow .35s}
.ds-split__n{font-size:clamp(32px,3vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--ds-dim);transition:color .35s}
.ds-split__scale label:hover .ds-split__n{color:var(--ds-body)}
.ds-split__scale label:has(input:checked) .ds-split__dot{background:var(--ds-ink);box-shadow:0 0 0 6px rgba(20,20,20,.07)}
.ds-split__scale label:has(input:checked) .ds-split__n{color:var(--ds-ink)}
.ds-split__scale label:has(input:focus-visible) .ds-split__dot{outline:2px solid var(--ds-ink);outline-offset:4px}
.ds-split__pick{margin-top:20px;font-size:15.5px;color:var(--ds-body)}
.ds-split__roles{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;max-width:900px;margin:0 auto}
.ds-split__roles label{position:relative;display:inline-flex;align-items:center;cursor:pointer;font-size:clamp(16px,1.25vw,18px);color:var(--ds-dim);transition:color .25s}
.ds-split__roles input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ds-split__roles span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:10px;vertical-align:-1px;box-shadow:inset 0 0 0 1px rgba(20,20,20,.36);transition:background .25s,box-shadow .25s}
.ds-split__roles label:hover{color:var(--ds-body)}
.ds-split__roles label.is-off{opacity:.4;cursor:not-allowed}
.ds-split__roles label.is-off input{cursor:not-allowed}
.ds-split__roles label:has(input:checked){color:var(--ds-ink)}
.ds-split__roles label:has(input:checked) span::before{background:var(--ds-ink);box-shadow:none}
.ds-split__roles label:has(input:focus-visible){outline:2px solid var(--ds-ink);outline-offset:4px}
.ds-split__out{margin-top:clamp(52px,7vh,76px);padding-top:clamp(30px,4vh,42px);border-top:1px solid var(--ds-line)}
.ds-split__each{display:flex;justify-content:center;align-items:baseline;gap:10px}
.ds-split__each b{font-size:clamp(30px,2.6vw,40px);font-weight:300;letter-spacing:-.02em;line-height:1}
.ds-split__each span{font-size:15.5px;color:var(--ds-dim)}
.ds-split__save{margin-top:12px;font-size:clamp(16px,1.25vw,18px);color:var(--ds-body)}
.ds-split__save b{font-weight:500;color:var(--accent-deep)}
.ds-split__bar{display:flex;gap:5px;margin-top:clamp(28px,4vh,38px)}
.ds-split__bar li{flex:1 1 0;min-width:0;display:grid;align-content:start;gap:8px;justify-items:center;text-align:center;transition:flex-grow .55s var(--ease),opacity .4s}
.ds-split__bar li::before{content:"";justify-self:stretch;height:6px;background:rgba(20,20,20,.78)}
.ds-split__bar li span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:var(--ds-dim)}
.ds-split__bar li b{font-size:16px;font-weight:400}
.ds-split__bar li.is-in{flex-grow:0;opacity:0}
.ds-split__note{max-width:56ch;margin:clamp(24px,3.4vh,32px) auto 0;font-size:15px;line-height:1.6;color:var(--ds-dim)}
@media (max-width:760px){.ds-split__bar{flex-wrap:wrap;row-gap:18px}.ds-split__bar li{flex-basis:30%}.ds-split__roles{gap:12px 22px}}
@media (prefers-reduced-motion:reduce){.ds-split__bar li,.ds-split__scale::after{transition:none}}
.ds-share .ds-line{margin-top:clamp(32px,5vh,52px)}
/* questions, on the light wall */
.ds .faq{border-radius:0;background:#FCFBF9;box-shadow:inset 0 0 0 1px var(--ds-line)}
.ds .faq[open]{background:#fff}
.ds .faq summary{font-weight:500;color:var(--ds-ink)}
.ds .faq p{color:var(--ds-body)}
/* a project's story, under its name */
.ds-proj__story{grid-column:1;max-width:58ch;margin-top:18px;font-size:clamp(16.5px,1.2vw,18px);line-height:1.65;color:var(--ds-body)}
@media (max-width:900px){.ds-who,.ds-tags{grid-template-columns:1fr}.ds .faqs{grid-template-columns:1fr}}
/* the statement above the photographs, then the facts, the latest project, about beside a photograph, and a dark close */
.ds-facts2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);max-width:var(--max);margin:clamp(44px,7vh,80px) auto 0;padding:0 var(--gutter)}
.ds-facts2 li{padding-left:clamp(14px,1.4vw,22px);border-left:1px solid var(--ds-line)}
.ds-facts2 b{display:block;font-size:clamp(30px,3vw,48px);font-weight:300;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.ds-facts2 span{display:block;margin-top:8px;font-size:14.5px;line-height:1.4;color:var(--ds-dim)}
.ds-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(48px,7vh,80px)}
.ds-feature__img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ds-wall)}
.ds-feature__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.ds-feature:hover .ds-feature__img img{transform:scale(1.03)}
.ds-feature__body{display:grid;gap:10px;justify-items:start;padding-bottom:clamp(8px,2vh,24px)}
.ds-feature__k{font-size:14px;color:var(--ds-dim)}
.ds-feature__name{font-size:clamp(34px,3.8vw,60px);font-weight:300;letter-spacing:-.03em;line-height:1.02}
.ds-feature__credits{font-size:15.5px;color:var(--ds-body)}
.ds-feature__text{max-width:40ch;margin-top:6px;font-size:16px;line-height:1.6;color:var(--ds-body)}
.ds-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-cards--3 > :first-child{grid-column:auto}
.ds-cards--3 > :first-child .ds-card__img{aspect-ratio:3/2}
.ds-cards--3 > :first-child .ds-card__name{font-size:clamp(24px,2.3vw,36px)}
.ds-band--dark{background:#1A1A18;color:#fff}
.ds-band--dark.ds-band--contact{margin-top:0;padding:clamp(90px,14vh,160px) var(--gutter)}
.ds-band--dark .ds-h{color:#fff;font-size:clamp(44px,6vw,96px)}
.ds-band--dark .ds-contact p{color:rgba(255,255,255,.72)}
.ds-band--dark .ds-btn{background:#fff;color:var(--ds-ink)}
.ds-band--dark .ds-contact__actions a:not(.ds-btn){color:#fff;text-decoration-color:rgba(255,255,255,.35)}
.ds-band--dark + .foot{border-top:0}
@media (max-width:900px){.ds-feature,.ds-about__split{grid-template-columns:1fr}.ds-cards--3{grid-template-columns:1fr}.ds-facts2{grid-template-columns:1fr 1fr}}
/* motion: the heading, then the film in a frame that opens as the page scrolls, square-cornered and stopping at the
   page's gutters, all on the warm wall; the documentary follows at full width */
.ds-motion{padding-bottom:clamp(22px,3vh,34px);margin-bottom:0}
.ds-motion .ds-label{margin-bottom:0}
.ds-motion + .feature--ds{margin-top:0!important}
.feature--ds{margin:0}
.feature--ds{background:#E4E2DC}
.feature--ds .feature__frame{clip-path:inset(var(--iy,14%) var(--ix,14%));background:#E4E2DC}
.feature--ds .feature__frame::after{background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 40%)}
.feature--ds .feature__cap b{font-weight:400;letter-spacing:-.02em}
.feature--ds .feature__cap i{color:rgba(255,255,255,.8)}
.feature--ds .ds-btn{background:#fff;color:var(--ds-ink)}
.feature--ds .ds-btn svg{width:13px;height:13px;margin-left:4px}
.feature--ds + .ds-band{margin-top:0}
.ds-motion2{padding-top:clamp(28px,4vh,48px)}
.ds-film__cap{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:16px;font-size:15px;line-height:1.5}
.ds-film__cap b{font-weight:500}
.ds-film__cap span{color:var(--ds-dim)}
/* the design side's own pages: a shorter statement at the top, the first band straight under it */
.ds-band--first{margin-top:0}
/* the two kinds of film lead straight into the films, without a second band's worth of white between them */
.ds-kinds + .ds-band{padding-top:clamp(8px,2vh,24px)}
.ds-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(36px,5vh,56px)}
.ds-tiers{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,90px);align-items:start}
.ds-tiers__list{display:grid;gap:clamp(22px,3vh,36px)}
.ds-tiers__list h3{font-size:clamp(20px,1.6vw,24px);font-weight:400}
.ds-tiers__list p{max-width:48ch;margin-top:8px;font-size:16px;line-height:1.6;color:var(--ds-body)}
.ds-tiers .ds-line{grid-column:1 / -1}
@media (max-width:900px){.ds-tiers{grid-template-columns:1fr}}
/* the about page: the two of us beside the photographs, the clients beneath */
.ds-aboutpage__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,90px);align-items:start}
.ds-aboutpage__copy h2{font-size:15.5px;font-weight:500}
.ds-aboutpage__copy p:first-child{margin-top:0}
.ds-aboutpage__copy p{max-width:44ch;margin-top:14px;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
.ds-aboutpage .dn-about__pic::after{display:none}
.ds-aboutpage .ds-sub{margin-top:clamp(56px,8vh,90px)}
/* the projects index: a banner for each, the photograph the width of the page and the words in a row beneath */
.ds-banners{display:grid;gap:clamp(64px,9vh,120px)}
.ds-banner{display:block;color:inherit}
.ds-banner__img{display:block;aspect-ratio:2.1;overflow:hidden;background:var(--ds-wall)}
.ds-banner__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.ds-banner:hover .ds-banner__img img{transform:scale(1.025)}
.ds-banner__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(28px,5vw,90px);align-items:start;margin-top:clamp(18px,2.6vh,28px)}
.ds-banner__name{display:block;font-size:clamp(30px,3.4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.02}
.ds-banner__credits{display:block;margin-top:8px;font-size:15.5px;color:var(--ds-body)}
.ds-banner__text{display:grid;justify-items:start;gap:14px;max-width:48ch;padding-top:8px;font-size:16px;line-height:1.6;color:var(--ds-body)}
@media (max-width:900px){.ds-aboutpage__grid,.ds-banner__row{grid-template-columns:1fr}.ds-banner__img{aspect-ratio:3/2}}
/* the ask: one centred block on white, so it reads nothing like the footer beneath it */
.ds-band--ask{margin-top:0}
/* Projects index: a full-width grid, two across, the latest project wide when the count is odd */
.ds-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0;background:#FCFBF9}
.ds-tile{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:var(--ds-wall);color:#fff;isolation:isolate}
.ds-tile--wide{grid-column:1/-1;aspect-ratio:21/9}
.ds-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ds-tile::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(10,10,12,.5) 0%,rgba(10,10,12,.12) 34%,rgba(10,10,12,0) 52%)}
.ds-tile__text{position:absolute;left:clamp(20px,2.4vw,40px);right:clamp(20px,2.4vw,40px);bottom:clamp(18px,2.4vw,38px);display:grid;gap:8px;text-shadow:0 1px 24px rgba(0,0,0,.25)}
.ds-tile__name{font-size:clamp(26px,2.5vw,42px);font-weight:300;letter-spacing:-.03em;line-height:1}
.ds-tile--wide .ds-tile__name{font-size:clamp(32px,3.6vw,60px)}
.ds-tile__by{font-size:14.5px;opacity:.88}
.ds-tile:focus-visible{outline:2px solid var(--ds-ink);outline-offset:-6px}
@media (hover:hover){.ds-tile:hover img{transform:scale(1.03)}}
.ds-tiles + .ds-band--ask{margin-top:0}
@media (max-width:760px){.ds-tiles{grid-template-columns:1fr;gap:6px;padding:6px 0}.ds-tile,.ds-tile--wide{aspect-ratio:5/4}}

.ds-ask{max-width:1100px;margin:0 auto;text-align:center}
/* the heading breaks after "Have a project" on wider screens, so it sits as two even lines */
@media (max-width:760px){.ds-ask__br{display:none}}
.ds-ask .ds-h--lg{font-size:clamp(40px,5.4vw,84px)}
.ds-ask > p{max-width:46ch;margin:22px auto 0;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
.ds-ask__btn{margin-top:32px}
.ds-ask__lines{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-top:22px;font-size:15.5px}
.ds-ask__lines a{text-decoration:underline;text-decoration-color:rgba(20,20,20,.25);text-underline-offset:4px}
.ds-ask__lines a:hover{text-decoration-color:currentColor}
/* the portfolio: every photograph in one masonry, interiors and exteriors mixed */
.ds-masonry-wrap{max-width:var(--max);margin:0 auto;padding:calc(72px + clamp(16px,3vh,32px)) var(--gutter) 0}
.ds-masonry{columns:3;column-gap:clamp(8px,.9vw,12px)}
.ds-masonry figure{break-inside:avoid;margin:0 0 clamp(8px,.9vw,12px);overflow:hidden;background:var(--ds-wall);cursor:zoom-in}
.ds-masonry img{display:block;width:100%;height:auto;transition:transform 1.4s var(--ease)}
.ds-masonry figure:hover img{transform:scale(1.025)}
.ds-masonry-wrap + .ds-band--ask{margin-top:clamp(90px,13vh,150px)}
/* motion: the two kinds, then how a film is made */
.ds-kinds__intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,90px);align-items:start}
.ds-kinds__intro p{max-width:52ch;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
/* the two kinds of film, each with a still from its example; the still and the link drop down to that film */
.ds-kinds__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,56px);margin-top:clamp(36px,5vh,56px)}
.ds-kind__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ds-wall)}
.ds-kind__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
@media (hover:hover){.ds-kind:hover .ds-kind__img img{transform:scale(1.03)}}
.ds-kind__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-top:clamp(20px,2.6vh,28px);padding-bottom:16px;border-bottom:1px solid var(--ds-line)}
.ds-kind__head h3{font-size:clamp(26px,2.4vw,38px);font-weight:300;letter-spacing:-.025em;line-height:1.05}
.ds-kind__len{font-size:14.5px;color:var(--ds-dim);white-space:nowrap}
.ds-kind__text{max-width:46ch;margin-top:16px;font-size:16.5px;line-height:1.6;color:var(--ds-body)}
.ds-kind__go{margin-top:16px;color:var(--ds-ink);text-decoration-color:rgba(20,20,20,.28)}
@media (max-width:900px){.ds-kinds__list{row-gap:clamp(44px,7vh,64px)}}
/* films page: "A closer look" and "How we work" side by side on the warm wall */
.ds-how__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,120px);align-items:start}
.ds-how__cols h2{margin-bottom:clamp(18px,2.6vh,26px)}
.ds-how__cols p{max-width:48ch;font-size:clamp(16.5px,1.2vw,18px);line-height:1.68;color:var(--ds-body)}
.ds-how__cols p + p{margin-top:16px}
.ds-how__note{margin-top:22px!important;padding-top:16px;border-top:1px solid var(--ds-line);font-size:15px!important;color:var(--ds-dim)!important}
@media (max-width:900px){.ds-how__cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.ds-kinds__intro,.ds-kinds__list{grid-template-columns:1fr}.ds-masonry{columns:2}}
/* each design page opens on a photograph (or a silent film) with its title over it */
.ds-phero{position:relative;height:78vh;height:78svh;min-height:480px;overflow:hidden;isolation:isolate;background:#1A1A18;color:#fff}
.ds-phero--proj{height:86vh;height:86svh}
.ds-phero__img{position:absolute;inset:0;z-index:-1}
.ds-phero__img img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.ds-phero__img iframe{position:absolute;left:50%;top:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;opacity:0;transition:opacity 1.2s;pointer-events:none}
.ds-phero__img iframe.on{opacity:1}
.ds-phero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 0% 100%,rgba(10,10,12,.32),rgba(10,10,12,0)),linear-gradient(to top,rgba(10,10,12,.6) 0%,rgba(10,10,12,.18) 38%,rgba(10,10,12,0) 60%),linear-gradient(to bottom,rgba(10,10,12,.3),rgba(10,10,12,0) 24%)}
.ds-phero__text{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,5vh,56px)}
.ds-phero__h{max-width:16ch;font-size:clamp(44px,6vw,96px);font-weight:300;letter-spacing:-.035em;line-height:1;text-wrap:balance;text-shadow:0 1px 30px rgba(0,0,0,.22)}
.ds-phero__h--long{font-size:clamp(40px,5vw,84px);line-height:1.02}
.ds-phero__lede{max-width:46ch;margin-top:clamp(14px,2vh,22px);font-size:clamp(15.5px,1.15vw,18px);line-height:1.55;color:rgba(255,255,255,.88)}
/* a project's credits, in one row under its photograph */
.ds-proj.ds-proj--hero{padding-top:0}
.ds-credits{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px 40px;max-width:var(--max);margin:0 auto;padding:clamp(26px,4vh,44px) var(--gutter) 0}
.ds-credits__list{display:flex;flex-wrap:wrap;gap:16px clamp(28px,4vw,64px)}
.ds-credits__list dt{font-size:13px;color:var(--ds-dim)}
.ds-credits__list dd{margin:4px 0 0;font-size:15.5px}
.ds-credits__back{font-size:14.5px}
@media (max-width:760px){.ds-phero{height:72vh;height:72svh;min-height:440px}.ds-phero--proj{height:78vh;height:78svh}.ds-phero__h{font-size:clamp(38px,10.5vw,54px)}.ds-phero__h--long{font-size:clamp(36px,10vw,48px)}.ds-credits__list{display:grid;grid-template-columns:1fr 1fr}}
/* a door back to the real estate studio, the way the real estate pages lead here */
.ds-door{max-width:var(--max);margin:0 auto clamp(100px,14vh,160px);padding:0 var(--gutter)}
.ds-door__link{position:relative;display:block;aspect-ratio:2.4;overflow:hidden;background:var(--ds-wall);color:#fff;isolation:isolate}
.ds-door__link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.ds-door__link:hover img{transform:scale(1.03)}
.ds-door__link::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(10,10,12,.66),rgba(10,10,12,.1) 62%)}
.ds-door__copy{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(24px,4vw,52px);z-index:2;display:grid;gap:14px;max-width:42ch}
.ds-door__copy .ds-h{color:#fff;font-size:clamp(34px,4vw,60px)}
.ds-door__copy p{font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.55;color:rgba(255,255,255,.86)}
.ds-door .ds-btn--light{justify-self:start;margin-top:6px;background:#fff;color:var(--ds-ink)}
/* contact */
.ds-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,110px);align-items:end;max-width:var(--max);margin:clamp(120px,18vh,200px) auto 0;padding:0 var(--gutter) clamp(80px,12vh,130px)}
.ds-band--contact .ds-contact{margin:0 auto;padding:0}

.ds-contact .ds-h{font-size:clamp(34px,4vw,60px)}
.ds-contact p{max-width:44ch;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.65;color:var(--ds-body)}
.ds-contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:26px;font-size:15.5px}
.ds-contact__actions a:not(.ds-btn){text-decoration:underline;text-decoration-color:rgba(20,20,20,.25);text-underline-offset:4px}
.ds-contact__actions a:not(.ds-btn):hover{text-decoration-color:currentColor}
.ds-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;background:var(--ds-ink);color:#fff;font-weight:500}
@media (max-width:900px){.ds-cards > :first-child .ds-card__img{aspect-ratio:3/2}.ds-cards,.ds-proj__head,.ds-next{grid-template-columns:1fr}.ds-proj__meta{grid-column:1;grid-row:auto;margin-top:18px}.ds-reels{grid-template-columns:repeat(2,minmax(0,1fr))}.ds-project__head{grid-template-columns:1fr}.ds-project__meta{grid-column:1;grid-row:auto}.ds-intro,.ds-about__grid,.ds-contact{grid-template-columns:1fr}.ds-facts,.ds-films{grid-template-columns:1fr}}
@media (max-width:900px){.ds-proj{padding-top:60px}.ds-masonry-wrap{padding-top:calc(60px + 16px)}}
@media (max-width:760px){
  .ds-hero__frame{height:88vh;height:88svh;min-height:520px}
  .ds-bars{width:150px;gap:4px;margin-bottom:6px}
}
@media (max-width:760px){.ds-door__link{aspect-ratio:4/5}.ds-door__link::after{background:linear-gradient(to top,rgba(10,10,12,.74),rgba(10,10,12,.05) 70%)}}
/* on phones the clients stay in two columns, so the list reads as one block rather than a long column */
@media (max-width:560px){.ds-clients li{font-size:15px}.ds-clients li:not(:last-child)::after{margin:0 9px}}
@media (prefers-reduced-motion:reduce){.ds-bars{display:none}}

/* one reading line: on the design side every heading and its words start at the same left edge and run straight down;
   the photographs take the width. No copy floats off to the right of its heading */
.ds .ds-label{display:block}
.ds .ds-label p{margin-top:12px;max-width:52ch}
.ds .ds-intro{grid-template-columns:1fr;gap:22px}
.ds .faqs{grid-template-columns:1fr;max-width:820px;margin-left:0}
.ds .ds-contact{grid-template-columns:1fr;align-items:start;gap:20px}
.ds .ds-contact__actions{margin-top:22px}

/* ---------------------------------------------------------------- contact form */
.ct__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start;max-width:var(--max);margin:0 auto}
.ct__grid > *{min-width:0}
.form__req{margin:12px 0 28px;font-size:14px;color:var(--dim)}
.req{color:var(--accent)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.field{display:grid;gap:8px;min-width:0}
.field--full,.form fieldset,.form__foot,.error-summary,.form-status{grid-column:1/-1}
.field label,.ct__legend{font-size:15px;font-weight:500;color:#CFCDC7}
.ct__legend{padding:0;margin-bottom:12px}
.ct__group{border:0;padding:0;margin:0;min-width:0}
.input,.textarea{width:100%;border:0;border-radius:12px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:var(--ink);font:inherit;font-size:16px;padding:0 16px;caret-color:var(--accent);transition:box-shadow .25s,background .25s;-webkit-appearance:none;appearance:none}
.input{height:54px}
.textarea{min-height:160px;padding:14px 16px;resize:vertical;line-height:1.5}
.input:focus,.textarea:focus{outline:none;background:rgba(255,255,255,.065);box-shadow:inset 0 0 0 1.5px var(--ink)}
.checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.check{display:flex;align-items:center;gap:10px;min-height:50px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font-size:15px;line-height:1.25;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.check:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.check input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:16px;height:16px;margin:0;border:1.5px solid var(--dim);border-radius:4px}
.check input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #0A0A0A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check:has(input:checked){background:var(--ink);color:#0A0A0A;box-shadow:none}
.check:has(input:checked) input{border-color:#0A0A0A;background:var(--ink)}
.check:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.field__help{font-size:13.5px;color:var(--dim)}
.field__error{display:none;align-items:center;gap:8px;font-size:13.5px;color:#F08B74}
.field__error svg{width:16px;height:16px;flex:none}
.field[data-invalid="true"] .field__error{display:flex}
.field[data-invalid="true"] .input,.field[data-invalid="true"] .textarea{box-shadow:inset 0 0 0 1.5px #F08B74}
.ct__group[data-invalid="true"] .check{box-shadow:inset 0 0 0 1px #F08B74}
.error-summary{border-radius:12px;padding:18px 20px;background:rgba(240,139,116,.08);box-shadow:inset 0 0 0 1px rgba(240,139,116,.4)}
.error-summary ol{list-style:decimal;margin:8px 0 0;padding-left:18px;font-size:14px;display:grid;gap:6px}
.error-summary a{text-decoration:underline;text-underline-offset:3px}
.form-status{display:flex;gap:14px;align-items:flex-start;border-radius:12px;padding:18px 20px;box-shadow:inset 0 0 0 1px var(--line-2);font-size:15px}
.form-status svg{width:22px;height:22px;flex:none;color:#86D3A0}
.form-status--error svg{color:#F08B74}
.form-status .muted{color:var(--dim)}
.form-status .link{text-decoration:underline;text-underline-offset:3px}
.form__foot{margin-top:6px}
.form__foot .muted{margin-top:16px;font-size:13.5px;color:var(--dim)}
.form__foot .link{color:#CFCDC7}
.form-spinner{display:inline-block;width:14px;height:18px;vertical-align:middle;margin-right:8px}
.form-spinner svg{width:100%;height:100%}
.form-spinner rect{transform-origin:50% 100%;animation:barpulse 1.2s ease-in-out infinite}
.form-spinner rect:nth-child(2){animation-delay:.15s}.form-spinner rect:nth-child(3){animation-delay:.3s}
@keyframes barpulse{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.42);opacity:.5}}
.btn[aria-disabled="true"]{opacity:.7;pointer-events:none}
.ct__details{border-top:1px solid var(--line)}
.ct__details > div{padding:16px 0;border-bottom:1px solid var(--line)}
.ct__details dt{font-size:14px;font-weight:500;color:var(--dim)}
.ct__details dd{margin:6px 0 0;font-size:17px;line-height:1.5}
.ct__details dd a{transition:color .3s}
.ct__details dd a:hover{color:var(--accent)}
.ct__details dd a[href^="mailto"]{overflow-wrap:anywhere}
.ct__details dd small{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--dim)}
.ct__note{margin-top:24px;max-width:40ch;font-size:15.5px;line-height:1.55;color:var(--dim)}
@media (max-width:1100px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.ct__grid{grid-template-columns:1fr}}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- pricing */
.pr-print{display:none}
/* the quote builder: an exact size on a ruler, two packages priced live beside each other, extras on switches,
   and a light quote slip that adds it all up with GST. Nobody books from here: Send this quote carries it into the
   enquiry form, Copy link shares it, and the address bar keeps it (/pricing?sf=2400&pkg=core&add=twilight,staging-5) */
.qb{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(28px,4.4vw,80px);align-items:start;margin-top:clamp(40px,6vh,72px)}
.qb__step{padding:clamp(24px,3.4vh,36px) 0 clamp(30px,4.2vh,46px);border-top:1px solid var(--line-2)}
.qb__step:first-child{padding-top:clamp(20px,3vh,30px)}
.qb__k{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:clamp(18px,2.6vh,26px);font-size:15px;font-weight:500;color:var(--dim)}
.qb__k small{font-size:14px;font-weight:400}
.qb__size{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 24px}
.qb__sf{display:flex;align-items:baseline;gap:12px;font-size:clamp(64px,7.4vw,122px);font-weight:500;letter-spacing:-.055em;line-height:.88}
.qb__sf b{font-weight:inherit}
.qb__sf span{font-size:clamp(17px,1.4vw,21px);font-weight:400;letter-spacing:0;color:var(--dim)}
.qb__band{padding-bottom:6px;font-size:15.5px;font-weight:500;color:var(--accent)}
.qb__ruler{--p:27.27%;--b0:9.09%;--b1:27.27%;position:relative;height:70px;margin-top:clamp(24px,3.6vh,36px);touch-action:pan-y}
.qb__scale{position:absolute;left:11px;right:11px;top:0;bottom:0;pointer-events:none}
.qb__scale::before,.qb__scale::after{content:"";position:absolute;left:0;top:21px;height:2px;border-radius:2px}
.qb__scale::before{right:0;background:var(--line-2)}
.qb__scale::after{width:var(--p);background:var(--ink)}
.qb__mark{position:absolute;top:7px;height:30px;left:var(--b0);width:calc(var(--b1) - var(--b0));border-radius:7px;background:rgba(var(--accent-rgb),.13);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28);transition:left .4s var(--ease),width .4s var(--ease)}
.qb__ticks{position:absolute;left:0;top:40px;width:calc(100% + 1px);height:7px;background:repeating-linear-gradient(90deg,rgba(243,241,236,.3) 0 1px,transparent 1px calc((100% - 1px) / 22))}
.qb__nums span{position:absolute;top:52px;left:var(--x);transform:translateX(-50%);font-size:13px;color:var(--dim);white-space:nowrap}
.qb__nums span:last-child{transform:translateX(-80%)}
.qb__ruler input{position:absolute;left:0;right:0;top:0;width:100%;height:44px;margin:0;-webkit-appearance:none;appearance:none;background:none;cursor:grab}
.qb__ruler input:active{cursor:grabbing}
.qb__ruler input::-webkit-slider-runnable-track{height:44px;background:none}
.qb__ruler input::-moz-range-track{height:44px;background:none}
.qb__ruler input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:11px;border-radius:7px;background:var(--ink);box-shadow:0 0 0 6px rgba(243,241,236,.1),0 6px 18px rgba(0,0,0,.6);transition:box-shadow .3s}
.qb__ruler input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:7px;background:var(--ink);box-shadow:0 0 0 6px rgba(243,241,236,.1),0 6px 18px rgba(0,0,0,.6)}
.qb__ruler input:hover::-webkit-slider-thumb{box-shadow:0 0 0 9px rgba(243,241,236,.14),0 6px 18px rgba(0,0,0,.6)}
.qb__ruler input:focus-visible{outline:none}
.qb__ruler input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.qb__ruler input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
.qb__exact{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:10px;font-size:15px;color:var(--dim)}
.qb__exact input{width:8ch;height:44px;padding:0 12px;border:0;border-radius:10px;background:rgba(243,241,236,.05);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);font:inherit;font-weight:500;text-align:right;transition:box-shadow .25s}
.qb__exact input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ink)}
.qb__pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qb__pkg{position:relative;display:grid;align-content:start;gap:6px;padding:20px 22px 22px;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:background .35s,color .35s,box-shadow .35s}
.qb__pkg:hover{box-shadow:inset 0 0 0 1px rgba(243,241,236,.42)}
.qb__pkg input{position:absolute;opacity:0;pointer-events:none}
.qb__pkg-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.qb__pkg-top b{font-size:clamp(19px,1.5vw,23px);font-weight:500;letter-spacing:-.025em}
.qb__pkg-top em{font-style:normal;font-size:clamp(30px,2.7vw,42px);font-weight:500;letter-spacing:-.045em;line-height:1}
.qb__pkg-sub{font-size:15px;color:var(--dim);transition:color .35s}
.qb__pkg-flag{font-size:13.5px;font-weight:500;color:var(--accent)}
.qb__pkg:has(input:checked){background:var(--ink);color:#0A0A0A;box-shadow:none}
.qb__pkg:has(input:checked) .qb__pkg-sub{color:#55534E}
.qb__pkg:has(input:checked) .qb__pkg-flag{color:var(--accent-deep)}
.qb__pkg:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.qb__inc{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:18px;font-size:15px;color:#CFCDC7}
.qb__inc li{display:flex;align-items:center;gap:10px}
.qb__inc li::before{content:"";flex:none;width:10px;height:5px;margin-top:-4px;border:solid var(--accent);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
.qb__adds{border-top:1px solid var(--line)}
.qb__add{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:4px 20px;padding:18px 0;border-bottom:1px solid var(--line);transition:opacity .3s}
.qb__add-name{grid-column:2;font-size:clamp(18px,1.4vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.2;cursor:pointer}
.qb__add:not(.qb__add--ctl) .qb__add-name::after{content:"";position:absolute;inset:0}
.qb__add--ctl .qb__add-name{cursor:default}
.qb__add-text{grid-column:2;max-width:58ch;font-size:15px;line-height:1.5;color:var(--dim)}
.qb__add-price{grid-column:3;grid-row:1;font-size:clamp(18px,1.4vw,21px);font-weight:500;letter-spacing:-.02em;text-align:right;white-space:nowrap}
.qb__add-price small{font-size:13.5px;font-weight:400;letter-spacing:0;color:var(--dim)}
.qb__switch{grid-column:1;grid-row:1/span 2;position:relative;width:46px;height:28px}
.qb__switch input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.qb__track{position:absolute;inset:0;border-radius:9px;background:rgba(243,241,236,.12);transition:background .3s}
.qb__track::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:7px;background:#8E8C86;transition:transform .4s var(--ease),background .3s}
.qb__switch input:checked + .qb__track{background:var(--ink)}
.qb__switch input:checked + .qb__track::after{transform:translateX(18px);background:#0A0A0A}
.qb__switch input:focus-visible + .qb__track{outline:2px solid var(--ink);outline-offset:3px}
.qb__off-note{display:none;color:var(--accent)}
.qb__add.is-off{opacity:.5}
.qb__add.is-off .qb__off-note{display:inline}
.qb__add.is-off input,.qb__add.is-off .qb__add-name{cursor:not-allowed}
.qb__stepper,.qb__opts{grid-column:2/-1;justify-self:start;display:inline-flex;margin:10px 0 2px;padding:3px;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-2)}
.qb__stepper button{width:40px;height:38px;border-radius:9px;font-size:20px;line-height:1;transition:background .25s,opacity .25s}
.qb__stepper button:hover:not(:disabled){background:rgba(243,241,236,.1)}
.qb__stepper button:disabled{opacity:.3;cursor:default}
.qb__stepper output{display:grid;place-items:center;min-width:9ch;font-size:15px;font-weight:500}
.qb__opts label{position:relative;cursor:pointer}
.qb__opts input{position:absolute;opacity:0;pointer-events:none}
.qb__opts span{display:grid;place-items:center;height:38px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:500;color:var(--dim);transition:background .3s,color .3s}
.qb__opts label:hover span{color:var(--ink)}
.qb__opts input:checked + span{background:var(--ink);color:#0A0A0A}
.qb__opts input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.qb__slip{position:sticky;top:100px;padding:clamp(24px,2.4vw,34px);border-radius:var(--r);background:var(--paper-2);color:var(--paper-ink);box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.qb__slip-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding-bottom:16px;border-bottom:1.5px solid var(--paper-ink)}
.qb__slip-top h3{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.qb__slip-top p{font-size:14px;color:var(--paper-dim)}
.qb__lines li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(18,18,18,.18);font-size:15.5px;line-height:1.35;animation:qbIn .45s var(--ease)}
.qb__lines b{font-weight:500;white-space:nowrap}
@keyframes qbIn{from{opacity:0;transform:translateY(-4px)}}
.qb__sums{margin-top:12px}
.qb__sums div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0;font-size:15px;color:var(--paper-body)}
.qb__sums dd{white-space:nowrap}
.qb__sums .qb__total{flex-wrap:wrap;margin-top:10px;padding-top:14px;border-top:1px solid var(--paper-line);color:var(--paper-ink)}
.qb__total dt{font-size:15.5px;font-weight:500;white-space:nowrap}
.qb__total dd{margin-left:auto;font-size:clamp(32px,2.8vw,44px);font-weight:500;letter-spacing:-.045em;line-height:1}
.qb__total dd.is-range{font-size:clamp(24px,2vw,30px)}
.qb__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.qb__copy{background:rgba(18,18,18,.07);color:var(--paper-ink)}
.qb__copy:hover{background:rgba(18,18,18,.13)}
.qb__note{margin-top:14px;font-size:14px;line-height:1.5;color:var(--paper-dim)}
.qb__print{margin-top:10px;font-size:14px;color:var(--paper-ink);text-decoration:underline;text-decoration-color:rgba(18,18,18,.3);text-underline-offset:3px;transition:text-decoration-color .25s}
.qb__print:hover{text-decoration-color:var(--paper-ink)}
.qb-bar{display:none}
@media (prefers-reduced-motion:reduce){.qb__lines li{animation:none}.qb__mark{transition:none}}
.pr-table{width:100%;max-width:var(--max);margin:clamp(36px,5vh,56px) auto 0;border-collapse:collapse}
.pr-table th,.pr-table td{padding:16px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline}
.pr-table thead th{padding-top:0;border-bottom-color:var(--line-2);font-size:14px;font-weight:500;color:var(--dim)}
.pr-table thead th + th{text-align:right}
.pr-table tbody th{width:50%;font-size:17px;font-weight:500}
.pr-table td{text-align:right;font-weight:500;letter-spacing:-.02em;font-size:clamp(19px,1.5vw,22px)}
.pr-table tr.is-on > *{color:var(--accent)}
.pr-rows{max-width:var(--max);margin:clamp(40px,6vh,64px) auto 0;border-top:1px solid var(--line-2)}
.pr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.7fr) minmax(0,.7fr);gap:8px clamp(20px,3vw,48px);align-items:baseline;padding:clamp(22px,3vh,30px) 0;border-bottom:1px solid var(--line)}
.pr-row__name{font-size:clamp(20px,1.7vw,26px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.pr-row__text{max-width:52ch;font-size:16px;line-height:1.55;color:var(--dim)}
.pr-row__price{text-align:right;font-weight:500;letter-spacing:-.035em;line-height:1.1;font-size:clamp(22px,2vw,30px);white-space:nowrap}
.pr-row__price small{display:block;margin-top:4px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--dim);white-space:normal}
.pr-nudge{max-width:var(--max);margin:20px auto 0;font-size:16.5px;font-weight:500}
/* builders, designers and architects: why they are quoted differently, in the same ruled rows as the prices */
.pr-trades__lede{max-width:52ch;margin-top:18px;font-size:clamp(17px,1.3vw,19px);line-height:1.55;color:var(--dim)}
.pr-trades__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,4.5vh,46px)}
.pr-main .phero__lede a{text-decoration:underline;text-decoration-color:rgba(243,241,236,.4);text-underline-offset:4px;transition:text-decoration-color .3s}
.pr-main .phero__lede a:hover{text-decoration-color:currentColor}
.pr-fine{display:grid;gap:10px;max-width:var(--max);margin:clamp(56px,8vh,96px) auto 0;padding-top:22px;border-top:1px solid var(--line)}
.pr-fine p{max-width:80ch;font-size:14.5px;line-height:1.6;color:var(--dim)}
@media (max-width:1100px){.qb{grid-template-columns:minmax(0,1fr) minmax(290px,340px)}}
@media (max-width:900px){
  .qb{grid-template-columns:minmax(0,1fr)}
  .qb__slip{position:static}
  .qb-bar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:16px;background:var(--paper-2);color:var(--paper-ink);box-shadow:0 18px 50px -12px rgba(0,0,0,.75);transform:translateY(160%);transition:transform .5s var(--ease)}
  .qb-bar.is-on{transform:none}
  .qb-bar p{display:grid;gap:2px}
  .qb-bar span{font-size:13px;color:var(--paper-dim)}
  .qb-bar b{font-size:22px;font-weight:500;letter-spacing:-.035em;line-height:1}
  .qb-bar b.is-range{font-size:17px}
  .qb-bar .btn{height:42px}
  .pr-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
  .pr-row__name{grid-column:1;grid-row:1}
  .pr-row__price{grid-column:2;grid-row:1}
  .pr-row__text{grid-column:1/-1}
}
@media (max-width:560px){
  .qb__pkgs{grid-template-columns:minmax(0,1fr)}
  .qb__add{grid-template-columns:46px minmax(0,1fr) auto;gap:4px 14px}
  .qb__nums span:nth-child(2),.qb__nums span:nth-child(4),.qb__nums span:nth-child(5){display:none}
  .qb__opts span{padding:0 12px;font-size:14px}
}

/* ---------------------------------------------------------------- privacy */
.prose-page{padding:calc(110px + clamp(40px,8vh,90px)) var(--gutter) clamp(100px,14vh,160px)}
.prose{max-width:72ch;margin:0 auto}
.prose h1{margin-bottom:28px}
.prose h2{margin:44px 0 12px;font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em}
.prose p{color:#C9C7C1;font-size:16.5px;line-height:1.7}
.prose p + p{margin-top:14px}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.prose .lede{color:var(--dim)}
.prose__date{margin-top:48px}

@media (prefers-reduced-motion:reduce){
  .settle{filter:none;transform:none;transition:none}
  .scrollcue svg{animation:none}
  .hero__img img,.phero__img img{animation:none}
  .reveal .w{color:inherit}
  .hero,.phero{position:relative}
  .hero__inner,.phero__inner{transform:none;opacity:1}
  .feature{height:auto}.feature__stick{position:relative;height:auto;aspect-ratio:16/9}.feature__frame{clip-path:none}
  .menu__list a:hover{transform:none}
}

/* ---------------------------------------------------------------- printed, or saved as a PDF: the price sheet in black on white */
@media print{
  html,body{background:#fff!important;color:#161618!important}
  .hdr,.dbar,.menu,.foot,.lb,.skip-link,.cta,.phero__img,.glow,.grain,.pr-screen{display:none!important}
  @page{margin:12mm 13mm 13mm}
  .pr-print{display:block;margin:0 0 14pt;padding-bottom:6pt;border-bottom:1px solid rgba(0,0,0,.2);font-size:9pt;color:#3A3A3C}
  .cover,.phero,.over,.sec,.paper,.light,.dark{position:static!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;color:#161618!important}
  .phero__inner{position:static;transform:none!important;opacity:1!important}
  .phero__body{position:static;gap:6pt}
  .phero h1{font-size:26pt;color:#161618}
  .phero h1 .dim{color:#5A5A5C}
  .phero .meta{display:none}
  .sec,.paper,.over{margin-top:14pt!important}
  .big{font-size:16pt!important;color:#161618}
  .big .dim,.dim{color:#5A5A5C!important}
  .lede,.phero__lede{font-size:10.5pt;color:#3A3A3C!important}
  .qb{display:block;margin-top:10pt}
  #qb-h{display:none!important}
  .qb__build,.qb__acts,.qb__note,.qb__print,.qb-bar{display:none!important}
  .qb__slip{position:static;max-width:120mm;padding:10pt 12pt;background:#fff;color:#161618;border:1px solid rgba(0,0,0,.35);border-radius:4px;box-shadow:none}
  .qb__slip-top h3{font-size:13pt}
  .qb__slip-top p,.qb__sums div{font-size:9.5pt;color:#3A3A3C}
  .qb__lines li{padding:4pt 0;font-size:10pt;animation:none}
  .qb__total dt{font-size:10.5pt}
  .qb__total dd{font-size:20pt}
  .pr-table{margin-top:10pt}
  .pr-table th,.pr-table td{padding:3.5pt 0;border-color:rgba(0,0,0,.16)!important;color:#161618}
  .pr-table thead th{font-size:9pt;color:#5A5A5C}
  .pr-table tbody th{font-size:10.5pt}
  .pr-table td{font-size:11.5pt}
  .pr-table tr.is-on > *{color:var(--accent-deep)}
  .pr-rows{margin-top:8pt;border-color:rgba(0,0,0,.34)}
  .pr-row{padding:5pt 0;gap:4pt 14pt;grid-template-columns:minmax(0,1fr) minmax(0,2.8fr) minmax(0,.8fr);border-color:rgba(0,0,0,.16)}
  .pr-row__name,.pr-row__price,.pr-row__text{grid-column:auto;grid-row:auto}
  .pr-row__name{font-size:12pt}
  .pr-row__text{font-size:9.5pt;color:#3A3A3C}
  .pr-row__price{font-size:13pt}
  .pr-row__price small{font-size:8.5pt;color:#5A5A5C}
  .pr-nudge{margin-top:8pt;font-size:10pt}
  .pr-fine{margin-top:12pt;padding-top:8pt;gap:3pt;border-color:rgba(0,0,0,.2)}
  .pr-fine p{font-size:8.5pt;color:#5A5A5C}
  .qb__slip,.pr-row,.pr-table tr,.pr-fine{break-inside:avoid}
  .pr-trades{display:none!important}
  h2,h3,h4{break-after:avoid}
}