:root{
  --slate:#3A4442;
  --grey:#8A8F8E;
  --mist:#A8C4C8;
  --tan:#B98A5E;
  --paper:#F4F2EE;
  --ink:#1A1C1B;
  --cloud:#F4F2EE;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Montserrat",system-ui,sans-serif;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;
  background:var(--ink);color:var(--cloud);padding:.7rem 1.2rem;
  font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
}
.skip-link:focus{left:12px;top:12px;}

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

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.72rem;
  font-weight:500;
  color:var(--tan);
  margin:0 0 1.1rem;
}
.eyebrow.light{color:var(--mist);}

.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1;
  margin:0 0 1.6rem;
  color:var(--slate);
  letter-spacing:.01em;
}
.section-title.light{color:var(--cloud);}

/* ============ HEADER ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s ease,box-shadow .4s ease;
}
.header-inner{
  max-width:1280px;margin:0 auto;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.1rem,4vw,2.5rem);
  gap:1rem;
}
.wordmark{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.4rem,3.2vw,1.85rem);
  letter-spacing:.06em;
  color:var(--cloud);
  transition:color .4s ease;
  min-width:0;
  flex-shrink:0;
}
.site-header.scrolled{
  background:var(--slate);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.site-header.scrolled .wordmark{color:var(--cloud);}

.nav-menu{
  list-style:none;margin:0;padding:0;
  display:flex;gap:clamp(1.2rem,2.6vw,2.4rem);align-items:center;
}
.nav-menu a{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.74rem;
  font-weight:500;
  color:var(--cloud);
  padding:.4rem 0;
  position:relative;
}
.nav-menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--tan);transition:right .35s ease;
}
.nav-menu a:hover::after,.nav-menu a:focus-visible::after{right:0;}

/* Hamburger — hidden by default, flexed into view on mobile */
.nav-toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;
  gap:5px;
  padding:8px;
  flex-shrink:0;
}
.nav-toggle span{
  display:block;width:22px;height:1.5px;
  background:var(--cloud);
  transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 1rem) clamp(1.1rem,5vw,4rem) clamp(2.5rem,6vh,4.5rem);
  overflow:hidden;
  background:var(--slate);
}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:72% 38%;
}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,28,27,.62) 0%,rgba(26,28,27,.1) 28%,rgba(26,28,27,.32) 58%,rgba(26,28,27,.93) 100%),
    linear-gradient(90deg,rgba(26,28,27,.8) 0%,rgba(26,28,27,.4) 40%,rgba(26,28,27,.04) 68%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;
}
.hero-name{
  font-family:var(--serif);
  font-weight:600;
  color:var(--cloud);
  font-size:clamp(3.2rem,13vw,9rem);
  line-height:.92;
  letter-spacing:.02em;
  margin:0;
  text-shadow:0 2px 40px rgba(0,0,0,.4);
}
.hero-name span{color:var(--mist);}
.hero-eyebrow{color:var(--mist);margin-bottom:1.4rem;}

/* Press quotes — editorial stagger */
.press{
  list-style:none;margin:2.6rem 0 0;padding:0;
  display:grid;
  gap:1.4rem 2.4rem;
  grid-template-columns:repeat(3,1fr);
  max-width:960px;
  align-items:start;
}
.press .quote{display:flex;flex-direction:column;}
/* Cascade each quote down for an editorial float effect */
.press .quote:nth-child(2){margin-top:2.6rem;}
.press .quote:nth-child(3){margin-top:1.2rem;}
.press .quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  line-height:1.35;
  color:var(--cloud);
  margin:0 0 .6rem;
}
.press .cite{
  font-family:var(--sans);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--mist);
  display:block;
}
.press .cite em{font-style:normal;color:var(--tan);}

