:root{
  
  --butter:      #F4D791;   
  --butter-dk:   #E7C173;   
  --ink:         #2A1917;   
  --ink-deep:    #271310;   
  --cream:       #F1E5CF;   
  --paper:       #F9F7F3;   
  --tile:        #F2E9DB;   
  --concrete:    #A29689;   
  --sky:         #B7CFDB;   

  --gut: clamp(20px, 3.6vw, 52px);   
  
  --gap: clamp(6px, .7vw, 10px);
  --sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  
  --display: "Luckiest Guy", "Archivo", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }

.wrap{ padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink-deep); color:var(--butter);
  padding:12px 18px; font-weight:600;
}
.skip:focus{ left:8px; top:8px; }

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

.brand-mark{
  display:block;
  height:clamp(34px, 3.4vw, 48px);          
  aspect-ratio:780/238;
  background-color:var(--ink);
  -webkit-mask:url("sani-wordmark.png") no-repeat center/contain;
          mask:url("sani-wordmark.png") no-repeat center/contain;
}
.brand-mark-lg{ height:clamp(44px,4.2vw,60px); background-color:var(--butter); }

.brand{ display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); text-decoration:none; }
.brand-sub{
  font-size:13px; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
.brand-sub.light{ color:var(--butter); }

.site-head{
  position:sticky; top:0; z-index:50;
  background:var(--butter);
}
.head-inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  padding:clamp(16px,2.6vw,38px) var(--gut);   
}
.nav{
  display:flex; gap:clamp(14px,2.2vw,30px);
  margin-left:auto;
}
.nav a{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding-block:6px; border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.nav a:hover{ border-bottom-color:var(--ink); }

.btn{
  display:inline-block;
  padding:20px 38px;                         
  font-size:13.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; line-height:1.15;
  border:0; border-radius:0;                 
  transition:background-color .18s ease, transform .18s ease;
}
.btn-dark{ background:var(--ink-deep); color:var(--butter); }
.btn-dark:hover{ background:#3a201b; }
.btn-dark:active{ transform:translateY(1px); }
.head-cta{ padding:15px 26px; font-size:12px; }

.link-ul{
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding-bottom:6px; border-bottom:2px solid var(--ink);
}
.link-ul.light{ color:var(--butter); border-bottom-color:var(--butter); }
.link-ul:hover{ opacity:.68; }

.link-arrow{
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:12px;
}
.link-arrow span{ transition:transform .2s ease; }
.link-arrow:hover span{ transform:translateX(5px); }

.hero-lockup{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(8px,.9vw,14px);
  margin:0 0 clamp(20px,2.2vw,30px);
}
.lockup-sm{
  font-family:var(--sans);
  font-size:clamp(15px,1.5vw,22px); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}
.lockup-mark{
  display:block;
  
  width:clamp(260px, 36vw, 640px);
  aspect-ratio:780/238;
  background-color:var(--ink);
  -webkit-mask:url("sani-wordmark.png") no-repeat left center/contain;
          mask:url("sani-wordmark.png") no-repeat left center/contain;
}

.lede{
  margin:0 0 clamp(26px,3vw,38px);
  max-width:26ch;
  font-size:clamp(16px,1.5vw,23px);
  line-height:1.5;
}
.eyebrow{
  margin:0 0 18px;
  font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase;
}
.eyebrow-lg{ font-size:13px; margin:0; }
.h-lg{
  margin:0 0 18px;
  font-size:clamp(1.6rem, 2.7vw, 3.1rem);   
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.015em;
  max-width:13ch;
}
.body{
  margin:0 0 clamp(22px,2.4vw,30px);
  max-width:38ch;
  font-size:15px;
  line-height:1.55;
}

.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:calc(100vh - var(--head-h, 123px));
  height:calc(100svh - var(--head-h, 123px));   
  min-height:480px;
  
  max-height:740px;
}
.hero-copy{
  position:relative;
  display:flex; align-items:center;
  background:var(--concrete) url("img/web/concrete.jpg") center/cover;
  
  padding-block:clamp(44px,5vw,76px);
  padding-left:clamp(24px,9.3vw,134px);
  padding-right:clamp(20px,4vw,58px);
}

.hero-copy::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(214,203,188,.46), rgba(206,194,178,.14) 72%);
  pointer-events:none;
}

