/* In Praxi OÜ: Tallinn across the bay. A see-through header on the photo, the name in the sky,
   then calm white pages in sea navy and sky blue. Phone and tablet changes are at the end. */

@font-face { font-family: "Brygada 1918"; src: url("fonts/brygada-1918-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Brygada 1918"; src: url("fonts/brygada-1918-latin-ext-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --deep: #0a1d2c;
  --sea: #0f2c43;
  --blue: #1c5b8c;
  --sky: #9cc7e6;
  --mist: #edf4f9;
  --ink: #15222d;
  --soft: #3f4f5c;
  --line: #c9d9e6;
  --white: #ffffff;
  --serif: "Brygada 1918", Georgia, serif;
  --sans: "Albert Sans", system-ui, sans-serif;
  --top: 4.5rem;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top) - 1px); }
/* A menu link lands the section exactly under the header (1px in, so the header takes that section's colour and
   nothing of the section before shows). Targets that are not whole sections keep a little air above them. */
#kontakt, #viga, #saatmata { scroll-margin-top: 1.25rem; }
body { margin: 0; font: 400 1.125rem/1.6 var(--sans); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, address, fieldset, legend { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--sea); }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: min(100% - 2 * clamp(1.25rem, 5vw, 4rem), 76rem); margin-inline: auto; }
/* Header runs the full width: logo in the left corner, menu in the right */
.wrap-wide { width: calc(100% - 2 * clamp(1.25rem, 3vw, 3rem)); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; padding: .75rem 1rem; z-index: 20; background: #000; color: #fff; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: .8rem 1.5rem; border: 0; border-radius: 3px; font: 650 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn-dark { background: var(--sea); color: var(--white); }
.btn-dark:hover { background: var(--blue); }
.btn-light { background: var(--white); color: var(--sea); }
.btn-light:hover { background: var(--mist); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.call { display: inline-block; padding-block: .65rem; font-weight: 600; }

/* Header: takes the colour of the section under it. Clear over the photo at the top, navy glass while the
   photo scrolls under it, white over white sections, light blue over light-blue ones, navy over navy. */
.site-top {
  position: sticky; top: 0; z-index: 10; height: var(--top); margin-bottom: calc(-1 * var(--top));
  color: var(--white); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.site-top[data-tone="navy"] { background: rgb(15 44 67 / .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
.site-top[data-tone="light"] { background: rgb(255 255 255 / .97); color: var(--sea); box-shadow: 0 1px 0 rgb(15 44 67 / .1); }
.site-top[data-tone="mist"] { background: rgb(237 244 249 / .97); color: var(--sea); box-shadow: 0 1px 0 rgb(15 44 67 / .08); }
.site-top.fixed { margin-bottom: 0; }
.topbar { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.brand { display: inline-grid; align-items: center; min-height: 44px; margin-right: auto; }
.brand img { grid-area: 1 / 1; height: clamp(36px, 30px + 1.2vw, 44px); width: auto; transition: opacity .2s var(--ease-out); }
.site-top .on-white, .site-top[data-tone="light"] .on-photo, .site-top[data-tone="mist"] .on-photo { opacity: 0; }
.site-top[data-tone="light"] .on-white, .site-top[data-tone="mist"] .on-white { opacity: 1; }
.nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; }
.nav a, .nav-phone { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; }
.nav a.is-current { text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 2px; }
@media (hover: hover) { .nav a:hover, .nav-phone:hover { text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 2px; } }
.menu-btn, .nav .nav-call { display: none; }
.site-top[data-tone="clear"] :focus-visible, .site-top[data-tone="navy"] :focus-visible { outline-color: var(--white); }

/* Hero: the logo in the open sky; the skyline and the sea stay clear below it */
.hero { position: relative; isolation: isolate; min-height: min(100svh, 58rem); display: grid; align-items: start; color: var(--white); overflow: hidden; background: var(--sea); }
.hero-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 46rem 24rem at 50% 30%, rgb(10 29 44 / .5), rgb(10 29 44 / 0) 75%),
    linear-gradient(180deg, rgb(10 29 44 / .55) 0, rgb(10 29 44 / .38) 40%, rgb(10 29 44 / .12) 62%, rgb(10 29 44 / 0) 75%);
}
.hero-copy { display: grid; justify-items: center; text-align: center; padding-block: clamp(6.25rem, 11vh, 8rem) 4rem; }
/* The logo's name without its mark: all three logo options set "In Praxi" in Brygada 1918 SemiBold, so it matches whichever is chosen */
.cover-name { margin-bottom: .55rem; font-family: var(--serif); font-weight: 600; font-size: clamp(3.25rem, 2.4rem + 3.2vw, 4.5rem); line-height: 1; color: var(--white); }
.hero h1 { margin-top: .6rem; color: var(--white); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.hero .lead { margin-top: .8rem; max-width: 34rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; color: rgb(255 255 255 / .92); text-wrap: balance; }
.hero .actions { margin-top: 1.6rem; justify-content: center; }
.hero .btn { background: var(--white); color: var(--sea); }
.hero .btn:hover { background: var(--mist); }
/* The call link gets its own dark glass, so it stays readable wherever the skyline falls */
.hero .call {
  color: var(--white); padding: .65rem 1.1rem; border-radius: 3px; background: rgb(10 29 44 / .58);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-decoration-color: rgb(255 255 255 / .6);
}
.hero .call:hover { background: rgb(10 29 44 / .75); }
.hero ::selection { background: var(--white); color: var(--sea); }
.hero :focus-visible { outline-color: var(--white); }
.hero .btn:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
.hero .lead, .hero .call { text-shadow: 0 1px 12px rgb(10 29 44 / .55); }

/* Opening: the logo rises in first, the text follows it, the photo settles like a camera coming to rest */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: settle 9s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 40%; }
  .hero::before { animation: fade-in 1.4s ease .2s both; }
  .cover-name, .hero h1, .hero .lead, .hero .actions { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both; }
  .cover-name { animation-duration: 1s; animation-delay: .2s; }
  .hero h1 { animation-delay: .45s; }
  .hero .lead { animation-delay: .6s; }
  .hero .actions { animation-delay: .75s; }
}
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Section headings */
.sec-services h2, .sec-paper h2, .sec-about h2, .sec-cta h2 { font-size: clamp(2.1rem, 1.5rem + 2vw, 3.2rem); line-height: 1.08; }

/* Services. Phones and no-JavaScript: five ruled blocks one after another, then the offer in navy.
   Desktop with JavaScript (.on): the names are a list to pick from, the picked service fills one navy panel. */
.sec-services { padding-block: clamp(4rem, 7vw, 6.5rem); }
.sec-services h2 { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.svc-names { display: none; }
.svc-panel { padding-block: 1.6rem 1.9rem; border-top: 1px solid var(--line); }
.svc-panel h3 { font-size: clamp(1.35rem, 1.15rem + .55vw, 1.6rem); line-height: 1.2; margin-bottom: 1rem; }
.svc-items li { padding-block: .6rem; border-top: 1px solid var(--line); font-size: 1.05rem; line-height: 1.45; }
.svc-items li:first-child { border-top-color: var(--sea); }

@media (min-width: 56rem) {
  .svc-tabs.on { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: stretch; }
  .on .svc-names { display: grid; align-content: start; border-top: 1px solid var(--line); }
  .svc-names button {
    position: relative; display: block; width: 100%; padding: 1.15rem 1.6rem 1.15rem 0; border: 0; border-bottom: 1px solid var(--line);
    background: none; text-align: left; cursor: pointer; color: #5f7688;
    font: 600 clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem)/1.2 var(--serif);
    transition: color .2s var(--ease-out), padding .3s var(--ease-out);   /* left and right swap, so the text never re-wraps */
  }
  /* The picked service: sea navy, moved in behind the small square of the logo */
  .svc-names button::before {
    content: ""; position: absolute; left: 0; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem;
    background: var(--blue); transform: scale(0); transition: transform .3s var(--ease-out);
  }
  .svc-names button[aria-selected="true"] { color: var(--sea); padding-left: 1.6rem; padding-right: 0; }
  .svc-names button[aria-selected="true"]::before { transform: scale(1); }
  .svc-names button:focus-visible { outline-offset: -2px; }

  .on .svc-panels {
    display: grid; padding: clamp(2rem, 3.4vw, 3.25rem);
    border-radius: 6px; background: var(--sea); color: #dbe9f4;
    box-shadow: 0 1px 0 rgb(15 44 67 / .08), 0 24px 48px -30px rgb(10 29 44 / .55);
  }
  .on .svc-panels ::selection { background: var(--sky); color: var(--deep); }
  /* All five panels lie on top of each other in one cell, so the navy box is always as tall as the
     tallest of them and the page below never moves when another service is picked. */
  .on .svc-panel { grid-area: 1 / 1; visibility: hidden; padding: 0; border: 0; }
  .on .svc-panel.is-active { visibility: visible; }
  .on .svc-panel:focus-visible { outline: 2px solid var(--sky); outline-offset: 8px; border-radius: 2px; }
  .on .svc-panel h3 { color: var(--white); font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); margin-bottom: 1.4rem; }
  .on .svc-items li { padding-block: 1.15rem; border-top-color: rgb(156 199 230 / .28); font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); }
  .on .svc-items li:first-child { border-top-color: rgb(156 199 230 / .6); }
}
@media (min-width: 56rem) and (prefers-reduced-motion: no-preference) {
  .on.picked .svc-panel.is-active { animation: svc-in .35s var(--ease-out) both; }
}
@keyframes svc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Paperless: a navy band with three line drawings, one per way documents reach the bureau */
.sec-paper { background: var(--sea); color: #dbe9f4; padding-block: clamp(4rem, 7vw, 6rem); }
.sec-paper h2 { color: var(--white); margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.sec-paper ::selection { background: var(--sky); color: var(--deep); }
.sec-paper :focus-visible { outline-color: var(--sky); }
/* Three ruled rows, like lines of a ledger: what the document is, and how it reaches the bureau.
   The two columns sit on the same grid as the services above. */
.ways { border-bottom: 1px solid rgb(156 199 230 / .28); }
.ways li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: baseline; padding-block: clamp(1.4rem, 2.2vw, 1.9rem); border-top: 1px solid rgb(156 199 230 / .28); }
.ways li:first-child { border-top-color: rgb(156 199 230 / .6); }
.ways h3 { color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.05rem); line-height: 1.2; }
.ways p { max-width: 36rem; font-size: clamp(1.15rem, 1rem + .45vw, 1.35rem); line-height: 1.45; }
@media (max-width: 55.99rem) {
  .ways li { grid-template-columns: 1fr; row-gap: .35rem; padding-block: 1.25rem; }
  .ways h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
  .ways p { font-size: 1.05rem; }
}

