/* Coco Homes: one stylesheet for every page. Didot, true black and white.
   Pink exists only under body.interiors (Coco Interiors). */
:root{--pink:#ff0080;--deep-pink:#c90062;--white:#fff;--ink:#000;--muted:#6b6762;--on-black:#e8e6e3;--on-black-muted:#a8a49e;--line:#e4e1dc;--display:Didot,'Bodoni 72','Bodoni MT',Georgia,serif;--sans:'Helvetica Neue',Helvetica,Arial,sans-serif;--space:96px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);background:var(--white);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0;font-weight:normal}
/* Didot joins f+i into one glyph ("Roofing" reads as "Roofng"); keep letters separate */
h1,h2,h3,.mark,.lede,.wordmark{font-variant-ligatures:no-common-ligatures;font-feature-settings:"liga" 0}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.band a:focus-visible{outline-color:var(--white)}
.wrap{width:calc(100% - 112px);max-width:1200px;margin-inline:auto}
.skip{position:absolute;top:-100px;left:20px;background:var(--white);padding:12px;z-index:10}
.skip:focus{top:10px}

.header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.mark{font:normal 22px/1 var(--display);letter-spacing:-.02em;white-space:nowrap}
.header nav{display:flex;gap:32px;font-size:13px}
.header a,footer a{display:inline-flex;align-items:center;min-height:44px}
.header nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.header nav a{white-space:nowrap}
.nav-call .call{display:none}

/* The one bold element */
.hero{padding-block:clamp(32px,7vw,96px) var(--space)}
/* Hero: the service name, same size on every page. Coco Homes appears once, in the header ribbon. */
.wordmark{display:inline-flex;flex-direction:column;align-items:flex-start;font:normal clamp(60px,15vw,196px)/.86 var(--display);letter-spacing:-.035em}
/* Didot's f hook collides with the i dot at tight tracking; open that one pair */
.fi{letter-spacing:.06em}
.signature{font-style:italic;font-size:max(.24em,18px);letter-spacing:0;line-height:1;margin:.3em 0 0 .06em;color:var(--ink)}
.hero-image{margin:clamp(32px,4vw,48px) 0 0;height:clamp(300px,42vw,560px);overflow:hidden;background:#e6e2dc}
.hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.lede{max-width:30ch;margin:clamp(24px,3.5vw,40px) 0 0;font:normal clamp(20px,2vw,26px)/1.35 var(--display)}
.action{display:inline-flex;align-items:center;min-height:56px;margin-top:36px;padding:0 30px;background:var(--ink);color:var(--white);font-size:15px}
.action-light{background:var(--white);color:var(--ink)}

h2{font:normal clamp(30px,3vw,40px)/1.15 var(--display);letter-spacing:-.02em}
h3{font:normal 24px/1.25 var(--display);letter-spacing:-.01em}
.services{padding-bottom:var(--space)}
.services h2{margin-bottom:40px}
.service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.service-list article{padding-top:20px;border-top:1px solid var(--ink)}
.service-list h3{margin-bottom:8px}
.service-list p,.sister p{color:var(--muted);max-width:34ch}

.band{background:var(--ink);color:var(--white)}
.band-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;padding-block:var(--space)}
.band h2{font-size:clamp(40px,5vw,64px);line-height:1}
.band-copy p{max-width:42ch;color:var(--on-black)}
.alt{display:flex;width:fit-content;align-items:center;min-height:44px;margin-top:8px;font-size:14px;color:var(--on-black-muted)}
.band-copy p+p{margin-top:12px}

.sister{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8%;padding-block:56px;border-bottom:1px solid var(--line)}
.text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

footer{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:40px;padding-block:28px max(28px,env(safe-area-inset-bottom));font-size:13px;color:var(--muted)}
footer .mark{color:var(--ink)}

/* Coco Interiors accents. Nothing pink outside this block. */
.interiors .wordmark>span:first-child,.interiors .band h2{color:var(--pink)}
.interiors .action-pink{background:var(--pink);color:var(--ink)}

@media(hover:hover){a:hover{color:var(--muted)}.interiors .action-pink:hover{background:var(--white);color:var(--ink)}.action:hover{background:#333;color:var(--white)}.action-light:hover{background:var(--on-black);color:var(--ink)}.alt:hover{color:var(--white)}}

@media(max-width:1000px){.wrap{width:calc(100% - 64px)}}
@media(max-width:700px){
 :root{--space:56px}
 .wrap{width:calc(100% - 40px)}
 .header{padding-block:14px}
 .header nav{gap:18px;font-size:14px}
 .nav-call .num{display:none}
 .nav-call .call{display:inline}
 .action{display:flex;justify-content:center}
 .hero-image{height:auto;aspect-ratio:4/3.4}
 .service-list{grid-template-columns:1fr;gap:28px}
 .band-inner,.sister{grid-template-columns:1fr;gap:20px}
 footer{grid-template-columns:1fr auto;gap:4px 16px}
 footer span{grid-column:1/-1}
}
@media(max-width:400px){.header .mark{font-size:19px}.header nav{gap:14px;font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}