/* ==========================================================================
   Web Design Midland — Line-art & Watercolor theme
   Design-token system + BEM. Root font 62.5% (1rem = 10px); all sizes and
   spacing expressed in rem / clamp, driven by CSS custom properties.
   Fraunces display + Mulish body (self-hosted, latin subset, variable).
   ========================================================================== */

/* ----- Self-hosted fonts (variable woff2, latin subset) ----- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/fraunces.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Mulish';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/mulish.woff2') format('woff2');
}

:root{
  /* ----- Color: watercolor paper ----- */
  --paper:#FAF6EF;
  --paper-2:#F2EADD;

  /* Ink (line art + text) — deep slate, not pure black */
  --ink:#2A3A41;
  --ink-soft:#5E6E73;
  --line:rgba(42,58,65,.30);        /* hairline */
  --line-2:rgba(42,58,65,.55);      /* stronger line */

  /* Watercolor accent washes (from the skyline) */
  --red:#C23A2F;
  --red-deep:#A52E24;
  --red-wash:rgba(194,58,47,.13);
  --teal:#4F7CA8;
  --teal-deep:#2C4A6B;
  --teal-wash:rgba(79,124,168,.16);
  --blue:#5A7C9B;
  --blue-wash:rgba(90,124,155,.14);
  --gold:#E0AA54;
  --gold-wash:rgba(224,170,84,.18);
  --surface:rgba(255,255,255,.5);
  --surface-soft:rgba(255,255,255,.45);
  --field-bg:rgba(255,255,255,.7);

  /* ----- Typography ----- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Mulish",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-50:1.5rem;    /* 15px — fine print / footer bottom */
  --fs-100:1.6rem;   /* 16px — meta, inputs, breadcrumb */
  --fs-200:1.7rem;   /* 17px — body base */
  --fs-300:1.9rem;   /* 19px — faq summary */
  --fs-400:2rem;     /* 20px — lead, nav logo */
  --fs-500:2.2rem;   /* 22px — h3 */
  --fs-h4:1.8rem;    /* 18px */
  --fs-h2:clamp(3rem, 3.5vw, 4.1rem);
  --fs-h1:clamp(4rem, 5vw, 5.8rem);

  --lh-tight:1.08;
  --lh-body:1.65;
  --tracking-tight:-.01em;

  /* ----- Spacing scale ----- */
  --space-3xs:0.4rem;   /* 4  */
  --space-2xs:0.8rem;   /* 8  */
  --space-xs:1.2rem;    /* 12 */
  --space-sm:1.6rem;    /* 16 */
  --space-md:2.4rem;    /* 24 */
  --space-lg:3.2rem;    /* 32 */
  --space-xl:4.8rem;    /* 48 */
  --space-section:clamp(4.8rem, 8vw, 6.4rem);   /* fluid section padding */
  --space-hero:clamp(6.4rem, 12vw, 10.4rem);    /* fluid hero padding    */

  /* ----- Radius (hand-drawn asymmetry preserved) ----- */
  --radius-sm:0.5rem;
  --radius-md:0.6rem;
  --radius-lg:1.2rem;
  --radius-hand:0.4rem 0.6rem 0.4rem 0.5rem;
  --radius-hand-card:0.5rem 0.6rem 0.5rem 0.7rem;

  /* ----- Borders / shadow / layout ----- */
  --bw:1px;
  --bw-bold:1.5px;
  --shadow-panel:0 1.2rem 3.4rem rgba(42,58,65,.14);
  --container:112rem;
  --gap:var(--space-md);

  --ease:.18s ease;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%}            /* 1rem = 10px */
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-200);
  font-weight:400;
  color:var(--ink);
  line-height:var(--lh-body);
  background-color:var(--paper);
  background-image:
    radial-gradient(42vw 42vw at 6% -4%, var(--red-wash), transparent 62%),
    radial-gradient(48vw 48vw at 102% 14%, var(--teal-wash), transparent 60%),
    radial-gradient(46vw 46vw at -6% 78%, var(--blue-wash), transparent 60%),
    radial-gradient(40vw 40vw at 108% 96%, var(--red-wash), transparent 60%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
a{color:var(--red-deep)}
img{max-width:100%;display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gap)}
.nowrap{white-space:nowrap}

/* ----- Type ----- */
h1,h2,h3,h4,.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--ink);
  margin:0 0 .55em;
}
h1,.hero__title{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-500);font-weight:600}
h4{font-size:var(--fs-h4);font-weight:600}
p{margin:0 0 1.1em}

