/* Anđela Nojić Design. Layout follows the 1440px-wide design PDF. */

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-sans-3-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/source-sans-3-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/crimson-pro-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/fonts/crimson-pro-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (palette.png) ---------- */
:root {
  --blue: #2d2d7c;
  --charcoal: #333238;
  --gold: #89783c;
  --gold-deep: #786f3d; /* logo square, service marks and package names */
  --paper: #fffff9;
  --stone: #dcdad8;
  --ink: #0c0c0c;
  --terracotta: #be5244;
  --field: #ececec;
  --field-line: #aca794;
  --button: #211f20;
  --ink-fill: #121110;

  --sans: 'Source Sans 3', 'Myriad Pro', Myriad, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Crimson Pro', 'Minion Pro', Minion, Georgia, serif;

  --gutter: 14px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html.theme-light { --page-bg: var(--stone); --page-fg: #000; --header-fg: #000; --muted-fg: #000; }
html.theme-dark  { --page-bg: var(--charcoal); --page-fg: var(--stone); --header-fg: #a9a8ad; --muted-fg: #131214; } /* Story: header in the same light grey as the text */

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .7s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* Fallback for browsers without cross-document view transitions (see head.js / site.js) */
html.no-vt body { animation: page-in .6s cubic-bezier(.4, 0, .2, 1) both; }
html.no-vt body.is-leaving { opacity: 0; transition: opacity .32s ease; }
@keyframes page-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.no-vt body { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--page-bg);
  color: var(--page-fg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: var(--header-h);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  background: var(--page-bg);
  color: var(--page-fg);
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, figure { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -40px; z-index: 100; padding: 8px 12px;
  background: var(--ink); color: var(--paper); font-size: 11px;
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px 0 48px;
  background: var(--page-bg);
  color: var(--header-fg);
  font-size: 11px;
  letter-spacing: .01em;
}
.brand { font-size: 14px; font-weight: 700; white-space: nowrap; }
.nav-list { display: flex; gap: clamp(36px, 7.6vw, 110px); margin: 0; padding: 0; list-style: none; }
.nav-link { position: relative; display: inline-block; padding: 10px 0; white-space: nowrap; }
.nav-link::after, .submenu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.submenu a::after { bottom: 3px; }
@media (hover: hover) {
  .nav-link:hover::after, .submenu a:hover::after { transform: scaleX(1); }
}

.has-menu { position: relative; }
.submenu {
  position: absolute;
  top: 100%;
  left: -16px;
  min-width: 132px;
  margin: 0;
  padding: 4px 16px 14px;
  list-style: none;
  background: var(--page-bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.submenu a { position: relative; display: inline-block; padding: 6px 0; white-space: nowrap; }
.has-menu.is-open .submenu,
.has-menu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}
@media (hover: hover) {
  .has-menu:hover .submenu { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s; }
}

/* ---------- Shared ---------- */
.page-title {
  margin: 102px 0 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
}

/* ---------- Landing intro ---------- */
/* The page colour fills the screen; the logo's gold square appears at the centre, then A, N, D and S
   (D and S twice as fast), making the logo 250px wide. site.js then zooms in from the square until the
   square covers the whole screen, and fades to the landing page.
   The letters are laid out at full width and the square at full-screen size, both scaled down at the
   start (--intro-start, --sq-start from site.js) so they stay sharp as they grow. */
.site-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--stone);
}
.site-intro:not(.is-scripted) { animation: intro-out .6s ease 3.3s forwards; } /* if the script never runs */
html.no-intro .site-intro { display: none; }
.intro-logo {
  position: absolute;
  left: -.84vw; /* puts the square's centre (50.84% across) at the middle of the screen */
  top: calc(50% - 59.54vw); /* and (74.4% down a logo 80.03vw tall) at mid-height */
  width: 100vw;
  aspect-ratio: 1727 / 1382;
  transform: scale(var(--intro-start, .1736));
  transform-origin: 50.84% 74.4%;
}
.intro-square-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cover, 102vmax);
  height: var(--cover, 102vmax);
  transform: translate(-50%, -50%) scale(var(--sq-start, .0097));
}
.intro-square {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scale(0);
  animation: intro-square .45s cubic-bezier(.3, 1.5, .5, 1) .15s forwards;
}
.il {
  position: absolute;
  inset: 0;
  background: var(--blue);
  opacity: 0;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: intro-letter .5s var(--ease) forwards;
}
.il-a { -webkit-mask-image: url(/img/logo-a.png?v=67b894a1d5); mask-image: url(/img/logo-a.png?v=67b894a1d5); animation-delay: .6s; }
.il-n { -webkit-mask-image: url(/img/logo-n.png?v=3ac127b5a3); mask-image: url(/img/logo-n.png?v=3ac127b5a3); animation-delay: 1.1s; }
.il-d { -webkit-mask-image: url(/img/logo-d.png?v=f6dd7a352a); mask-image: url(/img/logo-d.png?v=f6dd7a352a); animation-duration: .25s; animation-delay: 1.6s; }
.il-s { -webkit-mask-image: url(/img/logo-s.png?v=034d8784c9); mask-image: url(/img/logo-s.png?v=034d8784c9); animation-duration: .25s; animation-delay: 1.85s; }
@keyframes intro-square { to { transform: scale(1); } }
@keyframes intro-letter { from { opacity: 0; transform: translateY(4%); } to { opacity: 1; transform: none; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* ---------- Landing ---------- */
/* Hero: four renders that cycle, full width under the header. Near either edge the next/previous one
   slides in a little (site.js); clicking there brings it fully in. */
.hero {
  position: relative;
  height: clamp(420px, calc(100svh - var(--header-h)), 960px);
  overflow: hidden;
  background: #cfcdcb;
  touch-action: pan-y;
}
.hero-frame { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform: translateX(100%);
  backface-visibility: hidden;
}
.hero-slide.is-current { z-index: 1; transform: none; }
.hero-slide.is-peeking { z-index: 2; box-shadow: 0 0 48px rgba(0, 0, 0, .3); }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 22%;
  padding: 0;
  border: 0;
  background: transparent;
}
.hero-nav--prev { left: 0; cursor: url(/img/cursor-prev.svg?v=9f72de504a) 22 22, w-resize; }
.hero-nav--next { right: 0; cursor: url(/img/cursor-next.svg?v=03994ca7ac) 22 22, e-resize; }
.hero-nav:focus-visible { outline: 1px solid var(--paper); outline-offset: -14px; }
.intro { padding: 226px var(--gutter) 262px; }
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1298px;
  margin: 0 auto;
}
.card { display: block; }
.card-label { display: block; margin-bottom: 11px; font-size: 11px; }
.card-frame { display: block; padding: 0 18px 18px; background: var(--charcoal); }
.card-media { display: block; overflow: hidden; aspect-ratio: 1; }
.card-media img, .work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
@media (hover: hover) {
  .card:hover .card-media img, .work-link:hover .work-media img { transform: scale(1.025); }
}

/* ---------- Work ---------- */
.work { padding: 42px var(--gutter) 72px; }
.work-item + .work-item { margin-top: 64px; }
.work-item--full-bottom .work-cap { margin: 9px 0 0; }
.work-link { display: block; }
.work-cap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-bottom: 9px;
}
.cap-tagline { padding: 0 16px; line-height: 1.3; text-align: center; }
.cap-id { display: flex; flex-direction: column; line-height: 1.3; }
.work-cap .cap-place { display: flex; flex-direction: column; justify-self: end; text-align: right; line-height: 1.3; }
.work-media { display: block; overflow: hidden; background: #cfcdcb; }
.ratio-wide { aspect-ratio: 2.02; }
.ratio-square { aspect-ratio: 1; }
.work-item--right .work-link,
.work-item--left .work-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 27px;
}
.work-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0 0;
}
/* Category sits in the empty column, at its outer edge, a little above the image's bottom. */
.cap-category { position: absolute; bottom: 130px; line-height: 1.3; }
.work-item--right .cap-category { left: 0; }
.work-item--left .cap-category { right: 0; text-align: right; }
.work-item--right .work-side { align-items: flex-end; padding-right: 3px; }
.work-item--right .work-side .cap-id { padding-right: 20px; }
.work-item--left .work-media { order: -1; }
.work-item--left .work-side { align-items: flex-start; }

