/* ------------------------------------------------------------------
   travel-agencies.css - the landing page for boutique and luxury travel
   agencies and tour operators.

   Loads after base.css, modern.css, components.css and listing.css. The short
   hero, the plan cards, the FAQ list, the tag pills and the closing panel come
   from the shared sheets; this file is what only this page has: the offer bar
   (printed only when it is switched on in the editor), the pain points with their
   marker, the audit strip and the compact one-time cards, the two related
   projects, the four steps in one row, the figure chips and the optional
   "Beyond websites" strip.

   The page is short on purpose: pain points first, prices straight under them.
   ------------------------------------------------------------------ */

/* --- the offer bar: not in the page at all until it is switched on ------ */
.offer-bar{background:linear-gradient(110deg,#f4aeca,#dbc4ff);color:#2b1a2e}
.offer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;min-height:42px;padding-block:8px;text-align:center}
.offer-text{font-size:13px;font-weight:800;line-height:1.4;letter-spacing:-.01em}
.offer-link{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:99px;background:#2b2135;color:#fff;font-size:12px;font-weight:800;line-height:1.5;white-space:nowrap;transition:transform .2s,box-shadow .2s}
.offer-link:hover{transform:translateY(-1px);box-shadow:0 8px 18px #2b213540}
.offer-link:focus-visible{outline-color:#2b2135}

/* --- the hero: the same short hero, dressed up ------------------------- */
/* The italic serif of the home hero, for the lit words of the title. The
   fallback face is Georgia scaled to Instrument Serif's width, so the line does
   not re-wrap when the real font arrives (both as in home.css). */
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif Fallback";font-style:italic;font-weight:400;src:local("Georgia Italic"),local("Georgia-Italic");size-adjust:76%}
/* A dashed route with a pin along the foot of the hero, under the title and
   the buttons: the one travel motif on the page. It stays in the lowest fifth
   of the hero so it never crosses the header, the title or a button, and it is
   left out on phones, where the buttons reach the bottom edge. */
.modern-travel-agencies .top-hero{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 320' fill='none'%3E%3Cpath d='M-40 302C260 268 520 316 800 288S1160 262 1330 283' stroke='%23f3b9d6' stroke-width='2' stroke-dasharray='7 11' opacity='.45'/%3E%3Ccircle cx='520' cy='300' r='4' fill='%23cdb8ff' opacity='.55'/%3E%3Ccircle cx='800' cy='288' r='5' fill='%23f6bfd5' opacity='.6'/%3E%3Ccircle cx='1330' cy='283' r='10' stroke='%23f6bfd5' stroke-width='2' opacity='.75'/%3E%3Ccircle cx='1330' cy='283' r='3.5' fill='%23f6bfd5' opacity='.95'/%3E%3C/svg%3E"),linear-gradient(115deg,#171320,#23182f 64%,#1c1730);background-repeat:no-repeat;background-position:right 0 bottom 0;background-size:auto 100%}
.modern-travel-agencies .top-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 10px;border:1px solid #ffffff2b;border-radius:99px;background:#ffffff12;color:#e8d8f4;font-size:10px;letter-spacing:1.7px}
.modern-travel-agencies .top-hero .twinkle{margin:0}
.modern-travel-agencies .top-hero h1{margin-top:16px}
.modern-travel-agencies .top-hero .accent{padding-right:.06em;background:linear-gradient(105deg,#ffd7e8 5%,#f6bfd8 48%,#ccb9ff 98%);-webkit-background-clip:text;background-clip:text;font-family:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;font-size:1.12em;font-style:italic;font-weight:400;line-height:.9;letter-spacing:-.005em}
/* A light sweeps across the main button on hover. */
.modern-travel-agencies .top-hero .btn-primary{position:relative;overflow:hidden}
.modern-travel-agencies .top-hero .btn-primary:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,#ffffff8a 50%,transparent 68%);transform:translateX(-130%);transition:transform .8s ease}
.modern-travel-agencies .top-hero .btn-primary:hover:after{transform:translateX(130%)}

/* --- pain points: tick what hurts ------------------------------------- */
.sign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sign-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:15px;align-items:start;padding:20px 18px 21px 18px;border:1px solid #e8e0ec;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(59,28,73,.05);cursor:pointer}
.modern .sign-card.reveal{transition:opacity .75s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background-color .3s}
.modern .sign-card.reveal.visible:hover{transform:translateY(-4px);border-color:#c9b6dc;box-shadow:0 18px 44px #4a285518}
.sign-card:has(.sign-check:checked){border-color:#b98fd3;background:#fcf7ff}
.sign-check{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.sign-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#eeebff;color:#5a3f8a}
.sign-card:nth-child(3n+2) .sign-icon{background:#e4f6ea;color:#2f6b45}
.sign-card:nth-child(3n) .sign-icon{background:#ffeedf;color:#9a4f1c}
.sign-icon svg{width:23px;height:23px}
.sign-text{margin-top:3px;color:#2c3550;font-size:15.5px;font-weight:550;line-height:1.6}
.sign-tick{display:grid;place-items:center;width:30px;height:30px;margin-top:4px;border:1.5px solid #d6cbe0;border-radius:50%;background:#fff;color:#fff;transition:background .2s,border-color .2s,transform .2s}
.sign-tick svg{width:15px;height:15px;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s}
.sign-card:hover .sign-tick{border-color:#b98fd3}
.sign-check:checked ~ .sign-tick{border-color:transparent;background:var(--grad-deep);transform:scale(1.06)}
.sign-check:checked ~ .sign-tick svg{opacity:1;transform:none}
.sign-check:focus-visible ~ .sign-tick{outline:2px solid #7a5bd6;outline-offset:3px}
/* The marker: a highlighter band under bold words, carried across a line break. */
.hl{padding:.02em .14em;margin:0 -.04em;border-radius:.25em;background-color:transparent;background-image:linear-gradient(100deg,#ffb3d2,#f0c4ff);background-size:100% .58em;background-position:0 84%;background-repeat:no-repeat;color:#1b1430;font-weight:800;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* The count under the grid, shown by the script once something is ticked. */
.sign-tally{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:18px;padding:17px 22px;border-radius:17px;background:linear-gradient(115deg,#ffe1eb,#eedcff 60%,#f6e4f1)}
.sign-tally[hidden]{display:none}
.sign-tally p{margin:0;color:#3a2a44;font-size:14px;line-height:1.6}
.sign-tally b{color:#1b1430}

/* --- pricing: the audit strip, the monthly plans, the one-time work ---- */
.start-strip{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px 36px;padding:clamp(22px,3vw,32px) clamp(22px,3.4vw,44px);border-radius:23px;background:linear-gradient(115deg,#ffe1eb,#eedcff 60%,#f6e4f1);box-shadow:0 14px 40px rgba(59,28,73,.07)}
.start-flag{display:inline-block;padding:5px 11px;border-radius:30px;background:#ffffffa6;color:#552d50;font-size:10px;font-weight:850;letter-spacing:.2px}
.start-copy h3{margin:10px 0 6px;color:#1f1830;font-size:clamp(21px,2vw,26px);font-weight:760;line-height:1.2;letter-spacing:-.04em}
.start-copy p{max-width:660px;margin:0;color:#5b4a68;font-size:13px;line-height:1.7}
.start-price{display:flex;align-items:baseline;gap:2px;color:#1b1626;line-height:1}
.start-price .cur{font-size:26px;font-weight:700;transform:translateY(-10px)}
.start-price strong{font-size:clamp(46px,4.4vw,60px);font-weight:770;letter-spacing:-.05em}
.start-btn{background:#2a2136;color:#fff;box-shadow:0 10px 25px #4d2b5533;white-space:nowrap}
.start-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px #4d2b5547}

/* The two row headings (one-time work, monthly care): centred, large, with a small
   uppercase tag above and one calm sentence below, so each row reads as its own step. */
.pack-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:780px;margin:64px auto 28px}
.pack-label .pack-tag{display:inline-block;padding:5px 14px;border-radius:999px;background:#ffffffcc;border:1px solid #e3dcef;color:#6961bb;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.pack-label h3{margin:0;color:#101321;font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.12;letter-spacing:-.03em}
.pack-label span{color:#5d697c;font-size:16px;line-height:1.65}
.pack-label .pack-tag{font-size:11.5px;line-height:1.4;color:#6961bb}

/* The plan cards from components.css, made compact: no icon, no label above the
   list, a smaller price, so three cards fit one row without a long page. */
.modern-travel-agencies .plan-card{padding:26px 24px 24px}
.modern-travel-agencies .plan-top{min-height:0}
.modern-travel-agencies .plan-top h4{margin:0 0 6px;color:#281e2d;font-size:clamp(22px,2vw,26px);line-height:1.2;letter-spacing:-.04em}
.modern-travel-agencies .plan-card.featured .plan-top h4{color:#fff}
.modern-travel-agencies .plan-description{max-width:none}
.modern-travel-agencies .price-block{min-height:0;padding:15px 0 16px}
.modern-travel-agencies .currency{font-size:24px;transform:translateY(-8px)}
.modern-travel-agencies .cost strong{font-size:clamp(40px,3.8vw,52px)}
.modern-travel-agencies .plan-button{margin-top:18px}
.modern-travel-agencies .feature-list{gap:11px;margin-top:22px}
.modern-travel-agencies .feature-list li{font-size:12.5px}

.one-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.one-card{display:flex;flex-direction:column;padding:22px 22px 20px;border:1px solid #e8e0ec;border-radius:19px;background:#fff;box-shadow:0 14px 40px rgba(59,28,73,.05)}
.one-card h4{margin:0;color:#261f31;font-size:18px;font-weight:760;line-height:1.25;letter-spacing:-.03em}
.one-price{display:flex;align-items:baseline;gap:7px;margin:8px 0 10px;color:#1b1626}
.one-price strong{font-size:30px;font-weight:770;line-height:1.1;letter-spacing:-.04em}
.one-price span{color:#6f6879;font-size:12px;font-weight:650}
.one-card p{flex:1;margin:0;color:#625b6b;font-size:12.5px;line-height:1.7}
.pack-link{display:inline-flex;align-items:center;align-self:flex-start;gap:7px;margin-top:16px;padding-bottom:4px;border-bottom:1px solid #a782b3;color:#83589c;font-size:12px;font-weight:800;white-space:nowrap;transition:color .25s,border-color .25s}
.pack-link:hover{color:#5f3a78;border-color:#5f3a78}

/* --- beyond websites: two cards (what is done, what you end up with) and the one button (optional strip) -- */
/* The strip is a second lavender band right under the pricing band. The two read
   as one band: the pricing band (given .has-beyond by the template) gives up its
   bottom edge and the strip its top edge, and the gap between them is the same
   64px as between the pricing rows. With the strip off, none of this applies. */
.modern .band-tint.has-beyond{padding-bottom:0;border-bottom:0}
.modern .band-tint.beyond-band{padding-block:64px 72px;border-top:0}
.beyond-band .sec-title{text-wrap:balance}
/* Two cards of one height. Each is: a head (icon, name, one line), the optional price, the
   three ticks (the tick list of the plan cards) and a quiet closing line on what the advisor
   ends up with. */
.beyond-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.beyond-card{display:flex;flex-direction:column;min-width:0;padding:24px 26px 22px;border:1px solid #e8e0ec;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(59,28,73,.05)}
.beyond-head{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.beyond-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#eeebff;color:#5a3f8a}
.beyond-card:nth-child(2) .beyond-icon{background:#fde8f1;color:#a5508b}
.beyond-icon svg{width:23px;height:23px}
.beyond-name{min-width:0}
.beyond-name h3{margin:0;color:#261f31;font-size:20px;font-weight:760;line-height:1.25;letter-spacing:-.03em}
.beyond-tagline{margin:5px 0 0;color:#7a4a9c;font-size:14px;font-weight:650;line-height:1.5;text-wrap:balance}
/* A price appears here only if one was typed in the editor. */
.beyond-card .beyond-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;margin:16px 0 0;color:#1b1626;line-height:1.2}
.beyond-price strong{font-size:22px;font-weight:770;letter-spacing:-.04em}
.beyond-price span{color:#6f6879;font-size:12px;font-weight:650}
.beyond-price .beyond-price-text{font-size:15px;letter-spacing:-.02em}
.modern-travel-agencies .beyond-ticks{flex:1;gap:12px;margin-top:18px}
.modern-travel-agencies .beyond-ticks li{font-size:13.5px;text-wrap:pretty}
.beyond-outcome{margin:18px 0 0;padding:11px 15px;border-radius:13px;background:#faf6fc;color:#6f6879;font-size:12.5px;line-height:1.65;text-wrap:pretty}
/* The note and the button under the two cards, centred on the same axis as the cards. */
.beyond-cta{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:720px;margin:30px auto 0;text-align:center}
.beyond-cta p{margin:0;color:#625b6b;font-size:14px;line-height:1.65;text-wrap:balance}
.beyond-btn{white-space:nowrap}
/* Side by side, the two cards share their rows, so the head, the ticks and the closing line of one
   sit level with those of the other even when a name wraps or only one card has a price. Where this
   is not supported the cards keep one height and the closing lines still sit at the foot. */
@media(min-width:831px){
  @supports (grid-template-rows:subgrid){
    .beyond-list{grid-template-rows:repeat(4,auto);row-gap:0}
    .beyond-card{display:grid;grid-row:span 4;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0}
    .beyond-head{grid-row:1}
    .beyond-card .beyond-price{grid-row:2}
    .beyond-ticks{grid-row:3}
    .beyond-outcome{grid-row:4}
  }
}
@media(max-width:830px){
  .beyond-list{grid-template-columns:1fr;gap:14px}
}
@media(max-width:740px){
  .modern .band-tint.beyond-band{padding-block:48px 52px}
}
@media(max-width:570px){
  .modern .band-tint.beyond-band{padding-block:44px 52px}
  .beyond-card{padding:19px 18px 18px}
  .beyond-head{grid-template-columns:40px minmax(0,1fr);gap:13px}
  .beyond-icon{width:40px;height:40px;border-radius:12px}
  .beyond-name h3{font-size:18px}
  .beyond-cta{margin-top:26px}
  .beyond-btn{align-self:stretch}
}

/* --- related projects: two cards, a small picture beside the words ------ */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.proj-card{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:22px;align-items:start;min-width:0;padding:18px;border:1px solid #e8e0ec;border-radius:21px;background:#fff;box-shadow:0 14px 40px rgba(59,28,73,.06)}
.proj-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:13px;background:#efe8f5}
.proj-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.proj-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-block:4px}
.proj-body h3{margin:7px 0 0;color:#1b1626;font-size:21px;font-weight:750;line-height:1.24;letter-spacing:-.04em}
.proj-body .tile-text{margin:8px 0 0}
.proj-body .tags,.proj-body .travel-figs{margin-top:14px}
.proj-body .tile-more{margin-top:16px}
.travel-figs{display:flex;flex-wrap:wrap;gap:8px}
.travel-fig{display:inline-flex;align-items:baseline;gap:7px;padding:7px 11px;border:1px solid #ece4f1;border-radius:12px;background:#faf6fc;color:#6a6270;font-size:11.5px;font-weight:650;line-height:1.3}
.travel-fig strong{color:#7a4a9c;font-size:16px;font-weight:760;letter-spacing:-.03em;white-space:nowrap}

/* --- how it works: four steps in one row ------------------------------- */
.modern .band-tint.how-band{padding-block:40px 46px}
.how-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;overflow:hidden;border:1px solid #e6dfe9;border-radius:19px;background:#fff}
.how-item{padding:20px 22px 22px;border-left:1px solid #eee7f1}
.how-item:first-child{border-left:0}
.how-no{color:#8c6f95;font-size:11px;font-weight:850;letter-spacing:1.5px}
.how-item h3{margin:8px 0 4px;color:#2e2736;font-size:18px;font-weight:750;letter-spacing:-.03em}
.how-item p{margin:0;color:#6a6270;font-size:12px;line-height:1.65}

/* --- the questions: the title on the left, the list on the right ------ */
.faq-wrapper{display:grid;grid-template-columns:270px 1fr;gap:90px}
.faq-left .sec-title{margin-top:8px}

/* --- smaller screens --------------------------------------------------- */
@media(max-width:1100px){
  .faq-wrapper{gap:45px}
  .sign-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj-card{grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px}
}
@media(max-width:960px){
  .proj-grid{grid-template-columns:1fr}
}
@media(max-width:830px){
  .modern-travel-agencies .top-hero{background-image:linear-gradient(115deg,#171320,#23182f 64%,#1c1730)}
  .faq-wrapper{grid-template-columns:1fr;gap:20px}
  .start-strip{grid-template-columns:1fr auto}
  .start-copy{grid-column:1/-1}
  /* Three small cards on two columns: the last one runs the full width instead of
     leaving a hole beside it. */
  .one-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .one-card:last-child{grid-column:span 2}
  .how-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-item:nth-child(3){border-left:0}
  .how-item:nth-child(n+3){border-top:1px solid #eee7f1}
}
@media(max-width:570px){
  .sign-grid{grid-template-columns:1fr}
  .sign-card{grid-template-columns:40px minmax(0,1fr) 28px;gap:13px;padding:17px 16px}
  .sign-icon{width:40px;height:40px;border-radius:12px}
  .sign-text{font-size:14.5px}
  .sign-tick{width:28px;height:28px}
  .start-strip{grid-template-columns:1fr;gap:14px}
  .start-btn{justify-content:center}
  .one-grid{grid-template-columns:1fr}
  .one-card:last-child{grid-column:span 1}
  .proj-card{grid-template-columns:1fr;gap:14px}
  .pack-label{margin:44px auto 22px}
  .pack-label span{font-size:15px}
  .offer-inner{padding-inline:4px}
}
@media(max-width:380px){
  .how-item{padding:16px 15px 18px}
}