/* ===========================================================================
   Booked Wild — /services/travel-website-design/

   The first service page hanging off /services/, which is what services.js
   already anticipates. Everything structural is the site's own: .hero, .sec,
   .wrap, .h2, .lede, .eyebrow, .rule, .btn and .actions all come from
   services.css, and this file only adds the components the page needs on top.

   The FAQ accordion is copied in rather than shared. servicespage.css carries
   the same rules with a note saying they were "ported verbatim" from
   /lodges-log-cabins/, so copy-per-page is the established convention here and
   a shared file would let one page's edit restyle three others.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- *
   The other pages run a photograph behind the headline. A website-design page
   should show a website, so this one is a split: copy on the left, a real
   client homepage on the right in a browser frame. The ground stays the same
   ink as every other hero, and the scrim still sits under the content so the
   white logo and nav keep their contrast while the header is transparent. */

.twd-hero { background: var(--ink); }
.twd-hero .hero__scrim {
  background: radial-gradient(1200px 600px at 78% 18%, rgba(63, 142, 79, .22), transparent 70%);
}
.twd-hero__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 186px var(--pad) 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 68px;
  align-items: center;
}
.twd-hero__copy { min-width: 0; }
.twd-hero .eyebrow { color: var(--accent-soft); }
.twd-hero h1 {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: .98;
  letter-spacing: -.042em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  max-width: 17ch;
}
.twd-hero .hero__lede {
  font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: rgba(242, 246, 238, .86);
  margin: 26px 0 0;
  max-width: 54ch;
}

/* the browser frame: chrome bar, then the screenshot pinned to the top so the
   client's own hero is what shows rather than the middle of their page */
.twd-shot {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0A1F14;
  border: 1px solid rgba(159, 220, 169, .22);
  box-shadow: 0 40px 90px rgba(4, 18, 11, .55);
}
.twd-shot__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  background: #10301F;
  border-bottom: 1px solid rgba(159, 220, 169, .16);
}
.twd-shot__bar span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(159, 220, 169, .38);
}
.twd-shot img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: 50% 0;
}
.twd-shot__cap {
  font-family: 'Karla', sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(242, 246, 238, .62);
  padding: 13px 18px;
  border-top: 1px solid rgba(159, 220, 169, .14);
}

/* ---- what you get -------------------------------------------------------- */

.wgx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 54px;
}
.wgx {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 34px 32px 36px;
  display: flex;
  flex-direction: column;
}
.wgx__n {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--accent);
  margin: 0 0 20px;
}
.wgx__h {
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.16;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
}
.wgx__b {
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--body);
  margin: 0;
}

/* ---- what's included ----------------------------------------------------- *
   The source document gives the three starting points as a two-column table.
   A table reads as reference; these are the first real decision a visitor
   makes, so each row becomes a card with the trigger and the outcome split by
   a rule — the same information, in the order someone actually asks it. */

.startx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 54px;
}
.startx {
  background: var(--card);
  border: 1px solid rgba(159, 220, 169, .2);
  border-radius: var(--r-card);
  padding: 32px 30px 34px;
}
.startx__tag {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 10px;
}
.startx__when {
  font-family: 'Karla', sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--accent-soft);
  margin: 0;
}
.startx__rule {
  height: 1px;
  background: rgba(159, 220, 169, .26);
  margin: 22px 0;
}
.startx__what {
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(242, 246, 238, .86);
  margin: 0;
}

.incl {
  margin-top: 46px;
  padding: 40px 42px 42px;
  background: rgba(242, 246, 238, .05);
  border: 1px solid rgba(159, 220, 169, .2);
  border-radius: var(--r-card);
}
.incl__h {
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -.028em;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 24px;
}
.incl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 36px;
}
/* Icon and text are grid columns rather than a padding-left indent, so a
   wrapped second line stays aligned with the first instead of running back
   under the icon. align-items:start keeps the circle level with the first line
   whatever the text does. */
.incl__list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(242, 246, 238, .86);
}
.incl__ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(159, 220, 169, .12);
  border: 1px solid rgba(159, 220, 169, .3);
  color: var(--accent-mid);
  /* nudges the circle onto the first line's optical centre */
  margin-top: -3px;
}
.incl__ico svg { display: block; }
.incl__txt { padding-top: 4px; }

/* ---- how it works -------------------------------------------------------- */

