@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#14213D;
  --ink-soft:#28395C;
  --lens:#3E7C8C;
  --lens-soft:#EAF2F3;
  --brass:#B8935A;
  --paper:#F7F8FA;
  --paper-dim:#EEF1F4;
  --charcoal:#2B2D33;
  --line:#DCE1E6;
  --white:#FFFFFF;
  --emerald:#1F5F4A;
  --emerald-soft:#E7F0EC;
  --radius:2px;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces',serif;
  color:var(--ink);
  margin:0 0 0.5em 0;
  line-height:1.15;
  font-weight:500;
}

h1{font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:600;}
h2{font-size:clamp(1.7rem,3vw,2.3rem);}
h3{font-size:1.25rem;}

p{margin:0 0 1em 0;}
a{color:inherit;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lens);
  margin-bottom:0.9em;
  display:block;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- Header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
header.site::before{
  content:'';
  position:absolute; inset:0;
  background:rgba(247,248,250,0.92);
  backdrop-filter:blur(8px);
  z-index:-1;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px;
  max-width:var(--max); margin:0 auto;
  min-height:92px;
}
.brand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.25rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-0.01em;
  display:flex; align-items:center; gap:10px;
}
.brand span{color:var(--lens);}
.brand img{height:74px; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none;
  color:var(--ink-soft);
  font-size:0.93rem;
  font-weight:500;
  position:relative;
  padding-bottom:4px;
}
.nav-links a.nav-cta{padding-bottom:13px;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brass);
}
.nav-cta{
  background:var(--ink);
  color:var(--white) !important;
  padding:13px 24px;
  border-radius:var(--radius);
  text-decoration:none;
  font-size:0.9rem;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  transition:background 0.2s ease;
}
.nav-cta:hover{background:var(--ink-soft);}
.nav-toggle{display:none;}

@media (max-width:820px){
  .nav-links{
    position:fixed; top:104px; left:0; right:0; bottom:0;
    background:var(--paper);
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px 32px;
    transform:translateX(100%);
    transition:transform 0.25s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{
    display:block; width:100%; text-align:left;
    padding:22px 0; border-bottom:1px solid var(--line);
    font-size:1.3rem;
  }
  .nav-links a.active::after{display:none;}
  .nav-links a.active{color:var(--brass);}
  .nav-cta{margin-top:28px; padding:18px 32px; text-align:center; display:flex; width:100%;}
  .nav-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:28px; height:20px; position:relative;
  }
  .nav-toggle span, .nav-toggle::before, .nav-toggle::after{
    content:''; position:absolute; left:0; right:0; height:2px; background:var(--ink);
  }
  .nav-toggle::before{top:0;}
  .nav-toggle span{top:9px;}
  .nav-toggle::after{top:18px;}
}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--white);
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background-image:linear-gradient(100deg, rgba(20,33,61,0.96) 30%, rgba(20,33,61,0.55) 65%, rgba(20,33,61,0.35) 100%), var(--hero-photo);
  background-size:cover;
  background-position:center;
  opacity:0.9;
}
.hero-grid{
  position:relative; z-index:1;
  max-width:var(--max); margin:0 auto;
  padding:110px 28px 100px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; align-items:center;
}
.hero h1.brass-heading{
  color:var(--brass);
  font-size:clamp(2rem,3.6vw,3rem);
  filter:blur(9px);
  opacity:0;
  animation:focus-in 1.4s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:0.15s;
}
.cta-band{
  padding:80px 0;
  background:linear-gradient(120deg, var(--lens), var(--ink-soft));
}
.hero p.lede{
  color:#fff; font-size:1.08rem; max-width:50ch;
  animation:fade-up 0.7s ease forwards; animation-delay:0.4s; opacity:0;
}
.hero-ctas{display:flex; gap:16px; margin-top:28px; animation:fade-up 0.7s ease forwards; animation-delay:0.6s; opacity:0;}

@keyframes focus-in{
  0%{filter:blur(9px); opacity:0; transform:translateY(6px);}
  100%{filter:blur(0); opacity:1; transform:translateY(0);}
}
@keyframes fade-up{
  0%{opacity:0; transform:translateY(10px);}
  100%{opacity:1; transform:translateY(0);}
}