/* Painted brush-stroke underline under section headings */
.sec h2,.page-hero h1{position:relative;display:inline-block}
.sec h2::after,.page-hero h1::after{
  content:"";position:absolute;left:.2rem;right:.2rem;bottom:-.16em;height:.2em;
  background:var(--red);opacity:.45;
  border-radius:45% 55% 50% 50%/60% 50% 55% 45%;
  transform:rotate(-.7deg);
}

.label{
  display:inline-block;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:var(--fs-100);
  color:var(--ink);
  background:var(--teal-wash);
  border:var(--bw) solid var(--line);
  padding:.22em .85em;
  border-radius:0.5rem 0.6rem 0.4rem 0.6rem;
  margin-bottom:var(--space-sm);
}
.lead{font-size:var(--fs-400);color:var(--ink-soft);max-width:60ch}

/* ----- Buttons (painted, line-art border) ----- */
.btn{
  display:inline-block;
  font-family:var(--font-body);font-weight:700;
  border:var(--bw-bold) solid var(--ink);
  background:var(--red);
  color:#fff;
  padding:.72em 1.35em;
  border-radius:var(--radius-hand);
  text-decoration:none;
  transition:background var(--ease), transform var(--ease);
}
.btn:hover{background:var(--red-deep);transform:translateY(-.1rem)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--red-wash)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}

/* ----- Header / nav ----- */
.nav{
  border-bottom:var(--bw) solid var(--line);
  background:rgba(250,246,239,.82);
  backdrop-filter:blur(.7rem);
  position:sticky;top:0;z-index:40;
}
.nav__inner{
  max-width:var(--container);margin:0 auto;padding:var(--space-sm) var(--gap);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
}
.nav__logo{
  display:flex;align-items:center;gap:1.1rem;
  font-family:var(--font-display);font-weight:800;font-size:var(--fs-400);
  letter-spacing:0;text-decoration:none;color:var(--ink);
}
.nav__mark{
  font-family:var(--font-display);font-weight:800;font-size:1.45rem;
  border:var(--bw-bold) solid var(--ink);padding:.16em .42em;
  border-radius:0.4rem 0.5rem 0.3rem 0.5rem;
}
.nav__logo .co{font-weight:400;color:var(--ink-soft)}
.nav__links{display:flex;align-items:center;gap:var(--space-md)}
.nav__link{text-decoration:none;color:var(--ink);font-weight:600;font-size:var(--fs-200)}
.nav__link:hover{color:var(--red-deep)}
.nav__link--cta{
  border:var(--bw-bold) solid var(--ink);padding:.5em .95em;
  background:var(--red);color:#fff !important;
  border-radius:0.4rem 0.5rem 0.4rem 0.5rem;
}
.nav__link--cta:hover{background:var(--red-deep)}
.nav__toggle{position:absolute;opacity:0;pointer-events:none}
.nav__burger{display:none}

/* ----- Sections ----- */
.sec{padding:var(--space-section) 0;border-bottom:var(--bw) solid var(--line)}
.page-hero{padding:var(--space-section) 0;border-bottom:var(--bw) solid var(--line)}
.page-hero--tall{padding:var(--space-hero) 0}

.hero{
  position:relative;
  overflow:hidden;
  padding:var(--space-hero) 0;
  border-bottom:var(--bw) solid var(--line);
  color:var(--ink);
}
/* Real <img> LCP element (not a CSS background) so the browser fetches it early */
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(250,246,239,.24),rgba(250,246,239,.40));
}
.hero > .container{position:relative;z-index:1}
.hero__panel{
  max-width:66rem;
  background:rgba(250,246,239,.85);
  -webkit-backdrop-filter:blur(.5rem);
  backdrop-filter:blur(.5rem);
  border:var(--bw) solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-xl);
  box-shadow:var(--shadow-panel);
}