.stepx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 54px;
  counter-reset: step;
}
.stepx {
  position: relative;
  padding-top: 30px;
  border-top: 2px solid var(--line-2);
}
.stepx__n {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
  opacity: .34;
  margin: 0 0 14px;
}
.stepx__h {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}
.stepx__b {
  font-family: 'Karla', sans-serif;
  font-size: 16.5px;
  line-height: 1.64;
  color: var(--body);
  margin: 0;
}

/* ---- client results ------------------------------------------------------ */

.resx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  /* stretch, so the picture takes its height from the statistics beside it
     rather than from its own aspect ratio */
  align-items: stretch;
  margin-top: 52px;
}
.resx__figs { display: flex; flex-direction: column; gap: 26px; }
.resx__fig {
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(242, 246, 238, .22);
}
.resx__fig:last-child { border-bottom: 0; padding-bottom: 0; }
.resx__num {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: clamp(50px, 6.2vw, 92px);
  line-height: .88;
  letter-spacing: -.045em;
  color: var(--white);
  margin: 0;
}
.resx__num span { color: var(--accent-soft); }
.resx__lab {
  font-family: 'Karla', sans-serif;
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(242, 246, 238, .84);
  margin: 12px 0 0;
  max-width: 34ch;
}
.resx__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(6, 26, 17, .34);
  min-height: 300px;
}
/* absolute: height:100% on the image alone would fall back to the file's own
   aspect ratio instead of the stretched grid row */
.resx__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* anchored left: the column is squarer than the capture, so a centred
     crop takes 75px off each side and cuts through the client's logo */
  object-position: 0% 6%;
  display: block;
}
.resx__note {
  font-family: 'Karla', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(242, 246, 238, .66);
  margin: 34px 0 0;
}

/* ---- guarantee banner ---------------------------------------------------- *
   This is the commercial promise on the page, so it stops being a light band
   between two sections and becomes the darkest thing on it — ink ground, a
   soft accent glow behind the seal, and the wording set as the headline rather
   than as body copy under one. The seal is drawn in SVG rather than set as a
   number so the dashed ring can sit around it without a font dependency.
   Wording is confirmed copy and is unchanged; the link keeps the terms one tap
   away. */

.gbanner {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  color: var(--cream);
  padding: 92px var(--pad);
  border-top: 1px solid rgba(159, 220, 169, .18);
  border-bottom: 1px solid rgba(159, 220, 169, .18);
}
.gbanner__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 340px at 16% 46%, rgba(63, 142, 79, .34), transparent 68%),
    radial-gradient(640px 420px at 92% 12%, rgba(159, 220, 169, .12), transparent 72%);
  pointer-events: none;
}
.gbanner__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 62px;
  align-items: center;
}

.gseal {
  position: relative;
  width: 178px; height: 178px;
  flex: none;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--accent-soft);
}
.gseal__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.gseal__fig {
  font-family: 'Chivo', sans-serif;
  font-weight: 900;
  font-size: 58px;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--white);
  grid-area: 1 / 1;
  transform: translateY(-9px);
}
.gseal__fig span { color: var(--accent-mid); }
.gseal__sub {
  grid-area: 1 / 1;
  align-self: end;
  font-family: 'Karla', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--accent-soft);
  transform: translateY(-38px);
}

.gbanner__copy { min-width: 0; }
.gbanner__eyebrow { color: var(--accent-soft); margin-bottom: 20px; }
.gbanner__h {
  font-size: clamp(23px, 2.8vw, 43px);
  line-height: 1.2;
  letter-spacing: -.034em;
  font-weight: 800;
  color: var(--white);
  margin: 0;
  max-width: 36ch;
}
.gbanner__more {
  font-family: 'Karla', sans-serif;
  font-size: 16px;
  margin: 26px 0 0;
}
.gbanner__more a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent-soft);
  font-weight: 700;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid rgba(159, 220, 169, .45);
}
.gbanner__more a svg { transition: transform .2s ease; }
.gbanner__more a:hover, .gbanner__more a:focus-visible { color: var(--white); border-bottom-color: var(--white); }
.gbanner__more a:hover svg { transform: translateX(3px); }

.twd-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 60px;
  align-items: center;
}
.twd-cta__copy { min-width: 0; }
.twd-cta .lede { max-width: 54ch; }
/* a fixed height cropped from the top, like the hero frame: the capture ends
   on a sliver of the client's next section, which reads as a stray band */
.twd-shot--cta img { height: 262px; object-position: 50% 0; }

/* ---- FAQ: accordion beside a picture ------------------------------------- *
   Five questions down one column left the band half empty. Same pairing the
   /services/ page uses, ported in the same page-scoped form: the accordion
   sets the row height and the picture stretches to match it. */