.hero > *{ min-height:0; overflow:hidden; }

.hero-copy-inner{ position:relative; z-index:1; max-width:40ch; }
.hero-shot{ position:relative; }

.hero-shot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

.split{ display:grid; grid-template-columns:1fr 1fr; }
.split-shot img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
.split-panel{
  display:flex; align-items:center;
  background:var(--cream);
  padding:clamp(38px,4.4vw,64px) var(--gut);
}
.split-panel.butter{ background:var(--butter); }
.split-panel.sky{ background:var(--sky); }
.panel-inner{ max-width:38ch; }

.bake{ background:var(--paper); padding-block:clamp(52px,6vw,96px); }
.bake-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4.5vw,80px); align-items:start;
  max-width:1240px; margin-inline:auto;
}

.sani-badge{
  display:block; flex:none;
  width:clamp(92px,9.5vw,148px);
  
  margin-left:clamp(-250px, calc((1664px - 100vw) / 2), 0px);   
  aspect-ratio:762/865;                 
  background:url("sani-mark-square.png") no-repeat center/contain;
}

.sani-badge.is-in{ animation:stamp .62s cubic-bezier(.2,.9,.25,1.12) both; }
@keyframes stamp{
  0%   { opacity:0; transform:scale(1.22) rotate(-5deg); }
  55%  { opacity:1; }
  100% { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .sani-badge.is-in{ animation:none; } }

.bake-head .h-lg{ margin:0 0 14px; max-width:17ch; }

.bake-quote{ margin:0; }
.bake-quote cite{
  display:block;
  font-style:normal; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(42,25,23,.62);
}
.bake-body .body{ max-width:56ch; font-size:clamp(16px,1.15vw,18px); line-height:1.68; }
.bake-body .body:last-child{ margin-bottom:0; }

@media (max-width:820px){
  .bake-grid{ grid-template-columns:1fr; }
}

.split{ display:grid; grid-template-columns:1fr 1fr; }
.split-shot img{ width:100%; height:100%; object-fit:cover; min-height:280px; }
.split-panel{
  display:flex; align-items:center;
  background:var(--cream);
  padding:clamp(38px,4.4vw,64px) var(--gut);
}
.split-panel.butter{ background:var(--butter); }
.split-panel.sky{ background:var(--sky); }
.panel-inner{ max-width:38ch; }

.tiles{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  margin-block:var(--gap);
}

.tile{
  position:relative; isolation:isolate;
  height:clamp(340px, 56vh, 560px);
}
.tile img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; z-index:-2;
}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(20,12,9,.84) 0%, rgba(20,12,9,.56) 26%, rgba(20,12,9,.06) 58%),
    radial-gradient(120% 90% at 50% 40%, rgba(20,12,9,0) 45%, rgba(20,12,9,.34) 100%);
}
.tile-copy{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(20px,2.2vw,32px);
  color:#FDF8ED;
}
.tile-eyebrow{
  margin:0 0 10px;
  font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:#FDF8ED;
}
.tile-h{
  margin:0 0 16px;
  font-size:clamp(1.25rem,1.9vw,1.75rem);
  font-weight:700; line-height:1.18; letter-spacing:-.012em;
  max-width:15ch; color:#FDF8ED;
}
.tile-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#FDF8ED; text-decoration:none;
  padding-bottom:6px; border-bottom:2px solid #FDF8ED;
}
.tile-link span{ transition:transform .2s ease; }
.tile-link:hover span{ transform:translateX(5px); }
.tile-link:focus-visible{ outline-color:#FDF8ED; outline-offset:5px; }

.marquee{
  background:var(--sky);
  padding-block:clamp(14px,1.5vw,22px);
  margin-block:var(--gap);   
  overflow:hidden;
}
.marquee-track{
  display:flex; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee-set{
  display:flex; align-items:center;
  list-style:none; margin:0; padding:0;
}
.marquee-set li{
  flex:0 0 auto;
  display:flex; align-items:center;
  font-family:var(--display);
  font-size:clamp(1.5rem,2.9vw,2.6rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}

.marquee-set li::after{
  content:"";
  flex:0 0 auto;
  width:.32em; height:.32em;
  margin-inline:.62em;
  border-radius:50%;
  background:var(--ink);
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

.case{ background:var(--paper); padding-block:clamp(44px,5vw,72px); }
.case-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px; margin-bottom:clamp(20px,2.4vw,30px);
}

.case-strip{
  list-style:none; margin:0;
  padding-inline:var(--gut);
  display:grid;

  grid-template-columns:repeat(3, 1fr);
  gap:clamp(10px,1.2vw,18px);
}
@media (min-width:1700px){ .case-strip{ grid-template-columns:repeat(6, 1fr); } }
@media (max-width:820px){  .case-strip{ grid-template-columns:repeat(2, 1fr); } }
.case-strip > li{ background:var(--tile); }
.case-strip img{
  width:100%; aspect-ratio:5/6; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.case-strip > li:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .case-strip img{ transition:none; }
  .case-strip > li:hover img{ transform:none; }
}

.split.about{ min-height:clamp(300px, 34vh, 420px); }

.about .panel-inner{ max-width:34rem; }
.about .h-lg{ max-width:none; }
.about .split-shot{ position:relative; min-height:0; }
.about .split-shot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; min-height:0;
}

.socials-band{ background:var(--butter); padding-block:clamp(40px,4.6vw,72px); }

.socials-split{
  display:grid;

  grid-template-columns:minmax(250px,320px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,44px); align-items:center;
  
  max-width:1560px; margin-inline:auto;
}
.socials-copy{
  display:flex; align-items:center;
  gap:clamp(14px,1.6vw,26px);
  min-width:0;
}
.socials-copy-text{ min-width:0; }
.socials-copy .h-lg{ margin:0 0 clamp(18px,2vw,26px); max-width:none; font-size:clamp(1.5rem,2.2vw,2.35rem); }
.socials-copy .btn{ display:inline-block; }

.ig-handle{ display:flex; align-items:center; gap:8px; }
.ig-handle svg{ flex:none; }

.ig-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.4vw,22px);
}
.ig-post::before{
  content:"0sani.bakehouse";
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:14px; font-weight:600;
  color:rgba(42,25,23,.42); letter-spacing:.02em;
}
.ig-post iframe{ position:relative; z-index:1; }
.ig-post{
  position:relative; width:100%;
  aspect-ratio:1/1.28;
  
  background:var(--tile);
  border:1px solid rgba(42,25,23,.12);
  overflow:hidden;
}
.ig-post iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:820px){
  .socials-split{ grid-template-columns:1fr; align-items:start; }
}
@media (max-width:420px){
  .socials-copy{ flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (max-width:820px){
  .ig-grid{ width:100%; }
}
@media (max-width:860px){
  .socials-split{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:1400px){
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .ig-grid > li:nth-child(3){ display:none; }
}
@media (max-width:560px){
  
  .ig-grid{ grid-template-columns:1fr; max-width:380px; }
  .ig-grid > li:nth-child(n+2){ display:none; }
}

.contact{ background:var(--paper); padding-block:clamp(40px,5vw,80px); }
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(28px,4vw,72px); align-items:start;
  
  max-width:1180px; margin-inline:auto;
}
.contact-lede{ max-width:46ch; margin-bottom:clamp(24px,2.6vw,36px); }

.form{ max-width:620px; }
.field{ margin:0 0 18px; }
.field label{
  display:block; margin-bottom:7px;
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
}
.req{ color:#9A4B36; }
.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.field input[type=text],
.field input[type=email],
.field textarea{
  width:100%; padding:13px 14px;
  font:inherit; font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid rgba(42,25,23,.22); border-radius:0;
  transition:border-color .18s ease;
}
.field input:focus, .field textarea:focus{ border-color:var(--ink); }
.field textarea{ resize:vertical; min-height:150px; }

.field-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:26px; }
.field-check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--ink-deep); flex:none; }
.field-check label{
  margin:0; font-size:14px; font-weight:400;
  letter-spacing:0; text-transform:none; line-height:1.5;
}

