/* Lindsey's page and the Guanacaste page (2026-10-27). Built on site.css; only what those two pages add. */
.gp-hero{padding-top:clamp(120px,14vw,190px)}
.gp-h1{font-size:clamp(48px,7.4vw,108px);line-height:1}
.gp-answer{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.32;color:var(--ink);max-width:36ch;text-wrap:pretty}
.gp-answer--wide{max-width:44ch}
.gp-note{font-size:15px;color:var(--ink-soft)}
.gp-stack{display:grid;gap:24px;justify-items:start}
.gp-links{display:flex;flex-wrap:wrap;gap:12px}

.gp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.gp-stat{background:var(--sand-1);border-radius:20px;padding:22px 22px 20px;display:grid;gap:6px}
.gp-stat b{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.05;color:var(--navy)}
.gp-stat span{font-size:15px;color:var(--ink-soft)}
.gp-stat--todo{background:none;border:1.5px dashed var(--line)}
.gp-stat--todo b{font-size:20px;font-family:var(--sans);font-weight:500;color:var(--ink-soft)}
.gp-todo{font-style:normal;font-size:13px;font-weight:500;color:#8a5a00;background:#fbf0d2;border-radius:999px;padding:2px 9px;margin-left:6px;white-space:nowrap}

.gp-creds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 40px}
.gp-creds li{display:grid;gap:2px;padding:16px 0;border-top:1px solid var(--line)}
.gp-creds strong{font-weight:500;font-size:17px}
.gp-creds span{font-size:15.5px;color:var(--ink-soft);line-height:1.5}

.gp-grid{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:36px 16px} /* .sr-grid lives in search.css */
.gp-grid .card{flex:none}
.gp-grid .card__name,.gp-grid .card__price{font-size:24px}
.gp-grid .card__place,.gp-grid .card__meta{font-size:14.5px;color:var(--ink-soft)}
.gp-grid .card__place{grid-column:1 / -1}
.gp-grid .card__meta{grid-column:1 / -1}
.gp-more{justify-self:start;margin-top:12px;max-width:100%;white-space:normal;text-align:center;padding-block:10px} /* 11-02: a long area name wraps inside the pill on a phone */

.gp-quote{margin:0;max-width:34ch;display:grid;gap:16px;justify-items:center}
.gp-quote blockquote{margin:0}
.gp-quote p{font-family:var(--serif);font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.25;margin:0}
.gp-quote figcaption{font-size:15px;color:var(--ink-soft)}

