/* ==========================================================================
   Annison Ltd — Claris-inspired design system
   Corporate colours: #CC3D2A (brand) and black (#1d1d1f text / #000 dark).
   Patterns modelled on claris.com (Apple design language): alternating
   white / #F5F5F7 sections, pill buttons, large rounded cards, gradients.
   ========================================================================== */

:root {
    /* Corporate colours: #CC3D2A (brand) and black */
    --brand: #CC3D2A;
    --brand-hover: #A83321;     /* darker shade for hover states */
    --text: #1d1d1f;
    --text-secondary: #1d1d1f;
    --bg: #ffffff;
    --bg-alt: #F5F5F7;
    --bg-dark: #000000;
    /* All flat accent colours map to the corporate brand colour */
    --blue: var(--brand);
    --blue-hover: var(--brand-hover);
    --periwinkle: var(--brand);
    --purple: var(--brand);
    --pink: var(--brand);
    --orange: var(--brand);
    --border: #d2d2d7;
    --gradient-promo: linear-gradient(118deg, #5b7cff 0%, #8f6fe7 50%, #d66cd1 100%);
    --gradient-text: var(--brand);  /* flat brand red for highlighted heading words */
    --radius-card: 20px;
    --radius-image: 28px;
    --container: 1080px;
    --container-wide: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.container-wide { max-width: var(--container-wide); }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.12;
    color: var(--text);
}

h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
h3 { font-size: 1.35rem; line-height: 1.3; }

.lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 400;
}

.lead-bold { color: var(--text); font-weight: 500; }

.eyebrow {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.9rem;
}

.eyebrow.periwinkle { color: var(--periwinkle); }
.eyebrow.purple { color: var(--purple); }
.eyebrow.pink { color: var(--pink); }
.eyebrow.orange { color: var(--orange); }

.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --------------------------------------------------------------------------
   Navigation — slim, translucent, sticky (Apple/Claris style)
   -------------------------------------------------------------------------- */

nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