.form-note{
  margin:16px 0 0; padding:12px 14px;
  background:var(--sky); color:var(--ink);
  font-size:14px; line-height:1.5;
}

.contact-panel{ background:var(--tile); padding:clamp(22px,2.4vw,32px); }
.contact-panel .body{ margin:0 0 26px; font-size:15px; }
.contact-panel .body:last-child{ margin-bottom:0; }
.contact-panel a{ color:var(--ink); text-decoration:none; border-bottom:1px solid rgba(42,25,23,.35); }
.contact-panel a:hover{ border-bottom-color:var(--ink); }
.foot-h.ink{ color:var(--ink); }

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
}

.site-foot{ background:var(--ink-deep); color:var(--cream); }
.foot-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)) auto;
  gap:clamp(26px,3vw,48px);
  padding-block:clamp(40px,4.4vw,58px);
}
.foot-h{
  margin:0 0 16px;
  font-size:11.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--butter);
}
.foot-b{ margin:0 0 18px; font-size:14px; line-height:1.6; color:#E7DDCE; }
.foot-b a{ color:#E7DDCE; text-decoration:none; border-bottom:1px solid rgba(231,221,206,.4); }
.foot-b a:hover{ color:var(--butter); border-bottom-color:var(--butter); }
.socials{ display:flex; gap:14px; margin:0; }
.socials a{
  display:grid; place-items:center;
  width:38px; height:38px;
  color:var(--butter);
  border:1.5px solid rgba(243,210,141,.55);
  transition:background-color .18s ease, color .18s ease;
}
.socials a:hover{ background:var(--butter); color:var(--ink-deep); }
.foot-brand{
  display:flex; flex-direction:column; align-items:flex-end;
  justify-content:flex-end; gap:8px;
}

.foot-legal{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-block:18px 24px;
  border-top:1px solid rgba(231,221,206,.16);
  font-size:12px; color:rgba(231,221,206,.62);
}
.foot-legal p{ margin:0; }
.proto{ letter-spacing:.06em; }

.burger{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  padding:11px 9px;
}
.burger span{
  display:block; height:2px; background:var(--ink);
  margin:4px 0; transition:transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav[hidden]{ display:none; }   
.mobile-nav{
  display:flex; flex-direction:column;
  background:var(--butter);
  border-top:1.5px solid rgba(42,25,23,.16);
  padding:6px var(--gut) 18px;
}
.mobile-nav a{
  padding:13px 0;
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid rgba(42,25,23,.14);
}

.reveal{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
}

@media (max-width:1080px){
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-brand{ align-items:flex-start; justify-content:flex-start; }
}

@media (min-width:821px){
  .mobile-nav{ display:none !important; }   
}

@media (max-width:820px){
  .nav{ display:none; }
  .head-cta{ display:none; }
  .burger{ display:block; }

  .hero{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,42%) minmax(0,1fr);
    min-height:560px;
  }
  .hero-copy{ order:2; padding-block:clamp(24px,4.5vw,40px); }
  .hero-shot{ order:1; min-height:0; }
  .hero-shot img{ height:100%; }
  .lede{ max-width:32ch; }

  .split{ grid-template-columns:1fr; }
  
  .about .split-panel{ order:2; }
  
  .about .split-shot{ order:1; min-height:300px; }
}

@media (max-width:620px){
  .foot-grid{ grid-template-columns:1fr; }
  .case-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  
  .tiles{ grid-template-columns:1fr; }
  .tile{ min-height:300px; }
}