/* ==========================================================================
   Camden Professionals – main stylesheet
   1. Base (from design)     2. Layout variables / responsive grids
   3. Header states          4. Show/hide + panels   5. Hover states (scpN)
   6. Utilities
   Markup keeps the design's inline styles (pixel-exact). Responsive grid
   columns and header colours are driven by the CSS variables below.
   ========================================================================== */

/* 1. Base ---------------------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:#fff;font-family:Montserrat,system-ui,sans-serif;color:#0E1B2C;-webkit-font-smoothing:antialiased}
a{color:#133054;text-decoration:none}
::selection{background:#BE955C;color:#fff}
a:hover{color:#0B2240}
h1,h2,h3,h4{margin:0}
p{margin:0}
ul{margin:0}
@keyframes cpUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cpFade{from{opacity:0}to{opacity:1}}
@keyframes cpKen{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes cpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cpHeroImg{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes cpLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-rv="0"]{opacity:0;transform:translate3d(0,22px,0)}
[data-rv="1"]{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1) !important}
[data-rv-line="1"]{transform-origin:left center;animation:cpLine .9s cubic-bezier(.65,0,.35,1) both}
section[data-screen-label$="Hero"] > img:first-child{animation:cpHeroImg 2.4s cubic-bezier(.2,.7,.2,1) both}
a,button{transition:color .2s ease,background-color .25s ease,border-color .25s ease,box-shadow .3s ease,transform .3s ease}
a svg:has(path[d^="M5 12h14"]){transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a:hover svg:has(path[d^="M5 12h14"]){transform:translateX(4px)}
a div[style*="overflow:hidden"] > img,a[style*="overflow:hidden"] > img,a[style*="overflow: hidden"] > img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
a:hover div[style*="overflow:hidden"] > img,a[style*="overflow:hidden"]:hover > img{transform:scale(1.05)}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(190,149,92,.22)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}[data-rv="0"]{opacity:1;transform:none}}
html{scroll-behavior:smooth}
img{max-width:100%}
button{font-family:inherit}

/* 2. Layout variables ------------------------------------------------------ */
:root{
  --cp-cols4:repeat(4,minmax(0,1fr));
  --cp-cols3:repeat(3,minmax(0,1fr));
  --cp-cols5:repeat(6,minmax(0,1fr));
  --cp-cols3i:repeat(3,minmax(0,1fr));
  --cp-why:repeat(2,minmax(0,1fr));
  --cp-trust:repeat(5,minmax(0,1fr));
  --cp-legal-pos:sticky;
  --cp-alt-order:2;
  /* header – solid (default) */
  --cp-hdr-bg:rgba(255,255,255,.97);
  --cp-hdr-blur:blur(12px);
  --cp-hdr-border:#E7E3DB;
  --cp-hdr-shadow:none;
  --cp-hdr-mb:0px;
  --cp-hdr-logo:none;
  --cp-hdr-burger:#0E1B2C;
  --cp-hdr-burger-bg:#fff;
  --cp-hdr-burger-border:#DDD8CE;
  --cp-nav-fg:#414C5C;
  --cp-nav-phone:#0E1B2C;
  --cp-nav-active:#133054;
}
@media (max-width:1099px){:root{--cp-cols5:repeat(3,minmax(0,1fr))}}
@media (max-width:1060px){:root{--cp-legal-pos:static}}
@media (max-width:999px){:root{--cp-cols4:repeat(2,minmax(0,1fr));--cp-cols3:repeat(2,minmax(0,1fr));--cp-trust:minmax(0,1fr)}}
@media (max-width:899px){:root{--cp-why:minmax(0,1fr)}}
@media (max-width:759px){:root{--cp-cols5:repeat(2,minmax(0,1fr));--cp-cols3i:minmax(0,1fr);--cp-alt-order:0}}
@media (max-width:559px){:root{--cp-cols4:minmax(0,1fr);--cp-cols3:minmax(0,1fr)}}

