/* mindos company site: the chase. A full-screen scene in the ink register with the page's text
   laid over it. Tokens and @font-face come from design/tokens.css (inherited from pm/DESIGN.md);
   this file adds the page's own components and no colour of its own except the ink scrim that
   keeps the type legible over the moving scene; its black is the scene's own tone-mapped black,
   a shade under the ink token, so the scrim never reads lighter than the sky behind it. */
@import url("../design/tokens.css");

:root {
  --margin: 64px;
  --gutter: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);
  --paper: var(--color-ink-dark);
  --paper-2: var(--color-ink-2-dark);
  --rule: var(--color-border-dark);
}

/* lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

* { box-sizing: border-box; }
html {
  background: var(--color-bg-dark); color: var(--paper);
  font: 400 17px / 1.55 var(--font-body-family);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  scrollbar-color: var(--color-grey-6) var(--color-bg-dark); caret-color: var(--paper);
}
body { margin: 0; }
::selection { background: var(--paper); color: var(--color-bg-dark); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }
h1, h2 { margin: 0; }

/* the wordmark: two weights of one face */
.wm { font-family: var(--font-display-family); font-weight: 300; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; text-decoration: none; display: inline-block; }
.wm b { font-weight: 800; }

/* ---- the scene ---------------------------------------------------------------------------------- */
/* the large viewport height: on a phone the address bar comes and goes while the page scrolls, and a
   canvas that followed it would be resized, and every render target with it, in mid-scroll */
.scene { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; background: var(--color-bg-dark); overflow: hidden; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.scene.is-live canvas { opacity: 1; }
.scene .fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 0.8s var(--ease-out); }
.scene.is-live .fallback { opacity: 0; }
.scene .fallback rect, .scene .fallback line { stroke: var(--color-grey-6); stroke-width: 1; fill: none; }
.scene .fallback .needle { stroke: var(--color-accent); stroke-width: 2; }

/* ---- head ------------------------------------------------------------------------------------- */
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 3; height: 56px; padding: 0 var(--margin); display: flex; justify-content: space-between; align-items: center; }
.head .rule { position: absolute; left: var(--margin); right: var(--margin); bottom: 0; border-top: 1px solid var(--paper); transform-origin: left; }
.head .wm { font-size: 26px; }
/* what mindos does stands beside the wordmark, behind a hairline, whenever the first screen's own
   line is not in sight: while the story is told, and on every stage after the first */
.lockup { margin: 0; max-width: none; min-width: 0; display: flex; align-items: center; gap: 14px; }
.tagline { padding: 3px 0 4px 14px; border-left: 1px solid var(--paper); font: 300 15px / 1 var(--font-display-family); letter-spacing: -0.01em; white-space: nowrap; opacity: 0; translate: -6px 0; transition: opacity 0.8s var(--ease-out), translate 0.9s var(--ease-out); }
html:not(.js) .tagline, .is-narrating .tagline, .is-under-way .tagline { opacity: 1; translate: 0 0; }
.lang { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; font: 300 15px / 1 var(--font-display-family); letter-spacing: -0.01em; }
.lang a { display: block; text-decoration: none; font-weight: 300; padding: 6px 11px 8px; }
.lang a[aria-current="page"] { font-weight: 800; }

/* ---- what can be pressed ------------------------------------------------------------------------ */
/* every text that can be pressed is a plain button (Konrád, 2026-09-19): ruled in paper, with the
   scene's blue, an orchestrator's, behind it and around it; under the pointer and under the focus
   the blue deepens, and the words never change weight, so nothing reflows */
:is(.lang a, .cloud a.term, .back, .ask, .contact a) { border: 1px solid var(--paper); background: color-mix(in srgb, var(--color-info) 24%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--color-info) 48%, transparent), inset 0 0 18px color-mix(in srgb, var(--color-info) 22%, transparent); transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); -webkit-tap-highlight-color: transparent; }
:is(.lang a, .cloud a.term, .back, .ask, .contact a):is(:hover, :focus-visible) { background: color-mix(in srgb, var(--color-info) 52%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--color-info) 78%, transparent), inset 0 0 22px color-mix(in srgb, var(--color-info) 32%, transparent); }
.lang a[aria-current="page"] { background: color-mix(in srgb, var(--color-info) 44%, transparent); }