nav .container {
    max-width: var(--container-wide);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

nav .logo img { height: 24px; width: auto; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    list-style: none;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.nav-menu a:hover { color: var(--blue); text-decoration: none; }
.nav-menu a.active { color: var(--text-secondary); }

.nav-menu .nav-cta {
    background: var(--blue);
    color: #fff;
    padding: 0.45rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
}

.nav-menu .nav-cta:hover { background: var(--blue-hover); color: #fff; }

/* Keep the filled CTA white even when it's the active page (sits on a red fill) */
.nav-menu a.nav-cta.active { color: #fff; }

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons — pill shaped
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.55rem 1.5rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn:hover { background: var(--blue-hover); color: #fff; text-decoration: none; }

.btn-secondary {
    background: transparent;
    color: var(--blue);
    border: 1px solid var(--blue);
}

.btn-secondary:hover { background: var(--blue); color: #fff; }

.btn-white {
    background: #fff;
    color: var(--text);
}

.btn-white:hover { background: rgba(255, 255, 255, 0.85); color: var(--text); }

.text-link {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--blue);
}

.text-link::after { content: ' ›'; }

.btn-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

section { padding: 3.5rem 0 5.5rem; }

.section-alt { background: var(--bg-alt); }

.section-dark {
    background: var(--bg-dark);
    color: #f5f5f7;
}

.section-dark h1, .section-dark h2, .section-dark h3 { color: #f5f5f7; }
.section-dark p { color: #a1a1a6; }

.section-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.section-intro .lead { margin-top: 1.1rem; }

/* Hero */

.hero {
    text-align: center;
    padding: 4.5rem 0 2rem;
}

.hero h1 { max-width: 880px; margin: 0 auto; font-size: clamp(2.2rem, 4.5vw, 3.4rem); white-space: nowrap; }

.hero .lead {
    max-width: 680px;
    margin: 1.6rem auto 0;
}

.hero .btn-row { justify-content: center; margin-top: 2.4rem; }

/* --------------------------------------------------------------------------
   Spotlight banner — reusable section style
   A wide image that breaks past the main content column, with an overlaid
   2-column text grid (heading + supporting copy) sitting on a legibility scrim.

   Markup:
     <section class="spotlight">
       <div class="container spotlight-inner">
         <div class="spotlight-frame">
           <div class="spotlight-grid">
             <div class="spotlight-content">
               <span class="spotlight-title">Unique</span>
               <p class="lead">Supporting copy…</p>
             </div>
             <div aria-hidden="true"></div>            <!-- right column -->
           </div>
           <img src="images/hero.webp" alt="…">
         </div>
         <div class="btn-row spotlight-actions">…optional buttons…</div>
       </div>
     </section>

   Per-instance tunables (override on the .spotlight element):
     --spotlight-width    breakout max-width      (default 1440px)
     --spotlight-height   image max-height        (default 820px)
     --spotlight-indent   equal L/R grid indent   (default 6.5rem)
     --spotlight-gutter   gap between columns      (default 2.5rem)
   -------------------------------------------------------------------------- */
.spotlight {
    --spotlight-width: 1440px;
    --spotlight-height: 820px;
    --spotlight-indent: 6.5rem;
    --spotlight-gutter: 2.5rem;
    padding-top: 0;
}

.spotlight-inner { max-width: var(--spotlight-width); }

/* Optional centred heading above the image (mirrors the homepage hero) */
.spotlight:has(.spotlight-heading) { padding-top: 4.5rem; }

.spotlight-heading {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 2rem;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    white-space: nowrap;
}

.spotlight-frame {
    position: relative;
    max-height: var(--spotlight-height);
    border-radius: var(--radius-image);
    overflow: hidden;
}

/* Full-bleed variant: frame spans the full viewport width, square corners.
   Revert by removing the .spotlight-bleed class from the section. */
.spotlight-bleed {
    /* Frame gets slightly deeper as the window widens (~820px → ~1080px) */
    --spotlight-height: clamp(820px, calc(560px + 18vw), 1080px);
}
.spotlight-bleed .spotlight-inner { max-width: none; padding: 0; }
.spotlight-bleed .spotlight-heading { padding: 0 24px; }
/* Explicit height so object-fit/object-position actually controls the crop
   (with only max-height, the image keeps its ratio and just clips at the bottom) */
.spotlight-bleed .spotlight-frame { border-radius: 0; height: var(--spotlight-height); }
/* Crop 30% off the top, 70% off the bottom */
.spotlight-bleed .spotlight-frame img { object-position: center 30%; }

.spotlight-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrim so the overlaid text stays legible over the photo */
.spotlight-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0) 60%);
    pointer-events: none;
}

/* Overlay text conforms to the site's standard container + 2-col grid, so the
   copy/buttons sit in the LEFT column even though the image frame bleeds wider. */
.spotlight-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;            /* match .grid gap */
    align-items: center;
    max-width: var(--container);   /* 1080px — match .container */
    margin-inline: auto;           /* centre within the (wider) frame */
    padding: 0 24px;               /* match .container side padding */
}

/* Keeps the columns a consistent height and anchors the type */
.spotlight-grid > * { min-height: 60%; }

.spotlight-content {
    /* left column, vertically centred */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    /* Match the card's horizontal padding so overlay text lines up with card text */
    padding-left: 2rem;
    text-align: left;
    color: #fff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.spotlight-title {
    font-size: clamp(3.2rem, 5.2vw, 4.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.spotlight-content .lead {
    margin: 0;
    color: #fff;
}

.spotlight-content .lead + .lead { margin-top: 0.9rem; }

.spotlight-actions { justify-content: flex-start; margin-top: 1.8rem; }

/* The spotlight CTA picks up the section's image accent colour
   (set --spotlight-accent on the .spotlight element) */
.spotlight-actions .btn { background: var(--spotlight-accent, var(--blue)); }
.spotlight-actions .btn:hover {
    background: var(--spotlight-accent, var(--blue));
    filter: brightness(0.92);
}

/* Translucent CTA for use over the spotlight image */
.btn-transparent,
.spotlight-actions .btn-transparent {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: none;
    text-shadow: none;
}
.btn-transparent:hover,
.spotlight-actions .btn-transparent:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    filter: none;
}

/* Full-bleed style imagery in rounded frames */

.photo-frame {
    border-radius: var(--radius-image);
    overflow: hidden;
}

.photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-banner { padding-top: 0; }

.photo-banner .photo-frame { max-height: 560px; }

/* --------------------------------------------------------------------------
   Grids and cards
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    background: var(--bg);
    border-radius: var(--radius-card);
    padding: 2.2rem 2rem;
}

/* On white sections, cards go grey instead */
.card-alt { background: var(--bg-alt); }

.card h3 { margin-bottom: 0.7rem; }
.card p { color: var(--text-secondary); font-size: 1rem; }

/* Material Symbols — site-wide default weight 500 (medium) */
.material-symbols-outlined {
    font-variation-settings: 'wght' 500, 'FILL' 0, 'opsz' 48;
    line-height: 1;
    vertical-align: middle;
    color: var(--brand);
}

/* Large card icon sitting above the heading, centred horizontally */
.card-icon {
    display: block;
    text-align: center;
    font-size: 52px;
    margin-bottom: 1rem;
}

/* Any card with an icon uses the centred box style */
.card:has(.card-icon) { text-align: center; }

.card-title-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.card-title-row img { width: 44px; height: 44px; }
.card-title-row h3 { margin-bottom: 0; }

/* Image icon sitting above the heading, centred horizontally */
.card-icon-img {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
}

/* Any card with an image icon uses the centred box style */
.card:has(.card-icon-img) { text-align: center; }

/* --------------------------------------------------------------------------
   Feature cards — reusable section style
   A centred intro (heading + supporting line) above a responsive row of plain
   cards (no accent bars). Sits on the alternate background by default.

   Markup:
     <section class="feature-cards">
       <div class="container">
         <div class="feature-cards-intro">
           <h2>Section heading</h2>
           <p class="lead">Supporting line…</p>
         </div>
         <div class="feature-cards-grid">
           <div class="card"><h3>Title</h3><p>Copy…</p></div>
           <div class="card"><h3>Title</h3><p>Copy…</p></div>
           <div class="card"><h3>Title</h3><p>Copy…</p></div>
         </div>
       </div>
     </section>

   Grid is 3 across on desktop, 2 on tablet, 1 on mobile.
   -------------------------------------------------------------------------- */
.feature-cards { background: var(--bg-alt); }

.feature-cards-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3.5rem;
}

.feature-cards-intro .lead { margin-top: 1.1rem; color: var(--text); }

.feature-cards-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.cert-card { text-align: center; }
.cert-card p {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blue);
}

/* --------------------------------------------------------------------------
   Feature rows — text beside rounded imagery
   -------------------------------------------------------------------------- */

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.feature-row.reverse > .feature-row-media { order: -1; }

.feature-row h2 { margin-bottom: 1.2rem; }

.feature-row .lead { margin-bottom: 1.1rem; font-size: 1.12rem; }

.feature-row .btn, .feature-row .text-link { margin-top: 0.8rem; }

.feature-row-media .photo-frame { aspect-ratio: 4 / 3.4; }

/* Split content without imagery */

.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}

.content-split h2 { margin-bottom: 1.2rem; }
.content-split h3 { margin-bottom: 0.8rem; }
.content-split p { color: var(--text-secondary); margin-bottom: 1rem; }

/* Lists */

.styled-list {
    list-style: none;
}

.styled-list li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.85rem;
    color: var(--text-secondary);
}