/* ---------- Project ---------- */
/* Rows of images exactly as in the design, running on past the right edge. With a mouse over a row the
   strip eases left to reveal more of the next image; clicking slides the next image to the row's start
   (site.js). Touch screens scroll the rows sideways. */
.project { padding: 42px 0 120px; }
.project-info {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-bottom: 9px;
  padding: 0 var(--gutter);
  line-height: 1.3;
}
.pi-name { font-size: 12px; font-weight: 400; }
.pi-category { padding: 0 16px; text-align: center; }
.pi-place { justify-self: end; text-align: right; }
.g-strips { display: flex; flex-direction: column; gap: 64px; }
/* Each row is seen through a window inset 14px from both sides of the screen, so the background
   always shows at the edges, wherever the row has moved to. */
.g-strip {
  --row-h: min(49vw, 80svh);
  position: relative;
  container-type: inline-size;
  margin: 0 var(--gutter);
  overflow: hidden;
  touch-action: pan-y;
}
.g-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.g-strip--middle:not(.is-ready) .g-track { padding-left: 50cqw; } /* until site.js takes over the positioning */
/* Copies behind the first image (kept for looping back) stay hidden until the row reaches them. */
.g-item { transition: opacity .6s ease; }
.g-item.is-concealed { opacity: 0; }
.g-strip.no-fade .g-item { transition: none; }
.g-item { flex: none; height: var(--row-h); overflow: hidden; background: #cfcdcb; }
.g-item img { width: auto; height: 100%; }
.g-item--full { width: 100cqw; } /* fills the row's window */
.g-item--half { width: 50cqw; }
.g-item--full img, .g-item--half img { width: 100%; object-fit: cover; }
.g-next, .g-prev {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
}
.g-next { left: 0; right: 0; cursor: url(/img/cursor-next.svg?v=03994ca7ac) 22 22, e-resize; }
.g-prev { left: 0; z-index: 3; width: 22%; cursor: url(/img/cursor-prev.svg?v=9f72de504a) 22 22, w-resize; } /* the left edge goes back */
.g-next:focus-visible, .g-prev:focus-visible { outline: 1px solid var(--paper); outline-offset: -12px; }
.g-strip.is-static .g-next, .g-strip.is-static .g-prev { display: none; } /* the whole row fits on screen */
/* Mirrored rows (a square on the left with more to come) are laid out like the middle rows and flipped,
   so the next images arrive from the left; the images themselves are flipped back. */
.g-strip--mirror { transform: scaleX(-1); }
.g-strip--mirror .g-item img { transform: scaleX(-1); }
.g-strip--mirror .g-next { cursor: url(/img/cursor-prev.svg?v=9f72de504a) 22 22, w-resize; }
.g-strip--mirror .g-prev { cursor: url(/img/cursor-next.svg?v=03994ca7ac) 22 22, e-resize; }

/* ---------- Story ---------- */
.story {
  display: grid;
  grid-template-columns: 392px minmax(0, 430px) minmax(0, 1fr) minmax(0, 310px);
  grid-template-areas:
    "portrait centre . blocks"
    "closing  .      . blocks";
  column-gap: 26px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 110px 117px 260px 15px;
  font-size: 12px;
  line-height: 1.22;
  color: #a9a8ad; /* lighter than the design's #7a797e, as asked */
}
.story-portrait { grid-area: portrait; }
.story-portrait img { width: 100%; aspect-ratio: 392 / 461; object-fit: cover; }
.story-centre { grid-area: centre; }
.story-name { margin-top: 136px; padding-left: 232px; font-size: 14px; font-weight: 600; color: #a9a8ad; } /* centred on the page, as in the design */
.story-intro { margin-top: 122px; }
.story-blocks { grid-area: blocks; }
.story-block + .story-block { margin-top: 88px; }
.story-centre p + p, .story-block p + p { margin-top: 14px; }
.story-closing { grid-area: closing; margin-top: 47px; }

/* ---------- Services ---------- */
/* The top section fits the visible window: boxes and gaps scale with the height left under the header
   (--room), reaching the design sizes (366 x 354 boxes) on a window about 900px tall. */
.svc {
  --room: calc(100svh - var(--header-h));
  --box: clamp(250px, calc(var(--room) * .67 - 198px), 354px); /* box height; never below 250px so the text fits */
  padding: min(84px, calc(var(--room) * .1)) var(--gutter) min(50px, calc(var(--room) * .055));
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, calc(var(--box) * 366 / 354)));
  justify-content: center;
  gap: 42px;
}
.svc-col { display: flex; flex-direction: column; }
.svc-head {
  margin-bottom: min(20px, calc(var(--room) * .025));
  font-size: 11px; /* same as the WORK / SERVICES / STORY / CONTACT links */
  font-weight: 400;
  letter-spacing: .005em;
  color: #000;
}
.svc-col.is-selected .svc-head { font-weight: 600; color: var(--charcoal); }

