/* ============ Seek Design & Build — shared styles ============ */
:root{
  --paper:#2C2C2E;        /* dark grey */
  --paper-deep:#242425;
  --ink:#ECE7DC;
  --ink-soft:rgba(236,231,220,0.66);
  --accent:#C97A45;
  --accent-soft:rgba(201,122,69,0.14);
  --line:rgba(236,231,220,0.14);
  --stone:#3A3A3C;
  --white:#F5F1E9;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-blend-mode:overlay;
  color:var(--ink);
  font-family:"Inter", sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- nav ---------- */
nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem clamp(1.5rem,5vw,4rem);
  border-bottom:1px solid var(--line);
  position:relative; z-index:5;
}
.wordmark{
  font-family:"Newsreader", serif; font-style:italic; font-weight:600;
  font-size:clamp(1.9rem, 2.8vw, 2.6rem); letter-spacing:0.01em; line-height:1;
}
.wordmark span{
  display:block; font-family:"Inter", sans-serif; font-style:normal;
  font-weight:400; font-size:0.62rem; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--accent); margin-top:0.32rem;
}
.nav-links{ display:flex; align-items:center; gap:2rem; font-size:0.85rem; }
.nav-links .links-group{ display:flex; gap:1.6rem; font-weight:500; }
.nav-links .links-group a{ padding-bottom:0.2rem; border-bottom:1px solid transparent; transition:border-color .2s ease; }
.nav-links .links-group a:hover, .nav-links .links-group a.active{ border-color:var(--accent); }
.nav-links a.cta{ background:var(--ink); color:var(--paper); padding:0.6rem 1.2rem; border-radius:2px; font-weight:500; }
@media (max-width:860px){ .links-group{ display:none; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  background:var(--ink); color:var(--paper);
  padding:0.9rem 1.6rem; font-size:0.82rem; font-weight:500; letter-spacing:0.04em;
  border-radius:2px; border:none; cursor:pointer;
  transition:background 0.25s ease, transform 0.25s ease;
  font-family:"Inter", sans-serif;
}
.btn:hover{ background:var(--accent); transform:translateY(-2px); }
.btn svg{ width:14px; height:14px; transition:transform 0.25s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn.btn-outline:hover{ background:var(--ink); color:var(--paper); }

/* ---------- hero slideshow ---------- */
.hero-image{ height:62vh; min-height:380px; position:relative; overflow:hidden; }
.hero-image .slide{
  position:absolute; inset:0; opacity:0;
  animation:slideshow 20s infinite;
}
.hero-image .slide img{ animation:kenburns 20s ease-in-out infinite; }
.hero-image .slide:nth-child(1){ animation-delay:0s; }
.hero-image .slide:nth-child(2){ animation-delay:5s; }
.hero-image .slide:nth-child(3){ animation-delay:10s; }
.hero-image .slide:nth-child(4){ animation-delay:15s; }
@keyframes slideshow{
  0%{ opacity:0; }
  3%{ opacity:1; }
  22%{ opacity:1; }
  27%{ opacity:0; }
  100%{ opacity:0; }
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.1); } }
.hero-image .corner{ position:absolute; width:26px; height:26px; border:1.5px solid rgba(255,252,245,0.85); z-index:2; }
.hero-image .corner.tl{ top:24px; left:24px; border-right:none; border-bottom:none; }
.hero-image .corner.br{ bottom:24px; right:24px; border-left:none; border-top:none; }
@media (prefers-reduced-motion: reduce){
  .hero-image .slide{ animation:none; opacity:0; }
  .hero-image .slide:first-child{ opacity:1; }
  .hero-image .slide img{ animation:none; }
}

/* ---------- page banner (sub-pages) ---------- */
.page-banner{
  padding:clamp(3rem,7vw,4.5rem) clamp(1.5rem,5vw,4rem) clamp(2rem,5vw,2.5rem);
  max-width:1200px; margin:0 auto;
}
.breadcrumb{ font-size:0.82rem; color:var(--ink-soft); margin:0 0 1rem; }
.breadcrumb a{ border-bottom:1px solid transparent; }
.breadcrumb a:hover{ border-color:var(--accent); }
.page-banner .eyebrow{ font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 0.9rem; }
.page-banner h1{
  font-family:"Newsreader", serif; font-style:italic; font-weight:500;
  font-size:clamp(2rem,4.4vw,3rem); line-height:1.15; margin:0 0 1rem; max-width:24ch;
}
.page-banner .lede{ font-size:1.05rem; line-height:1.65; color:var(--ink-soft); max-width:60ch; margin:0; }