.gp-zones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:0 48px}
.gp-zone{display:grid;gap:10px;align-content:start;padding:28px 0 30px;border-top:1px solid var(--line)}
.gp-zone h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1;margin:0;color:var(--navy)}
.gp-zone__text{font-size:16.5px;line-height:1.6;color:var(--ink);max-width:52ch;margin:0}
.gp-zone__price{font-size:15.5px;color:var(--ink-soft);margin:0;font-variant-numeric:tabular-nums}
.gp-zone__price strong{font-weight:500;color:var(--ink)}
.gp-zone__links{display:flex;flex-wrap:wrap;gap:6px 20px;margin:4px 0 0;font-size:15.5px}
.gp-zone__links a{color:var(--navy);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.gp-hero .ab-person h1{font-size:clamp(52px,5.8vw,88px);line-height:1}
.gp-hero .gp-answer{font-size:clamp(20px,1.75vw,25px)}
.gp-zone__browse,.gp-browse{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;font-size:15.5px}
.gp-zone__browse a,.gp-browse a{color:var(--navy);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.gp-crumbs{margin:0;font-size:15px}
.gp-crumbs a{color:var(--navy);text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.gp-h1--browse{font-size:clamp(40px,5.4vw,80px);max-width:18ch;text-wrap:balance}
.gp-hero--browse{padding-top:clamp(110px,11vw,150px)}
.gp-bhead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,110px);row-gap:24px;align-items:end;margin-bottom:clamp(16px,2vw,28px)}
.gp-bhead .gp-answer{font-size:clamp(19px,1.6vw,23px)}
.gp-note a{color:var(--navy);text-underline-offset:4px;margin-left:6px}
@media (max-width:900px){.gp-bhead{grid-template-columns:1fr}}
.gp-bio{display:grid;gap:16px;max-width:62ch}
.gp-bio p{margin:0;font-size:17px;line-height:1.7;color:var(--ink)}
.nav__end{order:3;justify-self:end;display:flex;align-items:center;gap:6px}
.langsw{display:none;min-height:44px;min-width:44px;padding:0 12px;align-items:center;justify-content:center;font-weight:500;font-size:15px;letter-spacing:.04em;color:inherit;text-decoration:none;border-radius:999px}
.langsw:hover{text-decoration:underline;text-underline-offset:4px}
@media (min-width:900px){.langsw{display:inline-flex}}
.foot__field input{min-width:0}
.gp-trust{max-width:32ch;margin-bottom:8px}
.gp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,110px);row-gap:20px;align-items:start;margin-bottom:clamp(8px,1.5vw,20px)}
.gp-split .gp-trust{max-width:30ch;margin:0}
@media (max-width:900px){.gp-split{grid-template-columns:1fr}}
.gp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gp-split h2{text-wrap:balance}
.gp-creds{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.gp-creds li{align-content:start}
.gp-teamphoto{margin:clamp(20px,3vw,40px) 0 0;border-radius:20px;overflow:hidden;background:var(--sand-1)}
.gp-teamphoto img{display:block;width:100%;height:auto}
/* Our agents (10-30, his ask): room to breathe, 2 per row then 3 on wide screens, each photo fading into the name,
   role and languages, which sit on the fade's last stretch */
.gp-team{--cg:clamp(16px,3.2vw,48px);list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(40px,4.4vw,72px) var(--cg)}
.gp-team>li{flex:0 0 calc((100% - var(--cg)) / 2);min-width:0}  /* flex, not grid: a short last row sits centred, not pinned left */
@media (min-width:1100px){.gp-team>li{flex-basis:calc((100% - 2 * var(--cg)) / 3)}}
.gp-agent--mark .gp-agent__img{display:grid;place-items:center;background:var(--navy-deep);color:var(--paper)}
.gp-agent--mark .logo--mark{width:46%;height:auto;margin-top:-18%}
.gp-agent{display:block;color:inherit;text-decoration:none}
.gp-agent__img{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:20px;background:var(--sand-1);-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 90%);mask-image:linear-gradient(to bottom,#000 55%,transparent 90%)} /* 11 Nov: the fade starts lower (55%, was 46%), a fifth shorter: it was "going too much into their bodies" */
.gp-agent__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .9s var(--ease)}
@media (hover:hover){a.gp-agent:hover .gp-agent__img img{transform:scale(1.04)}}
.gp-agent__body{position:relative;display:grid;gap:4px;margin-top:-17%;padding:0 2px}
/* someone with no photo yet is words only, centred: no card with the mark on it (his word, for Roselind: "add only the text") */
.gp-team .gp-agent--mark .gp-agent__img{display:none}
.gp-team .gp-agent--mark .gp-agent__body{margin-top:0;text-align:center;justify-items:center}
.gp-agent__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.3vw,30px);line-height:1.12;margin:0 0 2px}
.gp-agent__role,.gp-agent__langs{font-size:15px;line-height:1.4;color:var(--ink-soft)}
@media (max-width:699px){.gp-agent__body h3{font-size:21px}.gp-agent__role,.gp-agent__langs{font-size:14px}}
@media (prefers-reduced-motion:reduce){.gp-agent__img img{transition:none}}
.gp-card{display:grid;gap:14px;color:inherit;text-decoration:none}
.gp-card__img{aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--sand-1);display:grid;place-items:center}
.gp-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover){a.gp-card:hover .gp-card__img img{transform:scale(1.04)}}
.gp-initials{font-family:var(--serif);font-size:64px;color:var(--navy)}
.gp-card__body{display:grid;gap:2px}
.gp-card__body h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:0}
.gp-card__body p{margin:0;font-size:15px;color:var(--ink-soft)}
.gp-card__langs{font-size:14.5px}
@media (max-width:900px){.gp-split{grid-template-columns:1fr}} /* restated: the two-column rule above it came later and won */
/* contact page: one quiet line, then the three ways to reach her as rows (his 10-28 note: too much text above the options) */
.gp-reach{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid var(--line)}
.gp-reach a{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:72px;color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.gp-reach a::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.gp-reach span{font-size:15px;color:var(--ink-soft)}
.gp-reach strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2vw,28px);color:var(--navy);overflow-wrap:anywhere}
.gp-reach svg{width:18px;height:18px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
@media (hover:hover){.gp-reach a:hover::after{transform:scaleX(1)}.gp-reach a:hover svg{transform:translateX(4px)}}
.gp-reach a:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:6px}
.gp-reach a:focus-visible::after{transform:scaleX(1)}
@media (max-width:560px){.gp-reach a{grid-template-columns:1fr auto;row-gap:2px;padding:12px 0}.gp-reach span{grid-column:1 / -1}}
/* ---------- Zones page v2 (his 10-28 note: "wtf is going on in that zones page"). Homes D's navy header, then one
   photo card per area with the same always-gold line, then Lindsey, offices, contact, and the browse pages as a small
   grey index above the footer: quiet, never hidden. ---------- */