/* Watercolor closing panel */
.sec--cta{
  text-align:center;
  border-top:var(--bw) solid var(--line-2);border-bottom:none;
  color:var(--paper);
  background:
    radial-gradient(60% 90% at 80% 10%, rgba(224,170,84,.28), transparent 60%),
    linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
}
.sec--cta h2{color:var(--paper)}
.sec--cta h2::after{background:var(--gold);opacity:.7}
.sec--cta p{color:rgba(250,246,239,.9);max-width:52ch;margin-left:auto;margin-right:auto}
.sec--cta .btn{background:var(--gold);border-color:var(--paper);color:var(--teal-deep)}
.sec--cta .btn:hover{background:#d59b3f}

/* ----- Layout helpers ----- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);align-items:center}
.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.box{
  border:var(--bw) solid var(--line);
  background:var(--surface-soft);
  border-radius:var(--radius-md);
  padding:var(--space-md);
}
.box--media{
  display:flex;align-items:center;justify-content:center;
  min-height:28rem;color:var(--ink-soft);font-style:italic;
  font-family:var(--font-display);
  background:
    radial-gradient(58% 58% at 28% 26%, var(--red-wash), transparent 70%),
    radial-gradient(58% 58% at 74% 72%, var(--teal-wash), transparent 70%),
    var(--paper-2);
}

/* Cards (line-art outline, watercolor hover) */
.card{
  border:var(--bw) solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-hand-card);
  padding:var(--space-md);
}
.card__title{margin-bottom:.4em}
a.card{display:block;text-decoration:none;color:inherit;transition:border-color var(--ease), background var(--ease), transform var(--ease)}
a.card:hover{border-color:var(--line-2);transform:translateY(-.2rem)}
.grid--3 a.card:nth-child(1):hover{background:var(--red-wash)}
.grid--3 a.card:nth-child(2):hover{background:var(--teal-wash)}
.grid--3 a.card:nth-child(3):hover{background:var(--gold-wash)}
.card__more{display:inline-block;margin-top:var(--space-xs);font-weight:700;color:var(--red-deep)}

/* ----- Services section (home "What we do") ----- */
.services__head{text-align:center;max-width:62rem;margin:0 auto var(--space-xl)}
.services__head .label{margin-bottom:var(--space-sm)}
.services__intro{font-size:var(--fs-400);color:var(--ink-soft);margin:0}
.services__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);
}
.services__cta{text-align:center;margin-top:var(--space-xl)}

.service-card{
  border:var(--bw) solid var(--line);
  background:var(--surface);
  border-radius:var(--radius-hand-card);
  padding:var(--space-md);
  text-align:center;
  transition:border-color var(--ease), transform var(--ease), background var(--ease);
}
.service-card:hover{border-color:var(--line-2);transform:translateY(-.2rem)}
.service-card:nth-child(1):hover{background:var(--red-wash)}
.service-card:nth-child(2):hover{background:var(--teal-wash)}
.service-card:nth-child(3):hover{background:var(--gold-wash)}
.service-card:nth-child(4):hover{background:var(--blue-wash)}
.service-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:5.6rem;height:5.6rem;margin:0 auto var(--space-sm);
  color:var(--teal-deep);
  border:var(--bw-bold) solid var(--ink);
  border-radius:1.2rem 1.4rem 1.1rem 1.5rem;
  background:var(--paper);
}
.service-card__icon svg{width:2.8rem;height:2.8rem}
.service-card__title{font-size:var(--fs-500);margin-bottom:.35em}
.service-card__text{color:var(--ink-soft);margin:0}

/* ----- FAQ ----- */
.faq{border:var(--bw) solid var(--line);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xs);background:var(--surface-soft)}
.faq__summary{font-family:var(--font-display);font-weight:600;font-size:var(--fs-300);cursor:pointer;list-style:none}
.faq__summary::-webkit-details-marker{display:none}
.faq__summary::before{content:"+ ";color:var(--red-deep);font-weight:700}
.faq[open] .faq__summary::before{content:"– "}
.faq__answer{margin:.7em 0 0;color:var(--ink-soft)}

/* ----- Breadcrumb ----- */
.breadcrumb{border-bottom:var(--bw) solid var(--line)}
.breadcrumb__list{
  max-width:var(--container);margin:0 auto;padding:var(--space-xs) var(--gap);
  list-style:none;display:flex;gap:var(--space-2xs);font-size:var(--fs-100);color:var(--ink-soft);
}
.breadcrumb__link{color:var(--ink-soft)}
.breadcrumb__link:hover{color:var(--red-deep)}
.breadcrumb__item::after{content:"›";margin-left:var(--space-2xs);color:var(--line-2)}
.breadcrumb__item:last-child::after{content:""}