.styled-list li strong { color: var(--text); }

.styled-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.85em;
    height: 0.85em;
    border-radius: 50%;
    background: var(--blue);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Gradient promo band (Claris community-gradient pattern)
   -------------------------------------------------------------------------- */

.promo-band { padding: 4rem 0; }

.promo-band-inner {
    background: var(--gradient-promo);
    border-radius: var(--radius-image);
    padding: 5rem 3rem;
    text-align: center;
    color: #fff;
}

.promo-band-inner h2 { color: #fff; margin-bottom: 1rem; }

.promo-band-inner p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 2.2rem;
}

/* Apple company section */

/* Apple lockup shown above the hero image (light background) */
.apple-intro { text-align: center; padding-top: 2.5rem; margin-bottom: 2.5rem; }
.apple-intro .apple-logo { height: 56px; width: auto; margin: 0 auto 1.2rem; filter: brightness(0); }
.apple-intro h2 { margin-bottom: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.apple-section { text-align: center; }

.apple-section .apple-logo {
    height: 56px;
    width: auto;
    margin: 0 auto 1.8rem;
}

.apple-section h2 { margin-bottom: 1rem; }

.apple-section .content-split {
    text-align: left;
    margin-top: 3.5rem;
}

/* Partner badge */

.partner-badge { height: 52px; width: auto; }

/* --------------------------------------------------------------------------
   Forms — rounded, soft grey fills
   -------------------------------------------------------------------------- */

.contact-form {
    background: var(--bg);
    border-radius: var(--radius-card);
    padding: 2.4rem;
}

.form-group { margin-bottom: 1.3rem; }

.form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg-alt);
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    transition: border-color 0.2s, background 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--blue);
}