/* ---- the page over the scene ---------------------------------------------------------------- */
.page { position: relative; z-index: 1; }
/* every stage is taller than the viewport and its text block sticks at the vertical centre while
   the stage scrolls past, so the reader always meets the text in the middle of the screen */
.stage { min-height: 150vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap: var(--gutter); padding: 0 var(--margin); }
.stage > * { min-width: 0; }
.block { grid-column: 1 / span 7; position: sticky; top: 50vh; transform: translateY(-50%); align-self: start; padding: 40px 0 36px; }
.block::before { content: ""; position: absolute; inset: -22% -30% -22% calc(-1 * var(--margin)); z-index: -1; background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(12, 14, 17, 0.9) 0%, rgba(12, 14, 17, 0.7) 40%, rgba(12, 14, 17, 0) 100%); }
.stage--right .block { grid-column: 6 / span 7; }
.stage--right .block::before { inset: -22% calc(-1 * var(--margin)) -22% -30%; background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(12, 14, 17, 0.9) 0%, rgba(12, 14, 17, 0.7) 40%, rgba(12, 14, 17, 0) 100%); }
.stage--wide .block { grid-column: 1 / span 10; }
/* the first screen speaks in subtitles (subtitles.js, narration.js). Where a script runs, its
   heading and its story stay in the page for whoever reads by headings or with a screen reader,
   and are out of the eye's way; without a script they stand as the top of a plain page */
.stage--open .block { grid-column: 1 / -1; justify-self: center; max-width: 1180px; text-align: center; }
.stage--open .block::before { inset: -30% -14%; background: radial-gradient(ellipse 56% 60% at 50% 52%, rgba(12, 14, 17, 0.88) 0%, rgba(12, 14, 17, 0.62) 45%, rgba(12, 14, 17, 0) 100%); }
.js .stage--open .block { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.narration { margin-top: 32px; }
.narration .story { margin-inline: auto; font-size: 20px; }
.narration .story + .story { margin-top: 18px; }

.thesis { font: 300 clamp(44px, 5.8vw, 92px) / 1 var(--font-display-family); letter-spacing: -0.03em; text-wrap: balance; }
.thesis span { display: inline-block; }
.story { font-size: 22px; line-height: 1.42; max-width: 44ch; font-weight: 300; }
.story + .story { margin-top: 28px; }
.block h2 { font: 500 17px / 1.3 var(--font-display-family); letter-spacing: -0.005em; color: var(--paper-2); margin-bottom: 22px; }
.block .prose { font-size: 21px; line-height: 1.45; max-width: 46ch; font-weight: 300; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--paper); }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rows li:last-child { border-bottom-color: var(--paper); }
.rows b { font-weight: 500; font-size: 19px; line-height: 1.35; }
.rows span { color: var(--paper-2); font-size: 16px; line-height: 1.5; }
.rows cite { display: block; margin-top: 6px; font: 400 14px / 1.5 var(--font-ui-family); font-style: normal; color: var(--paper-2); }
.rows cite a { text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color 0.3s var(--ease-out); }
.rows cite a:hover { border-bottom-color: var(--paper); }
.rows--steps li { grid-template-columns: 2.5ch minmax(0, 5fr) minmax(0, 7fr); }
.rows--steps i { font: 400 15px / 1.6 var(--font-ui-family); font-style: normal; color: var(--paper-2); }

.cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; max-width: 100%; }
/* as buttons the names take more room than as bare words: set a size down, so the cloud still
   stands whole in the middle of a laptop's screen */
.cloud li { font: 300 clamp(17px, 1.6vw, 24px) / 1.15 var(--font-display-family); letter-spacing: -0.012em; white-space: nowrap; }
.cloud li.w1 { font-size: clamp(20px, 2.05vw, 31px); }
.cloud li.w3 { font-weight: 500; }
.cloud li.w4 { font-size: clamp(15px, 1.3vw, 19px); color: var(--paper-2); }
.cloud li.decision { font-weight: 500; font-size: clamp(18px, 1.8vw, 27px); }
/* a capability is a link to its explanation, and looks like what it is: a button */
.cloud a.term { display: inline-block; color: inherit; text-decoration: none; padding: 0.22em 0.55em 0.32em; }
/* twenty-seven of them stand side by side: each keeps a fainter share of the blue, or the block would be one haze */
.cloud a.term:not(:hover, :focus-visible) { box-shadow: 0 0 14px color-mix(in srgb, var(--color-info) 34%, transparent), inset 0 0 12px color-mix(in srgb, var(--color-info) 16%, transparent); }

/* ---- the focus view: one capability explained while the camera holds on a building ------------- */
.detail { display: none; max-width: 640px; }
/* :target opens an explanation only where no script does: the address can be rewritten without a
   navigation (the return link), and :target would go on matching the explanation it opened */
html:not(.js) .detail:target, .detail.is-open { display: block; }
.detail:focus { outline: none; }
html:not(.js) #capabilities:has(.detail:target) .cloud, #capabilities.is-focused .cloud { display: none; }
.cloud, .detail { transition: opacity 0.32s var(--ease-out), translate 0.5s var(--ease-out); }
#capabilities.is-leaving .cloud, #capabilities.is-leaving .detail, .detail.is-open:not(.is-in) { opacity: 0; translate: 0 10px; }
.back { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; padding: 7px 14px 7px 9px; font: 400 15px / 1 var(--font-ui-family); color: var(--paper); text-decoration: none; }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.4s var(--ease-out); }
.back:hover svg, .back:focus-visible svg { translate: -4px 0; }
.block .detail h2 { font: 300 clamp(28px, 3.2vw, 46px) / 1.06 var(--font-display-family); letter-spacing: -0.022em; color: var(--paper); margin-bottom: 26px; text-wrap: balance; }
.explain { margin: 0; border-top: 1px solid var(--rule); }
.explain > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); column-gap: var(--gutter); padding: 15px 0; border-bottom: 1px solid var(--rule); }
.explain dt { font: 500 15px / 1.5 var(--font-display-family); color: var(--paper-2); }
.explain dd { margin: 0; font: 300 18px / 1.5 var(--font-display-family); letter-spacing: -0.003em; max-width: 50ch; text-wrap: pretty; }
/* what it solves is the row the reader came for: ruled in paper, set a weight up */
.explain .gain { border-top: 1px solid var(--paper); border-bottom-color: var(--paper); margin-top: -1px; }
.explain .gain dt { color: var(--paper); }
.explain .gain dd { font-weight: 400; }
/* focused, the text keeps to the left half and the building stands in the right */
#capabilities.is-focused .block { grid-column: 1 / span 6; }
#capabilities.is-focused .block::before { background: radial-gradient(ellipse 66% 58% at 32% 50%, rgba(12, 14, 17, 0.94) 0%, rgba(12, 14, 17, 0.8) 46%, rgba(12, 14, 17, 0) 100%); }

/* ---- the questions a visitor would ask, and the subtitles that answer -------------------------- */
.asks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.ask { display: inline-block; padding: 9px 16px 11px; font: 300 clamp(20px, 1.9vw, 27px) / 1.15 var(--font-display-family); letter-spacing: -0.015em; text-decoration: none; }
/* a question that has been answered steps back a tone, so the reader sees what is left to ask */
.ask.is-asked { color: var(--paper-2); border-color: var(--paper-2); }
.js .answers { display: none; }
.answer { margin-top: 30px; }
.answer h3 { margin: 0 0 8px; font: 500 17px / 1.3 var(--font-display-family); color: var(--paper-2); }
.answer p { font: 300 19px / 1.5 var(--font-display-family); max-width: 52ch; }
/* while an answer streams the list steps aside: the scene and the subtitle have the screen */
#questions .block { transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out), visibility 0s; }
#questions.is-asking .block { opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity 0.32s var(--ease-out), translate 0.5s var(--ease-out), visibility 0s 0.32s; }

/* the subtitle: a film's, where a film's stands (Konrád, 2026-09-19: "a subtitle in a movie", "a
   dark background as if it was a subtitle in a video reel"). One cue at a time, at most two lines
   on a wide screen, in paper on a dark ground that grows with what has been said. The whole cue
   is laid out from the start, the part not yet said unseen, so nothing reflows while it is said;
   the ground reaches past the words by a shadow, which takes no room, for the same reason */
