/* ===========================================================
   WILLIAMS PROPERTY INVESTMENT & SOURCING
   Site stylesheet
=========================================================== */

/* ---------- Tokens ---------- */
:root{
  --teal-deep:   #012C2D;
  --teal:        #023F40;
  --teal-soft:   #054E4F;
  --cream:       #F7F4EC;
  --paper:       #FFFFFF;
  --ink:         #14201F;
  --ink-soft:    #4B5A58;
  --gold:        #C9A24C;
  --gold-light:  #E7C878;
  --gold-deep:   #8B6A2C;

  --max: 1180px;
  --gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight:400;
  line-height:1.65;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Poppins', sans-serif;
  font-weight:800;
  line-height:1.08;
  margin:0 0 .8rem 0;
  letter-spacing:-0.01em;
  color:var(--teal-deep);
}
p{margin:0 0 1rem 0;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 2.5rem);
}
section{position:relative;}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--gold); color:var(--teal-deep);
  padding:.7rem 1.2rem; font-weight:700; z-index:200;
}
.skip-link:focus{left:1rem; top:1rem;}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.6rem;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  cursor:pointer;
  background:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.btn--primary{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
  color:var(--teal-deep);
}
.btn--primary:hover{ transform:translateY(-2px); }
.btn--outline{
  border-color:rgba(255,255,255,.5);
  color:var(--paper);
}
.btn--outline:hover{ border-color:var(--gold); color:var(--gold-light); }
.btn--outline-dark{
  border-color:rgba(20,32,31,.25);
  color:var(--ink);
}
.btn--outline-dark:hover{ border-color:var(--teal); color:var(--teal); }
.btn--text{
  color:rgba(255,255,255,.75);
  clip-path:none;
  padding:.85rem 1rem;
}
.btn--text:hover{ color:var(--paper); }

/* ===========================================================
   HEADER / NAV
=========================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--teal-deep);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.1rem clamp(1.25rem, 4vw, 2.5rem);
}
.site-branding img{ width:150px; height:auto; }
@media(max-width:900px){
    .site-branding img { width: 100px;}
}

.main-nav{ display:flex; align-items:center; }
.nav-menu{
  display:flex;
  align-items:center;
  gap:2.1rem;
  list-style:none;
}
.nav-menu a{
  font-family:'Poppins';
  font-weight:600;
  font-size:1.1rem;
  color:rgba(255,255,255,.85);
  position:relative;
  padding:.3rem 0;
  display:inline-block;
}
.nav-menu a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--gold);
  transition:width .2s ease;
}
.nav-menu a:hover::after{width:100%;}
.nav-menu a:hover{color:var(--paper);}
.nav-menu .mobile-only{ display:none; }

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; cursor:pointer;
  padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--paper); display:block; transition:transform .2s ease, opacity .2s ease; }

.nav-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(1,44,45,.6);
  z-index:40;
}
.nav-overlay.is-active{ display:block; }

.header-cta{ font-size:1rem; padding:.7rem 1.3rem; }

@media (max-width: 900px){
  .nav-toggle{ display:flex; }
  .main-nav{ position:relative; }
  .nav-menu{
    position:fixed; top:0; right:0; bottom:0;
    width:min(78vw, 320px);
    background:var(--teal-deep);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:5.5rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:45;
  }
  .nav-menu.is-open{ transform:translateX(0); }
  .nav-menu li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-menu a{ display:block; padding:1rem 0; }
  .nav-menu .mobile-only{ display:block; }
  .header-cta{ display:none; }
}

/* ===========================================================
   CTA BANNER (site-wide, sits above the footer)
=========================================================== */
.cta-banner{
  position:relative;
  overflow:hidden;
  padding:clamp(3rem,6vw,4.5rem) 0;
  color:var(--paper);
  text-align:center;
}
.cta-banner__bg{
  position:absolute; inset:0;
  background:linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 80%);
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);
}
.cta-banner__inner{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.cta-banner__inner h2{ color:var(--paper); font-size:clamp(1.6rem,3vw,2.1rem); }
.cta-banner__inner p{ color:rgba(255,255,255,.78); margin:0 auto 1.6rem; }

/* ===========================================================
   FOOTER
=========================================================== */
.site-footer{
  background:var(--teal-deep);
  color:rgba(255,255,255,.65);
  padding:3rem 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer__col h4{
  color:var(--gold-light);
  font-size:.95rem;
  margin-bottom:1rem;
}
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer__col a{ color:rgba(255,255,255,.75); font-size:.92rem; }
.footer__col a:hover{ color:var(--gold-light); }
.footer__col--brand p{ color:rgba(255,255,255,.65); font-size:.92rem; margin:1rem 0 1.2rem; }
.footer__social{ display:flex; gap:.8rem; }
.footer__social a{
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
}
.footer__social a:hover{ border-color:var(--gold); color:var(--gold-light); }
.footer__contact strong{ display:block; font-size:.78rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.15rem;}

.footer__bar{ padding:1.4rem 0; }
.footer__bar-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.8rem;
}
.footer__bar-inner a{ color:rgba(255,255,255,.75); }
.footer__bar-inner a:hover{ color:var(--gold-light); }

@media (max-width: 900px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .footer__grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   COOKIE NOTICE
=========================================================== */
.cookie-notice{
  position:fixed; left:1rem; right:1rem; bottom:1rem;
  max-width:520px;
  background:var(--paper);
  color:var(--ink);
  padding:1.3rem 1.4rem;
  border:1px solid rgba(20,32,31,.1);
  box-shadow:0 12px 30px rgba(1,44,45,.18);
  z-index:80;
}
.cookie-notice p{ font-size:.88rem; margin-bottom:1rem; }
.cookie-notice__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.cookie-notice__actions .btn{ font-size:.85rem; padding:.65rem 1.1rem; }
.cookie-notice__actions .btn--text{ color:var(--ink-soft); }
.cookie-notice__actions .btn--text:hover{ color:var(--ink); }

/* ===========================================================
   HERO (home page)
=========================================================== */
.hero{
  background:
    radial-gradient(ellipse at 85% 20%, rgba(201,162,76,.14), transparent 55%),
    linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 72%);
  color:var(--paper);
  padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(5rem,9vw,8rem);
  overflow:hidden;
}
.hero h1, .hero h2{ color:var(--paper); }
.hero__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--gap);
  align-items:center;
  position:relative; z-index:2;
}
.hero h1{ font-size:clamp(2.3rem, 4.6vw, 3.6rem); margin-bottom:1.3rem; }
.hero h1 .accent{ color:var(--gold-light); }
.hero-copy__lede{
  font-size:1.1rem;
  color:rgba(255,255,255,.82);
  max-width:44ch;
  margin-bottom:2rem;
}
.hero-copy__ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.6rem; }
.hero-copy__direct{ font-size:.9rem; color:rgba(255,255,255,.65); }
.hero-copy__direct strong{ color:var(--gold-light); font-weight:600; }

