/*
 * Campaign landing page styles  —  build-free, plain CSS (no SCSS/webpack).
 * Loaded by resources/views/template-landing.blade.php.
 *
 * Ported from Big Surf Digital's Header Footer Code Manager CSS with three
 * deliberate changes so the design is REUSABLE across campaigns:
 *   1. the `.page-id-30255` coupling is gone — styles apply to ANY page using
 *      the "Campaign Landing Page" template (scoped to the .tkd-landing wrapper)
 *   2. hardcoded Gravity Form ids (#gform_wrapper_31 / _27) are now positional
 *      (.hero-form, #contact-form) so a different campaign form still styles
 *   3. theme chrome hiding keys off the server-side body class
 *      .tkd-landing-page (body_class filter in inc/landing_blocks.php)
 *
 * Edit this file directly — it is NOT compiled.
 */

/* Theme chrome is hidden via the server-side body class - works in every
   browser, no :has() dependency. .header--sticky is the scroll-in nav
   (partials/header.blade.php:200); it has no .header class, so it is hidden
   explicitly, at every width. */
body.tkd-landing-page header.header,
body.tkd-landing-page .header--sticky,
body.tkd-landing-page footer.footer { display:none; }
.tkd-landing .site-header { background:#fff; border-bottom:1px solid #eee; padding:8px 0; }
.tkd-landing .header-inner { margin:auto; display:flex; align-items:center; justify-content:space-between; padding:0 20px 5px; }
.tkd-landing .logo { margin-bottom: 0; }
.tkd-landing .main-menu ul { list-style:none; display:flex; gap:35px; margin:0; padding:0; }
.tkd-landing .main-menu a:hover { color:#e41b12; }
/* Sections: 1200px content column, centred, with a 20px minimum gutter at
   every width (the original CSS had no gutter between 1024px and 1200px, so
   content sat flush against the viewport edge). border-box keeps the content
   column at exactly 1200px on wide screens. */
.tkd-landing .row-inner,
.tkd-landing .header-inner { max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
.tkd-landing .col-50 { width:50%; }
.tkd-landing .col-70 { width:70%; }
.tkd-landing .col-30 { width:30% }
.tkd-landing .why-row { display:flex;padding-top: 20px; }
.tkd-landing .why-row img { border-radius: 10px; }
.tkd-landing .why-row .col-30 img { width:100%; height:auto; }
.tkd-landing .col-50 { width:50%; }
.tkd-landing div#landing-btn { background-color: #FFFFFF !important; background-image: none !important; border-color: #e41b12 !important; border-radius: 5px !important; border-style: solid !important; border-width: 1px !important; display: block !important; margin-top: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 10px !important; width: fit-content; text-align: center; }
.tkd-landing a.hs-button { color: #e41b12; font-weight: 500; font-size: 18px; letter-spacing: 0; text-decoration: none; }
.tkd-landing .hero-form { padding-left: 70px; }
.tkd-landing .hero-form .gform_wrapper { padding: 25px !important; border-radius: 10px !important; background-color: #050505a1; box-shadow: 0 0 20px rgba(0, 0, 0, .1); }
.tkd-landing .hero-form .gform_wrapper .gfield { margin-bottom: 10px !important; }
.tkd-landing .hero-form .gform_wrapper input.large::placeholder,
.tkd-landing .hero-form .gform_wrapper select.large { color:#7f8fa3; opacity:1; }
.tkd-landing .hero-form .gform_wrapper input,
.tkd-landing .hero-form .gform_wrapper select { background: #fff; padding: 6px 10px !important; border-radius: 5px; font-size: 18px !important; border: 1px solid #666; }
.tkd-landing .hero-form input[type="submit"] { color: #fff; font-weight: 600; margin: auto; background:#e41b12; width:100%; border-radius: 10px; }
.tkd-landing .gform_title { display:none; }
.tkd-landing .gform_description { display:none; }
.tkd-landing .gform_wrapper.gravity-theme .gfield input,
.tkd-landing .gform_wrapper.gravity-theme .gfield select { max-width: 100%;border-radius: 10px; }
.tkd-landing div#how-we-work { margin-bottom: 50px; margin-top: 50px; }
.tkd-landing div#how-we-work p { text-align: center; width: 100%; margin: auto; }
.tkd-landing .how-work-box { display:flex; gap:20px; padding:40px 0; }
/* Cards styled to match the theme's aftercare-columns block
   (.aftercare-columns__column + .columns--box-shadow): rounded 1rem, soft
   shadow with hover lift, no border, plain red icon, red dash under title. */
.tkd-landing .how-work-box .card { flex:1; border:none; border-radius:1rem; padding:2rem; text-align:center; background:#fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); transition: box-shadow 0.25s ease; }
.tkd-landing .how-work-box .card:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
.tkd-landing .how-work-box .icon { display:block; margin: 0 auto 1.5rem; }
.tkd-landing .how-work-box h3 { font-size:21px; margin-bottom:0; color:#333; font-weight: 600 !important; }
.tkd-landing .how-work-box h3::after { content:""; display:block; width:1.5rem; height:1px; background:#e41b12; margin: 1rem auto 1.25rem; }
.tkd-landing .how-work-box .icon img { width:auto;height:40px; }
.tkd-landing .how-work-box p { font-size:15px; line-height:1.6; margin: 0 !important; }
.tkd-landing div#how-we-work div#landing-btn { margin: auto; }
.tkd-landing div#why-us { background-image: linear-gradient(rgba(239, 239, 239, 1), rgba(239, 239, 239, 1)) !important; background-position: left top !important; background-size: auto !important; background-repeat: no-repeat !important; padding-bottom: 50px; padding-top: 50px; }
.tkd-landing .feature i.fa-solid.fa-circle-arrow-right { color: #e41b11; margin-right: 12px; font-size: 18px; }
.tkd-landing .feature ul { padding: 0; list-style: none; }
.tkd-landing .feature ul li { margin-bottom:25px; }
.tkd-landing .feature strong { font-size: 25px; line-height: 35px; }
.tkd-landing .feature { padding-right: 50px; }
.tkd-landing p.special-text { font-size: 20px; font-weight: 700 !important; font-style: italic; }
.tkd-landing .explore-card { display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; margin-bottom: 40px; margin-top: 40px; }
.tkd-landing .img-card img { width:100%; display:block; border-radius: 10px; }
.tkd-landing .img-card h3 { text-align:center; margin-top:10px; font-size: 19px; font-weight: 700 !important; }
.tkd-landing #Explore,
.tkd-landing #FAQ,
.tkd-landing #contact-form { padding-top:50px;padding-bottom:50px; }
.tkd-landing .faq-item { border-bottom:1px solid #ddd; }
.tkd-landing .faq-question { width:100%; background:none; border:none; display:flex; justify-content:space-between; align-items:center; padding:20px 0; font-size:22px; font-weight:600; cursor:pointer; }
.tkd-landing .faq-question .icon { font-size:28px; }
.tkd-landing .faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.tkd-landing .faq-answer p { padding-bottom:20px; color:#444; line-height:1.6; }
.tkd-landing #contact-form .gform_wrapper { background: #fff; }
.tkd-landing #contact-form h2.gform_title { display:none; }
/* Hero: the background spans the full width, but the horizontal padding
   centres a 1200px content column - the same x-constraint as .row-inner -
   so the hero stays aligned with every other section as the screen shrinks
   (and picks up the same 20px gutters below 1024px). */
.tkd-landing .sales-container { display: flex;padding: 2% max(calc((100% - 1200px) / 2), 20px); box-sizing: border-box; background-image: url('images/light-kitchen-back-mob.jpg'); background-position: center center;background-size: cover;background-repeat: no-repeat; }
.tkd-landing .sales-section { flex: 0 0 60%; box-sizing: border-box;padding-top:20px;padding-top:0px; }
.tkd-landing .hero-form { flex: 0 0 40%; box-sizing: border-box; }
.tkd-landing .sales-section h1 { font-size: 26px !important;line-height: 32px !important;color: #2b2b2b!important;text-align:left;font-weight:bold!important; }
.tkd-landing .sales-section h2 { font-size: 24px!important;color: #2b2b2b !important;text-align: left; }
.tkd-landing .bk { font-size: 16px;line-height:22px!important;color: #2b2b2b !important;text-align:left;font-weight:bold;line-height:21px;padding-top:5px; padding-bottom:5px; }
.tkd-landing ul.jbox { text-align: left;color:#2b2b2b;text-align:left;padding-left:15px !important;line-height: 26px; }
.tkd-landing .nearyou { font-size: 17px!important;line-height: 25px!important;color: #2b2b2b !important;text-align: left;font-weight:bold;padding-top: 10px; }
.tkd-landing .main-menu a { text-decoration:none; color:#333; font-size:14px; font-weight:500; }
.tkd-landing .logo img { width: 25%;height: auto; }
.tkd-landing .tp { font-size: 13px;color: #000!important;font-weight:bold;text-align:left; }
.tkd-landing .v2-h2 { font-size:30px;color:#000000;text-align:center;margin:auto; }
.tkd-landing .why-h2 { font-size:30px;color:#000000;text-align:left; }
.tkd-landing #how-we-work p { color: #000000; }
.tkd-landing .feature strong { color: #000; }
.tkd-landing p.special-text { font-style: none;color: #000000; }
.tkd-landing .boldp { font-size:20px;color:#000000; }
.tkd-landing .site-footer { background:#f2f2f2; padding:60px 20px; text-align:center; }
.tkd-landing .footer-inner { max-width:1200px; margin:auto; }
.tkd-landing .footer-logo img { width:100px; height:auto; margin-bottom:25px; }
.tkd-landing .footer-menu ul { list-style:none; padding:0; margin:0; display:flex; justify-content:center; gap:35px; }
.tkd-landing .footer-menu a { text-decoration:none; color:#333; font-size:18px; font-weight:500; }
.tkd-landing .footer-menu a:hover { color:#e41b12; }
@media (max-width: 1200px) {
  .tkd-landing .site-header { display:block; }
  .tkd-landing .sales-container { flex-direction: column;padding: 4% max(calc((100% - 1200px) / 2), 20px); width: 100%; }
  .tkd-landing .v2-h2 { font-size: 24px;font-weight: bold !important; }
  .tkd-landing .sales-section,
  .tkd-landing .hero-form { flex: 1 1 auto; width: 100%; }
  .tkd-landing .hero-form { padding-left:0; margin-top:30px; }
  .tkd-landing .how-work-box { flex-wrap:wrap; }
  .tkd-landing .how-work-box .card { flex:0 0 48%; }
}
@media (max-width:1024px) {
  .tkd-landing .col-50 { width:100%; }
  .tkd-landing .why-row { flex-direction:column; }
  .tkd-landing .col-70,
  .tkd-landing .col-30 { width:100%; }
  .tkd-landing .why-row .col-30 { text-align:center; }
  .tkd-landing .why-row .col-30 img { width:auto; max-width:min(100%, 540px); max-height:540px; }
  .tkd-landing .feature { padding-right:0; margin-bottom:30px; }
  .tkd-landing .explore-card { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px) {
  .tkd-landing div#landing-btn { margin-left:auto !important; margin-right:auto !important; }
  .tkd-landing .how-work-box .card { flex:0 0 100%; }
  .tkd-landing .explore-card { grid-template-columns:repeat(2,1fr); gap:15px; }
  .tkd-landing .img-card h3 { font-size:16px; }
  .tkd-landing .feature strong { font-size:20px; line-height:28px; }
  .tkd-landing .faq-question { font-size:18px; text-align:left; }
}
@media (max-width:480px) {
  .tkd-landing .explore-card { grid-template-columns:1fr; }
  .tkd-landing .header-inner { display: block; text-align: center; }
  .tkd-landing .footer-menu ul,
  .tkd-landing .main-menu ul { gap: 25px; flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .tkd-landing .site-footer { padding: 30px 20px; }
  .tkd-landing a.hs-button { font-size: 15px; }
  .tkd-landing h2 { font-size: 30px; }
}