/* ----- Forms ----- */
.leadform__hp{position:absolute;left:-9999px}
.field{margin-bottom:var(--space-sm)}
.field__label,.field__lbl{display:block;font-weight:700;margin-bottom:var(--space-2xs);font-size:var(--fs-100)}
.field__label span{color:var(--red-deep)}            /* required asterisk only */
.field__input,.field__textarea{
  width:100%;border:var(--bw) solid var(--line);background:var(--field-bg);
  padding:1.1rem 1.3rem;font:inherit;color:inherit;border-radius:var(--radius-sm);
}
.field__input:focus,.field__textarea:focus{
  outline:none;border-color:var(--red);box-shadow:0 0 0 .3rem var(--red-wash);
}
.checkopt input{accent-color:var(--red)}
.field__textarea{min-height:13rem;resize:vertical}
.field-row--2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm)}
.checkgroup{display:grid;gap:var(--space-xs)}
.checkopt{display:flex;align-items:center;gap:.9rem;font-weight:400}
.submit{
  font-family:var(--font-body);font-weight:700;
  border:var(--bw-bold) solid var(--ink);background:var(--red);color:#fff;
  padding:.72em 1.5em;border-radius:var(--radius-hand);cursor:pointer;
  transition:background var(--ease);
}
.submit:hover{background:var(--red-deep)}
.leadform__note{font-size:var(--fs-50);color:var(--ink-soft);margin-top:var(--space-xs)}
.form-error{border:var(--bw) solid var(--red);background:var(--red-wash);padding:1.3rem 1.7rem;margin-bottom:var(--space-sm);border-radius:var(--radius-sm)}

/* ----- Footer ----- */
.foot{padding:var(--space-xl) 0 var(--space-md);border-top:var(--bw) solid var(--line-2);background:var(--paper-2)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-lg)}
.foot__title{font-family:var(--font-display);margin-bottom:.7em}
.foot__col ul,.foot__social{list-style:none;margin:0;padding:0}
.foot__col li{margin-bottom:var(--space-2xs)}
.foot__col a{color:var(--ink);text-decoration:none}
.foot__col a:hover{color:var(--red-deep)}
.foot__bottom{border-top:var(--bw) solid var(--line);margin-top:var(--space-lg);padding-top:var(--space-sm);font-size:var(--fs-50);color:var(--ink-soft)}

/* ----- Sticky mobile call bar ----- */
.call-bar{display:none}

/* ----- Media image blocks (real images in split sections) ----- */
.shot{
  margin:0;
  border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  background:var(--paper-2);
  aspect-ratio:4 / 3;
}
.shot img{display:block;width:100%;height:100%;object-fit:cover}

/* ----- Local Resources: link directory ----- */
.linklist{
  list-style:none; padding:0; margin:0 0 var(--space-lg);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(25rem,1fr));
  gap:0 var(--space-lg);
}
.linklist__item{margin:0}
.linklist__link{
  display:block; padding:var(--space-2xs) 0;
  border-bottom:var(--bw) solid var(--line);
  color:var(--ink); text-decoration:none;
}
.linklist__link:hover{color:var(--red)}
.sec h2{scroll-margin-top:8rem}

/* ----- Legal pages: readable measure ----- */
.legal{max-width:74ch}
.legal h2{margin-top:1.6em;font-size:2.3rem}
.legal h2::after{display:none}
.foot__legal{margin-left:var(--space-xs)}
.foot__legal a{color:inherit}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav__burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:4.4rem;height:4.4rem;cursor:pointer;
    border:var(--bw-bold) solid var(--ink);border-radius:var(--radius-sm);
    background:var(--paper);
  }
  .nav__burger span,
  .nav__burger span::before,
  .nav__burger span::after{
    content:"";display:block;width:2.2rem;height:.2rem;background:var(--ink);
    position:relative;transition:transform var(--ease), opacity var(--ease);
  }
  .nav__burger span::before{position:absolute;top:-.7rem}
  .nav__burger span::after{position:absolute;top:.7rem}
  .nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:var(--bw) solid var(--line);
    padding:var(--space-xs) var(--gap) var(--space-md);
  }
  .nav__toggle:checked ~ .nav__links{display:flex}
  .nav__link{padding:var(--space-xs) 0;font-size:var(--fs-400)}
  .nav__link--cta{margin-top:var(--space-xs);text-align:center}
  .nav__toggle:checked ~ .nav__burger span{background:transparent}
  .nav__toggle:checked ~ .nav__burger span::before{transform:translateY(.7rem) rotate(45deg)}
  .nav__toggle:checked ~ .nav__burger span::after{transform:translateY(-.7rem) rotate(-45deg)}

  .split{grid-template-columns:1fr;gap:var(--space-lg)}
  .grid--3{grid-template-columns:1fr}
  .services__grid{grid-template-columns:1fr}
  .field-row--2{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .call-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    text-align:center;padding:1.3rem;background:var(--red);color:#fff;
    text-decoration:none;font-weight:700;border-top:var(--bw-bold) solid var(--ink);
  }
  body{padding-bottom:5.4rem}
}