.hero-media{
  position:relative;
  aspect-ratio: 4 / 5;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px);
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 40%;
}
.hero__cut{
  position:absolute; left:0; right:0; bottom:-1px; height:70px;
  background:var(--cream);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
}

@media (max-width: 900px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero-media{ order:-1; aspect-ratio: 16/10; }
}

/* ===========================================================
   INTRO STRIP
=========================================================== */
.intro{ padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--cream); }
.intro__inner{
  display:grid;
  grid-template-columns:.62fr 1fr;
  gap:var(--gap);
  align-items:center;
}
.intro-portrait{
  aspect-ratio:1/1;
  clip-path: polygon(36px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0 100%, 0 36px);
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg, var(--teal), var(--teal-deep));
}
.intro-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.intro-portrait::after{
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(231,200,120,.35);
  pointer-events:none;
}
.intro-text p{ color:var(--ink-soft); font-size:1.04rem; }
.intro-signoff{
  font-family:'Poppins'; font-weight:700; margin-top:1.2rem; color:var(--teal);
  max-width:none;
}
.intro-signoff span{ display:block; font-family:'Inter'; font-weight:400; font-size:.85rem; color:var(--ink-soft); margin-top:2px; }

@media (max-width: 900px){
  .intro__inner{ grid-template-columns:1fr; }
  .intro-portrait{ margin:0 auto; }
}

/* ===========================================================
   PATH CARDS (Sellers / Investors)
=========================================================== */
.paths{ background:var(--teal-deep); padding:clamp(3.5rem,7vw,5.5rem) 0; }
.paths-head{ color:var(--paper); max-width:640px; margin-bottom:2.6rem; }
.paths-head h2{ color:var(--paper); font-size:clamp(1.7rem,3.2vw,2.3rem); }
.paths-head p{ color:rgba(255,255,255,.7); }

.path-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.75rem; }
.path-card{
  background:var(--teal);
  padding:2.4rem 2.2rem 2.2rem;
  color:var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
  transition:background .2s ease;
}
.path-card:hover{ background:var(--teal-soft); }
.path-card h3{ color:var(--paper); font-size:1.5rem; margin-bottom:.85rem; }
.path-card__num{
  font-family:'Poppins'; font-weight:800; font-size:.85rem;
  color:var(--gold-light); letter-spacing:.06em;
  display:block; margin-bottom:1rem;
}
.path-card p{ color:rgba(255,255,255,.78); font-size:.98rem; margin-bottom:1.5rem; }
.path-card .btn{ font-size:.88rem; padding:.7rem 1.3rem; }

@media (max-width: 900px){
  .path-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   ABOUT TEASER
=========================================================== */
.about{ background:var(--cream); padding:clamp(3.5rem,7vw,5.5rem) 0; }
.about__inner{ display:grid; grid-template-columns:1fr .8fr; gap:var(--gap); align-items:center; }
.about-copy p{ color:var(--ink-soft); font-size:1.03rem; }
.about-list{ list-style:none; margin:1.6rem 0 2rem; }
.about-list li{
  padding:.6rem 0 .6rem 1.6rem;
  border-bottom:1px solid rgba(20,32,31,.08);
  position:relative;
  font-size:.98rem;
}
.about-list li::before{
  content:""; position:absolute; left:0; top:1.15rem;
  width:9px; height:9px; background:var(--gold);
}
.about-graphic{
  position:relative;
  background:var(--teal-deep);
  aspect-ratio:4/5;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
  overflow:hidden;
}
.about-graphic img{ width:100%; height:100%; object-fit:cover; }
.about-graphic__label{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.8rem;
  color:var(--paper);
  font-family:'Poppins'; font-weight:700; font-size:1.05rem;
  background:linear-gradient(to top, rgba(1,44,45,.85), transparent);
}
.about-graphic__label span{
  display:block; font-family:'Inter'; font-weight:400; font-size:.8rem;
  color:rgba(255,255,255,.75); margin-top:.3rem;
}

@media (max-width: 900px){
  .about__inner{ grid-template-columns:1fr; }
}

/* ===========================================================
   BLOG TEASER
=========================================================== */
.blog{ background:var(--paper); padding:clamp(3.5rem,7vw,5.5rem) 0; border-top:1px solid rgba(20,32,31,.08); }
.blog-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:2.4rem; flex-wrap:wrap; gap:1rem; }
.blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.75rem; }
.blog-card{
  border:1px solid rgba(20,32,31,.1);
  padding:1.7rem;
  transition:border-color .2s ease, transform .2s ease;
}
.blog-card:hover{ border-color:var(--gold); transform:translateY(-3px); }
.blog-card__tag{
  font-family:'Poppins'; font-weight:700; font-size:.72rem;
  color:var(--teal); letter-spacing:.04em;
  display:inline-block; margin-bottom:.9rem;
  padding:.25rem .6rem;
  background:rgba(2,63,64,.08);
}
.blog-card h3{ font-size:1.15rem; margin-bottom:.6rem; line-height:1.3; }
.blog-card h3 a{ color:var(--teal-deep); }
.blog-card p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:0; }

@media (max-width: 900px){
  .blog-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   CONTACT (shared with a dedicated /contact/ page later)
=========================================================== */
.contact-section{
  background:linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 80%);
  color:var(--paper);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--gap); }
.contact-info h2{ color:var(--paper); font-size:clamp(1.8rem,3.4vw,2.4rem); }
.contact-info p{ color:rgba(255,255,255,.78); font-size:1.03rem; }
.contact-detail-list{ list-style:none; margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15); }
.contact-detail-list li{ margin-bottom:1rem; }
.contact-detail-list strong{ display:block; font-size:.78rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.2rem; }
.contact-detail-list a{ font-family:'Poppins'; font-weight:700; font-size:1.1rem; color:var(--gold-light); }
.contact-detail-list span{ font-size:.92rem; color:rgba(255,255,255,.7); }

.contact-form-wrap{ background:var(--cream); color:var(--ink); padding:2.2rem; clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }
.form-row{ margin-bottom:1.15rem; }
.form-row label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--ink-soft); font-family:'Poppins'; }
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  border:1px solid rgba(20,32,31,.2);
  background:var(--paper);
  padding:.75rem .85rem;
  font-family:'Inter'; font-size:.95rem; color:var(--ink);
}
.form-row--half{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.contact-form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-note{ font-size:.78rem; color:var(--ink-soft); margin-top:.9rem; text-align:center; }
.form-error{
  background:rgba(196,58,58,.1); border:1px solid rgba(196,58,58,.3);
  color:#8a2c2c; padding:.85rem 1rem; margin-bottom:1.2rem; font-size:.9rem;
}
.form-success h3{ color:var(--teal-deep); }
.form-success p{ color:var(--ink-soft); }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row--half{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
.footer__social a img {
  height: 14px;
}
/* ===========================================================
   PAGE HERO (Sellers, Buyers, About, Blog, Contact, Privacy)
=========================================================== */
.page-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--paper);
  min-height:44vh;
}
.page-hero--short{ min-height:30vh; }
.page-hero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
}
.page-hero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(1,44,45,.6), rgba(2,63,64,.48));
}
.page-hero__inner{
  position:relative; z-index:2;
  max-width:720px;
  padding:clamp(4rem,10vw,6.5rem) clamp(1.25rem, 4vw, 2.5rem);
}
.page-hero h1{ color:var(--paper); font-size:clamp(2rem,4vw,2.7rem); margin-bottom:.9rem; }
.page-hero p{ color:rgba(255,255,255,.85); max-width:52ch; margin:0 auto; }
.page-hero__cut{
  position:absolute; left:0; right:0; bottom:-1px; height:60px;
  background:var(--cream);
  clip-path: polygon(0 100%, 100% 100%, 100% 45%, 0 100%);
}

/* ===========================================================
   INTRO / STORY SECTIONS (Sellers, Buyers, About)
=========================================================== */
.intro-band{ padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--cream); }
.intro-band p{ color:var(--ink-soft); font-size:1.06rem; }
.intro-band .lede{ font-size:1.2rem; color:var(--ink); }

.story__inner{
  display:grid;
  grid-template-columns:.62fr 1fr;
  gap:var(--gap);
  align-items:start;
}
.story-text p{ color:var(--ink-soft); font-size:1.04rem; }
.story-quote{
  border-left:3px solid var(--gold);
  padding-left:1.4rem;
  margin:1.8rem 0;
  font-family:'Poppins'; font-weight:600; font-size:1.15rem;
  color:var(--teal-deep);
  max-width:56ch;
}

@media (max-width: 900px){
  .story__inner{ grid-template-columns:1fr; }
  .story__inner .intro-portrait{ margin:0 auto; }
}

/* ===========================================================
   PROPERTY / FUNDING TYPE GRID (Sellers, Buyers)
=========================================================== */
.type-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.type-card{
  background:var(--teal);
  padding:2rem 1.8rem;
  color:var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition:background .2s ease;
}
.type-card:hover{ background:var(--teal-soft); }
.type-card h3{ color:var(--paper); font-size:1.15rem; margin-bottom:.6rem; }
.type-card p{ color:rgba(255,255,255,.75); font-size:.92rem; margin-bottom:0; }

@media (max-width: 900px){
  .type-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px){
  .type-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   BLOG LISTING (thumbnails)
=========================================================== */
.blog-listing{ padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--cream); }
.blog-listing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.75rem;
}
.blog-card--with-thumb{ border:1px solid rgba(20,32,31,.1); overflow:hidden; padding:0; }
.blog-card__thumb{ aspect-ratio:16/10; overflow:hidden; }
.blog-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.blog-card--with-thumb .blog-card__body{ padding:1.5rem 1.6rem 1.7rem; }

@media (max-width: 900px){
  .blog-listing-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   INDIVIDUAL ARTICLE / LEGAL COPY
=========================================================== */
.article-body, .legal-content{
  padding:clamp(3rem,6vw,4.5rem) 0 clamp(4rem,8vw,6rem);
  background:var(--cream);
}
.article-body .container, .legal-content .container{ max-width:760px; }
.article-body h2, .legal-content h2{
  font-size:1.4rem; margin-top:2.2rem; margin-bottom:.9rem; color:var(--teal-deep);
}
.article-body p, .legal-content p{ color:var(--ink-soft); font-size:1.03rem; max-width:none; }
.article-body ul, .legal-content ul{ margin:0 0 1.2rem 1.3rem; padding:0; color:var(--ink-soft); }
.article-body li, .legal-content li{ margin-bottom:.5rem; font-size:1.02rem; }
.back-link{
  display:inline-block; margin-bottom:1.5rem;
  font-family:'Poppins'; font-weight:600; font-size:.9rem;
  color:var(--teal);
}
.back-link:hover{ color:var(--gold-deep); }
.intro-band__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--gap);
  align-items:center;
}
.intro-band__image{
  aspect-ratio:4/5;
  overflow:hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%, 0 calc(100% - 40px));
}
.intro-band__image img{ width:100%; height:100%; object-fit:cover; }

@media (max-width: 900px){
  .intro-band__inner{ grid-template-columns:1fr; }
  .intro-band__image{ max-width:420px; margin:0 auto; }
}
/* ===========================================================
   ABOUT PAGE — PRACTICE IMAGES (two stacked landscape photos)
=========================================================== */
.practice-images{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.practice-images__item{
  aspect-ratio:16/10;
  overflow:hidden;
}
.practice-images__item:first-child{
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.practice-images__item:last-child{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.practice-images__item img{ width:100%; height:100%; object-fit:cover; display:block; }
.practice-caption{
  font-family:'Poppins'; font-weight:700; font-size:1rem; color:var(--teal-deep); margin-top:.9rem;
}
.practice-caption span{ display:block; font-family:'Inter'; font-weight:400; font-size:.85rem; color:var(--ink-soft); margin-top:.2rem; }