/* The three service marks; combined, they nest into one symbol. */
.mark { display: inline-block; flex: none; border-radius: 50%; }
.mark--ring { width: 30px; height: 30px; border: 1px solid var(--charcoal); }
.mark--disc { width: 21px; height: 21px; background: var(--charcoal); box-shadow: 3px 3px 5px rgba(0, 0, 0, .28); }
.mark--dot { width: 7px; height: 7px; background: var(--gold-deep); }

/* Box: image on top, text underneath. Hover wipes the image up; selecting draws a frame around the box. */
.svc-box {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 366 / 354;
  padding: 0;
  border: 1px solid transparent;
  background: #dedede; /* a touch lighter than the page, as in the design */
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: box-shadow .5s var(--ease), border-color .5s ease;
}
/* Pressing a box draws its line: out from the circle along the bottom edge, then up both sides to the
   top (open at the top, as in the design). Unpressing retracts it the same way. */
.svc-box::before, .svc-box::after { content: ''; position: absolute; z-index: 2; pointer-events: none; }
.svc-box::before { /* bottom edge, growing out from the centre */
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 1px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform .4s cubic-bezier(.6, 0, .35, 1) .4s; /* when retracting, waits for the sides */
}
.svc-box::after { /* both sides, growing up from the bottom corners */
  inset: -1px;
  border: solid var(--blue);
  border-width: 0 1px;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s cubic-bezier(.6, 0, .35, 1);
}
.svc-box[aria-pressed="true"]::before { transform: scaleX(1); transition-delay: 0s; }
.svc-box[aria-pressed="true"]::after { transform: scaleY(1); transition-delay: .4s; }
.svc-box[aria-pressed="true"] { box-shadow: 0 12px 30px rgba(0, 0, 0, .13); }
.svc-box:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.svc-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--box) * .068);
  padding: calc(var(--box) * .1) calc(var(--box) * .13);
  overflow: hidden;
  transform: translateY(10px);
  transition: transform .9s var(--ease);
}
.svc-list { display: flex; flex-direction: column; gap: calc(var(--box) * .04); padding-left: calc(var(--box) * .13); font-size: clamp(11px, calc(var(--box) * .034), 12px); letter-spacing: .01em; }
.svc-list span::before { content: '\2022\00a0'; }
.svc-list { transition: color .5s ease; }
.svc-box[aria-pressed="true"] .svc-list { color: var(--gold-deep); }
.svc-desc { max-width: min(210px, 100%); font-size: clamp(11px, calc(var(--box) * .035), 12.5px); line-height: 1.3; }
.svc-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
}
.svc-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.7, 0, .2, 1); }
.svc-image--mark { display: flex; align-items: center; justify-content: center; background: #f2f2f2; }
.svc-image--mark img { width: 35%; height: auto; object-fit: contain; filter: drop-shadow(5px 7px 6px rgba(0, 0, 0, .28)); }
.svc-box:focus-visible .svc-image { clip-path: inset(0 0 100% 0); }
.svc-box:focus-visible .svc-text { transform: none; }
@media (hover: hover) {
  .svc-box:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .13); }
  .svc-box:hover .svc-image { clip-path: inset(0 0 100% 0); }
  .svc-box:hover .svc-image img { transform: translateY(-8%); }
  .svc-box:hover .svc-text { transform: none; }
}
/* Each service's mark sits under its box; selecting the box lifts it onto the box's bottom edge. */
.svc-boxwrap { position: relative; }
.svc-mark {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, calc(min(90px, calc(var(--room) * .1)) - 50%));
  transition: transform .7s var(--ease), width .5s var(--ease), height .5s var(--ease), border-color .5s ease, background-color .5s ease, opacity .4s ease;
}
.svc-mark.mark--ring { width: 22px; height: 22px; background: var(--stone); }
.svc-mark.mark--disc { box-shadow: none; }
.svc-mark.mark--dot { width: 21px; height: 21px; }
/* The circle rises onto the box's bottom edge on hover (and stays there once the box is selected). */
.svc-col.is-selected .svc-mark, .svc-box:focus-visible + .svc-mark { transform: translate(-50%, -50%); }
.svc-col.is-selected .svc-mark.mark--ring, .svc-box:focus-visible + .svc-mark.mark--ring { width: 30px; height: 30px; border-color: var(--blue); }
.svc-col.is-selected .svc-mark.mark--dot, .svc-box:focus-visible + .svc-mark.mark--dot { width: 8px; height: 8px; }
@media (hover: hover) {
  .svc-box:hover + .svc-mark { transform: translate(-50%, -50%); }
  .svc-box:hover + .svc-mark.mark--ring { width: 30px; height: 30px; border-color: var(--blue); }
  .svc-box:hover + .svc-mark.mark--dot { width: 8px; height: 8px; }
}
/* Once something is selected, the other circles hide unless their box is hovered. */
.svc.has-selection .svc-col:not(.is-selected) .svc-box:not(:hover):not(:focus-visible) + .svc-mark { opacity: 0; }