.scroll-cue{
  position:absolute;bottom:1.4rem;right:clamp(1.1rem,5vw,4rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  color:var(--cloud);
}
.scroll-cue span{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  writing-mode:vertical-rl;
}
.cue-dot{animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1;}50%{transform:translateY(8px);opacity:.3;}}

/* ============ ABOUT ============ */
.about{
  max-width:1280px;margin:0 auto;
  padding:clamp(3.5rem,9vw,7rem) clamp(1.1rem,5vw,4rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
.about-media{
  position:relative;
  min-width:0;
  /* Sticky scroll: image holds position while text scrolls */
}
.about-media img{
  width:100%;height:auto;
  object-fit:cover;object-position:center 30%;
  min-height:380px;
  max-height:85vh;
  box-shadow:0 32px 64px -28px rgba(26,28,27,.52);
}
.about-media-tag{
  position:absolute;left:0;bottom:1.4rem;
  background:var(--slate);color:var(--mist);
  font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.6rem 1.1rem;margin:0;
}
.about-text{max-width:62ch;min-width:0;}
.about-text p{margin:0 0 1.4rem;font-size:1.05rem;}
.about-text .lede{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,1.72rem);
  line-height:1.4;
  color:var(--slate);
}
.about-text em{font-style:italic;color:var(--tan);}
.about-text .lede em{color:var(--slate);font-weight:500;}

/* "I am Toni." — the signature display line */
.iam{
  font-family:var(--serif);
  font-size:clamp(3.5rem,10vw,7.5rem);
  line-height:1;
  color:var(--slate);
  margin:0 0 1rem !important;
  font-weight:500;
  letter-spacing:.01em;
  /* Space above, hosting the tan accent rule */
  padding-top:3rem;
  position:relative;
}
/* Tan rule above the signature line */
.iam::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:3rem;height:1px;
  background:var(--tan);
}

.closing{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  color:var(--tan);
  margin:0 !important;
  line-height:1.45;
}

/* ============ EXPLORE ============ */
.explore{background:var(--slate);color:var(--cloud);}
.explore-inner{
  max-width:1280px;margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1.1rem,5vw,4rem);
}
.explore .eyebrow{color:var(--mist);}
.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(244,242,238,.12);
  margin-top:1.2rem;
}
.tile{
  background:var(--slate);
  padding:clamp(1.6rem,3vw,2.6rem);
  min-height:200px;
  display:flex;flex-direction:column;
  transition:background .35s ease;
  min-width:0;
  position:relative;
  overflow:hidden;
}
/* Tan top-border that scales in from left on hover */
.tile::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:var(--tan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .42s ease;
}
.tile:hover::after,.tile:focus-visible::after{transform:scaleX(1);}
.tile-num{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--tan);
}
.tile-label{
  font-family:var(--serif);
  font-size:clamp(2rem,3.4vw,2.8rem);
  line-height:1.1;
  margin-top:auto;
  color:var(--cloud);
}
.tile-cap{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey);margin-top:.5rem;
}
.tile-arrow{
  font-size:1.4rem;color:var(--tan);margin-top:1rem;
  display:inline-block;
  transform:translateX(0);transition:transform .35s ease;
}
.tile:hover,.tile:focus-visible{background:#2c3533;}
.tile:hover .tile-arrow,.tile:focus-visible .tile-arrow{transform:translateX(10px);}

/* ============ CONTACT ============ */
.contact{
  position:relative;
  min-height:70vh;
  display:flex;align-items:center;
  padding:clamp(4rem,10vw,7rem) clamp(1.1rem,5vw,4rem);
  overflow:hidden;
  background:var(--ink);
}
.contact-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 35%;
}
.contact-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(26,28,27,.93) 0%,rgba(26,28,27,.65) 52%,rgba(26,28,27,.18) 100%);
}
.contact-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;width:100%;}
.contact-links{display:grid;gap:1rem;max-width:520px;margin-top:1.8rem;}
.c-link{
  display:flex;flex-direction:column;gap:.3rem;
  border:1px solid rgba(185,138,94,.55);
  padding:1.2rem 1.5rem;
  background:rgba(26,28,27,.42);
  transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.c-link:hover,.c-link:focus-visible{
  background:rgba(185,138,94,.18);
  border-color:var(--tan);
  transform:translateX(6px);
}
.c-link-label{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mist);
}
.c-link-val{
  font-family:var(--serif);
  font-size:clamp(1.3rem,3.2vw,2.1rem);
  color:var(--tan);
  line-height:1.2;
}
.copy-hint{
  font-family:var(--sans);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);min-height:.9em;
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--ink);color:var(--cloud);
  padding:clamp(2.5rem,6vw,4rem) clamp(1.1rem,5vw,4rem);
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:1.4rem 2.5rem;
  align-items:center;justify-content:space-between;
}
.footer-inner .wordmark{color:var(--cloud);font-size:1.5rem;}
.footer-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;}
.footer-nav a{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);transition:color .3s ease;
}
.footer-nav a:hover{color:var(--tan);}
.footer-contact{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;}
.footer-contact a{font-family:var(--serif);font-size:1.05rem;color:var(--tan);}
.credit{
  width:100%;margin:.5rem 0 0;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--grey);
}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}

