/* ===========================
   HEADER — full-bleed art + overlay nav
=========================== */
.kb-header{ position:relative; width:100%; }
.kb-header__img{ width:100vw; max-width:100%; height:90px; display:block; }

/* nav overlay — shorter width */
.kb-nav{
  position:absolute; inset:0; z-index:2;
  max-width: 850px;
  margin-inline:auto;
  padding: 10px 16px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
}

.kb-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; gap:150px; align-items:center;
  font-family: var(--font-serif);
  font-weight:500; letter-spacing:.015em;
}
.kb-nav__list--left{ justify-self:start; transform: translateY(-30px) translateX(-94px); }
.kb-nav__list--right{ justify-self:end;  transform: translateY(-30px) translateX(94px); }

.kb-nav a{
  position:relative; color: var(--nav-link); font-size:1.02rem;
  text-decoration:none;
}
.kb-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: var(--color-bg); /* underline = page background color */
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease; border-radius:2px; opacity:1;
}
.kb-nav a:hover::after{
  transform: scaleX(1); /* animate underline in */
}

/* brand (logo) — unchanged */
.kb-brand{
  display:inline-flex; justify-content:center; align-items:center;
  z-index:3;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.kb-brand img{ display:block; height:110px; }

/* ===========================
   HERO — About section
=========================== */
.hero{
  position:relative;
  min-height: 500px;
  display:flex;
  flex-direction: column; /* stack svg then button */
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem); /* matches below sections */
  max-width: 1200px;
}

/* side florals (background) */
.hero__floral-bg{
  position:absolute;
  inset:0;
  background:
    url("../../images/floral.png") left center / contain no-repeat,
    url("../../images/floral.png") right center / contain no-repeat;
  opacity:0.25;
  filter:grayscale(1);
  z-index:0;
}

/* center about section SVG — larger and centered */
.hero__floral-center{
  position: center;
  z-index: 1;
  width: min(1000px, 80%); /* larger */
  max-width: 100%;
  height: auto;
  transform: translateY(30px) translateX(28px);
  margin-inline: auto;
  opacity: 1;
}

/* ===========================
   LEARN MORE (hero) — default & hover layers
   NOTE: We move the WHOLE anchor (hit area) so hover aligns.
=========================== */

/* Layers (no transforms here so hit-test stays aligned) */
.state_default{
  position: relative;
  display:block;
  height:auto;
  width: 130px;
  opacity: 1;
  transition: opacity .18s ease-in-out;
}
.state_hover{
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: auto;
  opacity: 0;              /* hidden by default */
  pointer-events: none;    /* clicks go to the anchor */
  transition: opacity .18s ease-in-out;
}

/* Swap on hover (only one shows at a time) */
.cta-card:hover .state_hover,
.cta-card:focus-visible .state_hover{ opacity:1; }

/* Hide Learn More default on hover (was missing before) */
.cta-card:hover .state_default,
.cta-card:focus-visible .state_default{ opacity:0; }

/* Move ONLY the hero's Learn More anchor so its hover follows exactly */
.hero .cta-card{
  position: relative;
  display: block;
  width: 130px;     /* match SVG width to keep hit area exact */
  height: auto;
  left: -390px;     /* move left with the anchor (not the images) */
  top: -50px;       /* move up to match your composition */
}

/* ===========================
   FEATURES — aligned with hero margins
=========================== */
.feature {
  position:relative;
  margin-block: var(--space-6);
  margin-inline: auto;
  padding-inline: clamp(1rem, 9vw, 5rem); /* same left/right margins */
  max-width: 1200px;
}

.feature__row{
  display:grid; grid-template-columns: 320px 1fr; 
  gap: clamp(24px, 6vw, 64px); 
  align-items:start;
}

.feature--right .feature__row{ grid-template-columns: 1fr 320px; }
.feature--right .feature__media{ order:2; }
.feature--right .feature__copy{ order:1;}
.feature__copy{transform: translateY(80px) translateX(220px);}

.feature__media img{
  width:390px;
}
.feature__mediaright img{
  width:390px;
  transform: translateX(500px)
}

.feature__title{
  font-family: var(--font-serif);
  font-size: var(--size-500);
  line-height:1.2; margin:0 0 6px; color: var(--text-body);
  text-align: center;
  transform: translateX(-270px) translateY(50px);
  margin-bottom: 40px;
}
.feature__titleright{
  font-family: var(--font-serif);
  font-size: var(--size-500);
  line-height:1.2; margin:0 0 6px; color: var(--text-body);
  text-align: center;
  transform: translateX(-820px) translateY(50px);
  margin-bottom: 40px;
}
.feature__desc{
  color: var(--color-text-title); margin:0 0 14px; max-width:15ch;
  text-align: center; transform: translateX(-20px) translateY(50px);
}
.feature__descright {
  color: var(--color-text-title); margin:0 0 14px; max-width:15ch;
  text-align: center; transform: translateX(-740px) translateY(50px);
}

/* --- Card SVG buttons: ONE visible, hover swaps to Learn More for feature cards --- */
.cta-card{
  position: relative;
  display:block;
  height:auto;
  width: 120px; /* default for feature cards; hero overrides to 130px above */
  transition: opacity .18s ease-in-out;
}  

/* Default button (View Work) */
.button,
.buttonright{
  position: relative;
  display:block;
  height:auto;
  width: 120px;
  transition: opacity .18s ease-in-out;
}

/* Hover overlay (Learn More) — sits exactly on top, hidden until hover */
.button-hover,
.buttonright-hover{
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: auto;
  opacity: 0;              /* hidden by default */
  pointer-events: none;    /* clicks go to the anchor */
  transition: opacity .18s ease-in-out;
}

/* Keep your manual offsets exactly as you had them */
.button{ transform: translateY(60px); }
.button-hover{ transform: translateY(60px); }

.buttonright{ transform: translateY(60px) translateX(-720px); }
.buttonright-hover{ transform: translateY(60px) translateX(-720px); }

/* Swap on hover (only one shows at a time) */
.cta-card:hover .button-hover,
.cta-card:focus-visible .button-hover,
.cta-card:hover .buttonright-hover,
.cta-card:focus-visible .buttonright-hover{ opacity:1; }

.cta-card:hover .button,
.cta-card:focus-visible .button,
.cta-card:hover .buttonright,
.cta-card:focus-visible .buttonright{ opacity:0; }

@media (max-width:900px){
  .feature__row{ grid-template-columns:1fr; }
  .feature--right .feature__media{ order:1; }
}
/* ===========================
   BACK TO TOP BUTTON
=========================== */
#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
}

#backToTop img {
  width: 34px;
  height: auto;
  display: block;
}

#backToTop.visible {
  opacity: 1;
  pointer-events: auto;
}

#backToTop:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease;
}


/* ===========================
   FOOTER
=========================== */
footer{
  margin:50px;
  padding-bottom: 20px;
  max-width: 500px;
  margin-inline: auto;
  text-align:center;
  font-family: var(--font-serif);
}