/* ---------- intro (home) ---------- */
.intro{ max-width:760px; margin:0 auto; text-align:center; padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,2rem) clamp(2.5rem,6vw,3.5rem); }
.eyebrow{ font-size:0.78rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin:0 0 1rem; }
h1{ font-family:"Newsreader", serif; font-style:italic; font-weight:500; font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.15; margin:0 0 1.2rem; }
.lede{ font-size:1.08rem; line-height:1.65; color:var(--ink-soft); margin:0 0 1.8rem; }

/* ---------- trust strip ---------- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); }
.trust div{ padding:1.6rem 1rem; text-align:center; font-size:0.88rem; font-weight:500; letter-spacing:0.02em; border-left:1px solid var(--line); }
.trust div:first-child{ border-left:none; }
@media (max-width:720px){ .trust{ grid-template-columns:1fr; } .trust div{ border-left:none; border-top:1px solid var(--line); } .trust div:first-child{ border-top:none; } }

/* ---------- section label ---------- */
.section-label{ display:flex; align-items:center; gap:0.7rem; font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); max-width:1200px; margin:0 auto; padding:clamp(3rem,6vw,4rem) clamp(1.5rem,5vw,4rem) 1.2rem; }
.section-label .mark{ width:9px; height:9px; border:1.4px solid var(--accent); transform:rotate(45deg); }

/* ---------- services / cards grid ---------- */
.services{ max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem) clamp(3rem,6vw,4.5rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.service-card{ background:var(--stone); padding:2rem 1.7rem; min-height:230px; display:flex; flex-direction:column; justify-content:space-between; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(42,35,22,0.12); }
.service-card h3{ font-family:"Newsreader", serif; font-style:italic; font-weight:500; font-size:1.35rem; margin:0 0 0.7rem; }
.service-card p{ font-size:0.95rem; color:var(--ink-soft); line-height:1.55; margin:0; }
.service-card .arrow{ margin-top:1.2rem; font-size:0.82rem; font-weight:500; display:inline-flex; align-items:center; gap:0.4rem; transition:gap .25s ease; }
.service-card:hover .arrow{ gap:0.65rem; }
@media (max-width:860px){ .services{ grid-template-columns:1fr; } }

/* ---------- two-card hub grid (renovations) ---------- */
.hub-grid{ max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem) clamp(4rem,7vw,5.5rem); display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.hub-card{ position:relative; min-height:360px; display:flex; align-items:flex-end; overflow:hidden; }
.hub-card img{ position:absolute; inset:0; transition:transform 0.6s ease; }
.hub-card:hover img{ transform:scale(1.06); }
.hub-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(42,35,22,0) 40%, rgba(20,16,10,0.78) 100%); }
.hub-card-content{ position:relative; z-index:1; padding:1.8rem; color:var(--white); }
.hub-card-content h3{ font-family:"Newsreader", serif; font-style:italic; font-weight:500; font-size:1.6rem; margin:0 0 0.5rem; }
.hub-card-content p{ font-size:0.92rem; margin:0 0 1rem; opacity:0.85; max-width:34ch; }
.hub-card-content .arrow{ font-size:0.82rem; font-weight:500; }
@media (max-width:760px){ .hub-grid{ grid-template-columns:1fr; } }

/* ---------- split section ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; max-width:1280px; margin:0 auto; }
.split .img-side{ min-height:480px; overflow:hidden; }
.split .img-side img{ transition:transform 0.6s ease; }
.split .img-side:hover img{ transform:scale(1.06); }
.split .text-side{ display:flex; flex-direction:column; justify-content:center; padding:clamp(2rem,5vw,4rem) clamp(1.5rem,5vw,4rem); }
.split .text-side h2{ font-family:"Newsreader", serif; font-style:italic; font-weight:500; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.2; margin:0 0 1.1rem; max-width:16ch; }
.split .text-side p{ font-size:1.02rem; color:var(--ink-soft); line-height:1.65; max-width:38ch; margin:0 0 1.6rem; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split .img-side{ min-height:320px; order:-1; } .split .img-side:hover img{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .split .img-side img{ transition:none; } }

/* ---------- forms (quote request) ---------- */
.form-section{ max-width:880px; margin:0 auto; padding:0 clamp(1.5rem,5vw,4rem) clamp(4rem,8vw,6rem); }
.form-panel{
  background:var(--white); border:1px solid var(--line); padding:clamp(1.8rem,4vw,2.8rem);
  --ink:#241D14; --ink-soft:rgba(36,29,20,0.66); --line:rgba(36,29,20,0.16);
  color:var(--ink);
}
.form-note{
  background:var(--accent-soft); border:1px solid rgba(138,63,34,0.25);
  padding:1rem 1.2rem; font-size:0.85rem; line-height:1.55; color:var(--ink);
  margin:0 0 2rem;
}
.form-note strong{ color:var(--accent); }
fieldset{ border:none; padding:0; margin:0 0 2rem; }
fieldset legend{
  font-size:0.78rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1rem; padding:0;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.2rem; }