.form-group textarea { min-height: 140px; resize: vertical; }

/* --------------------------------------------------------------------------
   Stat / meta cards (case study)
   -------------------------------------------------------------------------- */

.meta-card { text-align: center; }

.meta-card h3 {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
}

.meta-card p { color: var(--text); font-weight: 500; }

/* --------------------------------------------------------------------------
   Prose pages (privacy, terms)
   -------------------------------------------------------------------------- */

.prose { max-width: 760px; }

.prose h3 { margin: 2.4rem 0 0.8rem; }
.prose p { color: var(--text-secondary); margin-bottom: 1rem; }
.prose .styled-list { margin-bottom: 1rem; }

.page-header { padding: 5rem 0 1rem; }
.page-header h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); }
.page-header .meta { color: var(--text-secondary); margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Footer — light grey, multi-column (Claris style)
   -------------------------------------------------------------------------- */

footer {
    background: var(--bg-alt);
    padding: 3.5rem 0 2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

footer .container { max-width: var(--container-wide); }

.footer-top { margin-bottom: 2rem; }

.footer-top img { height: 22px; width: auto; }

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.footer-col-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.8rem;
}

.footer-links { list-style: none; }

.footer-links li { margin-bottom: 0.55rem; }

.footer-links a, footer a { color: var(--text-secondary); }
.footer-links a:hover, footer a:hover { color: var(--text); text-decoration: none; }

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom-links { display: flex; gap: 1.8rem; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    section { padding: 4rem 0; }

    .grid-3, .grid-4, .feature-cards-grid { grid-template-columns: repeat(2, 1fr); }

    .feature-row,
    .content-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .feature-row.reverse > .feature-row-media { order: 0; }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .feature-cards-grid { grid-template-columns: 1fr; }

    .nav-toggle { display: flex; }

    .nav-menu {
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-menu.active { max-height: 480px; }

    .nav-menu li { width: 100%; }

    .nav-menu a {
        display: block;
        padding: 1rem 24px;
        font-size: 1.05rem;
    }

    .nav-menu .nav-cta {
        margin: 0.5rem 24px 1.2rem;
        display: inline-block;
        padding: 0.6rem 1.4rem;
    }

    .hero { padding: 4.5rem 0 3.5rem; }

    .promo-band-inner { padding: 3.5rem 1.8rem; }

    .footer-main { grid-template-columns: 1fr; }
}