/* portal-head.css: the one header for every page on portaldesign.com (2026-11-16).
 * Measured from the Framer header it replaces: 58px tall, logo 91x15 at x20 y21, 12px Uncut Sans
 * links, the whole bar sliding down 50px as it fades in on load, and the logo flipping over in 3D
 * on hover. White ink with a difference blend, so it reads black on white pages and white over the
 * black home hero. Case studies sit on brand colours, so there it uses the page's ink instead.
 * Loaded after portal-work.css on the static pages; these rules override the older header there. */
@font-face { font-family: "Uncut Sans Medium"; font-display: swap;
  src: url("/_assets/framerusercontent.com/assets/s9HxPLJHVbBpli9cgtgTJGTtotI.woff2") format("woff2"); }

header.pw-head {
  position: fixed; top: 0; left: 0; right: 0; height: 58px; z-index: 70; display: block; padding: 0; margin: 0;
  color: #FFFFFF; mix-blend-mode: difference; pointer-events: none;
  animation: pw-head-in 1s cubic-bezier(.16, 1, .3, 1) .2s both;
}
@keyframes pw-head-in { from { opacity: .001; transform: translateY(-50px); } to { opacity: 1; transform: none; } }
header.pw-head a { pointer-events: auto; cursor: pointer; }
header.pw-head .pw-logo { position: absolute; left: 20px; top: 21px; width: 91px; height: 15px; display: block; line-height: 0; perspective: 1200px; }
header.pw-head .pw-logo img {
  width: 91px !important; height: 15px !important; display: block; filter: none; transform-origin: 50% 50%;
  transform: rotateX(0deg) skewX(0deg); transition: transform .7s linear(0.000, 0.235, 0.687, 1.064, 1.239, 1.232, 1.129, 1.019, 0.952, 0.936, 0.955, 0.984, 1.007, 1.016, 1.014, 1.007, 1.000, 0.997, 0.996, 0.997, 0.999, 1.001, 1.001, 1.001, 1.000, 1.000, 1.000, 1.000, 1);
}
/* measured from Framer: the mark turns over on its horizontal axis and shears by the same angle, on
   a loose spring, so it tumbles past upside down and settles there while hovered */