/* About: the founding year as the figure, client fields, and the two people who run the bureau */
.sec-about { padding-block: clamp(4rem, 7vw, 6rem); }
.about-grid { display: grid; gap: 2rem clamp(3rem, 6vw, 6rem); grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
.since { display: grid; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.since-year { font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: .9; color: var(--blue); letter-spacing: -.01em; }
.since-label { margin-top: .5rem; color: var(--soft); font-size: 1rem; }
.about-body { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.about-text { max-width: 44rem; font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); line-height: 1.6; }
.sectors-h { font-weight: 650; color: var(--sea); margin-bottom: .75rem; }
/* Client fields: six small line drawings with the word under each, ruled like ledger columns */
.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.fields li { display: grid; justify-items: center; gap: .7rem; padding: 1.6rem .25rem 1.4rem; text-align: center; color: var(--sea); font-weight: 600; font-size: .95rem; }
.fields .ico {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mist);
  box-shadow: 0 1px 0 rgb(15 44 67 / .06), 0 8px 18px -12px rgb(10 29 44 / .35);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
@media (hover: hover) and (pointer: fine) { .fields li:hover .ico { transform: translateY(-3px); box-shadow: 0 1px 0 rgb(15 44 67 / .06), 0 14px 22px -14px rgb(10 29 44 / .45); } }
.fields li + li { border-left: 1px solid var(--line); }
.fields svg { width: 38px; height: 38px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fields .f { fill: var(--sky); fill-opacity: .45; stroke: none; }
.fields .front { fill: var(--mist); }
/* Hidden only once the script has armed them, so they still show without JavaScript */
@media (prefers-reduced-motion: no-preference) {
  [data-draw].armed path:not(.f) { stroke-dasharray: 1; stroke-dashoffset: 1; }
  [data-draw].armed .f { opacity: 0; }
  [data-draw].drawn path:not(.f) { animation: draw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; }
  [data-draw].drawn .f { animation: fade-in .6s ease .9s forwards; }
  [data-draw].drawn li:nth-child(2) path:not(.f) { animation-delay: .1s; }
  [data-draw].drawn li:nth-child(3) path:not(.f) { animation-delay: .2s; }
  [data-draw].drawn li:nth-child(4) path:not(.f) { animation-delay: .3s; }
  [data-draw].drawn li:nth-child(5) path:not(.f) { animation-delay: .4s; }
  [data-draw].drawn li:nth-child(6) path:not(.f) { animation-delay: .5s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
/* The two people who run the bureau, on the pale blue of the contact card */
.people-panel { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: clamp(3rem, 5vw, 4.5rem); padding: clamp(1.75rem, 4vw, 3rem); background: var(--mist); border: 1px solid var(--line); border-radius: 6px; }
.panel-head { display: grid; gap: .6rem; }
.panel-head h3 { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.8rem); line-height: 1.2; }
.panel-head p { color: #4d4534; font-size: 1rem; }
.people.panel-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; }
.panel-people .person-name { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.8rem); margin-bottom: .35rem; }
.panel-people a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.people-panel ::selection { background: var(--sea); color: var(--white); }

/* Call to action: the bay photo returns under navy, so the page ends where it began */
.sec-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--sea); color: #dbe9f4; padding-block: clamp(4rem, 7vw, 6rem); }
.cta-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.sec-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(15 44 67 / .93) 0, rgb(15 44 67 / .86) 45%, rgb(15 44 67 / .6) 100%); }
.sec-cta h2 { color: var(--white); }
.cta-lead { margin: .9rem 0 1.6rem; max-width: 34rem; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 6vw, 6rem); align-items: center; }
.cta-asks { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid rgb(156 199 230 / .35); border-radius: 6px; background: rgb(10 29 44 / .55); }
.cta-asks h3 { color: var(--white); font-size: 1.4rem; margin-bottom: .5rem; }
.cta-asks li { padding-block: .8rem; border-top: 1px solid rgb(156 199 230 / .25); }
.cta-asks li:first-child { border-top: 0; }
.sec-cta .call { color: var(--white); text-decoration-color: rgb(255 255 255 / .6); }
.sec-cta ::selection { background: var(--sky); color: var(--deep); }
.sec-cta :focus-visible { outline-color: var(--sky); }

/* People: Kaja and Inna */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.5rem 3rem; }
.person { display: grid; justify-items: start; }
.person-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-bottom: .2rem; }
.person a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.person a:hover { text-decoration: underline; }
/* Phone numbers and e-mails can be selected by dragging (a link would otherwise be dragged instead) */
a[href^="mailto:"], a[href^="tel:"] { -webkit-user-drag: none; user-select: text; }
.mail-row { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copy {
  min-height: 40px; padding: .25rem .65rem; border: 1px solid currentColor; border-radius: 3px;
  background: none; color: inherit; font: 600 .875rem/1 var(--sans); letter-spacing: .02em; opacity: .75;
  cursor: pointer; transition: opacity .2s ease;
}
.copy:hover, .copy:focus-visible, .copy.done { opacity: 1; }

/* Footer */
.site-foot { background: var(--deep); color: #cfe0ee; padding-block: clamp(3rem, 5vw, 4rem) 1.5rem; font-size: 1rem; }
.site-foot ::selection { background: var(--sky); color: var(--deep); }
.site-foot :focus-visible { outline-color: var(--sky); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: start; }
.foot-h { margin-bottom: .5rem; font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--white); }
.foot-nav, .foot-contact { display: grid; justify-items: start; align-content: start; }
.foot-nav a, .foot-contact > a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-person { color: #cfe0ee; line-height: 1.2; }
.foot-person a { display: inline-block; padding-block: .6rem; color: var(--white); font-weight: 600; text-decoration: none; margin-left: .3rem; }
.foot-contact .mail-row a, .foot-contact > a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-contact address { margin-top: .5rem; }
/* "↗" after links that open a new tab; .sr text is read out but not shown */
.ext { display: inline-block; margin-left: .3em; font-size: .9em; text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.foot-brand img { height: 38px; width: auto; }
.foot-text { margin-top: .8rem; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; }
.legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; align-items: center;
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid rgb(156 199 230 / .25); font-size: .95rem;
}

/* Sub-pages */
.page-head { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); line-height: 1.06; }
.quick-contact { display: none; margin-top: 1rem; font-weight: 600; color: var(--sea); }
.quick-contact a { display: inline-block; padding-block: .55rem; margin-left: .35rem; }
.page-head .lead { margin-top: 1rem; max-width: 40rem; font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); color: var(--soft); }
/* Short pages: the footer stays at the bottom of the window */
body.sub { min-height: 100svh; display: flex; flex-direction: column; }
body.sub > main { flex: 1 0 auto; }
.thanks-photo { width: 100%; height: clamp(8rem, 18vw, 15rem); object-fit: cover; object-position: 50% 55%; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.page-head.narrow p + p { margin-top: 2rem; }

/* Quote form */
.quote-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; padding-bottom: clamp(4rem, 7vw, 6rem); }
.quote-form { display: grid; gap: 2.25rem; }
.quote-form > fieldset { display: grid; gap: 1.25rem; }
.quote-form > fieldset > legend { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--sea); margin-bottom: 1.25rem; }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: end; }
.field { display: grid; gap: .35rem; align-content: start; }
.field label { font-weight: 600; color: var(--sea); }
.opt { font-weight: 400; color: var(--soft); }
.hint { font-size: .95rem; color: var(--soft); margin-top: -.2rem; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; border: 1px solid #7590a5; border-radius: 3px;
  font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--white);
}
textarea { resize: vertical; min-height: 8rem; }
input:hover, textarea:hover { border-color: var(--blue); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy-note { font-size: .98rem; color: var(--soft); max-width: 36rem; }
.quote-form .btn { justify-self: start; }
.quote-form .btn:disabled { opacity: .75; cursor: progress; }
.req-note { color: var(--soft); font-size: .98rem; margin-bottom: -1rem; }
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.send-note { color: var(--soft); font-size: .98rem; }
.form-error { display: none; padding: .9rem 1.1rem; border-left: 4px solid #a3262a; background: #fbecec; color: #6d1518; }
.form-error:target { display: block; }
legend .opt { font-family: var(--sans); font-size: 1rem; }

/* Non-sticky wrapper is the #kontakt target: anchoring to the sticky card itself made every click scroll further */
.contact-col { align-self: stretch; }
.contact-card { background: var(--mist); border-radius: 6px; padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.5rem; position: sticky; top: calc(var(--top) + 1.5rem); }
.contact-card h2 { font-size: 1.7rem; }
.card-people { grid-template-columns: 1fr; gap: 1.25rem; }
.card-people a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.card-address { display: grid; justify-items: start; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.card-address a { display: inline-flex; align-items: center; min-height: 44px; }
.card-intro { color: var(--soft); }
.card-legal { font-size: .95rem; color: var(--soft); }

/* Location: the map in the site's blue, with our own pin; links to Google open in a new tab */
.map-sec { background: var(--mist); padding-block: clamp(3.5rem, 6vw, 5rem); }
.map-grid { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
.map-info h2 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1.1; }
.map-address { margin-top: 1rem; font-size: 1.15rem; line-height: 1.6; }
.map-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.map-links a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--sea); }
.map {
  position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: #dfe9f1;
  box-shadow: 0 1px 0 rgb(15 44 67 / .08), 0 18px 40px -24px rgb(10 29 44 / .45);
  height: clamp(18rem, 30vw, 26rem);
}
.map iframe {
  display: block; position: absolute; top: -60px; left: -60px; width: calc(100% + 120px);
  height: calc(100% + 120px); border: 0; pointer-events: none;
  filter: grayscale(1) contrast(.92) brightness(1.06) sepia(.25) hue-rotate(170deg) saturate(1.5);
}
.map-pin {
  position: absolute; left: 50%; top: calc(50% - 14px); width: 28px; height: 28px; margin-left: -14px;
  background: var(--sea); border: 3px solid var(--white); border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 6px 14px rgb(10 29 44 / .35);
}
.map-pin::after { content: ""; position: absolute; inset: 7px; background: var(--white); border-radius: 50%; }
.map-label {
  position: absolute; left: 50%; top: calc(50% - 4.4rem); transform: translateX(-50%); padding: .3rem .7rem;
  background: var(--sea); color: var(--white); border-radius: 3px; font: 600 .95rem/1.3 var(--serif);
  white-space: nowrap; box-shadow: 0 6px 14px rgb(10 29 44 / .25);
}
.map-label::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: var(--sea); transform: rotate(45deg); }
.map figcaption { position: absolute; right: 0; bottom: 0; padding: .15rem .5rem; background: rgb(255 255 255 / .85); font-size: .75rem; color: var(--soft); }
.map figcaption a { color: inherit; }
/* Click-to-load: the movable Google map replaces the picture only when the visitor asks for it */
.map-load {
  position: absolute; left: 1rem; bottom: 1rem; display: grid; justify-items: start; gap: .45rem;
  max-width: 21rem; padding: .9rem 1rem; background: rgb(255 255 255 / .94); border-radius: 4px;
  box-shadow: 0 10px 24px -14px rgb(10 29 44 / .5);
}
.map-load p { font-size: .85rem; color: var(--soft); }
.map-load a { color: inherit; }
.map.live { background: #e8eaed; }
.map iframe.gmap { top: 0; left: 0; width: 100%; height: 100%; filter: none; pointer-events: auto; }

/* Privacy page */
.prose { padding-bottom: clamp(4rem, 7vw, 6rem); }
.prose > * { max-width: 46rem; }
.prose h2 { font-size: 1.45rem; margin: 2.25rem 0 .5rem; }
.prose p { max-width: 42rem; }

@media (max-width: 63.99rem) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 55.99rem) {
  .about-grid, .quote-grid, .map-grid, .people-panel, .cta-grid { grid-template-columns: 1fr; }
  .contact-card { position: static; }
  .quick-contact { display: grid; gap: 0; }
}
@media (max-width: 47.99rem) {
  :root { --top: 3.75rem; }
  /* Phone menu: a button opens the links as a panel under the header */
  .topbar { gap: .75rem; }
  .nav-phone { order: 1; }
  .menu-btn { order: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px;
    transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
  }
  .menu-btn span { position: relative; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -7px; }
  .menu-btn span::after { top: 7px; }
  .open .menu-btn span { background: transparent; }
  .open .menu-btn span::before { transform: translateY(7px) rotate(45deg); }
  .open .menu-btn span::after { transform: translateY(-7px) rotate(-45deg); }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100svh - var(--top));
    overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; gap: 0;
    padding: .25rem clamp(1.25rem, 5vw, 4rem) 1rem; background: var(--white); color: var(--sea);
    box-shadow: 0 12px 24px rgb(10 29 44 / .14);
  }
  .open .nav { display: flex; }
  .nav a { min-height: 52px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav .nav-call { display: inline-flex; border-bottom: 0; color: var(--blue); }
  .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fields li:nth-child(4) { border-left: 0; }
  .fields li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  /* Phone: the photo becomes a strip under the header, the text follows on sea navy */
  .hero { display: block; min-height: 0; }
  .hero-photo { position: relative; z-index: -1; height: clamp(15rem, 36svh, 20rem); object-position: 36% 50%; transform-origin: 50% 100%; }
  /* On navy the call link needs no glass: an outlined second button */
  .hero .call { background: none; backdrop-filter: none; border: 1px solid rgb(255 255 255 / .45); text-shadow: none; }
  .hero::before { bottom: auto; height: clamp(15rem, 36svh, 20rem); background: linear-gradient(180deg, rgb(10 29 44 / .55) 0, rgb(10 29 44 / 0) 7rem, rgb(10 29 44 / 0) 70%, var(--sea) 100%); z-index: 0; }
  .hero-copy { padding-block: .5rem 3rem; }
  .row, .foot-grid, .people.panel-people { grid-template-columns: 1fr; }
  .foot-nav { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .map { height: 24rem; }
  .map-load { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; padding: .65rem .75rem; gap: .3rem; }
  .map-load .btn { width: 100%; justify-content: center; min-height: 44px; padding: .55rem 1rem; font-size: 1rem; }
  .map-load p { font-size: .8rem; }
  .map figcaption { top: 0; bottom: auto; }
  .foot-nav .foot-h { grid-column: 1 / -1; }
  .people { grid-template-columns: 1fr; }
}
@media (max-width: 22.49rem) {
  /* Narrowest phones: the number moves into the menu so logo, number and button never collide */
  .nav-phone { display: none; }
}
@media (max-height: 52rem) {
  .contact-card { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* gentler, not zero: no movement, but colour and opacity changes stay */
  *, *::before, *::after { animation: none !important; }
  .fields .ico, .menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: none !important; }
}