/* Le Baccanti public site — contact page (verbatim from the design mockup; loaded after base.css). */
.editorial-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:75px 55px;align-items:start}
.editorial-story{min-width:0}
.editorial-story img{aspect-ratio:auto;height:100%;object-fit:cover}
.editorial-story .picture{height:350px}
.editorial-story .meta{margin-top:0;font-size:14px}
.editorial-story h3{font-size:35px;max-width:550px}
.editorial-story p{max-width:520px;font-size:17px;line-height:1.65;margin:14px 0 22px}
.story-1{grid-column:1/8}
.story-1 .picture{height:430px}
.story-1 h3{font-size:43px}
.story-2{grid-column:9/13;margin-top:120px}
.story-2 .picture{height:290px}
.story-2 h3{font-size:31px}
.story-3{grid-column:1/5;margin-top:50px}
.story-3 .picture{height:320px}
.story-3 h3{font-size:31px}
.story-4{grid-column:6/13}
.story-4 .picture{height:470px}
.story-4 h3{font-size:43px}
.story-5{grid-column:1/13;display:grid;grid-template-columns:1.4fr 1fr;gap:0;background:var(--ink);color:white;margin-block:25px}
.story-5 .picture{height:100%;min-height:430px}
.story-5 .story-copy{padding:45px;align-self:center}
.story-5 .meta,.story-5 p{color:#e7e5dc}
.story-5 h3{font-size:40px}
.story-5 .text-link{color:var(--yellow)}
.story-6{grid-column:1/7}
.story-6 .picture{height:410px}
.story-7{grid-column:8/13;margin-top:85px}
.story-7 .picture{height:340px}
.story-8{grid-column:1/8;margin-top:15px}
.story-8 .picture{height:440px}
.story-8 h3{font-size:43px}
.story-9{grid-column:9/13;margin-top:125px}
.story-9 .picture{height:300px}
.story-9 h3{font-size:31px}
.editorial-grid .meta{flex-wrap:wrap;gap:5px 15px}
.collection-top{margin-bottom:50px}
.collection{padding-bottom:110px}
@media(max-width:1000px){.editorial-grid{gap:55px 30px}.story-2{grid-column:8/13}.story-3{grid-column:1/6}.story-4{grid-column:7/13}.story-9{grid-column:8/13}.story-5 .story-copy{padding:32px}.story-5 h3{font-size:34px}.editorial-story h3{font-size:32px}.story-1 .picture,.story-4 .picture,.story-8 .picture{height:380px}}
@media(max-width:700px){.editorial-grid{display:block}.editorial-story{margin:0 0 55px}.editorial-story .picture{height:320px}.editorial-story h3{font-size:34px}.editorial-story p{font-size:17px}.story-5{display:block;margin-block:20px 55px}.story-5 .picture{height:310px;min-height:0}.story-5 .story-copy{padding:30px 25px 35px}.story-4 .picture,.story-8 .picture{height:390px}.collection{padding-bottom:45px}}
.editorial-grid{gap:38px 32px}
.story-2{grid-column:8/13;margin-top:35px}
.story-3{grid-column:1/6;margin-top:0}
.story-4{grid-column:6/13}
.story-5{margin-block:5px}
.story-7{grid-column:7/13;margin-top:30px}
.story-8{margin-top:0}
.story-9{grid-column:8/13;margin-top:35px}
.editorial-story h3{margin:10px 0}
.editorial-story p{margin:12px 0 16px}
.collection-top{margin-bottom:32px}
.collection{padding-bottom:70px}
@media(max-width:1000px){.editorial-grid{gap:32px 26px}.story-2{margin-top:25px}.story-3{margin-top:0}.story-4{grid-column:6/13}.story-7{margin-top:25px}.story-9{margin-top:25px}}
@media(max-width:700px){.editorial-story{margin:0 0 34px}.story-5{margin-block:0 34px}.collection{padding-bottom:28px}}
.inspired-header{padding-bottom:35px}
.mixed-layout{display:grid;gap:45px}
.proposal-row{display:grid;gap:28px;align-items:start}
.regular-row{grid-template-columns:repeat(3,minmax(0,1fr))}
.mixed-story{min-width:0}
.mixed-story .picture{display:block;aspect-ratio:1;overflow:hidden}
.mixed-story img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.mixed-story .meta{font-size:14px;flex-wrap:wrap;gap:4px 12px;margin:0 0 12px}
.mixed-story h3{font-size:30px;line-height:1.15;margin:10px 0}
.mixed-story p{font-size:16px;line-height:1.6;margin:12px 0 17px;max-width:580px}
.staggered-row{grid-template-columns:1.35fr 1fr;gap:36px}
.staggered-row .mixed-story:first-child .picture{aspect-ratio:1.5}
.staggered-row .mixed-story:last-child{padding-top:45px}
.staggered-row .mixed-story:last-child .picture{aspect-ratio:1.4}
.staggered-row h3{font-size:37px}
.final-story{display:block;padding-top:8px}
.final-story .mixed-story{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center}
.final-story .picture{aspect-ratio:1.6}
.final-story .mixed-copy{padding:10px 0}
.final-story h3{font-size:39px}
.collection{padding-bottom:70px}
@media(max-width:1000px){.proposal-row{gap:22px}.mixed-story h3{font-size:27px}.staggered-row h3,.final-story h3{font-size:33px}.staggered-row,.final-story .mixed-story{gap:28px}}
@media(max-width:700px){.inspired-header{padding-bottom:26px}.mixed-layout{gap:34px}.regular-row,.staggered-row{grid-template-columns:1fr;gap:34px}.staggered-row .mixed-story:last-child{padding-top:0}.regular-row .picture{aspect-ratio:1}.staggered-row .mixed-story:first-child .picture,.staggered-row .mixed-story:last-child .picture{aspect-ratio:1.2}.mixed-story h3,.staggered-row h3,.final-story h3{font-size:32px}.final-story .mixed-story{grid-template-columns:1fr;gap:10px}.final-story .picture{aspect-ratio:1.2}.collection{padding-bottom:45px}}
.custom-hero{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);min-height:590px}
.custom-hero-copy{padding:65px clamp(24px,6vw,90px);align-self:center}
.custom-hero h1{font:400 clamp(52px,5.4vw,82px)/1.07 'Playfair Display',Georgia,serif;letter-spacing:-.04em;margin:22px 0 25px}
.custom-hero p{font-size:18px;max-width:490px;color:var(--anthracite-soft)}
.custom-hero-photo{margin:0;position:relative;min-height:590px}
.custom-hero-photo img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:center}
.custom-hero .button{font-size:14px;letter-spacing:.09em;margin-top:20px}
.custom-proof{background:var(--ink);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:35px clamp(24px,6vw,100px)}
.custom-proof>div{border-left:1px solid var(--taupe);padding-left:25px}
.custom-proof strong{font:400 30px/1.2 'Playfair Display',Georgia,serif;display:block}
.custom-proof span{display:block;color:#e7e5dc;font-size:14px;margin-top:8px}
.custom-expertise{padding:85px clamp(24px,9vw,150px)}
.custom-expertise-top{display:grid;grid-template-columns:1.1fr 1fr;gap:7vw;align-items:center}
.custom-expertise h2,.custom-process h2,.custom-team h2{font:400 clamp(38px,4vw,57px)/1.14 'Playfair Display',Georgia,serif;letter-spacing:-.025em;margin:18px 0 25px}
.custom-expertise-top p{font-size:18px;color:var(--anthracite-soft)}
.expertise-points{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:40px}
.expertise-points>div{border-top:1px solid var(--line);padding-top:24px}
.expertise-points h3{font:400 28px/1.2 'Playfair Display',Georgia,serif;margin:0 0 14px}
.expertise-points p{color:var(--anthracite-soft);margin:0}
.custom-photo-story{display:grid;grid-template-columns:1.15fr 1fr;background:var(--cream)}
.custom-photo-story figure{margin:0;min-height:440px;position:relative}
.custom-photo-story img{position:absolute;width:100%;height:100%;object-fit:cover}
.custom-photo-story>div{padding:60px clamp(24px,5vw,80px);align-self:center}
.custom-photo-story h2{font:400 43px/1.15 'Playfair Display',Georgia,serif;margin:20px 0}
.custom-photo-story p{font-size:18px;color:var(--anthracite-soft)}
.custom-process{padding:85px clamp(24px,9vw,150px);scroll-margin-top:30px}
.process-intro{display:flex;justify-content:space-between;align-items:end;gap:45px;margin-bottom:40px}
.process-intro h2{max-width:630px;margin-bottom:0}
.process-intro>p{max-width:330px;color:var(--anthracite-soft);margin:0}
.custom-stage{display:grid;grid-template-columns:60px .85fr 1.15fr;gap:30px;border-top:1px solid var(--line);padding:36px 0}
.custom-stage:last-child{border-bottom:1px solid var(--line)}
.custom-stage .stage-number{font:400 35px 'Playfair Display',Georgia,serif;color:var(--ochre)}
.custom-stage h3{font:400 34px/1.13 'Playfair Display',Georgia,serif;margin:0 0 12px}
.custom-stage .stage-line{font-size:17px;color:var(--anthracite-soft);margin:0;max-width:230px}
.stage-detail p{margin:0 0 16px;color:var(--anthracite-soft);font-size:17px}
.stage-outcome{padding-left:18px;border-left:2px solid var(--yellow-deep)}
.stage-outcome strong{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-bottom:4px}
.custom-care{padding:55px clamp(24px,9vw,150px);display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:var(--cream)}
.custom-care h2{font:400 38px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}
.custom-care p{font-size:17px;color:var(--anthracite-soft);margin:0 0 15px}
.custom-team{padding:80px clamp(24px,9vw,150px);display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}
.custom-team p{font-size:17px;color:var(--anthracite-soft)}
.advisor-line{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.advisor-line figure{margin:0;text-align:center}
.advisor-line img{width:100%;max-width:150px;aspect-ratio:1;object-fit:cover;border-radius:50%}
.advisor-line h3{font:400 22px/1.2 'Playfair Display',Georgia,serif;margin:15px 0 6px}
.advisor-line span{font-size:13px;color:var(--grey);display:block}
.custom-contact{align-items:center}
.custom-contact .button{font-size:15px;letter-spacing:.08em;padding:22px 30px;white-space:normal;align-self:stretch;text-align:center;margin:0 0 16px}
.custom-contact-links{display:flex;flex-direction:column;gap:10px;min-width:290px}
.custom-contact-links>a:not(.button){font-size:17px;text-decoration:none}
.custom-contact .secondary-link{font-size:15px;display:inline-block;margin-top:10px;border-bottom:1px solid var(--line);text-decoration:none}
.custom-quote{padding-block:65px}
.custom-quote blockquote{font-size:32px}
.custom-breadcrumb{font-size:14px;padding:16px clamp(24px,6vw,100px);border-bottom:1px solid var(--line)}
@media(max-width:1050px){.custom-hero h1{font-size:60px}.custom-hero-copy{padding:50px 35px}.custom-stage{grid-template-columns:45px 1fr 1.4fr;gap:22px}.custom-team{grid-template-columns:1fr}.advisor-line{max-width:600px}.custom-photo-story h2{font-size:37px}}
@media(max-width:700px){.custom-hero{grid-template-columns:1fr}.custom-hero-copy{padding:45px 24px}.custom-hero h1{font-size:54px}.custom-hero-photo{min-height:340px}.custom-proof{grid-template-columns:1fr;padding:28px 24px;gap:22px}.custom-proof strong{font-size:27px}.custom-expertise{padding:60px 24px}.custom-expertise-top,.expertise-points,.custom-photo-story,.custom-care{grid-template-columns:1fr}.custom-expertise-top{gap:0}.expertise-points{gap:27px;margin-top:25px}.custom-photo-story figure{min-height:320px}.custom-photo-story>div{padding:38px 24px}.custom-process{padding:60px 24px}.process-intro{display:block}.process-intro>p{margin-top:20px}.custom-stage{grid-template-columns:40px 1fr;gap:15px;padding:28px 0}.stage-detail{grid-column:2}.custom-stage h3{font-size:30px}.custom-stage .stage-line{max-width:none}.custom-stage .stage-number{font-size:30px}.custom-care{padding:45px 24px;gap:5px}.custom-team{padding:60px 24px;gap:28px}.advisor-line{gap:12px}.advisor-line h3{font-size:19px}.advisor-line span{font-size:12px}.custom-contact-links{min-width:0;width:100%}.custom-quote blockquote{font-size:26px}.custom-contact{padding:60px 24px}.custom-contact h2{font-size:43px}}
.custom-team{grid-template-columns:1fr;gap:38px}
.custom-team>div:first-child{max-width:800px}
.advisor-line{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:35px 25px}
.advisor-line img{max-width:145px}
.advisor-line h3{font-size:23px}
.advisor-line span{font-size:14px}
@media(max-width:700px){.custom-team{gap:28px}.advisor-line{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.advisor-line img{max-width:135px}.advisor-line h3{font-size:21px}.advisor-line span{font-size:14px}}
.contact-intro{padding:55px clamp(24px,6vw,100px) 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:7vw;align-items:end}
.contact-intro h1{font:400 clamp(52px,5.5vw,80px)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.035em;margin:20px 0 0}
.contact-intro p{font-size:18px;max-width:460px;color:var(--anthracite-soft)}
.contact-surface{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:65px;padding:0 clamp(24px,6vw,100px) 80px}
.request-form{background:var(--cream);padding:40px}
.request-form h2{font:400 34px/1.2 'Playfair Display',Georgia,serif;margin:0 0 10px}
.request-form>p{color:var(--anthracite-soft);margin:0 0 28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-wide{grid-column:1/-1}
.field label{font-size:14px;font-weight:600}
.field input,.field textarea{width:100%;border:1px solid var(--line);background:var(--paper);padding:13px 14px;color:var(--ink);font:16px/1.5 'DM Sans',Arial,sans-serif;border-radius:0}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--anthracite);outline-offset:2px}
.field .optional{font-weight:400;color:var(--grey)}
.request-form .button{border:0;cursor:pointer;font-size:14px;letter-spacing:.07em;margin-top:24px;padding:19px 25px}
.email-note{font-size:14px;color:var(--grey);margin:12px 0 0}
.privacy-note{font-size:13px;color:var(--grey);margin-top:16px}
.contact-side{padding-top:10px}
.contact-side h2{font:400 33px/1.2 'Playfair Display',Georgia,serif;margin:12px 0 18px}
.contact-options{display:grid;gap:0}
.contact-option{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-option h3{font:400 25px 'Playfair Display',Georgia,serif;margin:0 0 8px}
.contact-option p{font-size:15px;color:var(--anthracite-soft);margin:8px 0 12px}
.contact-option a{font-size:17px;text-decoration:none;border-bottom:1px solid var(--yellow-deep);padding-bottom:3px;display:inline-block;overflow-wrap:anywhere}
.contact-advisors{display:flex;gap:15px;margin:28px 0 16px}
.contact-advisors img{width:74px;height:74px;object-fit:cover;border-radius:50%}
.contact-side .human-note{font-size:15px;color:var(--anthracite-soft)}
.contact-location{background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr;gap:65px;padding:50px clamp(24px,6vw,100px)}
.contact-location h2{font:400 36px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}
.contact-location p{color:#e7e5dc;max-width:480px}
.contact-location .text-link{font-size:15px;color:var(--yellow)}
.next-conversation{padding:55px clamp(24px,6vw,100px);display:grid;grid-template-columns:1fr 1.4fr;gap:55px}
.next-conversation h2{font:400 33px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}
.next-conversation p{color:var(--anthracite-soft)}
.next-conversation a{margin-top:8px}
.form-hint{font-size:14px;margin:9px 0 0;color:var(--grey)}
@media(max-width:950px){.contact-surface{gap:35px;grid-template-columns:1.3fr 1fr}.request-form{padding:28px}}
@media(max-width:700px){.contact-intro{padding:35px 24px 25px;grid-template-columns:1fr;gap:8px}.contact-intro h1{font-size:51px}.contact-surface{padding:0 24px 50px;grid-template-columns:1fr;gap:35px}.request-form{padding:28px 20px}.form-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.contact-location,.next-conversation{grid-template-columns:1fr;padding:40px 24px;gap:15px}.request-form .button{width:100%}.contact-side{padding-top:0}}
.contact-surface{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:45px}
.contact-side{padding:35px;background:var(--cream)}
.contact-side h2{margin-bottom:10px}
.contact-option{padding:22px 0}
.contact-option .contact-action-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:60px;padding:18px 24px;background:var(--yellow);border:0;color:var(--anthracite);text-decoration:none;font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:center;margin-top:16px;transition:background .2s}
.contact-option .contact-action-button:hover{background:var(--anthracite)}
.contact-option .phone-detail{font-size:17px;color:var(--ink);text-align:center;margin:12px 0 0}
.request-form .button{min-height:60px;width:100%;display:block}
.contact-advisors{margin-top:28px}
.contact-option p{margin-bottom:10px}
@media(max-width:950px){.contact-surface{gap:28px;grid-template-columns:1.1fr 1fr}.contact-side{padding:28px}}
@media(max-width:700px){.contact-surface{grid-template-columns:1fr;gap:25px}.contact-side{padding:28px 20px}.contact-option .contact-action-button{min-height:60px}}
nav{gap:22px}
nav a{letter-spacing:.04em}
@media(min-width:651px) and (max-width:1050px){header{padding-inline:24px}.logo{font-size:25px}nav{gap:15px}nav a{font-size:13px}}
@media(max-width:650px){nav{gap:18px}}
@media(max-width:900px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}
.contact-surface{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:35px}
.request-form{padding:32px}
.contact-side{padding:38px}
.form-grid{gap:17px}
.field textarea{min-height:125px}
@media(max-width:950px){.contact-surface{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:24px}.request-form,.contact-side{padding:26px}}
@media(max-width:700px){.contact-surface{grid-template-columns:1fr}.request-form,.contact-side{padding:28px 20px}}
@media(min-width:901px){header nav{gap:16px}header nav a{font-size:13px}}
@media(max-width:1050px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}

/* Additions to the mockup */
/* Confirmation / error panel: paper on the cream form, so it reads as a panel (site.css gives it the cream of the form itself). */
.request-form .form-status{background:var(--paper)}
/* The line naming the journey the request is about belongs to the introduction above it. */
.request-form>.journey-context{margin:-14px 0 24px}
/* More advisors than the three of the mockup wrap onto a second row instead of overflowing the column. */
.contact-advisors{flex-wrap:wrap}

/* Brand colour coding (palette variables of base.css) */

/* The form: fields with a border that can be seen (the focus ring is the mockup's 2px outline, in anthracite), the yellow submit button of base.css. */
.field input,.field textarea{border:1px solid var(--grey);background:#fff;transition:border-color .2s}
.field input::placeholder,.field textarea::placeholder{color:var(--grey);opacity:1}
/* A field marked as wrong keeps the red border of site.css, also under the pointer and while typing. */
.field input:not([aria-invalid="true"]):hover,.field textarea:not([aria-invalid="true"]):hover{border-color:var(--anthracite)}
.field input:not([aria-invalid="true"]):focus,.field textarea:not([aria-invalid="true"]):focus{border-color:var(--anthracite)}
/* Small notes on the cream form: --grey is only 4.25:1 on cream (below AA for 14px text), so they take the darker palette grey. */
.field .optional,.form-hint,.email-note,.privacy-note{color:var(--anthracite-soft)}
.privacy-note a{color:var(--anthracite);text-decoration-color:var(--yellow-deep);text-decoration-thickness:2px;text-underline-offset:3px}
.request-form .button{line-height:1.6}
.request-form>.journey-context{color:var(--anthracite-soft)}
/* Confirmation: olive rule on white. Errors keep the red rule of site.css, dark text on white. */
.request-form .form-status{background:#fff;border-left:4px solid var(--olive);color:var(--anthracite)}

/* The taupe eyebrow is only 4.15:1 on the cream card; #75685a (as in home.css and people.css) reaches AA (4.75:1). */
.contact-side .eyebrow{color:#75685a}

/* The other ways to reach us: filled anthracite buttons (client's request), so that the yellow "send" stays the one yellow action of the page. */
.contact-option .contact-action-button{background:var(--anthracite);border:1.5px solid var(--anthracite);border-radius:2px;color:#fff;padding:16px 24px;transition:background .2s,color .2s,border-color .2s}
.contact-option .contact-action-button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--anthracite)}
.contact-option .contact-action-button:focus-visible{outline:3px solid var(--anthracite);outline-offset:3px}
.contact-option a:not(.contact-action-button){border-bottom:2px solid var(--yellow)}
.contact-option a:not(.contact-action-button):hover{border-bottom-color:var(--anthracite)}

/* Where we are: anthracite band, yellow accents. */
.contact-location .eyebrow{color:var(--yellow)}
.contact-location .text-link{color:#fff;border-bottom:2px solid var(--yellow)}
.contact-location .text-link:hover{color:var(--yellow)}
.next-conversation{border-top:0}
/* On two columns the heading column grows to its widest unbreakable run (French joins "nous vous écoutons." with
   non-breaking spaces) instead of cutting a word; shorter headings keep the mockup's 1fr / 1.4fr split. */
@media(min-width:701px){.next-conversation>div:first-child{min-width:min-content}}

/* An example text longer than its field ends with an ellipsis instead of being cut mid-letter; on the narrowest phones
   the card and the fields give it more room and it is set a little smaller. */
.field input:placeholder-shown{text-overflow:ellipsis}
@media(max-width:359px){.contact-surface{padding-inline:16px}.request-form,.contact-side{padding-inline:16px}.field input,.field textarea{padding-inline:11px}}
@media(max-width:340px){.contact-surface{padding-inline:12px}.request-form,.contact-side{padding-inline:12px}.field input,.field textarea{padding-inline:9px}.field input::placeholder,.field textarea::placeholder{font-size:13px}}

/* Book a call page (same stylesheet): the calendar panel takes the place of the form, the side panel stays.
   The calendar needs the width, so on tablets its panel sits above the side card up to 820px and takes the larger
   share of the row up to 1050px (the Contact page keeps the mockup's columns). */
@media(max-width:820px){.book-surface{grid-template-columns:minmax(0,1fr)}}
@media(min-width:821px) and (max-width:1050px){.book-surface{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.book-calendar{background:var(--cream);padding:32px;min-width:0}
.book-calendar h2{font:400 34px/1.2 'Playfair Display',Georgia,serif;margin:0 0 10px}
.book-calendar>p{color:var(--anthracite-soft);margin:0 0 26px}
.book-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:420px;padding:40px 28px;background:#fff;border:1px solid var(--line);text-align:center}
.book-frame .book-icon{width:54px;height:54px;color:var(--yellow-deep)}
.book-frame .button{min-height:60px;padding:19px 34px;border:0;cursor:pointer;font-size:14px;letter-spacing:.07em}
.book-frame .text-link{font-size:15px}
.book-frame .book-privacy{max-width:360px;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--grey)}
.book-frame.is-loaded{display:block;min-height:0;padding:0;border:0;background:transparent}
.book-frame iframe{display:block;width:100%;height:760px;border:0;background:#fff}
@media(max-width:950px){.book-calendar{padding:26px}}
@media(max-width:700px){.book-calendar{padding:28px 20px}.book-frame{min-height:340px;padding:32px 18px}.book-frame iframe{height:1060px}}
@media(max-width:359px){.book-calendar{padding-inline:16px}.book-frame{padding-inline:12px}}
/* Book a call: the calendar panel fills its card down to the side card's height; on small phones the button keeps one line. */
.book-calendar{display:flex;flex-direction:column}
.book-frame{flex:1 0 auto}
@media(max-width:400px){.book-frame .button{padding-inline:18px;letter-spacing:.05em}}