/* A selected box stays on its text. */
.svc-box[aria-pressed="true"] .svc-image { clip-path: inset(0 0 100% 0); }
.svc-box[aria-pressed="true"] .svc-image img { transform: translateY(-8%); }
.svc-box[aria-pressed="true"] .svc-text { transform: none; }

.svc-combo { display: flex; flex-direction: column; align-items: center; min-height: 110px; margin-top: min(52px, calc(var(--room) * .06)); text-align: center; }
.combo-mark { position: relative; width: 32px; height: 32px; margin-bottom: 18px; }
.combo-mark .mark {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .55s cubic-bezier(.3, 1.45, .5, 1), opacity .3s ease;
}
.combo-mark .mark--ring { border: 2px solid var(--blue); }
.combo-mark .mark--disc { box-shadow: none; }
.combo-mark .mark.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svc-package { display: none; }
.svc-package.is-active { display: block; animation: fade-up .5s var(--ease) both; }
.svc-package-name { font-size: 19px; font-weight: 600; letter-spacing: .005em; color: var(--gold-deep); }
.svc-package-desc { max-width: 660px; margin: 12px auto 0; font-size: 13px; color: var(--charcoal); }

.svc-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: calc(var(--box) * 366 / 354 * 3 + 84px); /* hint lines up with the first box */
  margin: min(46px, calc(var(--room) * .05)) auto 0;
}
.svc-hint { font-size: 12px; color: var(--gold-deep); }
/* GET STARTED is an ink button like Submit (see .btn-ink), in the design's size and type. */
.btn-ink.svc-start {
  width: 224px;
  height: 42px;
  font: 600 13px var(--sans);
  letter-spacing: .02em;
  /* Hidden until a service is selected; its space stays reserved so nothing jumps. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .55s var(--ease), visibility 0s linear .55s;
}
.svc.has-selection .svc-start {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease, transform .55s var(--ease), visibility 0s;
}
.svc-start:focus-visible { outline: 1px solid var(--charcoal); outline-offset: 4px; }

.svc-process {
  display: grid;
  grid-template-columns: 370px minmax(0, 370px);
  justify-content: center;
  column-gap: 44px;
  padding: 200px var(--gutter) 210px;
}
.svc-process-photo img { width: 100%; }
/* First paragraph beside the top of the photo, the rest lower down. */
.svc-process-text { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 128px; }
.svc-process-rest p + p { margin-top: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  margin: 0 15px 15px;
  padding: 64px 66px 56px;
  font-size: 11px;
  text-transform: uppercase;
}
.site-footer--grey { background: var(--charcoal); --f-label: var(--stone); --f-accent: var(--gold-deep); --f-logo: var(--stone); }
.site-footer--black { background: var(--ink); --f-label: var(--charcoal); --f-accent: var(--charcoal); --f-logo: var(--blue); }
.site-footer--framed { margin: 0; border: 15px solid var(--charcoal); border-top-width: 24px; background: var(--ink); --f-label: var(--charcoal); --f-accent: var(--charcoal); --f-logo: var(--blue); }
.f-label { position: absolute; margin: 0; color: var(--f-label); transition: opacity .3s; }
a.f-label:hover { opacity: .6; }
.f-name { top: 67px; left: 66px; }
.f-city { top: 67px; left: 210px; color: var(--f-accent); }
.f-discipline { top: 67px; right: 80px; }
.f-email { top: 49%; left: 66px; }
.f-instagram { top: 49%; right: 90px; }
.f-logo {
  position: relative;
  display: block;
  width: min(767px, 58%);
  margin: 0 auto;
  aspect-ratio: 1727 / 1382;
}
.f-logo-mark {
  position: absolute;
  inset: 0;
  background: var(--f-logo);
  -webkit-mask: url(/img/logo-mask.png?v=b9ffad51ca) center / contain no-repeat;
  mask: url(/img/logo-mask.png?v=b9ffad51ca) center / contain no-repeat;
}
.f-logo-square {
  position: absolute;
  left: 48.002%;
  top: 70.839%;
  width: 5.675%;
  height: 7.091%;
  background: var(--gold);
}
.f-credit {
  position: absolute;
  left: 66px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--f-accent);
  text-transform: none;
}
.f-mini { position: relative; display: block; width: 49px; aspect-ratio: 1727 / 1382; }

