/* The water page's look, shared by index.html (the page after the intro) and work.html (the work). */
:root{
  --ink:#1C1A17; --ink-2:#48433D; --grey:#7A736B; --grey-2:#A8A198; --line:rgba(28,26,23,.14);
  --g:clamp(20px,5.2vw,92px); --head:80px; --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:#FFFFFF;-webkit-text-size-adjust:100%;overscroll-behavior-y:contain}   /* a pull at the top is the way back to the intro */
body{margin:0;background:#FFFFFF;color:var(--ink);font:300 17px/1.6 "Jost","Futura",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* the mouse is the logo, small (Flynn, 01-11): the two doors in ink with a thin white edge, so it shows on the white and
   on the dark blue; the point is the top of the left door */
html,body,a,button,[data-glass]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='32' viewBox='240 23 773 1210'%3E%3Cg fill='%231C1A17' stroke='%23FFFFFF' stroke-width='44' stroke-linejoin='round'%3E%3Cpolygon points='250,176 557,300 557,953 250,1077'/%3E%3Cpolygon points='660,188 1003,33 1003,1223 660,1065'/%3E%3C/g%3E%3C/svg%3E") 1 4, auto}

/* the mouse, drawn: the logo in small, following the pointer; over anything you can press, its two parts move into the A
   (the logo's two parts leaning together; Flynn, 01-11). Only for a mouse; the picture cursor above stays as the fallback */
.lcur{position:fixed;left:0;top:0;width:32px;height:32px;z-index:100;pointer-events:none;opacity:0;transition:opacity .2s;overflow:visible;will-change:transform;
  filter:drop-shadow(1px 3px 2.5px rgba(10,14,22,.32))}   /* a subtle shade under it, as if it hangs just above the page (Flynn, 01-11) */
.lcur.on{opacity:1}
.lcur polygon{fill:#1C1A17;stroke:#FFFFFF;stroke-width:var(--sw,40);stroke-linejoin:round;paint-order:stroke}
html.logocur,html.logocur *{cursor:none !important}

/* the water: one canvas under everything */
canvas.gl{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
header,main,footer{position:relative;z-index:1}
/* once the water runs, the page is painted on the canvas: the elements stay where they are, for the pointer and the
   reader, but show nothing themselves */
html.gl [data-t]{-webkit-text-fill-color:transparent}
html.gl img,html.gl video,html.gl .mark{opacity:0}
html.gl .shot,html.gl .ph,html.gl .pics figure{background:transparent}
html.gl ::selection{background:transparent}

/* the glass. The shader draws it; without the shader (no WebGL, reduced motion) a quiet stand-in in css */
[data-glass]{background:rgba(255,255,255,.72);box-shadow:0 22px 40px -18px rgba(28,26,23,.3),0 0 0 .5px rgba(28,26,23,.12),inset 0 1px 0 rgba(255,255,255,.95)}
[data-glass=tab]{background:none;box-shadow:none}
[data-glass=tab]:hover{background:rgba(255,255,255,.8);box-shadow:0 0 0 .5px rgba(28,26,23,.1)}
html.gl [data-glass]{background:transparent;box-shadow:none}

/* one lettertype everywhere: Jost. Light, spaced capitals for everything that names; light, plain for reading */
.lab{font:300 12.5px/1.5 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--grey)}
/* a link of its own: a small pill of glass */
.pill{display:inline-block;font:300 12px/1.4 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;
  padding:9px 18px 9px calc(18px + .42em);border-radius:999px;color:#0F2A44}   /* the buttons are orange glass (Flynn, 04-11), their letters the blue */
.pill:hover{color:var(--ink)}

/* the bar at the top: a floating pill of glass with the mark, the name and three places to go */
/* the name in the middle of the bar, Work to its left and Contact to its right, all centred (Flynn, 05-11); the three sit on
   a grid of equal sides and a middle that is exactly the middle, however long the words are (the nav's own box is gone, its
   two links are placed straight on the bar) */
.top{position:fixed;top:14px;left:0;right:0;margin:0 auto;width:min(58vw,1100px);min-width:min(600px,calc(100vw - 2 * var(--g)));z-index:3;height:54px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;
  padding:0 8px 0 8px;border-radius:999px}   /* (not the whole width, Flynn 05-11: about the middle 58 % of the window) */
.brand{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:14px;padding:9px 16px 9px 14px;border-radius:999px}
.top nav{display:contents}
.top nav a:first-child{grid-column:1;grid-row:1;justify-self:start}
.top nav a:last-child{grid-column:3;grid-row:1;justify-self:end}
.mark{display:block;height:22px;width:auto;fill:var(--ink)}
.brand span{font:300 13px/1 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;margin-right:-.42em}
/* Work and Contact: orange buttons of glass, always there (Flynn, 05-11: "have the liquid glass always there, the buttons
   should be orange"); the letters the blue, as on every button */
.top nav a{font:300 12.5px/1 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;color:#0F2A44;padding:12px 18px 12px calc(18px + .42em);border-radius:999px}
.top nav a:hover{color:#0F2A44}

/* 1. the first screen: the title in the middle of the white, one line under it */
.first{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:calc(var(--head) + 4vh) var(--g) 14vh}
.up{position:absolute;right:calc(var(--g) * .5);top:20px;display:block;width:26px;height:68px;color:var(--ink)}   /* a plain arrow on the right, the way back to the intro (Flynn, 05-11) */
.up svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the logo, faded, behind the first screen (Flynn, 01-11); ?logo= sets how strongly it shows */
.first{isolation:isolate}
.first > .bgmark{fill:#0F2A44;position:absolute;z-index:-1;left:50%;top:50%;height:min(76vh,860px);width:auto;transform:translate(-50%,-47%);pointer-events:none}
html:not(.gl) .bgmark{opacity:.075}
/* the landing begins with it black, until the mouse's black copy lies over it (cursor.js then drops html.landing, and the
   big one shows as its imprint, the copy lifting out of it); the painter does the same */
html.landing:not(.gl) .first > .bgmark{fill:#1C1A17;opacity:1}
.first .lab{margin-bottom:3.6em}
.first h1{font:300 clamp(19px,2.5vw,36px)/1.5 "Jost",sans-serif;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.sub{margin-top:2.6em;font:300 clamp(17px,1.4vw,21px)/1.6 "Jost",sans-serif;letter-spacing:.05em;color:var(--ink-2);max-width:48ch;text-wrap:balance}
.up{transition:opacity .9s var(--ease)}
.scrolled .up{opacity:0}

/* sections: lots of air */
.sec{padding:clamp(80px,12vh,150px) var(--g)}
.sec > .lab{margin-bottom:clamp(40px,6vh,64px)}

/* 2. what we offer: five separate parts, each about a screen tall: the number, the name, one line, and beside them
   one still example on a slab of glass */
.part{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,min(58%,780px)) minmax(0,1fr);align-items:center;
  gap:clamp(32px,4.5vw,80px);padding:clamp(72px,11vh,120px) var(--g)}
.part .pic{order:1}   /* the picture on the left, the point on the right (Flynn, 01-11) */
.part .pt{order:2}
/* every other part the other way round: 01) text right, 02) left, 03) right… (Flynn, 01-11: "every number switch from left to right") */
.part.flip{grid-template-columns:minmax(0,1fr) minmax(0,min(58%,780px))}
.part.flip .pt{order:1}
.part.flip .pic{order:2}
.more{margin-top:.9em;font:300 clamp(16.5px,1.3vw,19.5px)/1.65 "Jost",sans-serif;color:var(--grey);max-width:44ch}
.pt .lab{margin-bottom:clamp(36px,6vh,64px)}
/* the name of the website's half, "How we do it", over 01): a heading in the spaced capitals, not a small label (Flynn,
   03-11: "make the what we do and how we do it way more prominent"; the intro's half is "What we do", as big on its card) */
.pt .lab.half{font-size:clamp(24px,2.7vw,46px);line-height:1.25;letter-spacing:.42em;margin-bottom:clamp(30px,5vh,60px)}
.part.dark .lab.half{color:#FFFFFF}
.part:not(.dark) .lab.half{color:#0F2A44}
.pt .lab.also{margin:2.4em 0 0}   /* "we also make portfolios": a short part under 01)'s own words (Flynn, 03-11) */
.lab.also + .more{margin-top:.55em}
.no{font:300 clamp(64px,7.4vw,120px)/1 "Jost",sans-serif;letter-spacing:.01em;color:var(--no,var(--grey-2))}
/* every part its own soft colour, the number a deeper tone of it (Flynn, 01-11: "change the color per number to get a
   break"); the water paints the colours, fading into the white at each part's top and bottom; ?tint=0 switches them off */
/* white and dark blue, part by part (Flynn, 01-11): 01), 03), 05) dark blue with light letters, 02), 04) white (05) close
   contact was white for a day; 03-11: "step 5 should be blue, het is om en om") */
.part.dark{--bg:#0F2A44;--fade:26px}
/* the letters swap colours with the ground (Flynn, 01-11): white on the blue parts, the blue on the white ones */
.part.dark{--no:#FFFFFF}
.part.dark .pt h2,.part.dark .line{color:#FFFFFF}
.part.dark .pill{color:#0F2A44}   /* the buttons are white liquid chrome everywhere, so their letters are the blue (Flynn, 01-11) */
.part.dark .more{color:rgba(255,255,255,.78)}
.part.dark .lab{color:rgba(255,255,255,.7)}
/* "How we do it": a part of its own between the white first page and 01), a black bar with the words in white (Flynn, 05-11);
   its edges are sharp (the other dark parts fade in from the white over 26 px) */
.part.band{--bg:#000000;--fade:1px;display:block;min-height:0;padding:clamp(34px,6vh,60px) var(--g);text-align:center}
.part.band h2{margin:0;font:300 clamp(24px,2.7vw,46px)/1.25 "Jost",sans-serif;letter-spacing:.42em;padding-left:.42em;text-transform:uppercase;color:#FFFFFF}
.part:not(.dark){--no:#0F2A44}
.part:not(.dark) .pt h2,.part:not(.dark) .line,.part:not(.dark) .pill{color:#0F2A44}
.part:not(.dark) .more{color:rgba(15,42,68,.74)}
.part:not(.dark) .lab{color:rgba(15,42,68,.66)}
html.notint .part{--bg:transparent;--no:var(--grey-2)}
html.notint .part.dark .pt h2,html.notint .part.dark .pill{color:var(--ink)}
html.notint .part.dark .line,html.notint .part.dark .more{color:var(--ink-2)}
html:not(.gl) .part{background:var(--bg,transparent)}
.pt h2{margin-top:clamp(22px,3vh,34px);font:300 clamp(18px,1.65vw,24px)/1.5 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.line{margin-top:1em;font:300 clamp(18px,1.5vw,22px)/1.55 "Jost",sans-serif;color:var(--ink-2);max-width:40ch}
.pt .pill{margin-top:30px}
.pic{aspect-ratio:16/10;overflow:hidden;background:#F3F1EE;border-radius:24px}
.pic img,.pic video{display:block;width:100%;height:100%;object-fit:cover}
.pic.portrait{aspect-ratio:4/5;width:min(100%,360px);justify-self:center}
/* (a white example on the white parts, 02) and 04), had a hairline in the blue round it for a day; since 03-11 its glass
   is thicker instead, in ripple.js: Flynn, "make it more like glass") */

/* 3. the work: six websites, two to a row, each poster under a slab of glass */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,8vh,104px) clamp(32px,4vw,64px)}
.shot{display:block;aspect-ratio:1280/804;overflow:hidden;background:#F3F1EE;border-radius:22px}
.shot img{width:100%;height:100%;object-fit:cover}
.grid h3{margin-top:26px;font:400 13.5px/1.5 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase;color:var(--ink)}
.grid h3.real{color:#8A6A3F}
.grid p{margin-top:.6em;font:300 17.5px/1.55 "Jost",sans-serif;color:var(--grey);max-width:44ch}
.grid .pill{margin-top:20px}
/* the work page in lanes (Flynn, 05-11: "2 projects per border"): three lanes, two projects each, white and dark blue by
   turns; which colour comes first follows the lane the visitor clicked from (ripple.js). The words swap colours with the lane */
.part.lane{display:block;min-height:0;padding:clamp(72px,11vh,120px) var(--g)}
.part.lane.first-lane{padding-top:clamp(150px,22vh,230px)}
.part.lane > .lab{margin-bottom:clamp(40px,6vh,64px)}
.part.dark .grid h3{color:#FFFFFF}
.part.dark .grid h3.real{color:#E0BF8A}
.part.dark .grid p{color:rgba(255,255,255,.78)}
/* the contact lane takes the colour of the lane the visitor clicked from (Flynn, 05-11), so it can be white: the message
   box then needs a tint of its own to stand out from it */
.part:not(.dark) .mailbox{--fill:#E9EEF4}

/* 4. Flynn: the portrait under glass, the words on a pane of it, three photos as small tiles */
.who{display:grid;grid-template-columns:auto minmax(0,40em);gap:clamp(28px,3.4vw,56px);align-items:center}
.ph{width:clamp(150px,14vw,210px);aspect-ratio:4/5;overflow:hidden;background:#F3F1EE;border-radius:22px}
.ph img{width:100%;height:100%;object-fit:cover}
.txt{padding:clamp(26px,2.6vw,40px) clamp(28px,3vw,46px);border-radius:28px}
.who p{font:300 clamp(16px,1.2vw,19px)/1.6 "Jost",sans-serif;color:var(--ink-2)}
.who p + p{margin-top:1em}
.who .lab{margin-top:2.2em}
.who p.lab{font:300 11px/1.5 "Jost",sans-serif}

/* 5. close contact: the number and the address as pills; beside them all the photos (Flynn, 03-11), the portrait tall
   and the two at work stacked next to it, each under its slab of glass. The photos run exactly as tall as the words beside
   them, from the top of the number to the foot of the message box (Flynn, 03-11: "make sure the pictures are aligned"):
   stretched to the row, and their own size left out of it (contain), so the words alone set its height. The words' column
   keeps room for the broader message box (760 px, where the screen has it), the photos take the rest, up to 900 px */
#contact{grid-template-columns:minmax(min(760px,48%),1fr) minmax(0,900px);align-content:center}   /* (the row as tall as the words, not the screen) */
.pics{order:2;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(12px,1.3vw,20px);align-self:stretch;contain:size}
.pics figure{min-height:0;overflow:hidden;background:#F3F1EE;border-radius:22px}
.pics figure:first-child{grid-row:1 / 3}
.pics img{width:100%;height:100%;object-fit:cover}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.pill.plain{font-size:20px;letter-spacing:.04em;text-transform:none;padding:12px 26px;color:var(--ink)}   /* the number and the address the same size (Flynn, 04-11) */
/* the message box: a pane of white glass on the dark blue part, a bit bigger, the words and the fields in the blue, the
   send key a chrome button (Flynn, 03-11: first "a bit more big and dark blue with white" on the then white part; since
   05) is dark blue, "should be white"). The water paints its white (--fill) */
.mailbox{--fill:#FFFFFF;margin-top:34px;padding:32px 38px 30px;border-radius:28px;max-width:760px}   /* (640 until 03-11: "a little broader") */
html:not(.gl) .mailbox{background:var(--fill)}
#mailbox .lab{margin-bottom:8px;color:rgba(15,42,68,.66)}
.fld{display:block;margin-top:20px}
.mailbox .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 30px}   /* the name and the email side by side */
.fld span{display:block;font:300 12.5px/1.4 "Jost",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:rgba(15,42,68,.66)}
.fld input,.fld textarea{display:block;width:100%;margin-top:5px;padding:8px 0 9px;border:0;border-bottom:1px solid rgba(15,42,68,.26);border-radius:0;background:transparent;
  font:300 19px/1.45 "Jost",sans-serif;color:#0F2A44;outline:none;resize:none;transition:border-color .3s}   /* (no resize corner: it showed through the bar) */
.fld input:focus,.fld textarea:focus{border-bottom-color:#0F2A44}
.fld input:-webkit-autofill{-webkit-text-fill-color:#0F2A44;-webkit-box-shadow:0 0 0 60px #FFFFFF inset}
.fld.bad input,.fld.bad textarea{border-bottom-color:#C0582F}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px}
.send .pill{cursor:pointer;border:0;font:inherit;font:300 12px/1.4 "Jost",sans-serif;letter-spacing:.42em;text-transform:uppercase}
.send .pill[disabled]{opacity:.6}
.say{font:300 15px/1.5 "Jost",sans-serif;color:rgba(15,42,68,.82);max-width:36ch}
.say a{color:inherit}
html.logocur input,html.logocur textarea{caret-color:transparent}   /* the caret is the logo's typing shape (below) */
.lcaret{position:fixed;left:0;top:0;z-index:99;width:6px;height:24px;pointer-events:none;opacity:0;overflow:visible}
.lcaret.on{opacity:1}
.lcaret.on.blink{animation:cblink 1.1s steps(1,end) .5s infinite}
@keyframes cblink{0%{opacity:1}50%{opacity:.18}}
.lcaret polygon{fill:#0F2A44}   /* the blue: the only fields are in the white message box */
.who.one{grid-template-columns:minmax(0,44em);justify-content:start}

/* the foot: a thin strip of glass */
.foot{padding:16px var(--g) 40px}
.strip{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 32px;padding:14px 28px;border-radius:999px}
.foot p,.foot a{display:block;font:300 12.5px/1.7 "Jost",sans-serif;letter-spacing:.08em;color:var(--grey)}
.foot a:hover{color:var(--ink-2)}

/* the way back: a white veil, then the last page of the intro */
.veil{position:fixed;inset:0;z-index:30;background:#FFFFFF;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.veil.on{opacity:1;pointer-events:auto}

/* the page arrives from under the water (a link on the page before took it under): its first paint is the site's deep blue, as the last frame of that page was;
   ripple.js takes the class off after its first frame, and the water then clears */
html.sunk,html.sunk body{background:#FFFFFF}
html.sunk body > :not(canvas.gl){visibility:hidden}

@media (max-width:820px){
  :root{--head:66px}
  .top{top:10px;left:12px;right:12px;margin:0;width:auto;min-width:0;height:48px;padding:0 6px}
  .brand span{display:none}
  .up{top:76px;right:18px;height:54px}   /* a phone's bar runs the whole width: the arrow goes under it, not over its Contact */
  .top nav a{padding:12px 11px 12px calc(11px + .42em);letter-spacing:.3em}
  .first{padding-bottom:16vh}
  .first h1{font-size:clamp(15px,4.4vw,22px);letter-spacing:.42em;padding-left:.42em}
  .part{grid-template-columns:1fr;min-height:auto;gap:36px;padding:80px var(--g)}
  .part .pt{order:1}.part .pic{order:2}   /* on a phone the point first, its picture under it */
  .part.flip{grid-template-columns:1fr}
  .pic{border-radius:18px}
  .pic:not(.web):not(.portrait){aspect-ratio:4/5}
  .pic.portrait{width:min(70%,300px);justify-self:start}
  #contact{grid-template-columns:1fr}
  .pics{aspect-ratio:.96;max-height:none;gap:10px;contain:none}
  .pics figure{border-radius:14px}
  .mailbox{padding:26px 24px 24px;border-radius:24px}
  .mailbox .two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:56px}
  .shot{border-radius:18px}
  .who{grid-template-columns:1fr;gap:28px}
  .ph{width:min(60%,220px)}
  .strip{border-radius:22px;padding:14px 20px}
}

/* the work, a page of its own (work.html, Flynn 02-11): its heading clear of the bar */
.sec.page{padding-top:clamp(150px,22vh,230px)}
.top nav a[aria-current]{color:#0F2A44}