/* ============================================================
   Damian Kington — Homepage styles
   Palette & type from brand-tokens; layout per build brief.
   ============================================================ */

:root{
  --plum-950:#17101a;
  --plum-900:#211522;
  --plum-800:#2b1b2d;
  --plum-700:#3a2436;
  --aubergine:#4b2d40;

  --coral-700:#9f4f43;
  --coral-600:#b65b4b;
  --amber-600:#d98245;
  --gold-500:#d8a15f;

  --ivory:#f4efe7;
  --warm-white:#faf6ef;
  --paper:#f7f0e7;
  --stone:#e9dECA;
  --ink:#1f1b1b;
  --muted-ink:#5d5551;
  --line:rgba(31,27,27,0.14);
  --line-dark:rgba(250,246,239,0.18);

  --font-display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;

  --max-width:1180px;
  --section-pad-y:clamp(64px,8vw,112px);
  --side-pad:clamp(24px,5vw,80px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--warm-white);color:var(--ink);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--side-pad);}
.eyebrow{
  font-family:var(--font-sans);font-size:14px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--amber-600);margin:0 0 22px;
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;border:none;
}
.btn-pill{
  background:var(--plum-950);color:var(--warm-white);
  padding:18px 30px;border-radius:2px;transition:background .25s ease,transform .25s ease;
}
.btn-pill:hover{background:#000;transform:translateY(-1px);}
.btn-pill .arrow{color:var(--amber-600);}
.btn-text{color:var(--warm-white);position:relative;padding-bottom:6px;}
.btn-text .arrow{color:var(--amber-600);transition:transform .25s ease;}
.btn-text:hover .arrow{transform:translateX(4px);}
.btn-text::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:1px;background:var(--amber-600);}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:10;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;padding-top:34px;padding-bottom:34px;
}
.logo{
  font-family:var(--font-sans);font-weight:600;font-size:15px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--warm-white);text-decoration:none;white-space:nowrap;
}
.main-nav{display:flex;gap:40px;}
.main-nav a{
  font-family:var(--font-sans);font-size:12px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--warm-white);
  text-decoration:none;opacity:.82;transition:opacity .25s;
}
.main-nav a:hover{opacity:1;}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;min-height:760px;display:flex;align-items:center;
  color:var(--warm-white);overflow:hidden;background-color:var(--plum-950);
  background-image:
    linear-gradient(90deg, rgba(23,16,26,.86) 0%, rgba(23,16,26,.60) 30%, rgba(23,16,26,.12) 60%, rgba(23,16,26,.20) 100%),
    linear-gradient(180deg, rgba(23,16,26,.55) 0%, rgba(23,16,26,0) 26%),
    url("../assets/images/hero-architecture-background-text-free.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Prefer WebP where supported, PNG fallback above */
@supports (background-image: image-set(url("i.webp") type("image/webp"))){
  .hero{
    background-image:
      linear-gradient(90deg, rgba(23,16,26,.86) 0%, rgba(23,16,26,.60) 30%, rgba(23,16,26,.12) 60%, rgba(23,16,26,.20) 100%),
      linear-gradient(180deg, rgba(23,16,26,.55) 0%, rgba(23,16,26,0) 26%),
      image-set(
        url("../assets/images/hero-architecture-background-text-free.webp") type("image/webp"),
        url("../assets/images/hero-architecture-background-text-free.png") type("image/png")
      );
  }
}
/* Sharper 3x asset on very large screens only */
@media (min-width:1800px){
  .hero{
    background-image:
      linear-gradient(90deg, rgba(23,16,26,.86) 0%, rgba(23,16,26,.60) 30%, rgba(23,16,26,.12) 60%, rgba(23,16,26,.20) 100%),
      linear-gradient(180deg, rgba(23,16,26,.55) 0%, rgba(23,16,26,0) 26%),
      url("../assets/images/hero-architecture-background-text-free-3x.png");
  }
}
@supports (background-image: image-set(url("i.webp") type("image/webp"))){
  @media (min-width:1800px){
    .hero{
      background-image:
        linear-gradient(90deg, rgba(23,16,26,.86) 0%, rgba(23,16,26,.60) 30%, rgba(23,16,26,.12) 60%, rgba(23,16,26,.20) 100%),
        linear-gradient(180deg, rgba(23,16,26,.55) 0%, rgba(23,16,26,0) 26%),
        image-set(
          url("../assets/images/hero-architecture-background-text-free-3x.webp") type("image/webp"),
          url("../assets/images/hero-architecture-background-text-free-3x.png") type("image/png")
        );
    }
  }
}
.hero .container{width:100%;padding-top:120px;padding-bottom:90px;}
.hero-inner{max-width:620px;}
.hero h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(44px,6.4vw,82px);line-height:1.04;letter-spacing:-.01em;margin:0 0 30px;
}
.hero h1 em{font-style:italic;font-weight:400;}
.hero-body{
  font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:rgba(250,246,239,.9);
  max-width:430px;margin:0 0 26px;
}
.hero-support{
  font-size:13.5px;letter-spacing:.04em;color:rgba(250,246,239,.78);margin:0 0 38px;
}
.hero .btn-text{font-size:12px;}