/* ============ DESKTOP STICKY ABOUT IMAGE ============ */
@media(min-width:821px){
  .about-media{
    position:sticky;
    top:calc(var(--nav-h) + 2rem);
    align-self:start;
  }
}

/* ============ RESPONSIVE — TABLET ============ */
@media(max-width:820px){
  .about{grid-template-columns:1fr;}
  .about-media img{min-height:300px;max-height:60vw;}
  .tiles{grid-template-columns:1fr;}
  .tile{
    min-height:auto;flex-direction:row;align-items:center;
    gap:1rem;padding:1.4rem 1.5rem;
  }
  .tile::after{display:none;}
  .tile-label{margin-top:0;font-size:1.9rem;}
  .tile-cap{margin-top:0;}
  .tile-arrow{margin-top:0;margin-left:auto;}
}

/* ============ RESPONSIVE — MOBILE ============ */
@media(max-width:720px){
  /* Show ALL three press quotes stacked — they're short and add credibility */
  .press{
    grid-template-columns:1fr;
    gap:1.1rem;
    max-width:100%;
    margin-top:2rem;
    align-items:start;
  }
  /* Reset desktop stagger */
  .press .quote:nth-child(2){margin-top:0;}
  .press .quote:nth-child(3){margin-top:0;}
  /* Ensure all quotes visible (override any display:none) */
  .press .quote{display:flex;}
  .press .quote p{font-size:.95rem;margin-bottom:.4rem;}

  .scroll-cue{display:none;}

  /* Hamburger visible */
  .nav-toggle{display:flex;}

  /* Slide-down mobile nav */
  .nav-menu{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--slate);
    padding:1rem clamp(1.1rem,5vw,2.5rem) 1.6rem;
    transform:translateY(-140%);
    transition:transform .4s ease;
    box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
    z-index:99;
  }
  .nav-menu.open{transform:translateY(0);}
  .nav-menu li{width:100%;border-bottom:1px solid rgba(244,242,238,.1);}
  .nav-menu a{display:block;padding:1rem 0;font-size:.88rem;}

  /* Contact links full-width on mobile */
  .contact-links{max-width:100%;}

  /* Slightly reduce iam top padding on mobile */
  .iam{padding-top:2.2rem;}
  .iam::before{width:2.2rem;}
}

/* ============ RESPONSIVE — SMALL MOBILE ============ */
@media(max-width:540px){
  /* Stack footer items vertically */
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:.9rem 0;
  }
  .footer-contact{
    flex-direction:column;
    gap:.5rem;
  }
}

@media(max-width:400px){
  body{font-size:17px;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .cue-dot{animation:none;}
  .tile::after{transition:none;}
}