
:root{
 --mist:#A0CBDD; --pine:#7C9D9C; --spruce:#233F41; --bark:#53483E; --floor:#936448;
 --ivory:#F5F1E9; --paper:#FBF8F2; --ink:#34413E; --line:#C8C3B8; --soft:#DDE5DF;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.7}
a{color:inherit}.wrap{width:min(1120px,92%);margin:auto}
.top{background:var(--spruce);color:#eef4f0;font-size:.84rem}
.top .wrap{display:flex;justify-content:flex-end;gap:20px;padding:8px 0}.top a{text-decoration:none}
header{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.97);border-bottom:1px solid rgba(83,72,62,.18)}
nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-family:Georgia,serif;font-weight:600;letter-spacing:.08em;text-decoration:none;color:var(--bark)}
.brand small{display:block;font:600 .6rem Arial,sans-serif;letter-spacing:.18em;color:var(--pine)}
.links{display:flex;gap:22px;align-items:center;font-size:.86rem;text-transform:uppercase;letter-spacing:.06em}.links a{text-decoration:none}
.btn{display:inline-block;padding:12px 20px;border-radius:2px;background:var(--spruce);color:#fff;text-decoration:none;font-weight:700;border:1px solid var(--spruce);letter-spacing:.03em}
.btn.alt{background:transparent;color:var(--bark);border-color:var(--bark)}.btn.light{background:var(--paper);color:var(--spruce)}
.hero{min-height:690px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--soft);text-align:left}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,241,233,.98) 0 44%,rgba(245,241,233,.68) 58%,rgba(35,63,65,.18)),url('assets/brandtwood-logo.jpg') right center/58% auto no-repeat;opacity:1}
.hero .inner{position:relative;z-index:2;width:min(1120px,92%);margin:auto;padding:80px 0}
.hero .inner>*{max-width:610px}
.kicker{text-transform:uppercase;letter-spacing:.2em;color:var(--floor);font-size:.72rem;font-weight:700}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:clamp(3rem,7vw,5.8rem);line-height:.98;margin:.18em 0;color:var(--bark)}
.hero h1 em{font-weight:400;color:var(--spruce)}
.hero p{font-family:Georgia,serif;font-size:1.2rem;color:#5b5b53;max-width:570px;margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
section{padding:86px 0}.paper{background:var(--paper)}.mist{background:#DCE9E9}.spruce{background:var(--spruce);color:#F3F1E9}
h2{font-size:clamp(2.25rem,4.5vw,3.7rem);line-height:1.08;margin:.2em 0 .5em;color:var(--bark)}
.spruce h2{color:#F5F1E9}.lead{font-family:Georgia,serif;font-size:1.12rem;color:#6a6c64;max-width:790px}
.spruce .lead{color:#d7dfda}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:34px}
.rule{height:1px;background:linear-gradient(90deg,var(--pine),transparent);margin:18px 0 0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.card{background:rgba(251,248,242,.88);border:1px solid rgba(83,72,62,.2);padding:30px;box-shadow:0 12px 34px rgba(35,63,65,.055)}
.card h3{font-size:1.45rem;color:var(--bark);margin:.15em 0}
.card:before{content:"";display:block;width:34px;height:2px;background:var(--pine);margin-bottom:22px}
.sale-card{padding:0;overflow:hidden}.sale-card:before{display:none}.sale-img{height:235px;background:linear-gradient(145deg,var(--spruce),var(--pine),var(--floor));display:grid;place-items:center;color:white;letter-spacing:.15em}.sale-body{padding:26px}
.badge{display:inline-block;background:#e2e8e1;color:var(--spruce);padding:6px 10px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.editorial{display:grid;grid-template-columns:.9fr 1.1fr;min-height:500px;border:1px solid rgba(83,72,62,.18);background:var(--paper)}
.editorial-art{position:relative;background:linear-gradient(rgba(35,63,65,.12),rgba(35,63,65,.18)),url('assets/brandtwood-logo.jpg') center/cover}
.editorial-art:after{content:"";position:absolute;width:180px;height:260px;right:-55px;top:80px;border:1px solid rgba(255,255,255,.7);border-radius:50% 50% 4px 4px}
.editorial-copy{padding:60px 65px;display:flex;flex-direction:column;justify-content:center}
.editorial-copy .script{font-family:Georgia,serif;font-style:italic;font-size:1.35rem;color:var(--floor)}
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);margin-top:36px}
.step{padding:28px 28px 28px 0;border-bottom:1px solid var(--line);background:transparent}
.step:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
.step b{color:var(--pine);font-size:.78rem;letter-spacing:.12em}.step h3{font-size:1.4rem;color:var(--bark);margin:.2em 0}
.cta{text-align:center}.cta p{max-width:690px;margin:0 auto 26px}
form{display:grid;gap:15px;max-width:780px;margin-top:32px}.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
input,select,textarea{width:100%;padding:14px;border:1px solid #b9b9ae;background:#fffdf8;border-radius:1px;font:inherit}textarea{min-height:140px}
.note{font-size:.88rem;color:#73756d}
footer{background:var(--bark);color:#eee8df;padding:54px 0 30px;border-top:6px solid var(--pine)}
footer .foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}footer a{text-decoration:none}
footer .brand{color:#fff}footer .brand small{color:#d6dfd7}.fine{border-top:1px solid rgba(255,255,255,.2);margin-top:35px;padding-top:20px;font-size:.78rem;color:#c9c1b7}
.pagehero{background:linear-gradient(105deg,var(--soft),#c6d5d1);padding:90px 0 70px}.pagehero h1{font-size:clamp(3rem,6vw,5rem)}
@media(max-width:800px){
 .links{display:none}.top .wrap{justify-content:center;gap:10px;font-size:.72rem}
 .hero{min-height:650px}.hero:before{background:linear-gradient(rgba(245,241,233,.88),rgba(245,241,233,.94)),url('assets/brandtwood-logo.jpg') center/cover}
 .hero .inner{padding:70px 0}.grid3,.section-head,.editorial,.row,footer .foot{grid-template-columns:1fr}
 .editorial-art{min-height:300px}.editorial-art:after{display:none}.editorial-copy{padding:38px 28px}
 .steps{grid-template-columns:1fr}.step,.step:nth-child(even){padding:24px 0;border-left:0}
 section{padding:62px 0}
}

/* V4.1 MOBILE FIT — fixes oversized/cropped content on phones */
html, body { width:100%; max-width:100%; overflow-x:hidden; }
img { max-width:100%; height:auto; }
.wrap, .hero .inner { width:min(1120px, calc(100% - 36px)); }

/* Prevent decorative elements from forcing horizontal overflow */
.editorial, .editorial-art, .editorial-copy, .card, .step { min-width:0; }
.editorial-art:after { max-width:35%; }

@media(max-width:800px){
  .wrap, .hero .inner { width:calc(100% - 36px); }

  /* Header/logo */
  nav { min-height:64px; }
  .brand { font-size:1rem; letter-spacing:.06em; line-height:1.15; }
  .brand small { font-size:.52rem; letter-spacing:.13em; margin-top:4px; }
  .top { display:none; }

  /* Hero */
  .hero { min-height:570px; }
  .hero .inner { padding:52px 0; }
  .hero h1 { font-size:clamp(2.65rem, 12vw, 4rem); line-height:1.01; }
  .hero p { font-size:1.02rem; }
  .hero:before {
    background:
      linear-gradient(rgba(245,241,233,.90),rgba(245,241,233,.95)),
      url('assets/brandtwood-logo.jpg') center/cover no-repeat;
  }

  /* Section typography */
  section { padding:52px 0; }
  h2 { font-size:clamp(2rem, 9.5vw, 2.8rem); line-height:1.08; }
  .lead { font-size:1rem; line-height:1.65; }
  .section-head { display:block; margin-bottom:28px; }
  .section-head > * + * { margin-top:18px; }

  /* Editorial feature — logo/photo now fits completely */
  .editorial { display:block; width:100%; }
  .editorial-art {
    min-height:0;
    aspect-ratio: 1.25 / 1;
    background:
      #2c2119 url('assets/brandtwood-logo.jpg') center center / contain no-repeat;
  }
  .editorial-art:after { display:none; }
  .editorial-copy { padding:30px 24px 34px; }
  .editorial-copy h2 { font-size:clamp(2rem, 9vw, 2.65rem); }
  .editorial-copy .script { font-size:1.15rem; }

  /* Cards/process */
  .grid3 { grid-template-columns:1fr; gap:16px; }
  .card { padding:24px; }
  .steps { grid-template-columns:1fr; }
  .step, .step:nth-child(even) {
    padding:22px 0;
    border-left:0;
  }

  /* Buttons */
  .actions { width:100%; }
  .actions .btn { flex:1 1 100%; text-align:center; }
  .cta .actions { max-width:420px; margin-left:auto; margin-right:auto; }

  /* Internal page headers */
  .pagehero { padding:58px 0 44px; }
  .pagehero h1 { font-size:clamp(2.5rem, 11vw, 3.6rem); }

  /* Forms/footer */
  .row, footer .foot { grid-template-columns:1fr; }
  input, select, textarea { font-size:16px; } /* prevents iOS zoom */
}

/* Extra-small iPhones */
@media(max-width:390px){
  .wrap, .hero .inner { width:calc(100% - 28px); }
  .brand { font-size:.92rem; }
  h2 { font-size:2rem; }
  .editorial-copy { padding:26px 20px 30px; }
}

/* V4.2 — remove brown framing around logo feature */
.editorial-art{
  background-color:transparent !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
@media(max-width:800px){
  .editorial-art{
    aspect-ratio:auto !important;
    min-height:0 !important;
    height:auto !important;
    padding-top:56.25%;
    background-color:transparent !important;
    background-size:cover !important;
    background-position:center !important;
  }
}

/* V5 — functional consultation + refined sales hub */
.hidden-field{position:absolute!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;height:1px!important;width:1px!important;margin:-1px!important;padding:0!important;border:0!important}
.upload-panel{margin:12px 0;padding:28px;background:#eef1ec;border:1px solid rgba(83,72,62,.16)}
.upload-panel h3{font-size:1.45rem;color:var(--bark);margin:.25em 0}
input[type=file]{padding:11px;background:#fff}
.consent{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-weight:400}
.consent input{width:auto;margin-top:6px}
.sale-feature{display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper);border:1px solid rgba(83,72,62,.18);box-shadow:0 12px 34px rgba(35,63,65,.055)}
.sale-feature-art{min-height:390px;background:linear-gradient(145deg,var(--spruce),var(--pine) 55%,var(--floor));display:grid;place-items:center;text-align:center;color:#fff;font-family:Georgia,serif;font-size:2rem;letter-spacing:.08em}
.sale-feature-copy{padding:48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
@media(max-width:800px){
 .sale-feature{grid-template-columns:1fr}
 .sale-feature-art{min-height:250px;font-size:1.55rem}
 .sale-feature-copy{padding:30px 24px}
 .upload-panel{padding:22px 18px}
}

/* V5.2 — softer desktop banner treatment */
@media(min-width:801px){
  .hero{
    min-height:650px;
    background:
      radial-gradient(circle at 82% 22%, rgba(160,203,221,.18), transparent 28rem),
      linear-gradient(135deg,#f7f3eb,#edf1ec);
  }

  /* Keep Brandtwood as an elegant banner, softened into the page */
  .hero:before{
    display:block !important;
    content:"";
    position:absolute;
    inset:0;
    opacity:.78;
    background:
      linear-gradient(90deg,
        rgba(247,243,235,1) 0%,
        rgba(247,243,235,.98) 38%,
        rgba(247,243,235,.78) 50%,
        rgba(247,243,235,.20) 68%,
        rgba(247,243,235,.48) 100%),
      linear-gradient(180deg,
        rgba(247,243,235,.12) 0%,
        rgba(247,243,235,.08) 68%,
        rgba(247,243,235,1) 100%),
      url('assets/brandtwood-logo.jpg') right 42% / 57% auto no-repeat;
  }

  .hero .inner{
    padding:88px 0 118px;
  }
  .hero .inner:before{display:none !important;}
  .hero .inner>*{max-width:610px}
}

/* Show the complete logo in the editorial section without a brown frame */
.editorial-art{
  background-color:#f7f3eb !important;
  background-image:url('assets/brandtwood-logo.jpg') !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.editorial-art:after{display:none !important;}

@media(max-width:800px){
  .editorial-art{
    padding-top:56.25%;
    min-height:0 !important;
    background-size:contain !important;
  }
}
