/* ============================================================
   OctaFlow — components
   ============================================================ */

/* ---------- Top bar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(250,246,236,.82);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--line);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  height:88px; gap:24px;
}
.brand{ display:inline-flex; align-items:center; gap:12px; }
.brand__mark{
  width:70px; height:70px; border-radius:50%;
  object-fit:cover; flex:none;
  transition:transform .5s var(--ease);
}
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.05); }
.brand__name{
  font-family:var(--font-serif); font-weight:600; font-size:1.4rem;
  letter-spacing:-.02em; color:var(--ink);
}
.brand__name b{ color:var(--accent-deep); font-weight:600; }

.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__link{
  font-weight:550; font-size:.98rem; color:var(--ink-soft);
  padding:.5em .85em; border-radius:999px; position:relative;
  transition:color .25s, background .25s;
}
.nav__link:hover{ color:var(--ink); background:rgba(35,32,32,.05); }
.nav__link.active{ color:var(--ink); }
.nav__link.active::after{
  content:""; position:absolute; left:.85em; right:.85em; bottom:.18em; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav__cta{ margin-left:8px; white-space:nowrap; }

/* language toggle */
.lang-toggle{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper); }
.lang-toggle .lang-opt{ font-family:var(--font-sans); font-size:.8rem; font-weight:650; letter-spacing:.04em; color:var(--ink-faint); padding:.42em .72em; cursor:pointer; background:transparent; border:0; line-height:1; transition:color .25s, background .25s; }
.lang-toggle .lang-opt:hover{ color:var(--ink); }
.lang-toggle .lang-opt.on{ background:var(--ink); color:var(--paper); }
.nav__sheet .lang-toggle{ margin:16px 28px 0; }

.nav__burger{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:var(--paper); border-radius:12px; cursor:pointer; position:relative;
}
.nav__burger span{
  position:absolute; left:12px; right:12px; height:2px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .3s; border-radius:2px;
}
.nav__burger span:nth-child(1){ top:16px; }
.nav__burger span:nth-child(2){ top:22px; }
.nav__burger span:nth-child(3){ top:28px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ opacity:0; }
body.menu-open .nav__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile sheet */
.nav__sheet{
  position:fixed; inset:88px 0 auto 0; z-index:55;
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:14px 0 26px; transform:translateY(-120%); transition:transform .45s var(--ease);
  box-shadow:var(--shadow-md);
}
body.menu-open .nav__sheet{ transform:translateY(0); }
.nav__sheet a{ display:block; padding:14px 28px; font-size:1.3rem; font-family:var(--font-serif); border-top:1px solid var(--line-soft); }
.nav__sheet a:first-child{ border-top:0; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:160px 0 90px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__octo{
  position:absolute; right:-60px; top:90px; width:min(440px,40vw); opacity:.05;
  animation:floaty 9s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-22px) rotate(2deg)} }
.hero__grain{ position:absolute; inset:0; opacity:.5;
  background:radial-gradient(1100px 540px at 78% -8%, var(--cream) 0%, transparent 60%);
}
.hero__in{ position:relative; z-index:2; }
.hero h1{ max-width:14ch; }
.hero .lead{ max-width:46ch; margin-top:1.3rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; align-items:center; }

/* flowing connector line under hero */
.flowline{ display:block; width:100%; height:60px; }
.flowline path{ stroke:var(--accent); stroke-width:2; fill:none;
  stroke-dasharray:8 10; opacity:.5; animation:dash 14s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-360; } }

/* ---------- Stat strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat__num{ font-family:var(--font-serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:500; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.stat__num .u{ color:var(--accent); }
.stat__label{ margin-top:.5rem; font-size:.95rem; color:var(--ink-faint); }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--line-soft); }
.card__ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--cream); color:var(--ink); margin-bottom:20px; flex:none;
  transition:transform .5s var(--ease), background .3s;
}
.card:hover .card__ico{ transform:scale(1.08) rotate(-4deg); background:var(--cream-deep); }
.card__ico svg{ width:26px; height:26px; }
.card h4,.card h3{ margin-bottom:.5em; }
.card p{ font-size:.98rem; }

/* numbered audience / service card */
.icard{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.icard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease);
}
.icard:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.icard:hover::before{ transform:scaleY(1); }
.icard .tlink{ align-self:flex-start; margin-top:auto; }
.icard__no{ font-family:var(--font-serif); font-size:1rem; color:var(--accent-deep); font-weight:600; letter-spacing:.04em; }
.icard h3{ font-size:1.3rem; }
.icard p{ font-size:.97rem; flex:1; }

/* media frame / image slot */
.media{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); background:var(--paper-2); }
image-slot{ display:block; width:100%; height:auto; }
.media--tall image-slot{ aspect-ratio:3/4; height:auto; }
.media--wide image-slot{ aspect-ratio:16/10; height:auto; }
.media--square image-slot{ aspect-ratio:1/1; height:auto; }

/* split rows (image + text) */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,86px); align-items:center; }
.split--rev .split__media{ order:2; }