.field.full{ grid-column:1 / -1; }
.field label{ display:block; font-size:0.85rem; font-weight:500; margin:0 0 0.5rem; }
.field .hint{ font-size:0.78rem; color:var(--ink-soft); margin:0.35rem 0 0; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%; padding:0.75rem 0.9rem; font-family:"Inter", sans-serif; font-size:0.95rem;
  border:1.5px solid var(--line); background:var(--white); color:#241D14; border-radius:2px;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
textarea{ resize:vertical; min-height:110px; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* upload dropzone */
.upload-box{
  border:1.5px dashed var(--line); background:var(--white);
  padding:1.8rem; text-align:center; cursor:pointer; position:relative;
  transition:border-color .2s ease, background .2s ease;
}
.upload-box:hover{ border-color:var(--accent); background:var(--accent-soft); }
.upload-box input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-box .upload-icon{ width:30px; height:30px; margin:0 auto 0.7rem; color:var(--accent); }
.upload-box .upload-text{ font-size:0.9rem; font-weight:500; margin:0 0 0.25rem; }
.upload-box .upload-sub{ font-size:0.78rem; color:var(--ink-soft); margin:0; }
.upload-box .file-list{ font-size:0.8rem; color:var(--accent); margin-top:0.6rem; font-weight:500; }

/* swatches */
.swatch-group{ display:flex; flex-wrap:wrap; gap:0.9rem; }
.swatch{ cursor:pointer; text-align:center; font-size:0.78rem; }
.swatch input{ position:absolute; opacity:0; pointer-events:none; }
.swatch .chip{
  width:48px; height:48px; border-radius:50%; border:2px solid transparent;
  margin:0 auto 0.4rem; box-shadow:inset 0 0 0 1px rgba(42,35,22,0.18);
  transition:transform .2s ease, border-color .2s ease;
}
.swatch input:checked + .chip{ border-color:var(--accent); transform:scale(1.08); }
.swatch input:focus-visible + .chip{ outline:2px solid var(--accent); outline-offset:2px; }

.material-group{ display:flex; flex-wrap:wrap; gap:0.8rem; }
.material{ cursor:pointer; }
.material input{ position:absolute; opacity:0; pointer-events:none; }
.material .card{
  border:1.5px solid var(--line); padding:0.7rem 1rem; font-size:0.85rem; font-weight:500;
  border-radius:2px; transition:border-color .2s ease, background .2s ease;
}
.material input:checked + .card{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--paper); padding:clamp(3rem,7vw,5rem) clamp(1.5rem,5vw,4rem) 2rem; }
.footer-inner{ max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; }
.footer-head{ font-family:"Newsreader", serif; font-style:italic; font-weight:500; font-size:clamp(1.6rem,3vw,2.1rem); max-width:15ch; margin:0 0 0.6rem; }
.footer-sub{ color:rgba(44,44,46,0.65); font-size:0.95rem; max-width:30ch; line-height:1.55; }
.col-label{ font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:rgba(44,44,46,0.55); margin:0 0 0.9rem; }
.col a, .col p{ display:block; font-size:1rem; margin:0 0 0.55rem; color:var(--paper); }
.col a{ border-bottom:1px solid transparent; transition:border-color 0.2s ease; }
.col a:hover{ border-color:var(--accent); }
.footer-bottom{ max-width:1280px; margin:3rem auto 0; padding-top:1.4rem; border-top:1px solid rgba(44,44,46,0.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size:0.78rem; color:rgba(44,44,46,0.55); }
@media (max-width:760px){ .footer-inner{ grid-template-columns:1fr; gap:2rem; } }

/* ---------- scrolling photo marquee ---------- */
.photo-marquee-wrap{
  width:100%; overflow:hidden; background:#111;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.photo-marquee{ width:100%; overflow:hidden; position:relative; }
.photo-marquee-track{
  display:flex; gap:6px;
  width:max-content;
  animation: marqueeScroll 40s linear infinite;
}
.photo-marquee-track img{
  height:240px; width:360px;
  object-fit:cover; flex-shrink:0;
  display:block;
  transition:transform 0.4s ease;
}
.photo-marquee-track img:hover{
  transform:scale(1.04);
  z-index:2;
  position:relative;
}
.photo-marquee-wrap:hover .photo-marquee-track{
  animation-play-state:paused;
}
@keyframes marqueeScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .photo-marquee-track{ animation:none; }
}

/* ============================================
   MOBILE / IPHONE SPECIFIC IMPROVEMENTS
   Targets screens under 480px (iPhone SE to 15)
   ============================================ */

/* Nav — company name + slogan stack neatly */
@media (max-width:480px){
  nav{
    padding:1rem 1.2rem;
    flex-wrap:wrap;
    gap:0.8rem;
  }
  .wordmark{ font-size:1.2rem; }
  .nav-links a.cta{ padding:0.5rem 0.9rem; font-size:0.8rem; }
}



/* Photo marquee — smaller height on mobile */
@media (max-width:480px){
  .photo-marquee-track img{ height:160px; width:240px; }
}

/* Intro section */
@media (max-width:480px){
  .intro{ padding:2rem 1.2rem; }
  h1{ font-size:1.7rem; }
  .lede{ font-size:0.95rem; }
}

/* Trust strip — single column, compact */
@media (max-width:480px){
  .trust div{ padding:1rem 0.8rem; font-size:0.82rem; }
}

/* Service cards — full width, no gap issues */
@media (max-width:480px){
  .services{ padding:0 1.2rem 2.5rem; gap:1rem; }
  .service-card{ padding:1.5rem 1.2rem; min-height:auto; }
  .service-card h3{ font-size:1.15rem; }
}

/* Split section — stack properly */
@media (max-width:480px){
  .split .text-side{ padding:1.8rem 1.2rem; }
  .split .img-side{ min-height:240px; }
}

/* Page banner */
@media (max-width:480px){
  .page-banner{ padding:2rem 1.2rem 1.5rem; }
  .page-banner h1{ font-size:1.6rem; }
  .page-banner .lede{ font-size:0.92rem; }
}

/* Hub grid (renovations) */
@media (max-width:480px){
  .hub-grid{ padding:0 1.2rem 3rem; }
  .hub-card{ min-height:280px; }
  .hub-card-content h3{ font-size:1.3rem; }
}

/* Forms */
@media (max-width:480px){
  .form-section{ padding:0 1.2rem 3rem; }
  .form-panel{ padding:1.4rem 1.2rem; }
  fieldset legend{ font-size:0.72rem; }
  .swatch-group{ gap:0.6rem; }
  .swatch .chip{ width:40px; height:40px; }
  .material-group{ gap:0.5rem; }
  .material .card{ padding:0.55rem 0.8rem; font-size:0.8rem; }
}

/* Footer — compact on mobile */
@media (max-width:480px){
  footer{ padding:2.5rem 1.2rem 1.5rem; }
  .footer-head{ font-size:1.4rem; }
  .col a, .col p{ font-size:0.9rem; }
  .footer-bottom{ font-size:0.72rem; flex-direction:column; gap:0.3rem; }
}

/* Melody button — smaller on mobile, not blocking content */
@media (max-width:480px){
  #melody-btn{
    bottom:80px; left:16px;
    padding:0.65rem 1rem;
    font-size:0.8rem;
  }
}

/* Chat button — make sure it doesn't overlap melody btn */
@media (max-width:480px){
  #sdb-chat-btn{ bottom:16px; right:16px; width:50px; height:50px; }
  #sdb-chat-panel{ right:8px; width:calc(100vw - 16px); bottom:80px; }
}

/* Blog grid — single column on mobile */
@media (max-width:480px){
  .blog-grid{ grid-template-columns:1fr; padding:0 1.2rem 3rem; gap:1.2rem; }
}