.subtitle { position: fixed; left: 0; right: 0; bottom: max(14vh, 120px); z-index: 2; display: grid; justify-items: center; padding: 0 var(--margin); text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.subtitle[hidden] { display: none; }
.subtitle.is-on { opacity: 1; }
.subtitle-box { display: grid; justify-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.subtitle p { margin: 0; max-width: none; }
.subtitle .subtitle-a { max-width: 25em; font: 400 clamp(19px, 1.85vw, 28px) / 1.5 var(--font-display-family); letter-spacing: -0.006em; text-wrap: balance; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.subtitle-a.is-on { opacity: 1; }
.subtitle-a .said, .subtitle-q span { padding: 0.14em 0; background: rgba(8, 9, 11, 0.86); box-shadow: 0.45em 0 0 rgba(8, 9, 11, 0.86), -0.45em 0 0 rgba(8, 9, 11, 0.86); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.subtitle-a .said:empty { display: none; }
.subtitle-a .unsaid { visibility: hidden; }
/* an answer brings its question, a tone back, and the way back to the list */
.subtitle-q { display: none; font: 500 15px / 1.5 var(--font-display-family); letter-spacing: -0.003em; color: var(--paper-2); }
.subtitle.is-answer .subtitle-q { display: block; }
.subtitle .back { display: none; margin: 0 0 2px; pointer-events: auto; }
.subtitle.is-answer .back { display: inline-flex; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* without the script nothing measures a stage, and the questions stand with all their answers: every
   block is then in the flow, and the page reads from top to bottom like any other */
html:not(.js) .stage { min-height: 0; }
html:not(.js) .block, html:not(.js) .stage--open .block { position: relative; top: auto; bottom: auto; transform: none; align-self: start; margin: 14vh 0; }

/* a stage whose text is taller than the screen scrolls like a page instead of standing still */
.stage.is-tall { min-height: 0; }
.stage.is-tall .block { position: relative; top: auto; bottom: auto; align-self: start; transform: none; margin: 16vh 0; }

/* ---- the way on: a cue to scroll, and an arrow that does it for the reader ---------------------- */
.onward { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 3; display: grid; justify-items: center; gap: 9px; padding: 12px 18px; margin: 0; border: 0; background: none; color: var(--paper); cursor: pointer; opacity: 0; transition: opacity 0.7s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.onward[hidden] { display: none; }
.onward.is-ready { opacity: 1; }
.onward.is-away { opacity: 0; pointer-events: none; }
.onward::before { content: ""; position: absolute; inset: -30px -60px; z-index: -1; background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(12, 14, 17, 0.62) 0%, rgba(12, 14, 17, 0) 100%); pointer-events: none; }
.onward svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.onward .mouse { transition: opacity 0.6s var(--ease-out), height 0.6s var(--ease-out), margin 0.6s var(--ease-out); }
.onward .wheel { animation: wheel 1.9s var(--ease-inout) infinite; }
.onward > svg:last-child { width: 30px; height: 30px; transition: rotate 0.7s var(--ease-inout); animation: nudge 1.9s var(--ease-inout) infinite; }
.onward:hover > svg:last-child, .onward:focus-visible > svg:last-child { animation-play-state: paused; }
/* once the reader has moved, the cue has done its work; the arrow stays */
.onward.has-moved .mouse { opacity: 0; height: 0; margin-bottom: -9px; }
.onward.is-last > svg:last-child { rotate: 180deg; animation: none; }
@keyframes wheel { 0% { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 65% { translate: 0 9px; opacity: 0; } 100% { translate: 0 9px; opacity: 0; } }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (pointer: coarse) { .onward .mouse { display: none; } }

.contact .story { margin-bottom: 40px; }
/* daylight: while the address is hovered the scene turns blue and bright; the text keeps its paper
   colour over a deeper scrim so it stays legible against the bright city */
.block::before { transition: background 1s var(--ease-out); }
.day .block::before { background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(12, 14, 17, 0.92) 0%, rgba(12, 14, 17, 0.8) 40%, rgba(12, 14, 17, 0) 100%); }
.day .stage--right .block::before { background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(12, 14, 17, 0.92) 0%, rgba(12, 14, 17, 0.8) 40%, rgba(12, 14, 17, 0) 100%); }
.contact a { display: inline-block; font: 300 clamp(30px, 4.6vw, 66px) / 1.05 var(--font-display-family); letter-spacing: -0.025em; text-decoration: none; padding: 0.1em 0.32em 0.18em; }
.colophon { margin-top: 64px; border-top: 1px solid var(--rule); padding-top: 10px; display: flex; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; font: 400 12px / 1.4 var(--font-ui-family); color: var(--paper-2); }
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; }

/* ---- motion ----------------------------------------------------------------------------------- */
/* a block waits out of sight only where a script is there to bring it in: without JavaScript the
   page is complete as it stands (the head script sets .js before the first paint) */
.js .reveal { opacity: 0; translate: 0 18px; transition: opacity 0.9s var(--ease-out), translate 1s var(--ease-out); }
.js .reveal.in { opacity: 1; translate: 0 0; }
.js .head .rule { transform: scaleX(0); }
.js .lang { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .lang { opacity: 1; transform: none; translate: 0 0; transition: none; }
  .js .head .rule { transform: none; }
  .scene canvas, .scene .fallback { transition: none; }
  .cloud, .detail, .onward, .onward .mouse, .subtitle, .subtitle-a, .tagline, #questions .block, #questions.is-asking .block { transition: none; }
  .onward .wheel, .onward > svg:last-child { animation: none; }
  .onward .wheel { opacity: 1; }
}

/* ---- responsive ------------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  #capabilities.is-focused .block { grid-column: 1 / span 10; }
  .block, .stage--right .block, .stage--wide .block { grid-column: 1 / span 10; }
  .stage--right .block::before { inset: -22% -30% -22% calc(-1 * var(--margin)); background: radial-gradient(ellipse 60% 50% at 30% 50%, rgba(12, 14, 17, 0.9) 0%, rgba(12, 14, 17, 0.7) 40%, rgba(12, 14, 17, 0) 100%); }
}
@media (max-width: 760px) {
  :root { --margin: 20px; --gutter: 16px; }
  .head { height: 52px; }
  .head .wm { font-size: 22px; }
  .lang { font-size: 14px; gap: 14px; }
  .stage { min-height: 140svh; }
  .block, .stage--right .block, .stage--wide .block { grid-column: 1 / -1; padding: 28px 0 24px; }
  .block::before, .stage--right .block::before { inset: 0 calc(-1 * var(--margin)); background: rgba(12, 14, 17, 0.8); }
  .thesis { font-size: clamp(36px, 10.4vw, 60px); letter-spacing: -0.026em; }
  /* no room beside the wordmark: what mindos does stands under the head rule */
  .lockup { display: block; }
  .tagline { position: absolute; left: var(--margin); top: calc(100% + 9px); padding: 0; border-left: 0; font-size: 13px; }
  .lang { gap: 6px; }
  .lang a { padding: 5px 8px 7px; }
  .subtitle { bottom: max(12vh, 88px); }
  .subtitle-box { gap: 10px; }
  .subtitle-a { font-size: 18px; }
  .subtitle-q { font-size: 14px; }
  .asks { gap: 10px; }
  .ask { font-size: 19px; padding: 8px 12px 10px; }
  .answer p { font-size: 17px; }
  .narration .story { font-size: 18px; }
  .story, .block .prose { font-size: 18px; }
  .rows li, .rows--steps li { grid-template-columns: 1fr; row-gap: 4px; padding: 12px 0; }
  .rows--steps li { grid-template-columns: 2.5ch 1fr; }
  .rows--steps li span { grid-column: 2; }
  .rows b { font-size: 17px; }
  .cloud { gap: 10px; }
  .cloud li { font-size: 17px; white-space: normal; }
  .cloud li.w1 { font-size: 20px; }
  .cloud li.w4 { font-size: 15px; }
  .cloud li.decision { font-size: 18px; }
  .contact a { font-size: clamp(24px, 7.5vw, 34px); word-break: break-all; }
  #capabilities.is-focused .block { grid-column: 1 / -1; }
  .explain > div { grid-template-columns: 1fr; row-gap: 3px; padding: 12px 0; }
  .explain dd { font-size: 17px; }
  .onward { bottom: 12px; }
  .colophon { margin-top: 40px; }
}