.gp-band{background:var(--navy-deep);color:var(--paper);padding:calc(var(--nav,64px) + 8px + 44px + clamp(16px,1.8vw,24px)) var(--gut) clamp(32px,3.6vw,56px)}
/* 10 Nov: a sub-page's back pill sits in the room the other bands keep empty, so every title starts at the same height */
.gp-band:has(.gp-back){padding-top:calc(var(--nav,64px) + 8px)}
.gp-band__in{max-width:1400px;margin-inline:auto;display:grid;gap:clamp(16px,1.8vw,24px)}
/* his 10-28 note: the title on one line. --len is the title's length; the font runs about .4 of its size per character,
   so .43 always fits; below 32px a long title wraps to two balanced lines instead of shrinking further */
.gp-band__h1{font-family:var(--serif);font-weight:300;font-size:max(32px,min(clamp(46px,6vw,104px),calc((min(100vw,1528px) - 2 * var(--gut)) / (var(--len,24) * .43))));line-height:1.02;letter-spacing:-.012em;margin:0;text-wrap:balance}
.gp-zcs{background:var(--paper);padding:clamp(48px,5vw,80px) var(--gut) clamp(88px,10vw,150px)}
.gp-zgrid{list-style:none;margin:0 auto;padding:0;max-width:1400px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(48px,4.4vw,64px) 28px}
.gp-zc{display:grid;gap:18px;color:inherit;text-decoration:none;border-radius:18px}
.gp-zc:focus-visible{outline:2px solid var(--navy);outline-offset:6px}
.gp-zc__media{display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--sand-2)}
.gp-zc__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.gp-zc__body{position:relative;display:grid;gap:6px;padding-top:16px}
.gp-zc__body::before,.gp-zc__body::after{content:"";position:absolute;left:0;width:100%;background:var(--gold)}
.gp-zc__body::before{top:0;height:1px}
.gp-zc__body::after{top:-1px;height:3px;transform:scaleX(0);transform-origin:left center;transition:transform .55s var(--ease)}
.gp-zc__name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.4vw,34px);line-height:1.1;color:var(--ink)}
.gp-zc__row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:24px}
.gp-zc__line{font-size:15.5px;line-height:1.45;color:var(--ink-soft)}
.gp-zc__go{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14.5px;font-weight:500;color:var(--navy);opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.gp-zc__go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.gp-zc:hover .gp-zc__media img{transform:scale(1.04)}.gp-zc:hover .gp-zc__body::after{transform:scaleX(1)}.gp-zc:hover .gp-zc__go{opacity:1;transform:none}}
.gp-zc:focus-visible .gp-zc__body::after{transform:scaleX(1)}
.gp-zc:focus-visible .gp-zc__go{opacity:1;transform:none}
.gp-zc:active .gp-zc__media{transform:scale(.985);transition:transform .15s var(--ease)}
@media (hover:none){.gp-zc__go{opacity:1;transform:none}}
.gp-who{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,6vw,110px);align-items:center}
.gp-who__img{margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--sand-1);max-width:440px}
.gp-who__img img{display:block;width:100%;height:100%;object-fit:cover}
.gp-dir{background:var(--sand-2);padding:0 var(--gut) clamp(40px,4vw,64px)}
.gp-dir__in{max-width:1240px;margin-inline:auto;border-top:1px solid var(--line);padding-top:clamp(24px,2.4vw,32px);display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:24px clamp(24px,3vw,48px)}
.gp-dir__h{margin:0 0 8px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink)}
.gp-dir ul{list-style:none;margin:0;padding:0}
.gp-dir__col--area li{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.gp-dir__col--area a{padding:4px 2px}
.gp-dir__z{display:inline-block;padding:4px 0;min-width:13.5em;color:var(--ink)}
.gp-dir a{display:inline-block;padding:4px 0;font-size:14px;line-height:1.5;color:var(--ink-soft);text-decoration:none}
.gp-dir a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.gp-dir a:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.gp-zcs + .ab{padding-top:clamp(56px,5vw,80px)}
@media (max-width:900px){
  .gp-who{grid-template-columns:1fr}
  .gp-who__img{max-width:320px}
  .gp-dir__in{grid-template-columns:1fr 1fr}
  .gp-dir__col:last-child{grid-column:1 / -1}
}
@media (max-width:560px){.gp-dir__z{display:block;min-width:0}.gp-dir__col--area li{padding:6px 0}.gp-dir__col--area a{display:inline-block;padding:4px 2px}}
@media (prefers-reduced-motion:reduce){.gp-zc__media img,.gp-zc__body::after,.gp-zc__go{transition:none}}
.gp-bgrid{max-width:1400px;margin-inline:auto}
/* ---------- About, Team, Contact v2 (10-28, his "the team and about page very similar"): one job each. About = the
   agency, Team = the people, Contact = how to reach her (+ the form and the offices). All open on the navy band. ---------- */
.gp-sec{background:var(--paper);padding:clamp(48px,5vw,80px) var(--gut) clamp(88px,10vw,150px)}
.gp-sec + .ab{padding-top:clamp(56px,5vw,80px)}
.gp-wide{margin:clamp(40px,5vw,72px) auto 0;max-width:1240px;aspect-ratio:21/9;border-radius:20px;overflow:hidden;background:var(--sand-1)}
.gp-wide img{display:block;width:100%;height:100%;object-fit:cover}
.gp-wide--team{margin-top:0;aspect-ratio:auto}
.gp-wide--team img{height:auto}
.gp-cta{background:var(--sand-2);padding:clamp(56px,6vw,96px) var(--gut)}
.gp-cta__in{max-width:1240px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;border-top:1px solid var(--line);padding-top:clamp(32px,3.6vw,48px)}
.gp-cta__in h2{margin:0}
.gp-contact{max-width:1240px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,6vw,110px);row-gap:40px;align-items:start}
.gp-contact .cform{background:var(--sand-1)}
@media (max-width:900px){.gp-contact{grid-template-columns:1fr}.gp-wide{aspect-ratio:4/3}}
.gp-wide--team{aspect-ratio:auto} /* restated after the phone rule above, which otherwise boxes the team photo at 4:3 */
/* his 10-28 note on About: "this text starts in the side of the title and then goes under it, as in an editorial site".
   The title floats; the paragraph starts beside it and runs under it at full width. On a phone the title sits above. */