.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:var(--radius);
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  transition:all 0.2s ease;
}
.btn-primary{background:var(--brass); color:var(--ink);}
.btn-primary:hover{background:#c9a06d;}
.btn-ghost{border:1px solid rgba(255,255,255,0.35); color:var(--white);}
.btn-ghost:hover{border-color:#fff;}
.btn-ghost.on-light{border-color:var(--ink); color:var(--ink);}

.hero-panel{
  aspect-ratio:4/5;
  border-radius:var(--radius);
  background:
    linear-gradient(155deg, rgba(62,124,140,0.35), rgba(20,33,61,0.1)),
    repeating-linear-gradient(115deg, #22335A 0 2px, #1B2A4A 2px 40px);
  border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:flex-end; padding:22px;
}
.hero-panel .cap{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem; color:#C9D3E2; letter-spacing:0.05em;
}

.team-member{
  display:flex; gap:44px; align-items:flex-start;
}
.team-photo{
  width:230px; height:230px; flex-shrink:0;
  object-fit:contain;
}
.team-photo-lg{width:276px; height:276px;}
@media (max-width:820px){
  .team-member{flex-direction:column; gap:24px;}
  .team-photo{width:180px; height:180px; align-self:center;}
  .team-photo-lg{width:216px; height:216px;}
}

.photo-panel{
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 24px 48px -20px rgba(20,33,61,0.35);
  background:var(--paper-dim);
}
.photo-panel img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---------- Sections ---------- */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.bg-dim{background:var(--paper-dim);}
.bg-ink{background:var(--ink); color:var(--white);}
.bg-ink h2, .bg-ink h3{color:var(--white);}
.bg-lens{background:var(--lens-soft);}

/* ---------- Cards / grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr; gap:32px;}
  .hero-grid{grid-template-columns:1fr;}
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  padding:32px 28px;
  border-radius:var(--radius);
}
.card .mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--lens-soft); border:1px solid var(--lens);
  margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
}

.diff-row{
  display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line);
}
.diff-row:last-child{border-bottom:none;}
.diff-row .num{
  font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:0.85rem; padding-top:4px; flex:none; width:28px;
}

/* ---------- Services page ---------- */
.service-block{
  border-top:1px solid var(--line);
  padding:44px 0;
  display:grid; grid-template-columns:280px 1fr; gap:40px;
}
.service-block:last-child{border-bottom:1px solid var(--line);}
.service-block .cat-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--lens);
}
@media (max-width:820px){
  .service-block{grid-template-columns:1fr; gap:14px;}
}

/* ---------- Brand strip ---------- */
.brand-scatter-section{
  position:relative;
  overflow:hidden;
  min-height:460px;
  display:flex;
  align-items:center;
}
.brand-scatter{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
}
.bl{
  position:absolute;
  filter:brightness(0) invert(1);
  opacity:0.14;
  object-fit:contain;
}
.bl-1{ top:6%;  left:58%; width:190px; transform:rotate(-13deg); }
.bl-2{ top:58%; left:4%;  width:150px; transform:rotate(9deg);  opacity:0.16; filter:grayscale(1) invert(1); }
.bl-3{ top:70%; left:74%; width:240px; transform:rotate(-4deg); opacity:0.15; }
.bl-4{ top:3%;  left:2%;  width:200px; transform:rotate(11deg); }
.bl-5{ top:6%; left:32%; width:190px; transform:rotate(-3deg); opacity:0.12; }
.bl-6{ top:74%; left:24%; width:150px; transform:rotate(6deg);  opacity:0.15; }
.bl-7{ top:12%; left:83%; width:120px; transform:rotate(19deg); opacity:0.13; }
.bl-8{ top:86%; left:52%; width:170px; transform:rotate(-9deg); }

.brand-scatter-mobile{display:none;}

@media (max-width:820px){
  .brand-scatter-section{min-height:auto; display:block; padding:56px 0;}
  .brand-scatter{display:none;}
  .brand-scatter-mobile{
    display:flex; flex-wrap:wrap; gap:22px 30px;
    justify-content:center; align-items:center;
    margin-top:36px;
  }
  .brand-scatter-mobile img{
    height:26px; width:auto; max-width:110px; object-fit:contain;
    filter:brightness(0) invert(1); opacity:0.6;
  }
  .brand-scatter-mobile img.guess-logo{
    height:40px;
    filter:grayscale(1) invert(1); opacity:0.7;
  }
}


/* ---------- Contact / hours ---------- */
.chart-hours{
  font-family:'IBM Plex Mono',monospace; font-size:0.95rem;
}
.chart-hours .row{
  display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line);
}
.chart-hours .row:last-child{border-bottom:none;}
.chart-hours .row.today{color:var(--ink); font-weight:600;}

.map-block{
  aspect-ratio:16/10; border-radius:var(--radius); border:1px solid var(--line);
  background:
    linear-gradient(var(--paper-dim), var(--paper-dim)),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px);
  position:relative;
}
.map-pin{
  position:absolute; left:52%; top:46%;
  width:16px; height:16px; border-radius:50% 50% 50% 0;
  background:var(--brass); transform:rotate(-45deg);
  box-shadow:0 0 0 6px rgba(184,147,90,0.18);
}

form.contact-form{display:grid; gap:18px;}
form.contact-form label{
  display:block; font-size:0.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px;
}
form.contact-form input, form.contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:0.95rem; background:var(--white);
}
form.contact-form input:focus, form.contact-form textarea:focus{
  outline:2px solid var(--lens); outline-offset:1px;
}

/* ---------- Footer ---------- */
footer.site{
  background:var(--ink); color:#C9D3E2; padding:56px 0 28px;
}
footer.site .foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,0.12);
}
footer.site h3{color:var(--white); font-size:1rem;}
footer.site a{color:#C9D3E2; text-decoration:none; font-size:0.92rem;}
footer.site a:hover{color:var(--white);}
footer.site ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.foot-bottom{
  display:flex; justify-content:space-between; padding-top:22px; font-size:0.82rem; color:#8996B0;
  flex-wrap:wrap; gap:10px;
}
@media (max-width:820px){
  footer.site .foot-grid{grid-template-columns:1fr; gap:28px;}
}

:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}

/* ---------- Offers page ---------- */
.offer-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:36px;
}
.offer-card img{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover;
}
.offer-body{padding:32px 36px;}
.offer-badge{
  display:inline-block;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  padding:6px 14px; border-radius:20px;
  margin-bottom:14px;
}
.offer-badge.limited{background:var(--emerald-soft); color:var(--emerald);}
.offer-badge.ongoing{background:var(--lens-soft); color:var(--lens);}
.offer-body h3{font-size:1.4rem; margin-bottom:10px;}
.offer-body p{max-width:70ch;}
.offer-howto{
  background:var(--paper-dim); border-left:3px solid var(--brass);
  padding:14px 18px; margin:16px 0; font-size:0.94rem;
}
.offer-card.minimal .offer-body{padding:20px 36px 28px; text-align:center;}
.offer-card.minimal p{margin:0 auto; text-align:center;}