/* The Seventeen Coffee & Technology — Version 1 redesign */
:root{
  --ink:#241d19; --coffee:#5b3527; --rust:#9c5139; --cream:#f5f0e8;
  --paper:#fbfaf7; --line:#d9d0c5; --muted:#786f68; --white:#fff;
  --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:#fff;padding:.7rem 1rem}
.skip-link:focus{top:1rem}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;color:white;transition:.3s}
.site-header.scrolled{background:rgba(251,250,247,.96);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.08);backdrop-filter:blur(12px)}
.brand{display:flex;gap:.75rem;align-items:center;font-weight:600;letter-spacing:.02em}
.brand-mark{border:1px solid currentColor;width:38px;height:38px;display:grid;place-items:center;font-family:var(--serif);font-size:1.25rem}
.brand-name{line-height:1.05;font-size:.86rem;text-transform:uppercase}
.brand-name small{font-weight:400;font-size:.62rem;letter-spacing:.08em}
.site-nav{display:flex;align-items:center;gap:1.7rem;font-size:.82rem}
.site-nav a{position:relative}
.site-nav a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:currentColor;transition:.25s}
.site-nav a:hover:after{right:0}
.nav-cta{border:1px solid currentColor;padding:.7rem 1rem}
.menu-toggle{display:none;background:none;border:0;color:inherit}
.hero{position:relative;min-height:100vh;color:white;display:grid;align-content:end;overflow:hidden}
.hero-media{position:absolute;inset:0;background:url("assets/bakery-hero.jpg") center 44%/cover no-repeat;transform:scale(1.02)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,12,9,.76),rgba(17,12,9,.18) 70%),linear-gradient(0deg,rgba(17,12,9,.7),transparent 50%)}
.hero-copy{position:relative;z-index:2;padding:9rem 6vw 12rem;max-width:960px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.69rem;font-weight:600;color:var(--rust);margin:0 0 1rem}
.eyebrow.light{color:#eadbd0}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.04;margin:0}
h1{font-size:clamp(3.3rem,7.5vw,7.4rem);letter-spacing:-.04em}
h2{font-size:clamp(2.35rem,4.6vw,4.7rem);letter-spacing:-.035em}
h3{font-size:clamp(2rem,3.5vw,3.8rem)}
.hero-intro{font-size:clamp(1rem,1.6vw,1.25rem);max-width:620px;color:#f3ece7;margin:1.6rem 0 2rem}
.hero-actions,.footer-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.button{border:1px solid var(--ink);background:var(--ink);color:white;padding:.9rem 1.2rem;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.25s}
.button:hover{transform:translateY(-2px);background:var(--rust);border-color:var(--rust)}
.button-light{background:white;color:var(--ink);border-color:white}
.button-outline-light{background:transparent;color:white;border-color:rgba(255,255,255,.65)}
.text-link{display:inline-flex;gap:.65rem;align-items:center;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:.25rem}
.text-link.light{color:white}
.hero-pillars{position:absolute;z-index:3;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(32,24,20,.86);backdrop-filter:blur(10px)}
.hero-pillars a{min-height:122px;padding:1.3rem 1.6rem;border-right:1px solid rgba(255,255,255,.18);display:grid;align-content:center;transition:.25s}
.hero-pillars a:hover{background:rgba(156,81,57,.75);transform:translateY(-5px)}
.hero-pillars span{font-size:.67rem;opacity:.65}
.hero-pillars strong{font-family:var(--serif);font-size:1.2rem;font-weight:500;margin:.25rem 0}
.hero-pillars small{opacity:.75}
.section{padding:8rem 6vw}
.section-heading{max-width:1080px;margin-bottom:4rem}
.section-heading h2{max-width:950px}
.split-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:5rem;align-items:end}
.split-heading>p{max-width:470px;color:var(--muted);font-size:1.05rem}
.pathway{background:var(--cream)}
.objective-list{display:flex;flex-wrap:wrap;gap:.7rem;max-width:1050px}
.objective-list button,.tool-tabs button{background:transparent;border:1px solid var(--line);padding:.8rem 1rem;cursor:pointer;color:var(--ink)}
.objective-list button:hover,.objective-list button.active,.tool-tabs button.active{background:var(--ink);color:white;border-color:var(--ink)}
.objective-result{margin-top:1.4rem;color:var(--muted);min-height:2.3rem}
.objective-result a{color:var(--rust);font-weight:600;border-bottom:1px solid}
.solutions{padding-bottom:4rem}
.pillar{display:grid;grid-template-columns:1.02fr .98fr;min-height:680px;margin:0 0 7rem;background:white}
.pillar.reverse{grid-template-columns:.98fr 1.02fr}
.pillar.reverse .pillar-image{order:2}
.pillar-image{background-size:cover;background-position:center;min-height:600px}
.image-business{background-image:url("assets/specialty-brand.jpg")}
.image-ambience{background-image:url("assets/lobby-concept.jpg")}
.image-service{background-image:url("assets/team-session.jpg")}
.image-gift{background-image:url("assets/cny-gift.jpg")}
.pillar-content{padding:5.5rem 5vw;display:flex;flex-direction:column;justify-content:center}
.pillar-number{font-size:.7rem;letter-spacing:.14em;color:var(--rust);text-transform:uppercase}
.pillar-lead{font-family:var(--serif);font-size:1.35rem;max-width:560px;color:#564941;margin:1.2rem 0 1.7rem}
.service-tags{list-style:none;padding:0;margin:0 0 2.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.service-tags li{border:1px solid var(--line);padding:.45rem .65rem;font-size:.75rem;color:var(--muted)}
.case-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
.case-strip.one-case{grid-template-columns:minmax(0,1fr)}
.case-card{text-align:left;border:0;border-top:1px solid var(--line);background:transparent;padding:1rem .1rem;cursor:pointer;display:flex;flex-direction:column;min-height:140px}
.case-card span{font-size:.65rem;color:var(--rust);text-transform:uppercase;letter-spacing:.1em}
.case-card strong{font-family:var(--serif);font-size:1rem;font-weight:500;margin:.55rem 0;line-height:1.25}
.case-card em{font-style:normal;font-size:.72rem;margin-top:auto}
.case-card:hover{color:var(--rust)}
.challenges{background:#25201d;color:white;overflow:hidden}
.challenge-heading{display:flex;justify-content:space-between;align-items:end;max-width:none}
.challenge-heading .eyebrow{color:#d7a18b}
.slider-controls{display:flex;gap:.5rem}
.slider-controls button{width:46px;height:46px;border:1px solid rgba(255,255,255,.3);background:none;color:white;cursor:pointer}
.challenge-rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.3rem;scrollbar-width:none}
.challenge-rail::-webkit-scrollbar{display:none}
.challenge-card{position:relative;flex:0 0 min(31vw,410px);height:490px;border:0;padding:2rem;text-align:left;color:white;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background-position:center;background-size:cover;scroll-snap-align:start;cursor:pointer}
.challenge-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,9,8,.85),rgba(12,9,8,.04) 65%)}
.challenge-card>*{position:relative}
.challenge-card span{font-size:.72rem;opacity:.75}
.challenge-card strong{font-family:var(--serif);font-size:2rem;line-height:1.03;margin:.6rem 0}
.challenge-card small{font-size:.85rem;opacity:.8}
.challenge-card:hover{transform:translateY(-5px)}
.c1{background-image:url("assets/community-4.jpg")}.c2{background-image:url("assets/focaccia-cafe.png")}
.c3{background-image:url("assets/specialty-brand.jpg")}.c4{background-image:url("assets/team-session.jpg")}
.c5{background-image:url("assets/drip-range.jpg")}.c6{background-image:url("assets/lobby-concept.jpg")}
.c7{background-image:url("assets/cny-gift.jpg")}
.tools{background:var(--cream)}
.tool-tabs{display:flex;gap:.4rem;margin-bottom:1rem}
.tool-panels{background:white}
.tool-panel{display:none;grid-template-columns:.75fr 1.25fr;gap:4rem;padding:4rem}
.tool-panel.active{display:grid}
.tool-copy h3{font-size:2.6rem}
.tool-copy p:last-child{color:var(--muted)}
.calculator-grid,.assessment-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.calculator-grid label,.assessment-form label,.contact-form label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
input,select,textarea{width:100%;border:0;border-bottom:1px solid var(--line);padding:.75rem .2rem;background:transparent;color:var(--ink)}
.calculator-grid .button,.assessment-form .button{grid-column:1/-1;margin-top:.5rem}
.tool-result{grid-column:1/-1;margin-top:1.2rem;background:var(--cream);padding:1.3rem;min-height:80px}
.tool-result strong{display:block;font-family:var(--serif);font-size:1.7rem}
.tool-result p{margin:.3rem 0 0}
.why-us{padding:0;display:grid;grid-template-columns:1fr 1fr;background:var(--coffee);color:white}
.why-image{min-height:720px;background:url("assets/community-2.jpg") center/cover no-repeat}
.why-copy{padding:7rem 7vw;display:flex;flex-direction:column;justify-content:center}
.why-copy>p:not(.eyebrow){color:#e5d8d0;max-width:650px}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;margin:2.5rem 0;border-top:1px solid rgba(255,255,255,.25)}
.proof-grid div{padding:1.5rem 1rem 1.5rem 0;border-bottom:1px solid rgba(255,255,255,.25)}
.proof-grid strong{display:block;font-family:var(--serif);font-size:1.8rem}
.proof-grid span{font-size:.75rem;color:#dfcec4}
.insight{background:white}
.featured-insight{display:grid;grid-template-columns:1.15fr .85fr;min-height:560px}
.insight-image{background:url("assets/community-3.jpg") center/cover no-repeat}
.insight-copy{background:var(--cream);padding:5rem;display:flex;flex-direction:column;justify-content:center}
.insight-copy p:not(.eyebrow){color:var(--muted)}
.site-footer{background:#181412;color:white;padding:7rem 6vw 2rem}
.footer-intro{max-width:1000px;margin-bottom:6rem}
.footer-intro h2{max-width:900px;margin-bottom:2.2rem}
.footer-grid{border-top:1px solid rgba(255,255,255,.22);padding-top:3rem;display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:5rem}
.footer-grid>div{display:flex;flex-direction:column;gap:.55rem}
.footer-grid p,.footer-grid a,.footer-grid small{color:#cbbdb5;font-size:.82rem}
.footer-grid strong{margin-bottom:.7rem}
.subscribe-form{display:flex;border-bottom:1px solid rgba(255,255,255,.45)}
.subscribe-form input{color:white;border:0}
.subscribe-form button{border:0;background:none;color:white;font-size:1.4rem}
.footer-bottom{display:flex;justify-content:space-between;margin-top:5rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.68rem;color:#8f837d}
.floating-whatsapp{position:fixed;z-index:90;right:1.2rem;bottom:1.2rem;background:#f1ece4;color:var(--ink);border:1px solid #d2c9bd;padding:.8rem 1rem;display:flex;gap:1rem;box-shadow:0 12px 30px rgba(0,0,0,.16)}
dialog{border:0;padding:0;max-width:min(900px,92vw);width:100%;color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(20,15,12,.72);backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:1rem;top:1rem;border:0;background:white;width:42px;height:42px;font-size:1.6rem;z-index:3;cursor:pointer}
#dialog-content{display:grid;grid-template-columns:.85fr 1.15fr;min-height:520px}
.dialog-media{background-size:cover;background-position:center}
.dialog-body{padding:4rem}
.dialog-body h2{font-size:3rem}
.dialog-body h4{margin:1.8rem 0 .4rem;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;color:var(--rust)}
.dialog-body p,.dialog-body li{color:var(--muted)}
.contact-dialog{max-width:820px;padding:4rem}
.dialog-header h2{font-size:3rem}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.contact-form .full{grid-column:1/-1}
.contact-form .button{grid-column:1/-1}
.form-note{grid-column:1/-1;font-size:.72rem;color:var(--muted)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){
  .site-nav{position:fixed;inset:82px 0 auto 0;background:var(--paper);color:var(--ink);padding:2rem 5vw;display:none;flex-direction:column;align-items:flex-start}
  .site-nav.open{display:flex}.menu-toggle{display:block}
  .hero-copy{padding-bottom:25rem}
  .hero-pillars{grid-template-columns:1fr 1fr}
  .split-heading,.pillar,.pillar.reverse,.tool-panel,.why-us,.featured-insight{grid-template-columns:1fr}
  .pillar.reverse .pillar-image{order:0}
  .pillar-image{min-height:500px}
  .challenge-card{flex-basis:70vw}
  .why-image{min-height:520px}
  .footer-grid{grid-template-columns:1fr 1fr}
  #dialog-content{grid-template-columns:1fr}.dialog-media{min-height:280px}
}
@media(max-width:620px){
  .site-header{height:68px;padding:0 1rem}.site-nav{top:68px}
  .brand-name{display:none}
  .hero-copy{padding:7rem 1.2rem 31rem}
  h1{font-size:3.25rem}
  .hero-pillars{grid-template-columns:1fr;max-height:29rem;overflow:auto}
  .hero-pillars a{min-height:90px;padding:.9rem 1.2rem}
  .section{padding:5.5rem 1.2rem}
  .split-heading{gap:1.5rem}
  .pillar{margin-bottom:3.5rem}.pillar-content{padding:3rem 1.2rem}.pillar-image{min-height:390px}
  .case-strip{grid-template-columns:1fr}
  .challenge-card{flex-basis:84vw;height:430px}
  .tool-tabs{overflow:auto}.tool-tabs button{white-space:nowrap}
  .tool-panel{padding:2rem 1.2rem;gap:2rem}
  .calculator-grid,.assessment-form,.contact-form{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .why-copy,.insight-copy{padding:4rem 1.2rem}
  .footer-grid{grid-template-columns:1fr;gap:3rem}
  .footer-bottom{flex-direction:column;gap:.4rem}
  .contact-dialog{padding:3.5rem 1.2rem 2rem}
  .dialog-body{padding:2.4rem 1.2rem}
  .floating-whatsapp span{display:none}
}