.ab__in--wrap{display:flow-root}
.ab__in--wrap > h2{float:left;margin:0 clamp(28px,3.4vw,56px) clamp(4px,.6vw,10px) 0;font-size:clamp(40px,4.8vw,80px)}
.ab__in--wrap > .ab__lead{max-width:none;margin:0}
.ab__in--wrap > .gp-links{margin:clamp(24px,2.6vw,36px) 0 0}
@media (max-width:640px){.ab__in--wrap > h2{float:none;margin:0 0 20px}}

/* About: what we sell, in two columns under the centred lead; the people as linked rows (28 Oct) */
.gp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);text-align:left;max-width:980px;margin:clamp(28px,3vw,40px) auto clamp(28px,3vw,40px);justify-items:start}
.gp-cols .ab__body{max-width:46ch;margin:0}
.gp-people-intro{clear:both;margin:clamp(24px,2.6vw,36px) 0 0}
.gp-reach--people{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px);border-top:0;margin-top:clamp(24px,2.6vw,36px)}
.gp-reach--people a{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;row-gap:6px;column-gap:16px;min-height:0;padding:18px 0 20px;border-top:1px solid var(--line);border-bottom:0}
.gp-reach--people a::after{bottom:auto;top:-1px}
.gp-reach--people strong{grid-column:1;grid-row:1;font-size:clamp(22px,1.9vw,26px)}
.gp-reach--people span{grid-column:1;grid-row:2;font-size:16px;line-height:1.5}
.gp-reach--people svg{grid-column:2;grid-row:1 / span 2}
@media (max-width:760px){.gp-cols{grid-template-columns:minmax(0,1fr)}.gp-reach--people{grid-template-columns:minmax(0,1fr)}}