header.pw-head .pw-logo:hover img, header.pw-head .pw-logo:focus-visible img { transform: rotateX(180deg) skewX(180deg); }
header.pw-head.is-ready { animation: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
header.pw-head.is-ready.is-hidden { transform: translateY(-58px); }
header.pw-head .pw-nav {
  position: absolute; top: 0; bottom: 0; left: calc(78px + 19.24vw); right: calc(11.52vw - 34px);
  display: flex; justify-content: space-between; align-items: center;
}
header.pw-head .pw-nav a {
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px; line-height: 1.2; font-weight: 400;
  letter-spacing: -.01em; color: inherit; text-decoration: none; padding: 20px 0; justify-self: auto; white-space: nowrap;
}
header.pw-head .pw-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
header.pw-head .pw-nav a[aria-current="page"] { letter-spacing: .02em; text-decoration: none; }

/* case studies: brand-coloured grounds, so plain ink rather than a blend */
body.portal-case header.pw-head { position: absolute; mix-blend-mode: normal; color: var(--v4-ink, #000); }
body.portal-case.pw-light header.pw-head .pw-logo img { filter: invert(1); }
body.portal-case.pw-dark header.pw-head .pw-logo img { filter: none; }

@media (max-width: 520px) {
  header.pw-head .pw-nav { left: 124px; right: 14px; }
  header.pw-head .pw-nav a { letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) {
  header.pw-head { animation: none; }
  header.pw-head .pw-logo img { transition: none; }
}

/* pages that came from Framer: its own header is emptied but keeps its height, the custom cursor is
 * gone so the normal one comes back, and the hero title has a text equivalent for readers */
header.pw-was-framer { display: block; height: 58px; visibility: hidden; pointer-events: none; }
[data-framer-root], [data-framer-root] * { cursor: auto !important; }
[data-framer-root] a, [data-framer-root] a *, [data-framer-root] button { cursor: pointer !important; }
.pw-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── home hero (rebuilt 2026-11-16) ─────────────────────────────────────
 * Framer assembled this in script. Same sequence in CSS: three images flip through a centre card,
 * the fourth expands to fill the screen, then the title and line fade in. Sizes are the measured
 * ones (200px type on a 1511px screen = 13.24vw). */
[data-framer-root] section#intro, [data-framer-root] section:has(img[src*="4gjDReAfKvbG3fLC0UZyqZudr58"]) { display: none !important; }
.pw-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #FFFFFF; margin: 0; }
.pw-hero__stage { position: absolute; inset: 0; transform-origin: 50% 50%; animation: pw-stage .55s cubic-bezier(.2, .8, .2, 1) 1.8s both; }
@keyframes pw-stage { from { transform: scale(.25); } to { transform: none; } }
.pw-hero__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 50%;
  animation: pw-flip .4s cubic-bezier(.2, .8, .2, 1) both;
}
.pw-hero__stage img:nth-child(1) { animation-delay: .1s; }
.pw-hero__stage img:nth-child(2) { animation-delay: .4s; }
.pw-hero__stage img:nth-child(3) { animation-delay: .7s; }
.pw-hero__stage img:nth-child(4) { animation-delay: 1s; object-position: 50% 50%; }
@keyframes pw-flip { from { transform: perspective(1200px) scale(0) rotateX(-90deg); } to { transform: none; } }
.pw-hero__title, .pw-hero__tag { margin: 0; color: #FFFFFF; font-weight: 400; animation: pw-fade 1s cubic-bezier(.19, 1, .22, 1) 2.4s both; }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
.pw-hero__a, .pw-hero__b { position: absolute; display: block; font-size: 13.24vw; white-space: nowrap; }
.pw-hero__a { left: 15.9vw; top: 8.4vh; font-family: "Rethink Sans", "Helvetica Neue", Arial, sans-serif; line-height: .9; letter-spacing: -.05em; }
.pw-hero__b { right: 5.6vw; bottom: 3.4vh; font-family: "Nyght Serif Light Italic", Georgia, serif; line-height: .9; letter-spacing: -.04em; }
.pw-hero__tag { position: absolute; left: 26vw; top: 48.5%; font-family: "Nyght Serif Light Italic", Georgia, serif; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
body:has(.pw-hero) header.pw-head { animation-delay: 2.2s; }
/* tall screens: keep the figure and the doorway in frame, and lift the line clear of the floor band */
@media (max-aspect-ratio: 1/1) {
  .pw-hero__stage img:nth-child(4), .pw-hero__film { object-position: 17% 50%; }
  .pw-hero__tag { left: 15.9vw; top: calc(8.4vh + 15vw); }
}
@media (max-width: 760px) {
  .pw-hero__a, .pw-hero__b { font-size: 21vw; }
  .pw-hero__a { left: 5vw; top: 12vh; }
  .pw-hero__b { right: 5vw; bottom: 7vh; }
  .pw-hero__tag { left: 5vw; right: 5vw; top: calc(12vh + 23vw); bottom: auto; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-hero__stage, .pw-hero__stage img, .pw-hero__title, .pw-hero__tag { animation: none; }
  body:has(.pw-hero) header.pw-head { animation: none; }
}
/* tickers are shown even before the script starts them moving */
[data-framer-root] section[style*="opacity:0"]:has(> ul[style*="will-change:transform"]) { opacity: 1 !important; }
/* Framer clipped wide tickers at the page edge in script; do it here so nothing scrolls sideways */
html:has([data-framer-root]), body:has([data-framer-root]) { overflow-x: clip; }

/* ── free design sprint (home and contact, 2026-11-16) ─────────────────
 * Portal's label rail and content column: a small label at the left edge, the offer set as one
 * display paragraph, four one-line options on a shared baseline, one small pill. */
.pw-sprint {
  box-sizing: border-box; width: 100%; display: grid; grid-template-columns: minmax(0, 31.5%) minmax(0, 1fr);
  padding: clamp(96px, 12vw, 180px) 20px clamp(96px, 12vw, 180px); background: #FFFFFF; color: #000000;
  font-family: "Rethink Sans", "Helvetica Neue", Arial, sans-serif; position: relative; z-index: 2;
}
.pw-sprint * { box-sizing: border-box; }
.pw-sprint__label { margin: 14px 0 0; font-family: "Nyght Serif Light Italic", Georgia, serif; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.pw-sprint h2 { margin: 0; font-weight: 400; font-size: clamp(30px, 3.8vw, 55px); line-height: 1.04; letter-spacing: -.04em; max-width: 21ch; }
.pw-sprint h2 i { font-family: "Nyght Serif Light Italic", Georgia, serif; font-style: normal; letter-spacing: -.02em; }
.pw-sprint__lede { margin: 28px 0 0; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; letter-spacing: -.01em; color: #2B2B2B; max-width: 44ch; }
.pw-sprint__list { list-style: none; margin: 64px 0 0; padding: 24px 0 0; border-top: 1px solid #E2E2E2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; max-width: 980px; }
.pw-sprint__list strong { display: block; font-weight: 500; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.pw-sprint__list span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: #6B6B6B; max-width: 24ch; }
.pw-sprint__cta {
  display: inline-block; margin-top: 56px; padding: 14px 24px; border-radius: 999px; background: #000000; color: #FFFFFF !important;
  text-decoration: none; font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.2; letter-spacing: .02em;
}
.pw-sprint__cta:hover { background: #2B2B2B; }
@media (max-width: 1000px) { .pw-sprint__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pw-sprint { grid-template-columns: minmax(0, 1fr); padding: 80px 20px; }
  .pw-sprint__label { margin: 0 0 20px; }
  .pw-sprint__list { margin-top: 44px; }
  .pw-sprint__cta { margin-top: 40px; }
}
/* on phones the home page orders its sections in CSS; the sprint keeps the booking section's slot */
@media (max-width: 809px) { .framer-er1NG .pw-sprint { order: 6; } }

/* ── Home: service panels (2026-11-17, second layout). Each "What we do" film opens one: the film
 * on the left, and on the right a title, one display paragraph and three labelled rows. ───────── */
[data-pw-svc], [data-pw-svc] * { cursor: pointer !important; }
[data-pw-svc]:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -6px; }
.pw-svc-plus { display: inline-block; margin-left: .18em; font-weight: 300; transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
[data-pw-svc]:hover .pw-svc-plus, [data-pw-svc]:focus-visible .pw-svc-plus { transform: rotate(90deg); }
dialog.pw-svc {
  border: 0; padding: 0; margin: auto; width: min(1320px, calc(100vw - 40px)); height: min(860px, calc(100dvh - 40px)); max-width: none; max-height: none;
  background: #FFFFFF; color: #000000; overflow: hidden;
  font-family: "Rethink Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
dialog.pw-svc, dialog.pw-svc * { box-sizing: border-box; }
dialog.pw-svc::backdrop { background: rgba(0, 0, 0, .78); }
dialog.pw-svc[open] { animation: pw-svc-in .5s cubic-bezier(.19, 1, .22, 1); }
dialog.pw-svc[open]::backdrop { animation: pw-fade .3s ease; }
@keyframes pw-svc-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pw-svc__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: 100%; }
.pw-svc__media { position: relative; background: #000000; overflow: hidden; }
.pw-svc__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-svc__body { position: relative; display: flex; flex-direction: column; padding: 44px 48px 44px; overflow: auto; overscroll-behavior: contain; }
.pw-svc__close {
  position: absolute; top: 20px; right: 24px; border: 0; background: none; padding: 8px 0; cursor: pointer; color: #000000;
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif; font-size: 12px; letter-spacing: .02em;
}
.pw-svc__close:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-svc__label { margin: 0 0 20px; font-family: "Nyght Serif Light Italic", Georgia, serif; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.pw-svc h2 { margin: 0; font-size: clamp(40px, 4.6vw, 68px); line-height: .95; letter-spacing: -.05em; font-weight: 400; }
.pw-svc h2 i { font-family: "Nyght Serif Light Italic", Georgia, serif; font-style: normal; letter-spacing: -.03em; white-space: nowrap; }
.pw-svc__lede { margin: 24px 0 40px; max-width: 36ch; font-size: clamp(19px, 1.65vw, 23px); line-height: 1.25; letter-spacing: -.02em; text-wrap: pretty; }
.pw-svc__rows { margin: auto 0 0; }
.pw-svc__rows > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 16px; padding: 16px 0; border-top: 1px solid #E2E2E2; }
.pw-svc dt { margin: 0; padding-top: 3px; font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.3; color: #6B6B6B; }
.pw-svc dd { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.pw-svc ul { list-style: none; margin: 0; padding: 0; }
.pw-svc li { margin: 0 0 4px; } .pw-svc li:last-child { margin: 0; }
.pw-svc li a { color: #000000; text-decoration: none; }
.pw-svc li a::after { content: " ↗"; font-size: .8em; opacity: 0; transition: opacity .2s; }
.pw-svc li a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pw-svc li a:hover::after { opacity: 1; }
.pw-svc__cta {
  align-self: flex-start; display: inline-block; margin-top: 28px; padding: 14px 24px; border-radius: 999px; background: #000000; color: #FFFFFF; text-decoration: none;
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif; font-size: 13px; line-height: 1.2; letter-spacing: .02em;
}
.pw-svc__cta:hover { background: #2B2B2B; }
html.pw-svc-open { overflow: hidden; }
@media (max-width: 900px) {
  dialog.pw-svc { width: 100vw; height: 100dvh; margin: 0; overflow: auto; }
  .pw-svc__in { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 100%; grid-template-rows: auto 1fr; }
  .pw-svc__media { aspect-ratio: 16 / 9; }
  .pw-svc__body { padding: 28px 20px 40px; overflow: visible; }
  .pw-svc__close { position: fixed; top: 12px; right: 16px; color: #FFFFFF; mix-blend-mode: difference; z-index: 2; }
  .pw-svc__lede { margin-bottom: 32px; }
  .pw-svc__rows > div { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { dialog.pw-svc[open], dialog.pw-svc[open]::backdrop { animation: none; } .pw-svc-plus { transition: none; } }

/* Approach: the sideways services row sits in the middle of the screen while it is pinned, clear of
 * the navigation, and the last words of the engagements line take the italic face. */
[data-framer-root] .framer-1nyamdc { top: max(72px, calc((100vh - 77.0023vh) / 2)); }
.portal-engagements-intro i { font-family: "Nyght Serif Light Italic", Georgia, serif; font-style: normal; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 640px) { .portal-engagements-intro i { white-space: normal; } }

/* Home: once the opening has finished, the still gives way to the same picture as a looping film.
 * The still is the film's first frame, and the film is shown with no fade, so nothing visibly changes. */
.pw-hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; }
.pw-hero__film.is-on { opacity: 1; }

/* Footer (2026-11-17): no "Design Studio" line; the logo sits at the left edge and the email at the right. */
.framer-TGVHi .framer-1axw35w, .framer-TGVHi .framer-sau7eq { display: none !important; }
.framer-TGVHi .framer-1gfx00, .framer-TGVHi .framer-b0ff0p { place-content: center flex-end !important; justify-content: flex-end !important; }
.pw-foot .pw-foot__studio { display: none !important; }
.pw-foot { display: flex !important; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 24px; }