/* ---------- Contact dialog ---------- */
.contact {
  width: min(486px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 44px 38px 24px;
  border: 0;
  background: var(--field);
  color: #000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 22px 48px rgba(0, 0, 0, .2);
  overflow: auto;
}
.contact::backdrop { background: transparent; }
.contact[open] { animation: dialog-in .55s var(--ease) both; }
.contact[open]::backdrop { animation: fade-in .55s ease both; }
.contact.is-closing { animation: dialog-out .3s ease both; }
.contact.is-closing::backdrop { animation: fade-out .3s ease both; }
.contact-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 6px 8px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #3a3a3a;
  cursor: pointer;
}
.contact-title { margin-bottom: 31px; font-size: 11px; line-height: 1.3; }
.contact-title:focus { outline: none; }
.contact input,
.contact textarea {
  display: block;
  width: 100%;
  height: 45px;
  margin: 0 0 13px;
  padding: 0 10px;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background: transparent;
  font: 400 13px/1.25 var(--serif);
  color: #111;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s, box-shadow .25s;
}
.contact textarea { height: 93px; margin-top: 20px; padding-top: 11px; resize: none; }
.contact ::placeholder { color: #1d1d1d; opacity: 1; }
.contact input:focus, .contact textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.contact-form.was-validated :invalid { border-color: #a5483c; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.contact-email { margin-top: 1px; font-size: 9px; letter-spacing: .02em; }
.contact-status { min-height: 14px; margin-top: 10px; font-size: 11px; color: #8c3a2f; }
.contact-thanks { display: flex; flex-direction: column; justify-content: center; padding: 40px 0; box-sizing: border-box; font-size: 12px; line-height: 1.5; text-align: center; animation: fade-up .6s var(--ease) both; }
.contact-thanks p + p { margin-top: 18px; font-size: 10px; }
.contact-brand { margin-top: 30px; font-size: 11px; font-weight: 700; text-align: center; }

/* Submit button: rests off-white; on hover ink spots land and spread until it is solid off-black (ink.js) */
.btn-ink {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  width: 171px;
  height: 37px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--field-line);
  background: var(--paper);
  color: #fff;
  font: 400 13px var(--serif);
  cursor: pointer;
}
/* White text in difference mode reads dark on the off-white and light over the ink. */
.btn-ink .btn-label { position: relative; z-index: 1; mix-blend-mode: difference; }
.btn-ink .ink { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.btn-ink.is-inked { background: var(--ink-fill); box-shadow: none; }
.btn-ink[aria-busy="true"] { cursor: progress; }
.btn-ink:focus-visible { outline: 1px solid #000; outline-offset: 3px; }

/* ---------- 404 ---------- */
.not-found { padding: 0 var(--gutter) 200px; text-align: center; }
.not-found p { margin-top: 40px; }

/* ---------- Keyframes ---------- */
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(10px) scale(.99); } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .site-header { padding: 0 32px; }
  .story {
    grid-template-columns: 38% minmax(0, 1fr);
    grid-template-areas: "portrait centre" "closing blocks";
    column-gap: 40px;
    padding: 64px 40px 160px;
  }
  .story-name { margin-top: 40px; padding-left: 0; }
  .story-intro { margin-top: 32px; }
  .story-blocks { margin-top: 48px; }
  .story-block + .story-block { margin-top: 28px; }
  .svc-grid { gap: 28px; }
  .svc-text { gap: 16px; padding: 24px 28px; }
  .svc-list { gap: 9px; padding-left: 12px; font-size: 11px; }
  .svc-desc { font-size: 12px; }
  .svc-process { grid-template-columns: 300px minmax(0, 340px); column-gap: 48px; padding: 140px 40px; }
  .site-footer { padding: 64px 40px 56px; }
  .f-name, .f-email, .f-credit { left: 40px; }
  .f-city { left: 170px; }
  .f-discipline { right: 40px; }
  .f-instagram { right: 40px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  :root { --header-h: 84px; }
  .site-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
  }
  .nav-list { justify-content: space-between; gap: 0; }
  .submenu { left: -12px; padding: 2px 12px 12px; }
  .page-title { margin-top: 56px; font-size: 18px; }

  .hero { height: 62svh; min-height: 360px; }
  .intro { padding: 56px var(--gutter) 88px; }
  .cards { grid-template-columns: 1fr; gap: 44px; }

  .work { padding-top: 24px; }
  .work-cap { grid-template-columns: 1fr 1fr; }
  .cap-tagline { grid-column: 1 / -1; grid-row: 2; padding: 6px 0 0; text-align: left; }
  .work-item + .work-item { margin-top: 48px; }
  .work-item--right .work-link, .work-item--left .work-link { grid-template-columns: 1fr; }
  .work-side { flex-direction: row; flex-wrap: wrap; align-items: flex-end !important; column-gap: 16px; margin-bottom: 9px; padding: 0 !important; }
  .work-item--right .work-side .cap-id { padding-right: 0; }
  .cap-category { position: static; order: 3; flex-basis: 100%; margin-top: 4px; text-align: left !important; }
  .work-item--left .work-media { order: 0; }
  .work-media.ratio-wide { aspect-ratio: 4 / 3; }

  .project { padding-top: 24px; }
  .project-info { grid-template-columns: 1fr 1fr; row-gap: 4px; }
  .pi-category { grid-column: 1 / -1; grid-row: 2; padding: 0; text-align: left; }
  .g-strips { gap: 12px; }
  .g-strip { --row-h: 64vw; }

  .story {
    grid-template-columns: 1fr;
    grid-template-areas: "portrait" "centre" "blocks" "closing";
    padding: 32px 16px 96px;
  }
  .story-portrait { max-width: 392px; }
  .story-name { margin-top: 32px; }
  .story-blocks { margin-top: 28px; }
  .story-closing { margin-top: 28px; }

  .svc { --box: 354px; padding-top: 40px; }
  .svc-grid { grid-template-columns: minmax(0, 420px); gap: 120px; }
  .svc-head { margin-bottom: 14px; }
  .svc-text { gap: 20px; padding: 32px 36px; }
  .svc-list { gap: 11px; padding-left: 8px; font-size: 12px; }
  .svc-combo { margin-top: 48px; }
  .svc-actions { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .svc-hint { text-align: center; }
  .btn-ink.svc-start { width: min(320px, 100%); }
  .svc-process { grid-template-columns: 1fr; row-gap: 40px; padding: 72px 16px; }
  .svc-process-photo { max-width: 320px; }
  .svc-process-text { padding-bottom: 0; }
  .svc-process-rest { margin-top: 14px; }
  .site-footer--framed { margin: 0; border-width: 10px; }

  .site-footer { margin: 0 10px 10px; padding: 72px 16px 76px; font-size: 9px; }
  .f-name { top: 20px; left: 16px; }
  .f-city { top: 34px; left: 16px; }
  .f-discipline { top: 20px; right: 16px; }
  .f-email { top: auto; bottom: 46px; left: 16px; }
  .f-instagram { top: auto; bottom: 46px; right: 16px; }
  .f-credit { left: 16px; bottom: 14px; gap: 8px; }
  .f-mini { width: 32px; }
  .f-logo { width: 78%; }

  .contact { padding: 40px 20px 20px; }
  .btn-ink { width: 140px; }
}