/* the privacy page (10-30): her own policy text, one readable column */
.gp-legal{max-width:720px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;overflow-wrap:anywhere} /* minmax(0): a long address in her text no longer widens the page on a phone (10 Nov) */
.gp-legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:28px 0 0}
.gp-legal p{margin:0;line-height:1.65}
.gp-legal a{color:var(--navy);text-underline-offset:3px}

/* 10-30: her record on Lindsey's page opens a page per item: the whole card / row is the link, an arrow says so */
.gp-go{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--navy);transition:transform .35s var(--ease)}
a.gp-stat--go{position:relative;color:inherit;text-decoration:none;transition:background-color .3s var(--ease)}
a.gp-stat--go .gp-go{position:absolute;right:20px;top:24px}
a.gp-stat--go b{padding-right:28px}
.gp-creds a{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:start;gap:2px 16px;color:inherit;text-decoration:none}
.gp-creds a strong,.gp-creds a span{grid-column:1}
.gp-creds a .gp-go{grid-column:2;grid-row:1 / span 2;align-self:center}
.gp-creds a strong{transition:color .25s var(--ease)}
@media (hover:hover){
  a.gp-stat--go:hover{background:var(--sand-2)}
  a.gp-stat--go:hover .gp-go,.gp-creds a:hover .gp-go{transform:translateX(4px)}
  .gp-creds a:hover strong{color:var(--navy)}
}
a.gp-stat--go:focus-visible .gp-go,.gp-creds a:focus-visible .gp-go{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.gp-go,a.gp-stat--go,.gp-creds a strong{transition:none}}
.gp-sources{margin:clamp(28px,3vw,40px) 0 0;font-size:14px;color:var(--ink-soft);line-height:1.6}
.gp-sources a{color:var(--navy);text-underline-offset:3px}
/* area pages (10-30): her bold lead-ins, set as small headings inside the text column */
.gp-sub{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,25px);line-height:1.2;margin:18px 0 2px}
.gp-stack>.gp-sub:first-child{margin-top:0}
/* 11-03, his "under Why we started, instead of that picture, just keep it as the frame, don't add any picture there, I still
   haven't decided": the frame keeps its place and shape, empty, until he picks a photo */
.gp-wide--empty{background:var(--sand-2);box-shadow:inset 0 0 0 1px rgba(47,37,32,.08)}