.faqx {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 64px;
  align-items: stretch;
  margin-top: 52px;
}
.faqx .faq { margin-top: 0; max-width: none; }
.faqx__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  margin: 0;
  min-height: 420px;
  box-shadow: 0 34px 80px rgba(12, 42, 28, .22);
}
.faqx__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* a 1300x1495 photograph in a squarer column loses about 100px vertically,
     so a centred crop keeps the guest, the window and the stove all in frame */
  object-position: 50% 48%;
  display: block;
}

/* ---- FAQ accordion ------------------------------------------------------- *
   Copied from servicespage.css so /services/ and this page behave identically.
   The open state lives on the button's aria-expanded and the panel's hidden
   attribute follows it, so the marker and assistive tech cannot disagree. */

.faq { max-width: 980px; margin: 52px 0 0; }
.faq__row { border-top: 1px solid var(--line-2); }
.faq__row:last-child { border-bottom: 1px solid var(--line-2); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.28;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.faq__icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--line-2);
  display: grid;
  place-items: center;
  font-family: 'Karla', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.faq__q:hover .faq__icon { border-color: var(--accent); color: var(--ink); }
.faq__q:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: -3px; }
.faq__icon::before { content: "+"; }
.faq__q[aria-expanded="true"] .faq__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.faq__q[aria-expanded="true"] .faq__icon::before { content: "\2212"; }
/* authored display rules outrank the UA's [hidden]{display:none}, so the guard
   has to be explicit or every answer renders open */
.faq__a { padding: 0 0 30px; max-width: 76ch; }
.faq__a[hidden] { display: none; }
.faq__a p {
  font-family: 'Karla', sans-serif;
  font-size: clamp(16px, 1.2vw, 17.5px);
  line-height: 1.66;
  color: var(--body);
  margin: 0;
}
.faq__a a {
  color: #155C3A;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.faq__a a:hover, .faq__a a:focus-visible { color: var(--ink); }

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .twd-hero__inner { gap: 48px; }
  .incl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  /* the mockup drops under the copy: a 2-up hero at tablet width leaves the
     headline too narrow to hold its line breaks */
  .twd-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 150px var(--pad) 72px;
  }
  .twd-hero h1 { max-width: 20ch; }
  .twd-shot img { height: 360px; }
  .wgx-grid, .startx-grid, .stepx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* stacked, the picture has no column to match, so it takes a natural band */
  .resx__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .twd-cta { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .faqx { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .faqx__media { min-height: 0; aspect-ratio: 16 / 10; }
  .gbanner { padding: 72px var(--pad); }
  .gbanner__inner { gap: 38px; }
  .gseal { width: 150px; height: 150px; }
  .gseal__fig { font-size: 48px; }
  .gseal__sub { transform: translateY(-31px); }
}

@media (max-width: 768px) {
  .twd-hero__inner { padding: 132px var(--pad) 60px; gap: 32px; }
  .twd-shot img { height: 300px; }
  .wgx-grid, .startx-grid, .stepx-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 40px;
  }
  .wgx { padding: 28px 24px 30px; }
  .startx { padding: 26px 24px 28px; }
  .incl { margin-top: 32px; padding: 30px 26px 32px; }
  .incl__list { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .resx { margin-top: 38px; }
  .resx__figs { gap: 20px; }
  .resx__fig { padding-bottom: 18px; }
  .resx__note { margin-top: 26px; }
  /* the seal and the copy stack, so the seal no longer needs its own column */
  .gbanner { padding: 56px var(--pad); }
  .gbanner__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: start; }
  .gseal { width: 128px; height: 128px; }
  .gseal__fig { font-size: 41px; transform: translateY(-7px); }
  .gseal__sub { font-size: 10px; transform: translateY(-26px); }
  .gbanner__h { font-size: clamp(21px, 5.4vw, 27px); max-width: none; }
  .twd-cta { gap: 30px; }
  .faqx { margin-top: 40px; gap: 28px; }
  .faqx__media { aspect-ratio: 4 / 3; }
  .incl__list li { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .incl__ico { width: 34px; height: 34px; }
  .incl__ico svg { width: 18px; height: 18px; }
  .faq { margin-top: 40px; }
  .faq__q { padding: 22px 0; gap: 16px; }
  .faq__icon { width: 30px; height: 30px; font-size: 16px; }
  .faq__a { padding-bottom: 24px; }
}

@media (max-width: 480px) {
  .twd-shot img { height: 232px; }
  .twd-shot__cap { font-size: 12px; padding: 11px 14px; }
  .stepx { padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon { transition: none; }
}