@font-face {
  font-family: "Noto Sans";
  src: url("assets/noto-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Noto Sans";
  src: url("assets/noto-sans-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0303,U+0305-0307,U+0309-0328,U+032A-036F,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A1,U+20A4,U+20AC,U+20AE-20AF,U+20B1,U+20B2,U+20B5,U+20B9,U+20BA,U+20BD,U+20BF,U+2C7C,U+2C7D,U+A720-A7FF;
}
:root { --green: #1a5201; --green-soft: #eef2e9; --ink: #23301e; --muted: #60665a; --paper: #fdfdf8; }
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--green); }
body { margin: 0; font-family: "Noto Sans", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
.landscape { position: fixed; inset: 0; background: #294923 url("assets/hero.jpg") center center / cover no-repeat; }
.landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(7,28,3,.13),transparent 48%,rgba(7,28,3,.13)); }
.page { position: relative; min-height: 100svh; padding: 28px 24px; display: flex; align-items: center; justify-content: center; }
.studio-panel { --monogram-width: 86px; width: 590px; max-width: 100%; min-height: min(860px, calc(100svh - 56px)); display: flex; flex-direction: column; background: rgba(253,253,248,.95); box-shadow: 0 18px 90px rgba(8,29,2,.15); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(9px); animation: appear .8s ease both; }
.panel-top { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 25px 35px 0; }
.languages { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; color: #959c8e; }
.languages button { min-width: 34px; min-height: 36px; border: 0; padding: 8px 5px; background: transparent; color: #737b6a; font: inherit; font-weight: 500; letter-spacing: .04em; cursor: pointer; position: relative; }
.languages button[aria-pressed="true"] { color: var(--green); font-weight: 700; }
.languages button[aria-pressed="true"]::after { position: absolute; content: ""; height: 2px; left: 8px; right: 8px; bottom: 4px; background: var(--green); }
.panel-content { flex: 1; padding: 44px 47px 45px; display: flex; flex-direction: column; justify-content: center; }
.identity { text-align: center; }
.studio-logo { display: block; width: var(--monogram-width); height: auto; margin: 0 auto 22px; }
h1 { margin: 0; color: var(--green); font-size: clamp(28px, 3vw, 38px); font-weight: 700; font-stretch: condensed; font-variation-settings: "wdth" 75; line-height: 1.08; letter-spacing: -.02em; }
h1 span { display: block; font-size: .6em; letter-spacing: .23em; margin-top: 9px; padding-left: .23em; }
.profession { font-size: 14px; margin: 6px 0 0; font-weight: 300; letter-spacing: .025em; }
.profession::before { content: ""; display: block; width: 32px; height: 1px; background: #869875; margin: 0 auto 9px; }
.contact-frame { position: relative; margin-top: 45px; padding: 27px 20px 29px; }
/* These are the monogram's original L paths, kept at the logo's scale. */
.corner { position: absolute; display: block; width: calc(var(--monogram-width) * 20.23 / 60.689); height: auto; fill: currentColor; color: var(--green); pointer-events: none; }
.corner-top { top: 0; right: 0; }
.corner-bottom { bottom: 0; left: 0; }
h2 { margin: 0 0 11px; font-size: 26px; line-height: 1.3; font-stretch: condensed; font-variation-settings: "wdth" 85; font-weight: 600; letter-spacing: -.03em; }
.introduction { font-size: 14px; line-height: 1.8; font-weight: 300; color: var(--muted); margin: 0; max-width: 355px; }
.contact-links { margin-top: 24px; }
.contact-link { display: flex; align-items: center; gap: 13px; min-height: 75px; border-top: 1px solid #dce2d4; color: var(--green); text-decoration: none; padding: 14px 3px; transition: background-color .18s ease, padding .18s ease; }
.contact-link:last-child { border-bottom: 1px solid #dce2d4; }
.contact-link:hover { background: var(--green-soft); padding-left: 9px; padding-right: 9px; }
.contact-icon { width: 25px; flex-shrink: 0; display: flex; }
.contact-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.contact-details { min-width: 0; display: block; flex: 1; }
.contact-label { display: block; font-size: 11px; letter-spacing: .035em; color: var(--muted); margin-bottom: 5px; }
.contact-value { display: block; font-size: 14px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.phone-value { font-size: 17px; font-weight: 400; letter-spacing: .06em; }
.contact-arrow { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.15; flex-shrink: 0; transition: transform .18s ease; }
.contact-link:hover .contact-arrow { transform: translateX(3px); }
.panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 35px 24px; font-size: 8px; letter-spacing: .025em; color: #737b6a; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
@keyframes appear { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1450px) { .studio-panel { width: 620px; } .panel-content { padding-right: 57px; padding-left: 57px; } }
@media (min-width: 601px) {
  .page { padding: 16px 24px; }
  .studio-panel { --monogram-width: clamp(42px, 8svh, 72px); min-height: min(760px, calc(100svh - 32px)); }
  .panel-top { padding: clamp(10px, 2svh, 20px) 30px 0; }
  .panel-content { padding: clamp(12px, 2svh, 20px) 40px; }
  .studio-logo { margin-bottom: clamp(8px, 1.5svh, 15px); }
  h1 { font-size: clamp(28px, 4.5svh, 36px); }
  h1 span { margin-top: clamp(5px, 1svh, 9px); }
  .contact-frame { margin-top: clamp(14px, 2.5svh, 28px); padding: clamp(14px, 2.4svh, 24px) 18px; }
  h2 { font-size: clamp(22px, 3.4svh, 26px); margin-bottom: 8px; }
  .introduction { max-width: none; line-height: 1.6; }
  .contact-links { margin-top: clamp(10px, 2svh, 18px); }
  .contact-link { min-height: clamp(52px, 8.5svh, 70px); padding-top: 8px; padding-bottom: 8px; }
  .panel-footer { padding: 0 30px clamp(12px, 2svh, 20px); }
}
@media (max-width: 600px) {
  .page { padding: 20px 16px; align-items: center; }
  .studio-panel { --monogram-width: 70px; min-height: calc(100svh - 40px); background: rgba(253,253,248,.96); }
  .panel-top { padding: 14px 21px 0; }
  .panel-content { padding: 32px 24px 30px; }
  .studio-logo { margin-bottom: 19px; }
  h1 { font-size: 33px; }
  .profession { font-size: 14px; margin-top: 8px; }
  .contact-frame { margin-top: 34px; padding: 23px 15px 23px; }
  h2 { font-size: 23px; }
  .introduction { font-size: 14px; }
  .contact-link { gap: 10px; }
  .contact-icon { width: 20px; }
  .contact-icon svg { width: 19px; height: 19px; }
  .contact-value { font-size: 13px; }
  .phone-value { font-size: 16px; }
  .panel-footer { padding: 0 21px 20px; font-size: 7px; }
}
@media (max-width: 360px) { .page { padding: 12px 10px; } .panel-content { padding: 29px 18px 27px; } h1 { font-size: 29px; } h2 { font-size: 23px; } .contact-value { font-size: 13px; } .phone-value { font-size: 16px; } .contact-arrow { width: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }