/*
Theme Name: Alcock Studios (Flatsome Child)
Theme URI: https://alcockstudios.com
Description: Alcock Studios brand system as a Flatsome child theme — typography, colour, section styling, pricing hover, process steps, marquee and Contact Form 7 styling. Requires the Flatsome parent theme (3.20+).
Author: Alcock Studios
Template: flatsome
Version: 1.0
Text Domain: alcock-studios
*/

:root{
  --as-forest:#0F2E24;
  --as-forest-deep:#0c241c;
  --as-ink:#07140e;
  --as-ivory:#EBE5DB;
  --as-sage:#A4B07A;
  --as-olive:#6b7a48;
  --as-rule:rgba(164,176,122,.18);
}

/* ---------- Typography ---------- */
body,.as-body{font-family:'Satoshi','Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,h5,.as-num,.as-price{font-family:'Instrument Sans',sans-serif;font-weight:600;letter-spacing:-.02em;}
::selection{background:var(--as-sage);color:var(--as-forest);}

.as-eyebrow{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--as-sage);margin:0 0 14px;}
.as-h2{font-size:clamp(30px,3.6vw,46px);line-height:1.08;margin:0 0 14px;}
.as-h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02;margin:0 0 20px;}
.as-lead{font-size:17px;line-height:1.65;opacity:.78;max-width:52ch;text-wrap:pretty;}
.as-quiet{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;}

/* Dark / light section text defaults */
.as-dark,.as-dark p,.as-dark li{color:var(--as-ivory);}
.as-light,.as-light p,.as-light li{color:var(--as-forest);}
.as-dark .as-lead{color:rgba(235,229,219,.76);}
.as-light .as-lead{color:rgba(15,46,36,.72);}
.as-light .as-eyebrow{color:var(--as-olive);}

/* ---------- Flatsome overrides ---------- */
.button,button,input[type=submit]{
  font-family:'Instrument Sans',sans-serif;font-weight:600;letter-spacing:.02em;
  border-radius:4px;text-transform:none;
}
.button.as-btn-sage{background:var(--as-sage);color:var(--as-forest);border-color:var(--as-sage);}
.button.as-btn-sage:hover{background:#b4bf8c;border-color:#b4bf8c;color:var(--as-forest);}
.button.as-btn-ghost{background:transparent;border:1px solid rgba(235,229,219,.42);color:var(--as-ivory);}
.button.as-btn-ghost:hover{border-color:var(--as-sage);color:var(--as-sage);background:transparent;}
a{text-decoration:none;}
a:hover{color:var(--as-olive);}
.as-dark a:hover{color:var(--as-sage);}

/* Sticky header treatment to match the original scroll behaviour */
.header.stuck #masthead{background:rgba(11,36,28,.92)!important;backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--as-rule);}

/* ---------- Marquee (continuous, pauses off-screen) ---------- */
.as-marquee{overflow:hidden;background:var(--as-sage);color:var(--as-forest);padding:15px 0;border-top:1px solid rgba(15,46,36,.12);border-bottom:1px solid rgba(15,46,36,.12);}
.as-marquee-track{display:flex;gap:34px;width:max-content;animation:as-marquee 26s linear infinite;animation-play-state:paused;}
.as-marquee-track.as-run{animation-play-state:running;}
.as-marquee-track span{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;}
@keyframes as-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Service cards ---------- */
.as-service-card .col-inner{
  border:1px solid var(--as-rule);border-radius:5px;padding:30px 28px;height:100%;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s,background .45s;
}
.as-service-card:hover .col-inner{transform:translateY(-6px);border-color:rgba(164,176,122,.5);background:rgba(164,176,122,.06);}
.as-service-card h3{font-size:21px;margin:0 0 10px;}
.as-service-card p{font-size:14.5px;line-height:1.6;margin:0;color:rgba(235,229,219,.7);}

/* ---------- Process steps ---------- */
.as-step .col-inner{border-top:1px solid rgba(15,46,36,.16);padding-top:20px;transition:border-color .4s;}
.as-step:hover .col-inner{border-color:var(--as-olive);}
.as-step .as-num{font-size:13px;letter-spacing:.16em;color:var(--as-olive);margin-bottom:14px;}
.as-step h3{font-size:19px;margin:0 0 8px;}
.as-step p{font-size:14px;line-height:1.6;margin:0;color:rgba(15,46,36,.7);}

/* ---------- Pricing ---------- */
.as-price-card .col-inner{
  background:#fff;border:1px solid rgba(15,46,36,.1);border-radius:6px;padding:34px 28px;height:100%;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s,border-color .4s;
}
.as-price-card:hover .col-inner{transform:scale(1.035);box-shadow:0 18px 44px rgba(15,46,36,.14);border-color:var(--as-sage);z-index:2;}
.as-price-card.as-featured .col-inner{background:var(--as-forest);border-color:var(--as-forest);}
.as-price-card.as-featured h3,.as-price-card.as-featured .as-price{color:var(--as-ivory);}
.as-price-card.as-featured p{color:rgba(235,229,219,.72);}
.as-price-card h3{font-size:19px;margin:0 0 6px;}
.as-price-card .as-price{font-size:36px;margin:0 0 4px;}
.as-price-card .as-price small{font-size:14px;font-weight:400;opacity:.6;}
.as-price-card p{font-size:14px;line-height:1.6;color:rgba(15,46,36,.68);}
.as-badge{display:inline-block;background:var(--as-sage);color:var(--as-forest);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;margin-bottom:14px;}

/* ---------- Portfolio grid (custom post type) ---------- */
.as-portfolio{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
.as-pf-card{border:1px solid var(--as-rule);border-radius:6px;overflow:hidden;background:var(--as-forest);display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s;}
.as-pf-card:hover{transform:translateY(-8px);border-color:rgba(164,176,122,.55);}
.as-pf-card img{width:100%;height:280px;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.as-pf-card:hover img{transform:scale(1.05);}
.as-pf-body{padding:24px 26px 28px;}
.as-pf-body h3{font-size:22px;margin:0 0 6px;color:var(--as-ivory);}
.as-pf-cat{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--as-sage);margin-bottom:12px;}
.as-pf-body p{font-size:14.5px;line-height:1.6;color:rgba(235,229,219,.7);margin:0;}
.as-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.as-tags span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--as-rule);border-radius:999px;padding:5px 11px;color:rgba(235,229,219,.72);}

/* ---------- Video reels ---------- */
.as-reels{display:flex;gap:18px;flex-wrap:wrap;}
.as-reels figure{margin:0;flex:1;min-width:180px;}
.as-reels video{width:100%;border-radius:5px;display:block;border:1px solid var(--as-rule);cursor:pointer;background:#000;}

/* ---------- Stats ---------- */
.as-stats{display:flex;gap:48px;flex-wrap:wrap;}
.as-stats .as-stat-num{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:40px;letter-spacing:-.02em;}

/* ---------- Quote band ---------- */
.as-quote{background:var(--as-forest-deep);color:var(--as-ivory);text-align:center;padding:90px 24px;}
.as-quote .as-mark{font-family:'Instrument Sans',sans-serif;font-size:70px;line-height:.6;color:var(--as-sage);}
.as-quote blockquote{border:0;margin:22px auto 0;max-width:24ch;font-family:'Instrument Sans',sans-serif;font-size:clamp(26px,3.4vw,42px);line-height:1.16;font-weight:600;}
.as-quote em{color:var(--as-sage);font-style:italic;}

/* ---------- Contact Form 7 ---------- */
.wpcf7{max-width:520px;}
.wpcf7 p{margin:0 0 16px;}
.wpcf7 label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--as-olive);margin-bottom:8px;}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{
  width:100%;background:#fff;border:1px solid rgba(15,46,36,.16);border-radius:4px;
  padding:14px 16px;font-size:15px;color:var(--as-forest);box-shadow:none;height:auto;
  transition:border-color .3s,box-shadow .3s;
}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{border-color:var(--as-sage);box-shadow:0 0 0 3px rgba(164,176,122,.22);outline:none;}
.wpcf7 textarea{min-height:130px;resize:vertical;}
.wpcf7 input[type=submit]{
  background:var(--as-forest);color:var(--as-ivory);border:0;border-radius:4px;
  padding:16px 30px;font-size:14px;letter-spacing:.04em;cursor:pointer;width:auto;
  transition:background .3s,transform .3s;
}
.wpcf7 input[type=submit]:hover{background:var(--as-olive);transform:translateY(-2px);}
.wpcf7-response-output{border-radius:4px;border-width:1px!important;font-size:14px;margin:14px 0 0!important;padding:14px 16px!important;}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--as-sage)!important;background:rgba(164,176,122,.12);color:var(--as-forest);}

.as-contact-detail{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid rgba(15,46,36,.12);font-size:15px;}
.as-contact-detail span:first-child{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--as-sage);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--as-olive);font-size:14px;}

/* ---------- Hero ---------- */
.as-hero-bg{will-change:transform;}
.as-hero .as-h1{max-width:16ch;}

/* ---------- Motion: respect user preference ---------- */
@media (prefers-reduced-motion:reduce){
  .as-marquee-track{animation:none!important;}
  .as-service-card:hover .col-inner,.as-price-card:hover .col-inner,.as-pf-card:hover{transform:none;}
  .as-pf-card:hover img{transform:none;}
}

@media (max-width:549px){
  .as-stats{gap:28px;}
  .as-reels{gap:12px;}
  .as-pf-card img{height:220px;}
}