/* =========================
   Variables & base
   ========================= */
:root{
  /* Brand */
  --brand-color: #111;

  /* Background assets (keep filenames as provided) */
  --bg-desktop-jpg:  url('office-hero-desktop-3840x2160.jpg');
  --bg-desktop-webp: url('office-hero-desktop-3840x2160.webp');
  --bg-mobile-jpg:   url('office-hero-mobile-2160x3840.jpg');
  --bg-mobile-webp:  url('office-hero-mobile-2160x3840.webp');

  /* Glass placard (neutral, semi-transparent) */
  --card-radius: 0px;                        /* square corners */
  --card-pad-y: clamp(10px, 1.6vw, 22px);
  --card-pad-x: clamp(22px, 3.6vw, 48px);
  --card-bg: rgba(255,255,255,.26);          /* translucent glass */
  --card-border: rgba(255,255,255,.50);      /* subtle white border */
  --card-shadow: 0 10px 28px rgba(0,0,0,.10);

  /* Footer */
  --footer-color: rgba(17,17,17,.72);

  /* About icon button */
  --about-bg: rgba(255,255,255,.22);
  --about-bg-hover: rgba(255,255,255,.30);
  --about-border: rgba(255,255,255,.50);

  /* Modal overlay / card */
  --overlay-bg: rgba(0,0,0,.35);
  --modal-bg: rgba(255,255,255,.28);
  --modal-border: rgba(255,255,255,.5);
  --modal-shadow: 0 18px 48px rgba(0,0,0,.18);
}

*{ box-sizing: border-box; }
html, body{
  height:100%;
  margin:0;
  /* Neutral stone to avoid black flash while the image loads */
  background:#eae8e2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Hero background
   ========================= */
.hero{
  min-height:100dvh;
  display:grid;
  place-items:center;
  position:relative;
  text-align:center;
  overflow:hidden;

  /* Fallback first (JPG), then modern (WebP) if supported */
  background-image: var(--bg-desktop-jpg);
  background-size: cover;
  background-position: 60% center; /* keeps the window prominent */
}

/* Use image-set when supported (serves WebP automatically) */
@supports (background-image: image-set(url("x") type("image/webp") 1x)){
  .hero{
    background-image: image-set(
      var(--bg-desktop-webp) type("image/webp") 1x,
      var(--bg-desktop-jpg)  type("image/jpeg") 1x
    );
  }
}

/* Swap to portrait asset on narrow/aspect-ratio screens */
@media (max-aspect-ratio: 10/11){
  .hero{
    background-position: center;
    background-image: var(--bg-mobile-jpg);
  }
  @supports (background-image: image-set(url("x") type("image/webp") 1x)){
    .hero{
      background-image: image-set(
        var(--bg-mobile-webp) type("image/webp") 1x,
        var(--bg-mobile-jpg)  type("image/jpeg") 1x
      );
    }
  }
}

/* =========================
   Tiny top-right glass icon button
   ========================= */
.nav{
  position: fixed;
  z-index: 10;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
}

.about-link{
  appearance: none; -webkit-appearance: none;
  width: 40px; height: 40px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--about-border);
  background: var(--about-bg);
  color: #111;
  border-radius: 0;                         /* square */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  cursor: pointer;
}
.about-link::before{
  content: "i";
  font: 600 18px/1 "Cormorant Garamond","Times New Roman",Times,serif;
  letter-spacing: .02em;
}
.about-link:hover{
  background: var(--about-bg-hover);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.about-link:active{ transform: translateY(1px); }
.about-link:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}
/* Touch devices: slightly stronger bg */
@media (hover: none){
  .about-link{ background: rgba(255,255,255,.28); }
}

/* =========================
   Glass placard + logo text
   ========================= */
.logo-card{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--card-pad-y) var(--card-pad-x);
  border-radius: var(--card-radius);   /* square */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Hairline inner highlight for a premium edge (neutral) */
.logo-card::after{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--card-radius);   /* square */
  border: 1px solid rgba(255,255,255,.20);
  pointer-events:none;
}

/* Logo text (pure text, no image) */
.brand{
  margin:0;
  color: var(--brand-color);
  font-family: "Cormorant Garamond","Times New Roman",Times,serif;
  font-weight: 500;
  letter-spacing: .08em;
  text-rendering: optimizeLegibility;
  font-size: clamp(2rem, 7.2vw, 5.6rem);

  /* Gentle float-in */
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp .8s ease-out forwards;
}

@keyframes fadeUp{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .brand{ animation:none; opacity:1; transform:none; }
}

/* Stronger background if blur unsupported */
@supports not (backdrop-filter: blur(1px)){
  .logo-card{ background: rgba(255,255,255,.60); }
}

/* =========================
   Footer
   ========================= */
.footer{
  position:absolute;
  bottom:18px; left:50%; transform:translateX(-50%);
  font: 500 12px/1.2 "Cormorant Garamond","Times New Roman",Times,serif;
  color: var(--footer-color);
  letter-spacing:.06em;
  padding:6px 10px;
  background: rgba(255,255,255,.35);
  border-radius:12px;                 /* set to 0 if you want square footer too */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* guard for notches/safe area on mobile */
@supports (padding: max(0px)){
  .footer{ padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}

/* =========================
   Modal (popup)
   ========================= */
.modal[hidden]{ display:none; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
}

.modal__overlay{
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.about-card{
  position: relative;
  max-width: 760px;
  width: min(92vw, 720px);
  padding: clamp(18px,3.6vw,28px) clamp(18px,4.5vw,36px);
  background: var(--modal-bg);
  border: 1px solid var(--modal-border);
  border-radius: 0; /* square */
  box-shadow: var(--modal-shadow);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  color: #111;
  animation: modalIn .24s ease-out;
}

@keyframes modalIn{
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.about-card h2{
  margin: 0 0 8px;
  font: 600 clamp(22px,4vw,28px)/1.1 "Cormorant Garamond","Times New Roman",Times,serif;
  letter-spacing: .06em;
}
.about-card p{
  margin: 0 0 12px;
  font: 400 clamp(16px,2.2vw,18px)/1.6 "Cormorant Garamond","Times New Roman",Times,serif;
  letter-spacing: .01em;
}

.modal__close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.22);
  color: #111;
  border-radius: 0;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  font: 600 20px/1 "Cormorant Garamond","Times New Roman",Times,serif;
}
.modal__close:hover{ background: rgba(255,255,255,.3); }
.modal__close:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
}