/* Hallmark · checked: 2026-10-28 · genre: editorial (inferred)
 * floor: fixed 7a, 34, 44d, 48, 50, 54, 55a, 62, 63, 67 · structural: 3 printed (42, 58, 69)
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · waive 12 · the overshoot sits only on the blue plus of the logo and the toggles · the plus popping up is the bfs+ sign, never a control state */
/* Hallmark · waive 11 · only the small project icons tilt; the design photos change colour, never scale · the tilt echoes the popping plus of the logo */
/* Hallmark · waive 38iii · the blue half appears once, in the hero, as the second question · the two questions either side of the character are the page signature */
/* Hallmark · waive 26b · no form control and no aria-disabled on any page using this sheet · the only controls are the Book a call links, the language links and the Menu button, and none of them is ever disabled */
/* Hallmark · dismissed 49 · the long part of each booking label is the screen-reader note; the visible label is three words */
/* Hallmark · dismissed 67 · SPROVA is the studio's wordmark, spelled in capitals everywhere it appears */
/* brunoseixas.com: the SPROVA grammar on a bone ground.
   Helvetica, pure blue fields, 1px rules, line illustrations, and the blue plus as the one sign. */
:root {
  --ground: #faf9f6;
  --ground-2: #f0eee8;
  --ink: #101010;
  --line: #000;
  --muted: #5b5b56;
  --rule: #d8d6ce;
  --blue: #0000ff;
  --on-blue: #fcfcff;
  --on-blue-2: #d4d4ff;
  --rule-blue: rgba(255, 255, 255, .3);
  --sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* side gutter: 4% up to 1440px, then the content holds at 1520px and the gutters grow */
  --pad: max(4%, calc(50% - 760px));
  --head: 84px;
}

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 24px); scrollbar-color: var(--ink) var(--ground); }
body { margin: 0; overflow-x: clip; background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .28em; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--blue); color: var(--on-blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.on-blue :focus-visible { outline-color: var(--on-blue); }
.on-blue ::selection { background: var(--on-blue); color: var(--blue); }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--on-blue); padding: 10px 14px; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; line-height: 1.5; }
.nw { white-space: nowrap; }

/* The plus: the brand sign, the idea popping up, and every toggle on the page. */
.plus { display: inline-block; color: var(--blue); transform-origin: 50% 55%; }
.on-blue .plus { color: var(--on-blue); }
.plus.pop { animation: pop .8s cubic-bezier(.2, 1.4, .35, 1) both; }
@keyframes pop {
  0% { transform: scale(0) rotate(-120deg); }
  60% { transform: scale(1.22) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Header */
.header { position: sticky; top: 0; z-index: 50; height: var(--head); display: flex; align-items: center; gap: 28px; padding: 0 var(--pad); background: var(--ground); border-bottom: 1px solid var(--rule); }
/* The logo: bfs+ in Helvetica Bold, the plus in blue. */
.logo { font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.035em; white-space: nowrap; text-decoration: none; }
.logo:hover .plus { animation: pop .7s cubic-bezier(.2, 1.4, .35, 1); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav a { font-size: 14px; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--blue); }
.langs { display: flex; gap: 0; }
/* 44px-tall targets; the underline sits close to the letters, not at the bottom of the box */
.langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 44px; padding: 0 4px; font-size: 12px; color: var(--muted); text-decoration: none; }
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.cta-head { font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; border-bottom: 1px solid; padding: 6px 0; }
.cta-head:hover { color: var(--blue); }
.nav-book { display: none; }
.after { margin-top: 40px; }
.about-figure { margin: 0; }
.about-figure figcaption { margin-top: 10px; color: var(--muted); }
.menu-btn { display: none; align-items: center; gap: 12px; margin-left: auto; padding: 10px 0; background: none; border: 0; font-size: 14px; font-weight: 700; }
.menu-btn i { display: grid; gap: 6px; width: 30px; }
.menu-btn i::before, .menu-btn i::after { content: ""; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s; }
.menu-btn i::after { width: 70%; justify-self: end; }
.menu-open .menu-btn i::before { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn i::after { width: 100%; transform: translateY(-4px) rotate(-45deg); }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; gap: 18px; padding: 17px 22px; background: var(--ink); color: var(--on-blue); font-weight: 700; font-size: 15px; text-decoration: none; transition: background .2s, transform .1s; }
.btn:hover { background: var(--blue); }
.btn-white { background: var(--on-blue); color: var(--blue); }
.btn-white:hover { background: var(--ink); color: var(--on-blue); }
.link { font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1px solid; padding: 6px 0; }
.link:hover { color: var(--blue); }
.on-blue .link:hover { color: var(--on-blue-2); }
.btn:active, .link:active, .cta-head:active, .menu-btn:active { transform: translateY(1px); }

/* Hero: the offer on the left, the character on the right, big. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: auto 1fr; column-gap: 5%; min-height: min(calc(100svh - var(--head)), 900px); padding: 40px var(--pad) 48px; }
.hero > * { position: relative; z-index: 1; }
.hero .hero-gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.hero-main { grid-column: 1; align-self: center; padding: 28px 0 12px; }
.hero h1 { margin: 0 0 40px; text-transform: uppercase; font-weight: 700; line-height: 1; }
.hero h1 .row { display: table; white-space: nowrap; font-size: clamp(46px, 6.6vw, 190px); letter-spacing: -.07em; }
.hero h1 .row-2 { color: var(--blue); }
.hero h1 .plus { animation: pop .8s cubic-bezier(.2, 1.4, .35, 1) 1.45s both; }
.lead { max-width: 24ch; font-size: clamp(22px, 2vw, 32px); font-weight: 700; line-height: 1.16; letter-spacing: -.03em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 34px; margin-top: 32px; }
.credit { margin-top: 24px; max-width: 48ch; font-size: 14px; line-height: 1.55; }
.hero-figure { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; width: min(100%, 600px); cursor: pointer; border-radius: 8px; }

/* The character: a small scene driven by bfs-hero.js. Without the script it is the still drawing. */
.idea { position: relative; aspect-ratio: 1; }
.idea .enter, .idea .char, .idea .mouths, .idea .l-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.idea .mouths { overflow: visible; }
.mouths ellipse, .mouths path { fill: none; stroke: var(--line); stroke-width: 15; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.idea .char { transform-origin: 42% 96%; }
/* Each part sits at its place on the 1254px drawing (percentages of the square). */
.idea .l-plus, .idea .l-q1, .idea .l-q2, .idea .l-sparks, .idea .l-brows, .idea .look, .idea .l-mouth { position: absolute; height: auto; }
.idea .l-plus { left: 72.568%; top: 19.458%; width: 11.164%; }
.idea .l-q1 { left: 55.263%; top: 10.287%; width: 8.533%; }
.idea .l-q2 { left: 62.360%; top: 18.501%; width: 6.619%; }
.idea .l-sparks { left: 78.309%; top: 12.600%; width: 11.882%; }
.idea .l-brows { left: 33.174%; top: 43.780%; width: 22.408%; transition: transform .35s ease; }
.idea .look { left: 36.364%; top: 48.405%; width: 19.059%; height: 5.263%; transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.idea .wide, .idea .l-eyes { display: block; width: 100%; height: 100%; transform-origin: 50% 12%; }
.idea .l-eyes { transition: transform .1s ease-out; }
.idea .l-mouth { left: 42.265%; top: 60.128%; width: 6.380%; }

/* 1. The character pops in, then frowns. */
.idea.run .enter { animation: enter .8s cubic-bezier(.2, 1.35, .35, 1) both; }
.idea.run .l-q1, .idea.run .l-q2, .idea.run .l-plus, .idea.run .l-sparks { opacity: 0; }
.idea.puzzled .l-brows { transform: translateY(10%) rotate(-2.5deg); }
/* 2. Two questions. */
.idea.ask1 .l-q1 { opacity: 1; animation: ask .7s cubic-bezier(.2, 1.5, .4, 1) both, wobble 2.6s ease-in-out .7s infinite; }
.idea.ask2 .l-q2 { opacity: 1; animation: ask .7s cubic-bezier(.2, 1.5, .4, 1) both, wobble 2.2s ease-in-out .7s infinite; }
/* 3-4. The answer: the plus, eyes wide, "o", a smile; the questions go. */
.idea.answered .l-plus { opacity: 1; animation: pop .8s cubic-bezier(.2, 1.4, .35, 1) both; }
.idea.answered.alive .l-plus { animation: pop .8s cubic-bezier(.2, 1.4, .35, 1) both, drift 3.6s ease-in-out 1s infinite; }
.idea.answered .l-sparks { opacity: 1; animation: spark .9s ease-out both; }
.idea.answered .l-q1, .idea.answered .l-q2 { animation: gone .45s ease-in both; }
.idea.answered .l-brows { transform: translateY(-24%); transition: transform .3s cubic-bezier(.3, 1.6, .4, 1); }
.idea.answered .wide { animation: widen .7s cubic-bezier(.3, 1.4, .4, 1) both; }
.idea.answered .l-mouth { opacity: 0; }
.idea.answered .m-o { animation: oh .5s ease both; }
.idea.answered .m-smile { stroke-dasharray: 100; animation: smile .6s cubic-bezier(.3, 1.2, .4, 1) .38s both; }
.idea.answered .char { animation: nod .9s cubic-bezier(.3, 1.3, .4, 1) both; }
.idea.answered.alive .char { animation: nod .9s cubic-bezier(.3, 1.3, .4, 1) both, breathe 5s ease-in-out 1.2s infinite; }
.idea.blink .l-eyes { transform: scaleY(.1); transition: transform .06s ease-in; }
.hero.scene h1 .plus { animation: none; transform: scale(0); }
.hero.scene.answered h1 .plus { animation: pop .8s cubic-bezier(.2, 1.4, .35, 1) .25s both; }

@keyframes enter {
  0% { opacity: 0; transform: translateY(9%) scale(.9); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ask {
  0% { opacity: 0; transform: translateY(14px) scale(.4) rotate(-18deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(0); }
  50% { transform: translateY(-2px) rotate(7deg); }
}
@keyframes gone {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-18px) scale(.5) rotate(20deg); }
}
@keyframes spark {
  0% { opacity: 0; transform: scale(.5); }
  45% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes widen {
  0% { transform: none; }
  35% { transform: scale(1.14); }
  100% { transform: scale(1.04); }
}
@keyframes oh {
  0% { opacity: 0; transform: scale(.4); }
  20% { opacity: 1; transform: scale(1.1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.8); }
}
@keyframes smile {
  0% { opacity: 1; stroke-dashoffset: 100; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes nod {
  0% { transform: none; }
  30% { transform: translateY(-1.5%) rotate(-2.5deg); }
  100% { transform: none; }
}
@keyframes breathe {
  0%, 100% { transform: none; }
  50% { transform: translateY(-.5%) scale(1.008); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Home hero, "Dialogue": the two questions either side of the character, its head at the centre of the page,
   the sentence and the booking below. Symmetric columns; only the character moves. */
.hero.hero-d { --fw: clamp(280px, 35vw, 580px); grid-template-columns: minmax(0, 1fr) calc(var(--fw) * 1.04) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: clamp(12px, 2.4vw, 48px); row-gap: clamp(20px, 3.5vh, 44px); padding: clamp(20px, 4vh, 48px) var(--pad) clamp(36px, 6vh, 72px); }
.hero-d .q { margin: 0; font-weight: 700; font-size: clamp(32px, 4.5vw, 112px); line-height: 1; letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; }
.hero-d .q-left { grid-column: 1; grid-row: 1; text-align: right; }
.hero-d .q-right { grid-column: 3; grid-row: 1; text-align: left; color: var(--blue); }
/* the drawing's head sits at 38.5% of its square: shift it so the head, not the square, is centred */
.hero-d .hero-figure { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; width: var(--fw); margin: 0 0 0 calc(var(--fw) * .136); }
.hero-d .under { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.hero-d .lead { max-width: 36ch; text-wrap: balance; font-size: clamp(19px, 1.7vw, 26px); }
.hero-d .actions { margin-top: 0; justify-content: center; }

/* Expressions: where the character looks, its brows, and the plus's other parts (bfs-hero.js) */
.idea .look { transform: translate(calc(var(--lx, 0px) + var(--gx, 0%)), calc(var(--ly, 0px) + var(--gy, 0%))); transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.idea.gaze-l { --gx: -8%; }
.idea.gaze-r { --gx: 8%; }
.idea.gaze-l .l-brows { transform: translateY(-14%) rotate(3deg); }
.idea.gaze-r .l-brows { transform: translateY(-14%) rotate(-3deg); }
.idea.think .l-brows { transform: translateY(10%) rotate(-2.5deg); }
.idea.annoyed .l-brows { transform: translateY(18%) rotate(4deg); transition: transform .2s; }
.idea.wow .wide { animation: widen .7s cubic-bezier(.3, 1.4, .4, 1) both; }
.idea.happy .l-brows { transform: translateY(-26%); }
.idea.annoyed .m-smile, .idea.wow .m-smile { opacity: 0 !important; animation: none !important; }
.idea.answered.annoyed .l-mouth { opacity: 1; }
.idea.wow .m-o { animation: oh .9s ease both; }
.idea.plus-away .l-plus, .idea.plus-away .l-sparks { opacity: 0 !important; animation: none !important; transition: opacity .15s; }
.idea.times .l-plus { transform: rotate(45deg) scale(1.08) !important; transition: transform .35s cubic-bezier(.3, 1.5, .4, 1); }
.idea .fx { position: absolute; inset: 0; pointer-events: none; }
.fx-plus { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); }
.fx-plus::before, .fx-plus::after { content: ""; position: absolute; background: var(--blue); border-radius: 22% / 50%; }
.fx-plus::before { left: 0; right: 0; top: 35%; height: 30%; }
.fx-plus::after { top: 0; bottom: 0; left: 35%; width: 30%; border-radius: 50% / 22%; }
.idea.shut .l-eyes { transform: scaleY(.1); transition: transform .12s ease-in; }
.idea.starry .l-eyes { opacity: 0; transition: opacity .12s; }
.idea.inflate .l-plus { animation: inflate 1.5s cubic-bezier(.35, 0, .5, 1) both !important; }
.idea.face.inflate .l-plus { transform-origin: 15% 50%; } /* grows away from the face */
.idea.inflate .l-sparks { opacity: 0 !important; animation: none !important; transition: opacity .2s; }
@keyframes inflate {
  0% { transform: none; }
  20% { transform: scale(1.3) rotate(-7deg); }
  40% { transform: scale(1.55) rotate(6deg); }
  60% { transform: scale(1.8) rotate(-5deg); }
  80% { transform: scale(2.05) rotate(4deg); }
  100% { transform: scale(2.2) rotate(0); }
}

/* The About portrait: the same character, closer (640px drawing) */
.idea.face { cursor: pointer; }
.idea.face .char { transform-origin: 41% 90%; }
.idea.face .l-plus { left: 81.719%; top: 46.719%; width: 14.688%; }
.idea.face .l-brows { left: 37.344%; top: 46.094%; width: 31.406%; }
.idea.face .look { left: 40.312%; top: 52.969%; width: 27.187%; height: 7.969%; }
.idea.face .l-mouth { left: 49.375%; top: 69.062%; width: 10%; }
.face .mouths ellipse, .face .mouths path { stroke-width: 11; }

/* Sections */
.section { padding: 112px var(--pad); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8%; align-items: start; margin-bottom: 64px; }
/* title and text start on the same line: the tops of their capitals, not of their line boxes */
.section-head h2, .section-head p { text-box: trim-start cap alphabetic; }
h2 { font-size: clamp(38px, 4.6vw, 76px); font-weight: 700; line-height: .96; letter-spacing: -.05em; }
.section-head p { max-width: 40ch; font-size: clamp(19px, 1.6vw, 24px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.on-blue { background: var(--blue); color: var(--on-blue); }
.on-blue .section-head p { color: var(--on-blue-2); }
.white-line { filter: brightness(0) invert(1); }

/* Method: three questions, in order */
.questions li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 124px; gap: 3%; align-items: start; padding: 30px 0; border-top: 1px solid var(--ink); }
.questions li:last-child { border-bottom: 1px solid var(--ink); }
/* in every row the number, the title and the text start on one line: the tops of their capitals */
.questions h3, .questions p, .case-co, .cases li > p, .project-list strong, .project-list .d { text-box: trim-start cap alphabetic; }
.project-list strong, .project-list .d { text-box: trim-both cap alphabetic; }
.questions h3 { font-size: clamp(30px, 4.2vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -.06em; text-transform: uppercase; }
.questions p { max-width: 40ch; font-size: 18px; line-height: 1.5; }
.questions img { justify-self: end; width: 124px; }

/* Offers */
.offers { background: var(--ground-2); }
.offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.offer { display: flex; flex-direction: column; padding: 40px 6% 46px 0; }
.offer + .offer { padding-left: 6%; padding-right: 0; border-left: 1px solid var(--ink); }
.offer-top { display: flex; justify-content: space-between; gap: 24px; min-height: 150px; }
.offer h3 { margin-top: 4px; max-width: 13ch; font-size: clamp(30px, 3vw, 46px); line-height: 1; letter-spacing: -.045em; }
.offer-top img { flex: none; align-self: flex-start; width: 150px; height: auto; margin-top: -10px; }
.offer > p { margin-top: 26px; max-width: 46ch; font-size: 17px; line-height: 1.6; }
.offer ul { margin-top: 26px; }
.offer li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16px; }
.offer li::before { content: "+"; margin-right: 12px; color: var(--blue); font-weight: 700; }
.offer .when { margin-top: auto; padding-top: 30px; font-weight: 700; font-size: 15px; line-height: 1.5; }
.offer .when span { display: block; }
.offer .when span + span { font-weight: 400; }

/* Results, in blue */
.cases li { display: grid; grid-template-columns: 132px minmax(0, 1.5fr) minmax(0, 1fr); gap: 4%; align-items: start; padding: 34px 0; border-top: 1px solid var(--rule-blue); }
.cases li:last-child { border-bottom: 1px solid var(--rule-blue); }
.cases img { width: 132px; }
.case-co { font-size: 15px; font-weight: 700; }
.case-co span { margin-left: .6em; font-weight: 400; color: var(--on-blue-2); }
.case-co a { color: var(--on-blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.case-co a:hover { color: var(--on-blue-2); }
.about-copy a.co { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.about-copy a.co:hover { color: var(--blue); }
.case-line { margin-top: 12px; font-size: clamp(28px, 3.1vw, 50px); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; }
.cases li > p { font-size: 16px; line-height: 1.55; color: var(--on-blue-2); }
.results-note { margin-top: 30px; font-size: 14px; line-height: 1.5; color: var(--on-blue-2); }

/* Current engagement: one consulting mission, on the ground, before the in-house results */
.mission-case { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4%; align-items: start; padding: 34px 0 40px; border-top: 1px solid var(--ink); }
.mission-case img { width: 132px; }
.mission .case-co a { color: var(--ink); }
.mission .case-co a:hover { color: var(--blue); }
.mission .case-co span { color: var(--muted); }
.mission .case-line { max-width: none; text-wrap: balance; } /* one line where it fits; balanced lines where it doesn't */
.fronts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 3%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.fronts li { padding: 24px 0 30px; }
.fronts h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.15; letter-spacing: -.025em; }
.fronts p { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.mission-note { margin-top: 24px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.mission-note a { color: inherit; }
.mission-note a:hover { color: var(--blue); }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 8%; align-items: start; }
.about-figure { position: sticky; top: calc(var(--head) + 40px); width: min(100%, 440px); }
.about-copy h2 { margin-bottom: 36px; }
.about-copy p { max-width: 54ch; font-size: 20px; line-height: 1.55; }
.about-copy p + p { margin-top: 18px; }
.facts { margin-top: 40px; border-top: 1px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.facts dt { padding-top: 3px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.facts dd { font-size: 16px; line-height: 1.5; }
.about-links { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px; }

/* Three pieces of design work */
.work-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
.work-strip figure { margin: 0; }
/* White-and-blue duotone at rest (the grey photo screened over the blue), real colour on hover or focus.
   Corners slightly different on each photo, as if cut by hand. */
.work-strip a { display: block; overflow: hidden; background: var(--blue); border-radius: 22px 16px 26px 14px / 16px 24px 14px 22px; }
.work-strip figure:nth-child(2) a { border-radius: 16px 24px 14px 22px / 22px 14px 26px 16px; }
.work-strip figure:nth-child(3) a { border-radius: 26px 14px 20px 18px / 14px 22px 18px 26px; }
.work-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: screen;
  transition: filter .4s ease-out; }
.work-strip a:hover img, .work-strip a:focus-visible img { filter: none; mix-blend-mode: normal; }
.work-strip figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14px; }
.work-strip figcaption span { color: var(--muted); text-align: right; }

/* Projects */
.projects { background: var(--ground-2); }
.project-list a { display: grid; grid-template-columns: 76px minmax(0, .8fr) minmax(0, 1.2fr); gap: 3%; align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); text-decoration: none; }
.project-list li:last-child a { border-bottom: 1px solid var(--rule); }
.project-list img { width: 76px; transition: transform .45s cubic-bezier(.2, 1.4, .35, 1); }
.project-list strong { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.035em; }
.project-list .d { max-width: 60ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.project-list a:hover strong { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.project-list a:hover img { transform: rotate(-8deg) scale(1.08); }

/* Questions */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8%; }
details { border-top: 1px solid var(--ink); }
details:last-child { border-bottom: 1px solid var(--ink); }
summary { display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
summary::-webkit-details-marker { display: none; }
summary .plus { flex: none; font-size: 30px; line-height: .75; transition: transform .35s cubic-bezier(.2, 1.4, .35, 1); }
details[open] summary .plus { transform: rotate(45deg); }
summary:hover { color: var(--blue); }
details p { max-width: 60ch; padding-bottom: 24px; font-size: 17px; line-height: 1.6; }

/* Contact, in blue */
.contact h2 { margin: 0 0 44px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.contact h2 .row { display: table; white-space: nowrap; font-size: clamp(64px, 11vw, 170px); letter-spacing: -.07em; }
/* Title stacked on two lines over the text, the character large beside it */
.contact-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 3%; align-items: center; }
.contact .lead { max-width: 32ch; }
/* The character, large, centred on the title and the text together */
.contact-figure { justify-self: center; align-self: center; width: 112%; max-width: none; height: auto; margin-right: -6%; }

/* Footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; padding: 30px var(--pad); font-size: 13px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.footer nav a { text-decoration: none; }
.footer nav a:hover { color: var(--blue); }

@media (max-width: 1100px) {
  .fronts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fronts li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .hero-figure { grid-column: 1; grid-row: 2; justify-self: center; width: min(70vw, 480px); margin-top: 12px; }
  .hero-main { grid-row: 3; }
}

@media (max-width: 1180px) {
  .js .nav { position: fixed; inset: var(--head) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px var(--pad) 28px; background: var(--ground); border-bottom: 1px solid var(--ink); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s, visibility .2s; }
  .js .nav a { font-size: 26px; font-weight: 700; letter-spacing: -.03em; padding: 10px 0; }
  .js .menu-open .nav { transform: none; opacity: 1; visibility: visible; }
  .js .nav .nav-book { display: block; margin-top: 8px; color: var(--blue); }
  .js .menu-btn { display: inline-flex; }
  /* without the script: the links wrap under the logo instead of hiding behind a menu that cannot open */
  html:not(.js) .header { flex-wrap: wrap; height: auto; padding-block: 16px; }
  html:not(.js) .nav { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 20px; margin-left: 0; }
}

@media (max-width: 760px) {
  :root { --pad: 6%; --head: 72px; }
  .header { gap: 16px; }
  .logo { font-size: 26px; }
  .cta-head { display: none; }
  .langs { margin-left: auto; }
  .menu-btn { margin-left: 4px; }
  .nav { padding-left: var(--pad); }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; padding-top: 18px; }
  .hero-meta { flex-direction: column; gap: 2px; font-size: 12px; }
  .hero-figure { grid-column: 1; grid-row: 2; justify-self: center; width: min(58vw, 250px); margin-top: 0; }
  .hero-main { grid-row: 3; padding-top: 0; }
  .hero h1 { margin-bottom: 20px; }
  .hero.hero-d { --fw: min(62vw, 280px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 18px; padding-top: 26px; }
  .hero-d .q { font-size: 7.4vw; }
  .hero-d .q-left { grid-column: 1; grid-row: 1; }
  .hero-d .q-right { grid-column: 2; grid-row: 1; }
  .hero-d .hero-figure { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-left: calc(var(--fw) * .27); }
  .hero-d .under { grid-row: 3; gap: 20px; }
  .lead { font-size: 20px; }
  .actions { margin-top: 22px; }
  .hero h1 .row { display: block; white-space: normal; font-size: 12.4vw; }
  .section { padding: 72px var(--pad); }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 40px; }
  .section-head p { font-size: 17px; }
  .questions li { grid-template-columns: minmax(0, 1fr) 76px; gap: 14px; padding: 24px 0; }
  .questions p { grid-column: 1 / -1; }
  .questions img { width: 76px; grid-row: 1; grid-column: 2; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); }
  .offer, .offer + .offer { padding: 32px 0 38px; border-left: 0; }
  .offer + .offer { border-top: 1px solid var(--ink); }
  .offer-top { min-height: 0; }
  .offer-top img { width: 104px; }
  .cases li { grid-template-columns: 76px minmax(0, 1fr); gap: 16px 18px; padding: 28px 0; }
  .cases img { width: 76px; align-self: start; }
  .cases li > p { grid-column: 1 / -1; }
  .mission-case { grid-template-columns: 76px minmax(0, 1fr); gap: 16px 18px; padding: 28px 0 32px; }
  .mission-case img { width: 76px; }
  .fronts { grid-template-columns: minmax(0, 1fr); }
  .fronts li + li { border-top: 1px solid var(--rule); }
  .fronts li { padding: 20px 0 24px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .about-figure { position: static; width: 220px; }
  .work-strip { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 48px; }
  .about-copy p { font-size: 17px; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .project-list a { grid-template-columns: 56px minmax(0, 1fr); gap: 10px 16px; padding: 16px 0; align-content: center; }
  .project-list img { width: 56px; grid-row: span 2; }
  .project-list .d { grid-column: 2; font-size: 15px; }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  summary { font-size: 18px; }
  .contact h2 { margin-bottom: 36px; }
  .contact h2 .row { display: block; white-space: nowrap; font-size: 15vw; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .contact-figure { justify-self: center; width: min(78vw, 340px); height: auto; margin-right: 0; }
  .footer nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* "Let's talk": the character as a white neon sign. Two photographic frames of the same sign, identical
   except for the + in the speech balloon (unlit / lit). Only the + region of the lit frame is shown over
   the unlit one, so nothing else can shimmer. The + flickers on when the section first comes into view
   (bfs-head.js adds .on), then blinks: 1 s lit, 1 s off. Edges fade into the section's blue. */
.neon-hello { position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--line) 7%, var(--line) 93%, transparent), linear-gradient(to bottom, transparent, var(--line) 7%, var(--line) 93%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, var(--line) 7%, var(--line) 93%, transparent), linear-gradient(to bottom, transparent, var(--line) 7%, var(--line) 93%, transparent);
  mask-composite: intersect; }
.neon-hello img { display: block; width: 100%; height: auto; }
.neon-hello .nh-plus { position: absolute; inset: 0; opacity: 0; clip-path: inset(17% 17% 67% 67% round 6%); }
.neon-hello.on { animation: nh-on .9s steps(1, end) both; }
.neon-hello.on .nh-plus { animation: nh-plus-on 1.2s steps(1, end) 1s both, nh-plus-blink 2s steps(1, end) 2.2s infinite; }
@keyframes nh-on { 0% { opacity: .2; } 15% { opacity: 1; } 25% { opacity: .35; } 40%, 100% { opacity: 1; } }
@keyframes nh-plus-on { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: 0; } 40% { opacity: 1; } 50% { opacity: .2; } 68%, 100% { opacity: 1; } }
@keyframes nh-plus-blink { 0% { opacity: 1; } 50%, 100% { opacity: 0; } } /* 1 s lit, 1 s off */
@media (prefers-reduced-motion: reduce) { .neon-hello.on, .neon-hello.on .nh-plus { animation: none; } .neon-hello .nh-plus { opacity: 1; } }