/* ---------- contact: the offices on her map (10 Nov) ----------
   The map fills the section; a paper panel (not glass: glass is for the bar only) carries the offices on its left.
   Phones: the map on top at a fixed height, the panel under it in the page flow. */
.om{position:relative;background:var(--sand-1);min-height:clamp(520px,62vh,680px);display:grid}
.om__map,.om__map.maplibregl-map{position:absolute;inset:0} /* the map library sets position:relative on its box; restated so it keeps filling the section */
.om__map--off{display:none}
.om__map .maplibregl-canvas{outline:none}
.om__map .maplibregl-ctrl-group{border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(47,37,32,.14)}
.om__map .maplibregl-ctrl-group button{width:44px;height:44px} /* 10 Nov: the zoom buttons were 29px, under the 44px floor */
.om__in{position:relative;z-index:1;max-width:1400px;width:100%;margin-inline:auto;padding:clamp(32px,5vw,72px) var(--gut);display:flex;align-items:center;pointer-events:none}
.om__panel{pointer-events:auto;width:min(440px,100%);background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.6vw,36px);display:grid;gap:22px}
.om__panel .display{margin:0;font-size:clamp(34px,3.2vw,46px);line-height:1.05}
.om__show[hidden]{display:none}
.om__office{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line)}
.om__office h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,32px);line-height:1.1;margin:0;color:var(--ink)}
.om__office p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.om__acts{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px!important}
.om__acts a,.om__show{display:inline-flex;align-items:center;min-height:44px;font:inherit;font-size:15px;font-weight:500;color:var(--navy);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.om__acts a:hover,.om__show:hover{text-decoration-thickness:2px}
.om__wa{margin:0}
.om__pin{display:flex;align-items:flex-start;gap:6px;cursor:default}
.om__mark{flex:none;width:30px;height:40px;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,30,55,.3))}
.om__mark path{fill:var(--navy);stroke:var(--gold);stroke-width:1.8}
.om__mark circle{fill:var(--paper)}
.om__pin .om__tag{margin-top:1px}
.om__dot{width:22px;height:22px;border-radius:50%;background:var(--navy);box-shadow:0 0 0 4px rgba(236,211,87,.95),0 2px 10px rgba(0,30,55,.25)}
.om__tag{font-size:14px;font-weight:600;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:5px 10px;white-space:nowrap}
@media (max-width:899px){
  .om{display:block;min-height:0}
  .om__map,.om__map.maplibregl-map{position:relative;inset:auto;height:56vh;min-height:320px}
  .om__in{padding-top:16px} /* under the map, not over it: the map's credit line sat on the title */
  .om__panel{width:100%}
}
@media (prefers-reduced-motion:reduce){.om__acts a,.om__show{transition:none}}

/* ---------- Contact (11 Nov): the ways to reach them in the band, then one section where the form and the offices lie
   over the coast seen from the sea. His words: "i like C", "keep the map and fade the text into it so its more together and
   not two different sections". The view (office-map.js) fills the lower part of the section; a paper veil over it is solid
   where the view begins, lets it show faintly behind the words, and clears below them, where the offices are pinned. ---------- */
.ct-lines{list-style:none;margin:clamp(20px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px)}
.ct-lines a{display:grid;gap:8px;padding:18px 0 6px;border-top:1px solid rgba(253,250,246,.28);color:var(--paper);text-decoration:none;transition:border-color .3s var(--ease)}
.ct-lines span{font-size:15px;color:rgba(253,250,246,.74)}
.ct-lines strong{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.1vw,30px);overflow-wrap:anywhere}
@media (hover:hover){.ct-lines a:hover{border-top-color:var(--gold)}}
.ct-lines a:focus-visible{outline:2px solid var(--paper);outline-offset:4px;border-radius:6px}
/* the map first: its top fades out of the band's navy, its foot into the paper under it (his words: "you first see the map
   and then it fades into" the words; "make it fade into the blue"; "make it not see-through"). On a computer the offices
   lie on the map's open water, on the left (his word: "our offices could already be kind of visible in the side part of
   the map where there's kind of space... in the bay area"); the view is framed further right to leave that water free. */
