/**
 * Marketing page styling.
 *
 * The pages are built from core blocks, so this maps the approved mockup's
 * design language onto the markup WordPress actually emits. Every colour and
 * face comes from tokens.css; nothing here hardcodes a value.
 */

/* ---------------------------------------------------------------- shell */

body{
  background:var(--badcc-ground);
  color:var(--badcc-bone);
  font-family:var(--badcc-body);
}

.site-content, .entry-content{ color:var(--badcc-bone); }

h1,h2,h3,h4{
  font-family:var(--badcc-display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.entry-content a{ color:var(--badcc-amber); text-decoration:none; }
.entry-content a:hover{ text-decoration:underline; }

/* ---------------------------------------------------------------- sections */

.badcc-section{
  padding-block:clamp(46px,7vw,78px);
  border-bottom:1px solid var(--badcc-line-soft);
}
.badcc-section:last-child{ border-bottom:0; }

.badcc-section h2{
  font-size:clamp(26px,3.6vw,40px);
  text-transform:uppercase;
  margin:0 0 18px;
}
.badcc-section h3{
  font-size:clamp(19px,2.2vw,25px);
  text-transform:uppercase;
  margin:0 0 12px;
}
.badcc-section p{
  color:var(--badcc-muted);
  font-size:16.5px;
  line-height:1.62;
  max-width:66ch;
}

/* ---------------------------------------------------------------- hero */

.badcc-hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--badcc-line);
  padding-block:clamp(56px,9vw,96px);
}
/* Faint diagonal rule pattern, as in the approved mockup. */
.badcc-hero::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg,transparent 0 26px,rgba(144,166,129,.028) 26px 27px);
}
.badcc-hero > *{ position:relative; }

.badcc-hero h1,
h1.badcc-hero__title{
  font-size:clamp(38px,6.4vw,74px);
  text-transform:uppercase;
  letter-spacing:-.025em;
  margin:0;
}
.badcc-hero p.badcc-lead,
p.badcc-lead{
  font-size:18.5px;
  color:var(--badcc-muted);
  max-width:52ch;
  margin:26px 0 34px;
}

/* ---------------------------------------------------------------- buttons */

.wp-block-button > .wp-block-button__link,
.wp-block-button__link,
.wp-element-button{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--badcc-mono);
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  padding:13px 22px;
  border:1px solid var(--badcc-line);
  border-radius:0;
  background:transparent;
  color:var(--badcc-bone);
  transition:background .2s, color .2s, border-color .2s;
}
/* Ghost by default, matching the mockup. GeneratePress fills buttons via its
   own inline CSS, so this needs the compound selector to win. */
.wp-block-buttons .wp-block-button > .wp-block-button__link{
  background:transparent;
  border-color:var(--badcc-line);
  color:var(--badcc-bone);
}
.wp-block-buttons .wp-block-button > .wp-block-button__link:hover{
  background:var(--badcc-surface);
  border-color:var(--badcc-sage-dim);
}
.wp-block-button > .wp-block-button__link:hover,
.wp-block-button__link:hover,
.wp-element-button:hover{
  background:var(--badcc-surface);
  border-color:var(--badcc-sage-dim);
  color:var(--badcc-bone);
}
/* Compound selector: GeneratePress emits its button colours inline, after
   this stylesheet, so the primary needs to out-specify them. */
.wp-block-buttons .wp-block-button.badcc-btn-primary > .wp-block-button__link{
  background:var(--badcc-amber);
  border-color:var(--badcc-amber);
  color:var(--badcc-ground);
}
.wp-block-buttons .wp-block-button.badcc-btn-primary > .wp-block-button__link:hover{
  background:var(--badcc-amber-hi);
  border-color:var(--badcc-amber-hi);
  color:var(--badcc-ground);
}
.wp-block-buttons{ gap:14px; margin-top:26px; }

/* ---------------------------------------------------------------- service columns */

.badcc-section .wp-block-columns{ gap:28px; margin-top:36px; }
.badcc-section .wp-block-column{
  border:1px solid var(--badcc-line);
  background:var(--badcc-surface);
  padding:clamp(22px,3vw,34px);
  transition:border-color .22s, transform .22s;
}
.badcc-section .wp-block-column:hover{
  border-color:var(--badcc-sage-dim);
  transform:translateY(-3px);
}
.badcc-section .wp-block-column p{ font-size:15.5px; }

/* ---------------------------------------------------------------- gallery */

.badcc-gallery.wp-block-gallery{ gap:20px; margin-top:32px; }
.badcc-gallery figure.wp-block-image{
  border:1px solid var(--badcc-line);
  background:var(--badcc-surface);
  overflow:hidden;
  margin:0;
}
.badcc-gallery figure.wp-block-image img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.badcc-gallery figure.wp-block-image:hover img{ transform:scale(1.035); }
.badcc-gallery figcaption{
  font-family:var(--badcc-mono);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--badcc-muted);
  padding:10px 12px; margin:0;
  background:var(--badcc-ground);
  border-top:1px solid var(--badcc-line);
}

/* ---------------------------------------------------------------- FAQ rhythm */

.badcc-section h3 + p{ margin-bottom:26px; }

/* ---------------------------------------------------------------- header + footer */

.site-header{ border-bottom:1px solid var(--badcc-line); background:var(--badcc-ground); }
.main-navigation, .main-navigation .main-nav ul li a{ background:transparent; }
.main-navigation .main-nav ul li a{
  font-family:var(--badcc-mono);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--badcc-bone);
}
.main-navigation .main-nav ul li a:hover{ color:var(--badcc-amber); }
.site-info{
  border-top:1px solid var(--badcc-line);
  background:var(--badcc-ground);
  font-family:var(--badcc-mono);
  font-size:11px; letter-spacing:.1em;
  color:var(--badcc-muted);
}

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

@media (max-width:768px){
  .badcc-section .wp-block-columns{ gap:18px; }
  .badcc-gallery.wp-block-gallery{ gap:14px; }
  p.badcc-lead{ font-size:17px; }
}

/* ---------------------------------------------------------------- logo */

/* The source art is 560px wide; constrain by height so the header stays
   compact and the logo scales down cleanly on small screens. */
.site-logo img, .custom-logo, img.header-image{
  height:auto;
  max-height:58px;
  width:auto;
  max-width:min(300px,52vw);
  display:block;
}
@media (max-width:768px){
  .site-logo img, .custom-logo, img.header-image{ max-height:44px; }
}

/* ---------------------------------------------------------------- eyebrow */

/* .badcc-section p is (0,2,0) and was winning on colour, so match it. */
.badcc-section p.badcc-eyebrow,
.badcc-eyebrow{
  font-family:var(--badcc-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--badcc-sage);
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px; max-width:none;
}
.badcc-eyebrow::after{ content:""; flex:1; height:1px; background:var(--badcc-line); }

.badcc-accent{ color:var(--badcc-amber); }

.badcc-section p.badcc-sub,
.badcc-sub{ color:var(--badcc-muted); max-width:62ch; margin-top:16px; }
.badcc-section p.badcc-lead{ font-size:18.5px; color:var(--badcc-muted); max-width:52ch; margin:26px 0 34px; }
.badcc-section p.badcc-num{ color:var(--badcc-sage); }
.badcc-section p.badcc-cred__k{ color:var(--badcc-sage); }
.badcc-section p.badcc-cred__v{ color:var(--badcc-bone); }

/* ---------------------------------------------------------------- hero layout */

.badcc-hero__cols.wp-block-columns{ gap:56px; align-items:center; }
.badcc-hero__cols .wp-block-column{
  border:0; background:transparent; padding:0; transform:none;
}
.badcc-hero__cols .wp-block-column:hover{ border:0; transform:none; }

.badcc-hero__fig{ position:relative; margin:0; }
.badcc-hero__fig img{
  border:1px solid var(--badcc-line);
  width:100%; height:auto; display:block;
}
.badcc-hero__fig figcaption{
  position:absolute; left:-1px; bottom:-1px;
  background:var(--badcc-ground);
  border:1px solid var(--badcc-line);
  font-family:var(--badcc-mono);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--badcc-muted);
  padding:8px 12px; margin:0;
}
.badcc-hero__fig figcaption b{ color:var(--badcc-amber); font-weight:500; }

/* ---------------------------------------------------------------- credentials strip */