/* value list */
.vlist{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.vlist li{
  display:flex; gap:18px; align-items:flex-start; padding:22px 4px; border-top:1px solid var(--line);
}
.vlist li:last-child{ border-bottom:1px solid var(--line); }
.vlist .vi{ font-family:var(--font-serif); color:var(--accent-deep); font-size:1.1rem; flex:none; width:2.5ch; }
.vlist h4{ margin-bottom:.2em; }
.vlist p{ font-size:.97rem; margin:0; }

/* big CTA band */
.cta-band{
  background:var(--ink); color:var(--cream); border-radius:var(--r-lg);
  padding:clamp(40px,6vw,72px); position:relative; overflow:hidden;
}
.cta-band h2{ color:var(--paper); max-width:18ch; }
.cta-band p{ color:rgba(251,239,201,.78); }
.cta-band .btn--light{ --bg:var(--cream); --fg:var(--ink); border-color:transparent; }
.cta-band__octo{ position:absolute; right:-40px; bottom:-50px; width:340px; opacity:.08; filter:invert(1); }

/* pill chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-size:.85rem; font-weight:600; color:var(--ink-soft); background:var(--paper-2);
  border:1px solid var(--line); padding:.5em 1em; border-radius:999px; white-space:nowrap; }

/* page hero (inner pages) */
.phero{ padding:150px 0 56px; position:relative; }
.phero__octo{ position:absolute; right:-30px; top:60px; width:min(440px,40vw); opacity:.05; animation:floaty 10s ease-in-out infinite; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:var(--paper-2); padding:80px 0 36px; margin-top:0; }
.footer a{ color:rgba(250,246,236,.72); transition:color .25s; }
.footer a:hover{ color:#fff; }
.footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:40px; }
.footer__brand{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.footer__brand img{ width:52px; height:52px; border-radius:50%; }
.footer__brand span{ font-family:var(--font-serif); font-size:1.3rem; color:var(--paper); }
.footer h5,.footer .footer__h{ font-family:var(--font-sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:rgba(250,246,236,.5); margin:0 0 16px; font-weight:650; }
.footer__col a{ display:block; padding:6px 0; }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px;
  border-top:1px solid rgba(250,246,236,.14); margin-top:54px; padding-top:24px;
  font-size:.85rem; color:rgba(250,246,236,.5); flex-wrap:wrap; }

/* ---------- Booking modal ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:none; }
.modal.open{ display:block; }
.modal__scrim{ position:absolute; inset:0; background:rgba(28,24,22,.5);
  backdrop-filter:blur(4px); opacity:0; transition:opacity .35s var(--ease); }
.modal.open .modal__scrim{ opacity:1; }
.modal__panel{
  position:absolute; top:50%; left:50%; width:min(640px,92vw); max-height:90vh; overflow:auto;
  transform:translate(-50%,-46%) scale(.97); opacity:0;
  background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.modal.open .modal__panel{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal__head{ padding:30px 32px 22px; border-bottom:1px solid var(--line); position:relative; }
.modal__head .eyebrow{ margin-bottom:.6em; }
.modal__close{ position:absolute; top:22px; right:22px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); cursor:pointer; font-size:1.1rem; color:var(--ink-soft);
  transition:background .25s, transform .25s; }
.modal__close:hover{ background:var(--paper-2); transform:rotate(90deg); }
.modal__body{ padding:28px 32px 34px; }
.steps{ display:flex; gap:8px; margin-bottom:24px; }
.steps .dot{ flex:1; height:5px; border-radius:3px; background:var(--line); transition:background .4s; }
.steps .dot.on{ background:var(--accent); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:7px; letter-spacing:.01em; }
.input{ width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.85em 1em; transition:border-color .25s, box-shadow .25s; }
.input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,90,58,.15); }
.input--err{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,90,58,.16); background:rgba(194,90,58,.04); }
textarea.input{ resize:vertical; min-height:110px; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.opt{ border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; cursor:pointer;
  background:var(--paper); transition:border-color .25s, background .25s, transform .2s; font-size:.95rem; font-weight:550; }
.opt:hover{ border-color:var(--accent-soft); transform:translateY(-2px); }
.opt.sel{ border-color:var(--accent); background:var(--cream); }
.slot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.slot{ text-align:center; border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 4px; cursor:pointer; font-weight:600; font-size:.92rem; transition:all .2s; }
.slot:hover{ border-color:var(--accent-soft); }
.slot.sel{ border-color:var(--accent); background:var(--accent); color:#fff; }
.modal__foot{ display:flex; justify-content:space-between; gap:12px; margin-top:26px; align-items:center; }
.modal__success{ text-align:center; padding:18px 0 8px; }
.modal__success .check{ width:74px; height:74px; border-radius:50%; background:var(--cream); display:grid; place-items:center; margin:0 auto 20px; animation:pop .5s var(--ease); }
@keyframes pop{ 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }

/* form (contact) */
.cform .row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* contact info list */
.cinfo{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.cinfo li{ display:flex; gap:16px; align-items:center; padding:18px 0; border-top:1px solid var(--line); }
.cinfo li:last-child{ border-bottom:1px solid var(--line); }
.cinfo .ci-ico{ width:44px; height:44px; border-radius:12px; background:var(--cream); display:grid; place-items:center; flex:none; }
.cinfo b{ display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); font-weight:650; }
.cinfo span{ font-size:1.08rem; color:var(--ink); }

.mapframe{ border:0; width:100%; height:100%; min-height:340px; border-radius:var(--r-lg); filter:grayscale(.3) sepia(.12); }

/* responsive */
@media (max-width:980px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:32px; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .g-2,.g-3,.g-4,.split,.cform .row,.opt-grid{ grid-template-columns:1fr; }
  .split--rev .split__media{ order:0; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer__top{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .slot-grid{ grid-template-columns:repeat(2,1fr); }
}