.ct-map{position:relative;background:var(--paper)}
.ct-map__view{position:relative;height:clamp(460px,70vh,720px);background:#E8DFD0;overflow:hidden}
.ct-map__view .om__map,.ct-map__view .om__map.maplibregl-map{position:absolute;inset:0;height:auto;min-height:0}
.ct-map__view::before,.ct-map__view::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.ct-map__view::before{top:0;height:clamp(100px,15vh,160px);background:linear-gradient(to bottom,var(--navy-deep) 0,rgba(0,42,74,.78) 28%,rgba(0,42,74,.34) 62%,rgba(0,42,74,0) 100%)}
.ct-map__view::after{bottom:0;height:clamp(120px,19vh,200px);background:linear-gradient(to top,var(--paper) 0,rgba(253,250,246,.84) 32%,rgba(253,250,246,.36) 68%,rgba(253,250,246,0) 100%)}
.ct-map .om__back{left:auto;right:max(16px,var(--gut));bottom:clamp(104px,15vh,160px)}
.ct-map__side{padding:clamp(20px,3vw,32px) var(--gut) 0}
.ct-map h2.ct-map__h{margin:0 0 clamp(12px,1.4vw,18px);font-size:clamp(30px,2.9vw,42px);line-height:1.05}
.ct-map__side .om__office{padding-top:12px;padding-bottom:10px;gap:3px}
.ct-map__side .om__office h3{font-size:clamp(22px,1.9vw,27px)}
.ct-map__side .om__office p{font-size:15px}
@media (hover:hover) and (pointer:fine){.ct-map__side .om__acts a,.ct-map__side .om__show{min-height:36px}} /* a mouse needs less height than a finger; keeps the block clear of the navy fade above it */
@media (min-width:1000px){
  .ct-map__side{position:absolute;z-index:2;left:max(var(--gut),calc((100% - 1240px) / 2));bottom:clamp(14px,2.4vh,28px);width:min(400px,30vw);padding:0}
}
.ct{position:relative;background:var(--paper);padding:clamp(20px,2.6vw,40px) var(--gut) clamp(48px,6vw,88px)}
.ct__in{position:relative;z-index:2;max-width:1240px;margin-inline:auto}
.ct__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 32px;margin-bottom:clamp(16px,2vw,26px)}
.ct__head .gp-answer{margin:0}
.ct h2.ct__h{margin:0;font-size:clamp(34px,3.6vw,56px);line-height:1.05}
.ct .cform{background:none;padding:0;border-radius:0}
/* "Write to us" as one row from side to side on a computer (his word: "kind of horizontal under it, coming kind of from side to side") */
@media (min-width:1000px){
  /* the row is lined up at the top, so when the message box grows downward (site.js) the other fields stay where they are;
     --lab is the height a field's label takes, which the two pieces without a label (I'm..., Send) stand off by */
  .ct .cform{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr) auto;column-gap:16px;row-gap:8px;align-items:start;--lab:30px}
  .ct .cform > *{grid-column:auto}
  .ct .cform .seg{flex-wrap:nowrap;margin-top:var(--lab);min-height:52px}
  .ct .cform .cform__send{margin-top:var(--lab);min-height:52px;height:52px}
  .ct .cform textarea{height:52px;min-height:52px;resize:none;overflow:hidden}
  .ct .cform .cform__done{grid-column:1 / -1}
}
.om__back{position:absolute;z-index:3;left:max(16px,var(--gut));bottom:18px;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--paper);color:var(--navy-deep);border:1px solid var(--line);border-radius:999px;font:500 15px var(--sans);cursor:pointer;box-shadow:0 2px 10px rgba(0,30,55,.14)}
.om__back[hidden]{display:none}
.om__back:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (max-width:900px){.ct-lines{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){.ct-lines a{transition:none}}