@layer reset, base, components;

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body,h1,h2,h3,p,ul,ol,figure{margin:0}
  body{min-width:320px;overflow-x:hidden}
  img,svg{display:block;max-width:100%}
  a{color:inherit}
  button,input,textarea,select{font:inherit}
}

@layer base {
  :root{
    --wf-black:#11110f;
    --wf-ink:#1c1b18;
    --wf-ivory:#f0ede4;
    --wf-stone:#c9c0b1;
    --wf-line:color-mix(in srgb,currentColor 20%,transparent);
    --wf-max:1280px;
    --wf-pad:clamp(20px,4vw,64px);
  }
  body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--page-bg,#11110f);color:var(--page-fg,#f0ede4);line-height:1.45}
  :focus-visible{outline:2px solid currentColor;outline-offset:5px}
  .skip-link{position:fixed;z-index:999;left:12px;top:12px;padding:10px 14px;background:#fff;color:#111;transform:translateY(-180%)}
  .skip-link:focus{transform:none}
  .wf-shell{width:min(var(--wf-max),calc(100% - (2 * var(--wf-pad))));margin-inline:auto}
  .wf-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:650}
  .wf-display{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.04em;line-height:.92;text-wrap:balance}
  .wf-small{font-size:.78rem;line-height:1.5;letter-spacing:.02em}
  .wf-muted{opacity:.66}
  .wf-link{display:inline-flex;gap:.55rem;align-items:center;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.18rem}
  .wf-link::after{content:"↗";font-size:.85em}
  .concept-banner{position:relative;z-index:500;display:flex;justify-content:center;align-items:center;gap:.6rem;min-height:34px;padding:6px var(--wf-pad);background:#f2bc34;color:#17140e;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:center}
  .site-nav{position:absolute;z-index:100;top:34px;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px var(--wf-pad);mix-blend-mode:normal}
  .site-nav__brand{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:750}
  .site-nav__links{display:flex;gap:clamp(12px,2vw,28px);align-items:center}
  .site-nav__links a{text-decoration:none;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
  .illustrative-note{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
  .contact-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,84px);align-items:end}
  .contact-grid a{text-decoration:none}
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  @media(max-width:760px){
    .site-nav{padding-block:18px}.site-nav__links a:not(.nav-review){display:none}
    .contact-grid{grid-template-columns:1fr;align-items:start}
    .concept-banner{font-size:.58rem;letter-spacing:.06em}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
}

@layer components {
  .selector-card{display:grid;grid-template-rows:1fr auto;min-height:420px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);text-decoration:none;overflow:hidden;position:relative}
  .selector-card__visual{min-height:270px;position:relative;overflow:hidden;background:#222}
  .selector-card__visual img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
  .selector-card:hover img{transform:scale(1.035);filter:contrast(1.04)}
  .selector-card__body{padding:22px;display:grid;gap:7px}
  .selector-card__body strong{font-family:Georgia,serif;font-size:1.4rem;font-weight:400}
  .selector-card__body span{font-size:.74rem;opacity:.65}
}