.badcc-creds__wrap{ padding-block:0; border-bottom:1px solid var(--badcc-line); }
.badcc-creds.wp-block-columns{ gap:0; margin:0; }
.badcc-creds .wp-block-column{
  border:0; border-left:1px solid var(--badcc-line);
  background:var(--badcc-surface);
  padding:26px 30px; transform:none;
}
.badcc-creds .wp-block-column:first-child{ border-left:0; }
.badcc-creds .wp-block-column:hover{ transform:none; border-color:var(--badcc-line); }
.badcc-cred__k{
  font-family:var(--badcc-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--badcc-sage); margin:0 0 8px;
}
.badcc-cred__v{
  font-family:var(--badcc-display); font-size:16px; line-height:1.24;
  text-transform:uppercase; color:var(--badcc-bone); margin:0;
}

/* ---------------------------------------------------------------- service cards */

.badcc-num{
  font-family:var(--badcc-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--badcc-sage); margin:0 0 16px;
}
.badcc-ticks{
  list-style:none; padding:0; margin:0 0 26px;
  display:flex; flex-direction:column; gap:8px;
}
.badcc-ticks li{
  font-size:14.5px; color:var(--badcc-muted);
  padding-left:18px; position:relative;
}
.badcc-ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:1px; background:var(--badcc-amber);
}

/* ---------------------------------------------------------------- film preview row */

/* Fixed five columns rather than auto-fill: the preview shows ten films, and
   an explicit count guarantees two even rows instead of whatever happens to
   fit the container. The full catalogue still uses auto-fill. */