/* 3. Header states --------------------------------------------------------- */
body.cp-scrolled{--cp-hdr-shadow:0 10px 30px -18px rgba(10,28,51,.25)}
body.cp-clear{--cp-hdr-mb:-83px}
body.cp-clear:not(.cp-solid){
  --cp-hdr-bg:transparent;--cp-hdr-blur:none;--cp-hdr-border:transparent;--cp-hdr-shadow:none;
  --cp-hdr-logo:brightness(0) invert(1);--cp-hdr-burger:#fff;--cp-hdr-burger-bg:transparent;
  --cp-hdr-burger-border:rgba(255,255,255,.4);--cp-nav-fg:#fff;--cp-nav-phone:#fff;--cp-nav-active:#BE955C;
}
body.admin-bar header{top:32px !important}
@media (max-width:782px){body.admin-bar header{top:46px !important}}
[data-cp-active]{color:var(--cp-nav-active) !important}

/* 4. Show / hide + toggled panels ----------------------------------------- */
@media (max-width:1299px){[data-cp-show="xl"]{display:none !important}}
@media (max-width:1179px){[data-cp-show="wide"],.cp-hero-nav{display:none !important}}
@media (min-width:1180px){[data-cp-show="narrow"],[data-cp-panel="menu"]{display:none !important}}
[data-cp-panel]{display:none !important}
[data-cp-panel].is-open{display:contents !important}