/* ============================================================
   Number / Stats bar
   ============================================================ */
.stats-bar{background:linear-gradient(90deg,var(--plum-950),var(--plum-800));color:var(--warm-white);}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:40px 24px;text-align:center;position:relative;
}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:62px;width:1px;background:var(--line-dark);
}
.stat .num{
  font-family:var(--font-display);font-weight:500;color:var(--gold-500);
  font-size:clamp(38px,4.4vw,58px);line-height:1;margin-bottom:12px;
}
.stat .cap{
  font-family:var(--font-sans);font-size:11.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(250,246,239,.82);
}

/* ============================================================
   Approach
   ============================================================ */
.approach{background:var(--warm-white);padding:var(--section-pad-y) 0;}
.approach h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(32px,4.4vw,54px);line-height:1.08;letter-spacing:-.01em;
  margin:0 0 36px;color:var(--ink);
}
.approach-body{max-width:920px;}
.approach-body p{
  font-size:clamp(15px,1.25vw,17.5px);line-height:1.75;color:var(--muted-ink);margin:0 0 22px;
}
.approach-body p:last-child{margin-bottom:0;}

/* ============================================================
   Profile (photo + panel) — contained to align with other sections
   ============================================================ */
.profile-section{background:var(--plum-900);}
.profile-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(420px,1.4fr);
  gap:clamp(30px,5vw,72px);
  align-items:center;
  padding-top:var(--section-pad-y);padding-bottom:var(--section-pad-y);
}
.pe-photo{display:block;}
.pe-photo img{width:100%;max-width:430px;height:auto;display:block;}

.pe-profile{color:var(--warm-white);}
.pe-profile-inner{max-width:560px;}
.pe-profile .eyebrow{color:var(--gold-500);font-size:14px;letter-spacing:.26em;}
.pe-profile h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,2.4vw,36px);line-height:1.12;margin:0 0 26px;color:var(--warm-white);
}
.pe-profile p{font-size:14.5px;line-height:1.74;color:rgba(250,246,239,.82);margin:0 0 18px;}
.pe-profile .intl{color:var(--amber-600);font-size:13.5px;line-height:1.6;margin-top:26px;margin-bottom:0;}

/* ============================================================
   Expertise (full-width, line-free)
   ============================================================ */
.expertise-section{background:var(--stone);padding:var(--section-pad-y) 0;border-top:1px solid rgba(31,27,27,0.07);}
.expertise-section .eyebrow{margin-bottom:clamp(34px,4vw,52px);}
.expertise-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(34px,3.6vw,58px) clamp(28px,3vw,48px);
}
.exp-cell .ic{display:block;width:30px;height:30px;color:var(--amber-600);margin-bottom:18px;}
.exp-cell .ic svg{width:100%;height:100%;display:block;}
.exp-cell h3{
  font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:.01em;
  color:var(--ink);margin:0 0 10px;
}
.exp-cell p{font-size:13px;line-height:1.62;color:var(--muted-ink);margin:0;max-width:250px;}

/* ============================================================
   Contact footer
   ============================================================ */
.contact{
  color:var(--warm-white);position:relative;
  background:
    linear-gradient(90deg, rgba(23,16,26,.86) 0%, rgba(43,27,45,.5) 38%, rgba(159,79,67,.18) 72%, rgba(217,130,69,.10) 100%),
    linear-gradient(105deg, var(--plum-950) 0%, var(--aubergine) 40%, var(--coral-700) 72%, var(--amber-600) 100%);
  padding:clamp(56px,7vw,92px) 0;
}
.contact-grid{
  display:grid;grid-template-columns:1.5fr 1fr auto;gap:40px;align-items:center;
}
.contact h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(27px,3vw,42px);line-height:1.16;margin:0;color:var(--warm-white);
}
.contact .support{font-size:14.5px;line-height:1.65;color:rgba(250,246,239,.84);margin:0;max-width:360px;}
.contact .eyebrow{color:var(--gold-500);}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .profile-grid{grid-template-columns:minmax(240px,.95fr) 1.45fr;}
  .expertise-grid{grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,44px) clamp(24px,2.6vw,36px);}
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:32px;align-items:start;}
  .profile-grid{grid-template-columns:1fr;}
  .pe-photo img{max-width:380px;}
  .expertise-grid{grid-template-columns:repeat(2,1fr);}
  .main-nav{gap:24px;}
  .hero{min-height:640px;}
}
@media (max-width:600px){
  .site-header .container{flex-direction:column;gap:18px;padding-top:24px;padding-bottom:24px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2)::before{display:none;}
  .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--line-dark);}
  .stat:nth-child(3)::before{display:none;}
  .expertise-grid{grid-template-columns:1fr;}
  .hero-inner{max-width:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold-500);outline-offset:3px;}