*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FAF0E6;font-family:'Gilda Display',Georgia,serif;color:#171717;overflow-x:hidden}
a{color:#7F362E}a:hover{color:#C66346}
img{max-width:100%}
ul{margin:0;padding:0;list-style:none}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] summary span[aria-hidden]{transform:rotate(45deg)}
summary span[aria-hidden]{transition:transform .2s ease;display:inline-block}
[id]{scroll-margin-top:24px}

/* page shell */
.site{width:100%;max-width:1680px;margin:0 auto}
.site>section,.site>footer,.site>header{width:100%}

/* photo halves fill their cell however tall the text gets */
.photo-cell{position:relative;min-height:100%;overflow:hidden}
.photo-cell>img{position:absolute;inset:0;width:100%;height:100% !important}

/* booking */
.cal-card{background:#FAF0E6;border-radius:28px;box-shadow:0 20px 50px rgba(127,54,46,.12);overflow:hidden;padding:8px 8px 18px}
.calendly-inline-widget{min-width:280px;height:700px}
.cal-fallback{margin:6px 0 0;text-align:center;font-size:15px;color:#7F362E}

/* buttons: comfortable tap targets */
a[style*="border-radius: 999px"]{text-align:center;white-space:nowrap}
[style*="display: flex; gap: 16px; margin-top: 8px"]{flex-wrap:wrap}

/* tablet */
@media (max-width:1200px){
  .site-header{padding:0 40px !important}
  .site-nav{gap:24px !important}
  .site>section{padding-left:40px !important;padding-right:40px !important}
  .site>section.photo-split{padding-left:0 !important;padding-right:0 !important}
  .site>section.photo-split>div:not(.photo-cell){padding-left:40px !important;padding-right:40px !important}
  .site>footer{padding-left:40px !important;padding-right:40px !important}
  .fixed-w{width:280px !important}
}
@media (max-width:1100px){
  .g[style*="repeat(3"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #book.g,#faqs.g{grid-template-columns:1fr !important;row-gap:40px}
  #book .gc,#faqs .gc{grid-column:auto !important}
}

.photo-right>.photo-cell{order:2}
.m-head{display:none}
.swipe-hint{display:none}
.nw{white-space:nowrap}
h1,h2,h3,p{hyphens:manual;-webkit-hyphens:manual}

/* phones and small tablets */
@media (max-width:900px){
  /* slim header with a menu */
  .site-header{height:64px !important;padding:0 16px !important;position:sticky;top:0;z-index:20}
  .site-header>a img{height:44px !important}
  .site-nav{display:none !important}
  .m-head{display:flex;align-items:center;gap:12px}
  .m-book{font-size:13.5px;color:#7F362E;text-decoration:none;border:1px solid #7F362E;border-radius:999px;padding:7px 14px;white-space:nowrap}
  .m-menu{position:relative}
  .m-menu summary{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px}
  .m-menu summary span{display:block;width:22px;height:1.5px;background:#7F362E;transition:transform .2s,opacity .2s}
  .m-menu[open] summary span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .m-menu[open] summary span:nth-child(2){opacity:0}
  .m-menu[open] summary span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .m-drop{position:absolute;right:-16px;top:52px;width:240px;background:#FAF0E6;border:1px solid #E2CBA3;border-radius:0 0 0 20px;padding:10px 22px 18px;display:flex;flex-direction:column;box-shadow:0 18px 30px rgba(127,54,46,.12)}
  .m-drop a{color:#7F362E;text-decoration:none;font-size:17px;padding:11px 0;border-bottom:1px solid #E2CBA3}
  .m-drop a:last-child{border:0;margin-top:10px;color:#C66346}

  /* general */
  .site>section{padding-left:20px !important;padding-right:20px !important}
  .site>footer{padding-left:20px !important;padding-right:20px !important}
  .g,.g[style*="repeat(3"]{grid-template-columns:1fr !important;row-gap:24px}
  .g[style*="repeat(7"]{grid-template-columns:repeat(7,minmax(0,1fr)) !important;row-gap:4px}
  .gc{grid-column:auto !important}
  .row-stack{flex-direction:column !important;align-items:flex-start !important;gap:16px !important}
  .fixed-w{width:auto !important}
  [style*="letter-spacing: 4px"]{font-size:11px !important;letter-spacing:3px !important}
  a[style*="border-radius: 999px"]{min-height:42px !important;padding:0 20px !important;font-size:14.5px !important}

  /* photo beside the words: text wraps round it */
  .site>section.photo-split{display:block !important;padding:0 !important;min-height:0 !important}
  .site>section.photo-split::after{content:"";display:table;clear:both}
  .photo-split>.photo-cell{width:40%;height:330px;min-height:0}
  .photo-right>.photo-cell{float:right;margin:0 0 14px 16px;border-radius:0 0 0 120px}
  .photo-left>.photo-cell{float:left;margin:0 16px 14px 0;border-radius:0 0 120px 0}
  .split-text,.site>section.photo-split>div.split-text{display:block !important;padding:28px 20px 36px !important}
  .split-text>*{margin:0 0 14px !important}
  .split-text>*:last-child{margin-bottom:0 !important}
  .split-text h1{font-size:27px !important;line-height:1.08 !important}
  .split-text h2{font-size:27px !important}
  .split-text>[style*="display: flex"]{flex-wrap:wrap;gap:10px !important;clear:both;padding-top:4px}
  #contact .photo-cell{height:300px}
  #contact .split-text{padding-top:36px !important}

  /* Meet Fizzy: arch photo with the story flowing round it */
  /* intro sits beside the photo and ends level with it; the story runs full width below */
  .about-float{display:grid !important;grid-template-columns:44% minmax(0,1fr) !important;column-gap:18px !important;row-gap:0 !important;align-items:start !important}
  .about-photo{grid-column:1 !important;grid-row:1 / span 3;align-self:stretch;position:relative;min-height:240px}
  .about-photo img{position:absolute;inset:0;width:100%;height:100% !important;border-radius:200px 200px 18px 18px !important}
  .about-text{display:contents !important}
  .about-text>*{grid-column:1 / -1;margin:0 0 14px !important}
  .about-text>*:nth-child(-n+3){grid-column:2}
  .about-text>*:nth-child(3){margin-bottom:0 !important;font-size:17px !important;line-height:1.4 !important}
  .about-text>*:nth-child(4){margin-top:22px !important}
  .about-text h2{font-size:32px !important}

  /* cards sit side by side and swipe, like the desktop rows */
  .swipe{display:flex !important;flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 -20px;padding:4px 20px 18px !important;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch !important}
  .swipe::-webkit-scrollbar{display:none}
  .swipe{position:relative}
  .swipe>*{flex-basis:80% !important}
  .swipe-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
  .swipe-hint .dots{display:flex;gap:7px}
  .swipe-hint .dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .2s,width .2s}
  .swipe-hint .dots i.on{opacity:1;width:20px;border-radius:4px}
  .swipe-go{font:inherit;font-size:14px;letter-spacing:.5px;color:inherit;background:none;border:1px solid currentColor;border-radius:999px;padding:7px 14px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
  .swipe-go b{font-weight:400;display:inline-block;animation:nudge 1.6s ease-in-out infinite}
  .swipe-hint.end .swipe-go b{animation:none}
  @keyframes nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
  @media (prefers-reduced-motion:reduce){.swipe-go b{animation:none}}
  .swipe-hint{color:#7F362E}
  section.swipe{margin:0 !important;padding:40px 20px !important;scroll-padding:0 20px}
  section.swipe+section.swipe{padding-top:0 !important}
  .split-text>a{display:block}
  .swipe>*{flex:0 0 84% !important;scroll-snap-align:center;min-width:0}
  .swipe>.tile{flex-basis:80% !important;width:auto !important;max-width:none}
  section[style*="padding: 0 72px 100px"] .swipe, section[style*="padding: 0 72px 100px"].swipe{padding-top:0 !important}
  .swipe [style*="padding: 40px 36px"],.swipe [style*="padding: 44px 40px"]{padding:26px 22px !important}
  #services a>img{height:180px !important}
  #services a>div{padding:24px 22px 26px !important;gap:12px !important}
  #services a>div>div:last-child{flex-wrap:wrap;gap:6px 14px}
  #services a h3{font-size:26px !important}

  /* The Drift way: 2 x 2 like the desktop grid */
  .two-up{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .two-up>div{padding:20px 16px !important;gap:8px !important;border-radius:18px !important}
  .two-up img{height:30px !important}
  .two-up h3{font-size:19px !important}
  .two-up p{font-size:13.5px !important;line-height:1.5 !important}

  /* testimonials page */
  .row-stack>.tile{width:100% !important;flex:none !important;align-self:center}
  .story{width:100%;flex:none !important;padding:28px 20px !important}
  .story p{font-size:14.5px !important}

  .calendly-inline-widget{height:1020px}
  .cal-card{border-radius:20px;padding:0 0 14px}

  details summary{font-size:17px !important;min-height:0 !important}
  #faqs details{padding:16px 0 !important}
  .foot-cols{gap:40px !important}
  .foot-base{flex-direction:column;gap:6px}
  .site>footer img{height:76px !important}
  [style*="justify-content: space-between; padding: 16px 0"]{gap:16px;padding:12px 0 !important}
  [style*="justify-content: space-between; padding: 16px 0"]>span:last-child{flex-shrink:0;text-align:right}
}
@media (max-width:360px){.swipe>.tile{flex-basis:88% !important}}
@media (max-width:374px){.split-text h1{font-size:24px !important}.split-text>div:first-child{letter-spacing:2px !important}}
@media (max-width:340px){.nw{white-space:normal}}
@media (max-width:900px){#services .swipe>a{height:auto}#services .swipe>a>div{flex:1}#services .swipe>a>div>div:last-child{margin-top:auto !important}}