/* 5. Hover states (generated from design: style-hover) --------------------- */
.scp0:hover { color: rgb(255, 255, 255) !important; }
.scp1:hover { background: rgba(190, 149, 92, 0.12) !important; }
.scp2:hover { background: rgb(212, 180, 131) !important; }
.scp3:hover { background: rgb(246, 243, 236) !important; color: rgb(19, 48, 84) !important; }
.scp4:hover { background: rgb(246, 244, 239) !important; }
.scp5:hover { border-color: rgb(19, 48, 84) !important; background: rgb(250, 248, 244) !important; }
.scp6:hover { color: rgb(19, 48, 84) !important; }
.scp7:hover { border-color: rgb(217, 189, 142) !important; background: rgba(10, 17, 29, 0.75) !important; }
.scp8:hover { border-color: rgb(190, 149, 92) !important; color: rgb(190, 149, 92) !important; }
.scp9:hover { background: rgb(11, 34, 64) !important; }
.scpa:hover { border-color: rgb(19, 48, 84) !important; color: rgb(19, 48, 84) !important; }
.scpb:hover { border-color: rgb(19, 48, 84) !important; box-shadow: rgba(13, 32, 58, 0.3) 0px 18px 40px -22px !important; transform: translateY(-3px) !important; }
.scpc:hover { background: rgb(190, 149, 92) !important; }
.scpd:hover { background: rgb(248, 245, 238) !important; }
.scpe:hover { border-color: rgb(19, 48, 84) !important; box-shadow: rgba(13, 32, 58, 0.3) 0px 18px 40px -24px !important; }
.scpf:hover { color: rgb(19, 48, 84) !important; background: rgb(246, 244, 239) !important; }
.scpg:hover { border-color: rgb(19, 48, 84) !important; box-shadow: rgba(13, 32, 58, 0.34) 0px 22px 48px -26px !important; }
.scph:hover { background: rgb(255, 255, 255) !important; }
.scpi:hover { border-color: rgb(19, 48, 84) !important; background: rgb(255, 255, 255) !important; color: rgb(19, 48, 84) !important; }
.scpj:hover { background: rgb(212, 180, 131) !important; color: rgb(10, 28, 51) !important; }
.scpk:hover { border-color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.08) !important; color: rgb(255, 255, 255) !important; }
.scpl:hover { background: rgba(190, 149, 92, 0.12) !important; color: rgb(255, 255, 255) !important; padding-left: 34px !important; }
.scpm:hover { color: rgb(156, 122, 72) !important; }
.scpn:hover { background: rgb(190, 149, 92) !important; color: rgb(255, 255, 255) !important; }
.scpo:hover { background: rgb(251, 250, 247) !important; }
.scpp:hover { background: rgb(255, 255, 255) !important; color: rgb(14, 27, 44) !important; }
.scpq:hover { background: rgb(244, 239, 230) !important; }
.scpr:hover { border-color: rgb(19, 48, 84) !important; transform: translateY(-4px) !important; box-shadow: rgba(13, 32, 58, 0.4) 0px 22px 44px -28px !important; }
.scps:hover { border-color: rgb(19, 48, 84) !important; transform: translateY(-3px) !important; box-shadow: rgba(13, 32, 58, 0.3) 0px 18px 40px -24px !important; }
.scpt:hover { background: rgb(11, 34, 64) !important; color: rgb(255, 255, 255) !important; }
.scpu:hover { background: rgb(19, 48, 84) !important; color: rgb(255, 255, 255) !important; }
.scpv:hover { color: rgb(190, 149, 92) !important; }
.scpw:hover { color: rgb(212, 180, 131) !important; }
.scpx:hover { border-color: rgb(19, 48, 84) !important; transform: translateY(-3px) !important; box-shadow: rgba(13, 32, 58, 0.3) 0px 16px 36px -22px !important; }
.scpy:hover { background: rgba(255, 255, 255, 0.12) !important; color: rgb(255, 255, 255) !important; }
.scpz:hover { border-color: rgb(19, 48, 84) !important; background: rgb(246, 244, 239) !important; }
.scp10:hover { transform: translateY(-5px) !important; box-shadow: rgba(13, 32, 58, 0.12) 0px 16px 36px !important; }
.scp11:hover { background: rgba(19, 48, 84, 0.06) !important; color: rgb(58, 69, 86) !important; }
.scp12:hover { transform: scale(1.05) !important; }
.scp13:hover { border-color: rgb(190, 149, 92) !important; }
.scp14:hover { color: rgb(19, 48, 84) !important; padding-left: 6px !important; }
.scp15:hover { transform: scale(1.04) !important; }
.scp16:hover { border-color: rgb(19, 48, 84) !important; box-shadow: rgba(13, 32, 58, 0.34) 0px 20px 44px -24px !important; transform: translateY(-3px) !important; }
.scp17:hover { border-color: rgb(19, 48, 84) !important; }
.scp18:hover { border-color: rgb(19, 48, 84) !important; box-shadow: rgba(13, 32, 58, 0.35) 0px 12px 28px -18px !important; }
.scp19:hover { background: rgb(11, 34, 64) !important; color: rgb(190, 149, 92) !important; }
.scp1a:hover { transform: translateY(-4px) !important; box-shadow: rgba(13, 32, 58, 0.12) 0px 18px 40px !important; }
.scp1b:hover { background: rgb(190, 149, 92) !important; border-color: rgb(190, 149, 92) !important; color: rgb(255, 255, 255) !important; }
.scp1c:hover { color: rgb(19, 48, 84) !important; padding-left: 8px !important; }
.scp1d:hover { color: rgb(11, 34, 64) !important; }
.scp1e:hover { background: rgb(15, 40, 71) !important; color: rgb(255, 255, 255) !important; }
.scp1f:hover { color: rgb(19, 48, 84) !important; border-left-color: rgb(190, 149, 92) !important; }
.scp1g:focus { border-color: rgb(19, 48, 84) !important; }
.scp1h:hover { background: rgb(255, 255, 255) !important; color: rgb(19, 48, 84) !important; }
.scp1i:hover { background: rgba(255, 255, 255, 0.1) !important; color: rgb(255, 255, 255) !important; }
.scp1j:hover { color: rgb(14, 27, 44) !important; }
.scp1k:hover { background: rgb(10, 28, 51) !important; }
.scp1l:hover { border-color: rgb(255, 255, 255) !important; }
.scp1m:hover { background: rgb(245, 238, 226) !important; color: rgb(11, 34, 64) !important; }
.scp1n:focus { border-color: rgb(190, 149, 92) !important; }
.scp1o:hover { background: rgb(19, 48, 84) !important; border-color: rgb(19, 48, 84) !important; color: rgb(255, 255, 255) !important; }

/* 6. Utilities ------------------------------------------------------------- */
.cp-photo-placeholder{display:flex;align-items:center;justify-content:center;background:#F3F1EC;border:1px dashed #C9C2B4;color:#8C939E;font-size:13px;font-weight:600;text-align:center;padding:16px}
.cp-prose{font-size:16px;line-height:1.8;color:#3A4556}
.cp-prose h2{margin:40px 0 12px;font-size:28px;letter-spacing:-.02em;font-weight:600;color:#133054}
.cp-prose h3{margin:32px 0 10px;font-size:21px;font-weight:600;color:#133054}
.cp-prose p{margin:0 0 18px}
.cp-prose ul,.cp-prose ol{margin:0 0 18px;padding-left:22px}
.cp-prose a{color:#133054;text-decoration:underline;text-decoration-color:#BE955C;text-underline-offset:3px}