.badcc-grid--preview{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px; margin:40px 0 0;
}
@media (max-width:1000px){
  .badcc-grid--preview{ grid-template-columns:repeat(4,1fr); gap:16px; }
}
@media (max-width:760px){
  .badcc-grid--preview{ grid-template-columns:repeat(3,1fr); gap:14px; }
}
@media (max-width:520px){
  .badcc-grid--preview{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

@media (max-width:900px){
  .badcc-hero__cols.wp-block-columns{ gap:34px; }
  .badcc-creds .wp-block-column{ border-left:0; border-top:1px solid var(--badcc-line); }
  .badcc-creds .wp-block-column:first-child{ border-top:0; }
}

/* ---------------------------------------------------------------- gravity forms

   Gravity Forms 3.0 ships the "Orbital" theme, which is driven by its own CSS
   custom properties. Setting those is far more durable than overriding its
   individual selectors, so the form follows the site palette rather than
   fighting it. Direct selectors below are a safety net for anything the
   variables do not reach (placeholders, file inputs).
------------------------------------------------------------------------------ */

/* Three classes (0,3,0): Gravity Forms defines these same variables on a
   two-class selector and its stylesheet loads after the theme's, so a tie
   would lose. */
.gform_wrapper.gform-theme.gform-theme--framework,
.gform_wrapper.gform-theme.gform-theme--orbital,
.gform_wrapper.gform-theme--framework.gform-theme--orbital{
  --gf-ctrl-label-color-primary:var(--badcc-bone);
  --gf-ctrl-label-color-secondary:var(--badcc-muted);
  --gf-ctrl-label-color-tertiary:var(--badcc-muted);
  --gf-ctrl-label-color-req:var(--badcc-amber);
  --gf-ctrl-desc-color:var(--badcc-muted);

  --gf-ctrl-bg-color:var(--badcc-surface);
  --gf-ctrl-bg-color-hover:var(--badcc-surface-2);
  --gf-ctrl-bg-color-focus:var(--badcc-surface-2);
  --gf-ctrl-color:var(--badcc-bone);
  --gf-ctrl-color-hover:var(--badcc-bone);
  --gf-ctrl-color-focus:var(--badcc-bone);

  --gf-ctrl-border-color:var(--badcc-line);
  --gf-ctrl-border-color-hover:var(--badcc-sage-dim);
  --gf-ctrl-border-color-focus:var(--badcc-sage);
  --gf-ctrl-border-color-error:var(--badcc-stamp);
  --gf-ctrl-color-error:var(--badcc-stamp);
  --gf-ctrl-desc-color-error:var(--badcc-stamp);
  --gf-ctrl-radius:0;

  --gf-ctrl-btn-bg-color-primary:var(--badcc-amber);
  --gf-ctrl-btn-bg-color-hover-primary:var(--badcc-amber-hi);
  --gf-ctrl-btn-bg-color-focus-primary:var(--badcc-amber-hi);
  --gf-ctrl-btn-border-color-primary:var(--badcc-amber);
  --gf-ctrl-btn-color-primary:var(--badcc-ground);
  --gf-ctrl-btn-color-hover-primary:var(--badcc-ground);
  --gf-ctrl-btn-color-focus-primary:var(--badcc-ground);
}

/* Labels: match the mono treatment used elsewhere for field-level text. */
.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme--framework .gfield_label,
.gform_wrapper .gfield_label{
  color:var(--badcc-bone);
  font-family:var(--badcc-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  margin-bottom:8px;
}
.gform_wrapper.gform-theme--framework .gform-field-label > .gfield_required,
.gform_wrapper .gfield_required{ color:var(--badcc-amber); }
.gform_wrapper.gform-theme--framework .gfield_description,
.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules{ color:var(--badcc-muted); font-size:13px; }

.gform_wrapper.gform-theme input[type=text],
.gform_wrapper.gform-theme input[type=email],
.gform_wrapper.gform-theme input[type=tel],
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select,
.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper input[type=url],
.gform_wrapper input[type=number],
.gform_wrapper textarea,
.gform_wrapper select{
  background:var(--badcc-surface);
  color:var(--badcc-bone);
  border:1px solid var(--badcc-line);
  border-radius:0;
  font-family:var(--badcc-body);
  padding:12px 14px;
}
.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme textarea:focus,
.gform_wrapper.gform-theme select:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus{
  border-color:var(--badcc-sage);
  background:var(--badcc-surface-2);
  outline:2px solid transparent; outline-offset:2px;
  box-shadow:0 0 0 2px rgba(144,166,129,.22);
}
.gform_wrapper ::placeholder{ color:var(--badcc-muted); opacity:.75; }

/* File upload: the native control ignores most of the above. */
.gform_wrapper input[type=file]{
  color:var(--badcc-muted);
  background:transparent; border:1px dashed var(--badcc-line);
  padding:14px; width:100%;
}
.gform_wrapper input[type=file]::file-selector-button{
  font-family:var(--badcc-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; cursor:pointer;
  background:var(--badcc-surface-2); color:var(--badcc-bone);
  border:1px solid var(--badcc-line); border-radius:0;
  padding:8px 14px; margin-right:14px;
}

/* Submit button, matching the site's primary CTA. */
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_button{
  background:var(--badcc-amber);
  border:1px solid var(--badcc-amber);
  color:var(--badcc-ground);
  font-family:var(--badcc-mono);
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  border-radius:0; padding:14px 26px; cursor:pointer;
  transition:background .2s,border-color .2s;
}
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_button:hover{
  background:var(--badcc-amber-hi); border-color:var(--badcc-amber-hi);
}

/* Validation messaging. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message{
  background:rgba(224,115,106,.08);
  border:1px solid var(--badcc-stamp);
  color:var(--badcc-stamp);
  border-radius:0;
}
.gform_wrapper .gfield_error .gfield_label{ color:var(--badcc-stamp); }
.gform_wrapper .gform_confirmation_message{
  border:1px solid var(--badcc-sage-dim);
  background:var(--badcc-surface);
  color:var(--badcc-bone);
  padding:22px;
}

/* ---------------------------------------------------------------- page header */

.badcc-pagehead{
  position:relative;
  border-bottom:1px solid var(--badcc-line);
  overflow:hidden;
  background:var(--badcc-surface);
}
.badcc-pagehead__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.34;
  transform:scale(1.04);
}
/* Keeps the title legible over any photograph, light or dark. */
.badcc-pagehead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(11,13,11,.55) 0%,rgba(11,13,11,.86) 100%);
}
.badcc-pagehead__in{
  position:relative; z-index:2;
  max-width:var(--badcc-wrap,1140px);
  margin:0 auto; padding:clamp(52px,8vw,104px) 20px;
}
.badcc-pagehead__eyebrow{
  font-family:var(--badcc-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--badcc-sage);
  display:flex; align-items:center; gap:12px; margin:0 0 16px;
}
.badcc-pagehead__eyebrow::after{ content:""; flex:1; height:1px; background:var(--badcc-line); }
.badcc-pagehead h1{
  font-family:var(--badcc-display);
  font-size:clamp(30px,5vw,58px);
  text-transform:uppercase; letter-spacing:-.02em;
  color:var(--badcc-bone); margin:0;
}
.badcc-pagehead__sub{
  color:var(--badcc-muted); margin:16px 0 0; max-width:60ch; font-size:16.5px;
}

/* Gravity Forms drag-and-drop upload. Ships with its own blue control button
   and near-black instruction text, both invisible on this ground. */
.gform_wrapper .gform_drop_area{
  background:var(--badcc-surface);
  border:1px dashed var(--badcc-line);
  border-radius:0;
  padding:26px;
}
.gform_wrapper .gform_drop_instructions{
  color:var(--badcc-muted);
  font-size:13px;
  display:block; margin-bottom:12px;
}
.gform_wrapper .gform_button_select_files,
.gform_wrapper .gform-theme-button--control,
.gform_wrapper button.gform-theme-button{
  background:var(--badcc-surface-2);
  border:1px solid var(--badcc-line);
  color:var(--badcc-bone);
  font-family:var(--badcc-mono);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  border-radius:0; padding:10px 18px; cursor:pointer;
}
.gform_wrapper .gform_button_select_files:hover,
.gform_wrapper .gform-theme-button--control:hover{
  background:var(--badcc-surface);
  border-color:var(--badcc-sage-dim);
  color:var(--badcc-bone);
}
/* The upload icon inherits currentColor in GF's markup. */
.gform_wrapper .gform_drop_area svg,
.gform_wrapper .gform_fileupload_rules{ color:var(--badcc-muted); fill:currentColor; }

/* GF's theme buttons are painted from --gf-ctrl-btn-*-ctrl on high-specificity
   selectors, so set both the variables and a matching-strength rule. */
.gform_wrapper.gform-theme.gform-theme--framework,
.gform_wrapper.gform-theme.gform-theme--orbital{
  --gf-ctrl-btn-bg-color-ctrl:var(--badcc-surface-2);
  --gf-ctrl-btn-bg-color-hover-ctrl:var(--badcc-surface);
  --gf-ctrl-btn-bg-color-focus-ctrl:var(--badcc-surface);
  --gf-ctrl-btn-border-color-ctrl:var(--badcc-line);
  --gf-ctrl-btn-color-ctrl:var(--badcc-bone);
  --gf-ctrl-btn-color-hover-ctrl:var(--badcc-bone);
  --gf-ctrl-btn-color-focus-ctrl:var(--badcc-bone);
}
.gform_wrapper button.gform_button_select_files,
.gform_wrapper button.gform-theme-button--control,
.gform_wrapper .gform_drop_area button.button{
  background:var(--badcc-surface-2);
  border:1px solid var(--badcc-line);
  color:var(--badcc-bone);
  font-family:var(--badcc-mono);
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  border-radius:0; padding:10px 18px;
}
.gform_wrapper button.gform_button_select_files:hover,
.gform_wrapper button.gform-theme-button--control:hover{
  background:var(--badcc-surface); border-color:var(--badcc-sage-dim);
}
.gform_wrapper button.gform_button,
.gform_wrapper .gform_footer button.gform-theme-button{
  font-family:var(--badcc-mono);
  font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  background:var(--badcc-amber); border:1px solid var(--badcc-amber);
  color:var(--badcc-ground); border-radius:0; padding:14px 26px;
}
.gform_wrapper button.gform_button:hover{
  background:var(--badcc-amber-hi); border-color:var(--badcc-amber-hi);
}

/* Gravity Forms drives button typography and padding through its own CSS
   variables on selectors more specific than anything reachable here, and the
   variable names for typography are not documented in the shipped CSS. These
   three declarations are pinned deliberately so the form's buttons match the
   site's mono, uppercase treatment; colour is handled by the variables above
   and is intentionally not pinned. */
.gform_wrapper button.gform_button,
.gform_wrapper button.gform_button_select_files,
.gform_wrapper button.gform-theme-button{
  font-family:var(--badcc-mono) !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}
.gform_wrapper button.gform_button{ padding:15px 26px !important; height:auto !important; }
.gform_wrapper button.gform_button_select_files{ padding:11px 18px !important; height:auto !important; }

/* Footer credit line. */
.site-info{ font-size:11px; }
.site-info a{ color:var(--badcc-muted); text-decoration:none; }
.site-info a:hover{ color:var(--badcc-amber); }
.badcc-copy-sep{ color:var(--badcc-line); }